美文网首页程序员
Hexo浅析原理

Hexo浅析原理

作者: 蚂蚁窝大梦想 | 来源:发表于2018-06-26 16:28 被阅读393次

一、说在前面

1. 内容:
  • Hexo文件夹结构。
  • Yaml编写配置文件
  • markdown编写博客文章。
2. 表现:
  • Hexo模板引擎生成工具。
  • 独立的个性化Theme。
3. 发布&访问:
  • Git版本控制。
  • Github Pages。
  • 绑定自已域名。

二、内容

1. Hexo文件架构。
.
├── node_modules:#依赖包-安装插件及所需nodejs模块。
├── public  #最终网页信息。即存放被解析markdown、html文件。
├── scaffolds #模板文件夹。即当您新建文章时,根据 scaffold生成文件。
├── source  #资源文件夹。即存放用户资源。
|   └── _posts #博客文章目录。
└── themes #存放主题。Hexo根据主题生成静态页面。
├── _config.yml   #网站的配置信息。标题、网站名称等。
├── db.json:#source解析所得到的缓存文件。
├── package.json  # 应用程序信息。即配置Hexo运行需要js包。
2. Yaml配置文件
  • Yaml是专门用来写配置文件。即:一种通用的数据串行化格式。
  • 基本规则

大小写敏感。
使用缩进表示层级关系。
缩进时不允许使用Tab键,只允许使用空格。
缩进的空格数目不重要,只要相同层级的元素左侧对齐即可。

  • Hexo配置文件:
    • 根目录:站点基本信息、写作格式、Github部署等。
    • 主题目录:站点导航、插件等信息。
3. Markdown

三、表现

1. Hexo模板引擎生成工具
  • 作用:界面同数据分离,模板内容替换指定地方数据,实现业务和逻辑代码分离。
  • 模板:Hexo默认用ejs,其他工具swigjade等。
  • 解析:md文件、layout布局调用其他文件。高代码复用性,最终生成Html页面。
2. 独立的个性化Theme
  • hexo g
    • 遍历主题下source目录,即css/fonts/js等文件,建立索引。
    • 根据索引把主题文件生成到public中,即html文件,网页根目录。
  • hexo d
    • 将public中html通过git方式push到github上指定分支。也可部署到自己服务器。
  • node_modules中对hexo各类页面渲染
  • markdown到html示例
渲染过程 输入 模板引擎 输出
First source目录下文件 yml和markdown article对象, article:{title:date:tags:categories:...}
Second 第一次渲染生成article对象,themes目录下文件 ejs/jade/等取决于themes/layouts目录下格式 public目录及下的文件
yml.jpg

四、发布&访问

1. Git版本控制
2. 绑定自已域名

五、总结

1. 多看社区多逛GitHub
2. 知其然知其所以然

相关文章

网友评论

    本文标题:Hexo浅析原理

    本文链接:https://www.haomeiwen.com/subject/cglmyftx.html