搭建博客的原理

发表于 | 评论数： | 阅读次数：

不折腾毋宁死，为了更好地魔改博客，对hexo工作原理还是需要有一定地了解，本文节选自【掘金】sunshine小小倩

Hexo

使用 Hexo + github pages 搭建博客，刚刚我们简单介绍了 github pages，那么现在我们就该介绍一下 Hexo，我们了解到 Hexo 是用来生成 HTML 的，那么这篇文章我们就主要来讲一下 Hexo 是怎样生成 HTML 的。

什么是 Hexo

hexo官网在 Hexo 的官网，我们可以直观的看到对 Hexo 的介绍：快速、简洁且高效的博客框架
在 Hexo 的文档中，我们可以找到官方对 Hexo 的定义：

Hexo 是一个快速、简洁且高效的博客框架。Hexo 使用 Markdown（或其他渲染引擎）解析文章，在几秒内，即可利用靓丽的主题生成静态网页。

在官方文档中安装了 Hexo 中我们就安装了 Hexo，然后我们就可以看到文档结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.
├── _config.yml      // 站点配置文件
├── db.json          // 缓存文件
├── node_modules     // 安装的插件以及hexo所需的一些nodejs模块
├── package.json     // 项目的依赖文件
├── scaffolds        // 模版文件
├── source           // 源文件，用来存放你的文章 md 文件
└── themes           // 主题文件复制代码然后我们可以安装主题，比我我安装的 NexT 主题，安装完之后会在 themes 下面产生一个 next 文件存放主题中的内容，文档结构如下：
.
├── LICENSE
├── README.en.md       // READEME 英文版
├── README.md          // READEME 中文文件
├── _config.yml        // 主题配置文件
├── bower.json
├── gulpfile.coffee
├── languages         // 多语言配置文件
├── layout            // 模板文件
├── package.json      // 项目的依赖文件
├── scripts           // 主题的脚本文件
├── source            // 主题的资源文件 CSS IMG
└── test

Hexo 的工作原理

这里我们来分析一下 Hexo 每次部署的流程

  1. hexo g：生成静态文件。将我们的数据和界面相结合生成静态文件的过程。会遍历主题文件中的 source 文件夹（js、css、img 等静态资源），然后建立索引，然后根据索引生成 pubild 文件夹中，此时的 publid 文件是由 html、 js、css、img 建立的纯静态文件可以通过 index.html 作为入口访问你的博客。
  2. hexo d：部署文件。部署主要是根据在 _config.yml 中配置的 git 仓库或者 coding 的地址，将 public 文件上传至 github 或者 coding 中。然后再根据上面的 github 提供的 pages 服务呈现出页面。当然你也可以直接将你生成的 public 文件上传至你自己的服务器上。

Hexo 的模板引擎

模板引擎的作用，就是将界面与数据分离。最简单的原理是将模板内容中指定的地方替换成数据，实现业务代码与逻辑代码分离。

我们可以注意到，在 Hexo 中，source 文件夹和 themes 文件夹是在同级的，我们就可以将 source 文件夹理解为数据库，而主题文件夹相当于 界面。然后我们 hexo g 就将我们的数据和界面相结合生成静态文件 public。
Hexo 的模板引擎是默认使用 ejs 编写的。hexo首先会解析 md 文件，然后根据 layout 判断布局类型，再调用其他的文件，这样每一块的内容都是独立的，提高代码的复用性。最终会生成一个 html 页面。
模板文件在 layout 文件夹下，layout 文件文档结构如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.
├── _custom                           // 通用布局
├── _layout.swig                      // 默认布局布局
├── _macro                            // 插件模板
├── _partials                         // 局部布局
├── _scripts                          // script模板
├── _third-party                      // 第三方插件模板
├── archive.swig                      // 归档模板
├── category.swig                     // 分类模板
├── index.swig                        // 首页模板
├── page.swig                         // 其他模板
├── photo.swig                        // 照片模板（自定义）
├── post.swig                         // 文章模板
├── schedule.swig                     // 归档模板
└── tag.swig                          // 标签模板

每个模板都默认使用layout布局，您可在文章的前置申明中指定其他布局，比如“post”或者“page”或是设为false来关闭布局功能（如果不填默认是post，这个在_config.yml中可以设置默认值），您甚至可在布局中再使用其他布局来建立嵌套布局。

在我们新建页面或者新建文章的使用可以选定我们使用的模板。hexo new [layout] <title>就会使用对应的模板。
其中 _layout.swig 是通用模板，里面引入了 head、footer 等公共组件，然后在其他的模板中会引入这个 _layout.swig 通用模板，比如 post.swig 模板

{% extends '_layout.swig' %}
{% import '_macro/post.swig' as post_template %}
{% import '_macro/sidebar.swig' as sidebar_template %}


