淺析 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：頁面完整網址。