浅析 Hexo 搭建博客的原理

时间 2019-11-16

标签浅析 hexo 搭建博客原理繁體版

原文原文链接

一直在用 Hexo 写博客，可是对其原理并非很清晰，在网上找了一些资料，对 Hexo 有了新的认识，如今就来记录一下css

使用 Hexo + github pages 搭建博客

记得刚开始知道 Hexo + github pages 搭建博客是在 2016 年，那时候，闺蜜很是激动的给我说本身建了一个博客，而后给我发过来了一个地址，我打开以后感受她技术好牛逼啊，这均可以作到（由于潜意识中，建立一个网址是须要很复杂的过程的，而且要让别人经过地址访问也是一个很麻烦甚至以为很花钱的一件事情）。html

而后她给我说很简单，是用 Hexo + github pages 搭建的，当时是一脸懵逼啊，而后百度了一下，发现不少人都在使用 Hexo + github pages 搭建博客。node

拖延症的我又过了几个月才开始按照网上的教程一步一步的建立本身的博客。git

github 的 pages 服务

开始只是按照网上的教程一步一步跟着作，将项目源码托管在 github 上，使用 github 的 pages 服务。其实 github 的 pages 服务不仅是能够展现博客，你的每个 github 仓库都有 pages 服务，能够经过简单的设置经过项目的 index.html 为入口展现你的项目，这一点也很实用啊有木有！可是大部分的 pages 服务都是用来搭建我的博客的。github

例如，我以前的 canvasStar 的项目，我将源码上传到了 github 上，而后以下设置：
数据库

github pages支持静态页面的解析json

而后你就能够经过图中红色框框圈出的地址来访问。gulp

coding 的 pages 服务

在初创博客的时候，是将代码放在 github 上，而后经过 pages 访问，而后了解到国内访问 github 速度仍是慢一些，而且 github 不会被百度收录，不利于 SEO，因此又将代码托管到了 coding 上，coding 也有相似的 pages 服务。也用了一段时间，可是 coding 如今不升级为会员打开有广告。因而就本身买了个虚拟主机，将代码直接放在了虚拟主机上。canvas

为何使用 Hexo + github pages 搭建博客

Hexo 是用来生成 HTML 的，github pages 用来展现 HTML（根据上面的介绍，咱们能够理解咱们还可使用 coding 的 pages 服务，若是本身有服务器的话，能够上传到本身的服务器）。segmentfault

Hexo

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

什么是 Hexo

在 Hexo 的官网，咱们能够直观的看到对 Hexo 的介绍： 快速、简洁且高效的博客框架

在 Hexo 的文档中，咱们能够找到官方对 Hexo 的定义：

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

在官方文档中安装了 Hexo 中咱们就安装了 Hexo，而后咱们就能够看到文档结构以下：

.
├── _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 每次部署的流程

hexo g：生成静态文件。将咱们的数据和界面相结合生成静态文件的过程。会遍历主题文件中的 source 文件夹（js、css、img 等静态资源），而后创建索引，而后根据索引生成 pubild 文件夹中，此时的 publid 文件是由 html、 js、css、img 创建的纯静态文件能够经过 index.html 做为入口访问你的博客。
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 文件文档结构以下：

.
├── _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 %}

  <div id="posts" class="posts-expand">
    {{ post_template.render(page) }}

    <div class="post-spread">
      {% 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 %}
    </div>
  </div>

{% 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 文件。