{% block title %} {{ page.title }} | {{ config.title }} {% endblock %}

        {% block page_class %}page-post-detail{% endblock %}


{% block content %}

        

            {{ post_template.render(page) }}

            

            {% if theme.jiathis %}
                {% include '_partials/share/jiathis.swig' %}
            {% elseif theme.baidushare %}
                {% include '_partials/share/baidushare.swig' %}
            {% elseif theme.add_this_id %}
                {% include '_partials/share/add-this.swig' %}
            {% elseif theme.duoshuo_shortname and theme.duoshuo_share %}
                {% include '_partials/share/duoshuo_share.swig' %}
            {% endif %}
            

        


        {% endblock %}

{% block sidebar %}
        {{ sidebar_template.render(true) }}
        {% endblock %}


{% block script_extra %}
        {% include '_scripts/pages/post-details.swig' %}
        {% endblock %}

其中在第 11 行

{% block content %} 
            // 中间为该模板自定义内容
        {% endblock %}

数据的填充

数据的填充主要是 hexo -g 的时候将数据传递给 swig 模板，然后再由 swig 模板填充到 HTML 中。

配置文件中的数据

Hexo 的配置文件 _config.yml 使用 yml语法 。例如博客的名字、副标题等等之类。这些数据项组织在 config 对象中。可以数字、字符串、对象、数组，

配置文件中数据的使用

如果要在模板中使用某个具体的值，比如字符串、数字、逻辑变量或者对象的某个成员，可以在主题的模板文件 swig 中直接使用：

{% block title %} {{ page.title }} | {{ config.title }} {% endblock %}

Hexo 中的变量

Hexo 提供了很多的变量，比如我们上面使用的 page 变量，还有 site 变量等，这些都是 Hexo 提供的，我们可以拿来直接使用的，常用的变量有：

  • site：对应整个网站的变量，一般会用到 site.posts.length 制作分页器。
    • site.posts 所有文章
    • site.pages 所有分页
    • site.categories 所有分类
    • site.tags 所有标签
  • page：存放当前页面的信息，例如我在 index.ejs 中使用 page.posts 获取了当前页面的所有文章而不是使用 site.posts。
  • config：config 变量我们在主目录下配置文件 _config.yml 中保存的信息。
  • theme：theme 变量是我们在主题目录下配置文件 _config.yml 中保存的信息。
  • path：当前页面的路径（不含根路径）。
  • url：页面完整网址。

页面变量

Page(page) 这里指的是 hexo new page 创建的那个页面

  • page.title：文章标题
  • page.date：文章建立日期
  • page.updated：文章更新日期
  • page.comments：留言是否开启
  • page.layout：布局名称
  • page.content：文章完整内容
  • page.excerpt：文章摘要
  • page.more：除了摘要的其他内容
  • page.source：文章原始路劲
  • page.full_source：文章完整原始路径
  • page.path：文章网址（不含根路径），通常在主题中使用url_for(page.path)
  • page.permalink：文章永久网址
  • page.prev：上一篇文章，如果此为第一篇文章则为null
  • page.next：下一篇文章，如果此为最后一篇文章则为null
  • page.raw：文章原始内容
  • page.photos：文章的照片（用于相册）
  • page.link：文章的外链（用于链接文章）

Post(post) 变量

这里指的是文章页面，与page布局相同，添加如下变量：

  • page.pulished：文章非草稿为true
  • page.categories：文章分类
  • page.tags：文章标签

首页(index)

  • page.per_page：每一页显示的文章数
  • page.total：文章数量
  • page.current：当前页码
  • page.current_url：当前页的URL
  • page.posts：当前页的文章
  • page.prev：前一页页码，如果为第一页，该值为0
  • page.prev_link：前一页URL，如果为第一页，则为’’
  • page.next：后一页页码，如果为最后一页，则为0
  • page.next_link：后一页URL，如果为最后一页，则为’’
  • page.path：当前页网址（不含根路径），通常在主题中使用url_for(page.path)

归档页(archive)

与index布局相同，但是新增如下变量：

  • archive 为true
  • year 归档年份（4位）
  • month 归档月份（不包含0）

总结

非要说 Hexo 是什么的话，我觉得就是生成静态页面的工具，可以将我们使用 markdown 编写的内容与主题模板相结合，生成 HTML 静态文件。并且可以和 github 的 pages 或者其他可以将静态页面展现出来的服务（例如 coding 的 pages 服务）相结合，一键部署。

再深入一点讲 Hexo 的原理的话，那就应该是使用 yaml 语言 做配置文件，使用 ejs 或者 swig 作为主题模板，与使用 markdown 书写的内容结合，生成静态 HTML 文件。

想了解更多更详细的内容，可以参考：1.hexo是怎么工作的,2.Hexo 主题开发指南
hexo主题优化教程：hexo搭建个人博客–NexT主题优化、可能是最全的使用HEXO搭建个人博客教程