關于 Hexo 如何開發主題包的教程在已經是大把的存在了，這里就不在贅述了。這邊文章主要講的是作為一個主題的開發者，如何讓你的主題具有更好的擴展性，在用戶自定義修改主題后，能夠更加平易升級主題。

問題所在

Hexo 提供兩種方式安裝主題包：

• 直接在 themes 目錄下直接存放主題包文件，這種方式方便用戶自己魔改主題，魔改后升級主題會比較困難
• 通過 npm 安裝主題包，這種方式更加方便用戶升級主題，但是不易擴展

當用戶想要自定義修改主題時，基本上只能通過第一種方式安裝，然后通過修改 源代碼 形式去修改主題。這樣帶來的問題就是，當主題修復一些 bug 或者主題迭代 N 個版本后，用戶想升級主題時就會變的比較麻煩。

有沒有能讓用戶方便升級，又能提供一定個性化的能力的？答案是有的，那就是通過 npm 方式分發主題包，然后通過一些魔法，讓其有一定的擴展能力，這篇文章就來講解如何實現它。

模板

在 Hexo 中，主題的模板決定的網站頁面程序的方式，當你不同頁面結構很相似時候，可以通過布局（Layout）去復用相同的結構，而相似的部分可以抽離成通用局部模板，通過使用 Partial 去加載，以達到模板復用的效果。

這就是 Hexo 在開發主題處理模板復用的方式，可把一個個局部模板理解為一個個獨立的組件，哪里需要是就在哪里加載它。如果說把用戶想替換某一個局部模板，然后讓用戶提供一個新的模板，然后我們去加載這個新的模板，那是不是達到在用戶不修改源代碼情況下對主題進行個性話的擴展呢。

Partial

要想知道 Hexo 是如果加載局部模板的，我們翻看下 Hexo 源碼里 Partial 的實現（/plugins/helper/partial.js），可以看到當通過調用 ctx.theme 獲取到對應的 view，然后調用 render 渲染的。

const { dirname, join } = require("path");

module.exports = (ctx) =>
    function partial(name, locals, options = {}) {
        const viewDir = this.view_dir;
        const currentView = this.filename.substring(viewDir.length);
        const path = join(dirname(currentView), name); // 根據當前路徑找到，局部模板路徑
        const view = ctx.theme.getView(path) || ctx.theme.getView(name); // 根據路徑去匹配 view
        const viewLocals = { layout: false };
        // Partial don't need layout
        viewLocals.layout = false;
        return view.renderSync(viewLocals);
    };

Hexo 對文件處理分為兩種，一種是 source 目錄文件處理，一種是對主題包里文件處理。在輔助函數注冊里可以看 ctx 其實就是 hexo 運行時的實例，上面的 ctx.theme 就是主題文件處理的 Box。通過 Hexo 提供 api 可以看到，它不僅提供了 getView，還提供了 setView、removeView 方法。

然后翻看 setView 代碼，可以看到當你重新設置一個新的 view 時，它會覆蓋掉已有的 view。也就是說我們可以直接覆蓋主題里的 局部模板

  setView(path, data) {
    const ext = extname(path);
    const name = path.substring(0, path.length - ext.length);
    this.views[name] = this.views[name] || {};
    const views = this.views[name];

    views[ext] = new this.View(path, data);
  }

修改示例

我們以覆蓋 hexo-theme-async 為示例，在生成前鉤子 generateBefore 里，覆蓋掉主題里默認的側欄模板。

hexo.on("generateBefore", () => {
    hexo.theme.setView("_partial/sidebar/index.ejs", "<div>111</div>");
});

運行起來會發現側欄模板已經替換成我們寫的 111 了。

主題實現

通過上面方式確實可以達到覆蓋主題默認模板能力，但是讓用戶直接修改會很不友好，需要自己去看主題中局部模板的路徑信息，并且還需要自己編寫加載文件內容，覆蓋主題默認模板邏輯。

我們可以將這部分操作內置進入主題內，然后只需要讓用戶編寫自己的模板，以及告訴我們需要替換對應模板即可。大致流程如下：

我們還可以提供默認配置，簡化通過路徑覆蓋

可以通過在配置中配置好主題中使用的局部模板，類似這樣，將主題中使用的局部模板以配置形式展示。

layout:
    path: layout
    # layout
    main: _partial/main
    header: _partial/header
    banner: _partial/banner
    sidebar: _partial/sidebar/index
    footer: _partial/footer

然后在加載局部模板時，直接讀取配置的信息，當用戶覆蓋掉了 layout.header 時候，主題就會自動使用新的模板了。

<%- partial(theme.layout.header) %>

模板加載實現

根據上面配置，約定 layout.path 配置指向目錄為用存在模板目錄，以便可以自定義存放路徑。

layout:
    path: layout

首先就是根據配置獲取模板存在的絕對路徑，可以根據 hexo 實例，獲取到根目錄，拼接出完整路徑位置。

const { resolve } = require("path");
const layoutDir = resolve(hexo.base_dir, hexo.theme.config.layout.path);

然后是對文件目錄的監聽，這個可以直接使用 hexo-fs ，避免安裝額外的依賴包，提供了新增、刪除、修改、文件夾變動的監聽，可以針對不同事件做出不同操作。

const { watch } = require("hexo-fs");

watch(layoutDir, {
    persistent: true,
    awaitWriteFinish: {
        stabilityThreshold: 200,
    },
}).then((watcher) => {
    watcher.on("add", (path) => /** 設置模板 */);
    watcher.on("change", (path) => /** 設置模板 */);
    watcher.on("unlink", (path) => /** 移除模板 */);
    watcher.on("addDir", (path) => /** 添加文件夾，遞歸遍歷設置模板 */);
});

因為我們上面是通過配置去加載模板的，所有為了避免用戶自定義的模板名稱會與主題的模板名稱沖突，導致覆蓋了主題的模板，我們可以在使用時增加一個約定的前綴，避免重名。我們對設置模板進行簡單封裝

const setView = (fullpath) => {
    const path = "async" + fullpath.replace(layoutDir, ""); // 約定固定前綴為 async
    hexo.theme.setView(path, readFileSync(fullpath, { encoding: "utf8" }));
};

上面處理方式，用戶自定義模板，可以正常加載使用的，但是當自定義的模板又引入了其他模板時會存在一個問題，在有的模板引擎中會出現路徑不正常。通過查看 view 實例信息，可以看到其指向目錄是在 node_modules，而實際上是存在根目錄的。

翻看 view 源碼可以看到 source 是獲取的 this._theme.base ，而 this._theme.base 往上找就 theme_dir，也就是主題存放的目錄，最后又通過 renderer.compile 設置模板渲染到，導致傳入 path 不正確。

知道了原因我對上面代碼進行修正，設置后重新獲取到 view，然后手動根據路徑信息。

const setView = (fullpath) => {
    const path = "async" + fullpath.replace(layoutDir, ""); // 約定固定前綴為 async
    hexo.theme.setView(path, readFileSync(fullpath, { encoding: "utf8" }));

    const view = hexo.theme.getView(path);
    view.source = fullpath; // 修正原文件路徑
    view._precompile(); // 重新調用渲染器的初始化
};

然后將上面操作，放置在在 Hexo 的 generateBefore 中：

const { resolve } = require("path");
const { watch, readdirSync, statSync } = require("hexo-fs");

hexo.on("generateBefore", () => {
    const layoutDir = resolve(hexo.base_dir, hexo.theme.config.layout.path);

    const setView = (fullpath) => {
        const path = "async" + fullpath.replace(layoutDir, ""); // 約定固定前綴為 async
        hexo.theme.setView(path, readFileSync(fullpath, { encoding: "utf8" }));
        const view = hexo.theme.getView(path);
        view.source = fullpath; // 修正原文件路徑
        view._precompile(); // 重新調用渲染器的初始化
    };

    watch(layoutDir, {
        persistent: true,
        awaitWriteFinish: {
            stabilityThreshold: 200,
        },
    }).then((watcher) => {
        watcher.on("add", (path) => setView(path));
        watcher.on("change", (path) => setView(path));
        watcher.on("unlink", (path) => {
            const path = "async" + path.replace(layoutDir, "");
            hexo.theme.removeView(path);
        });
        watcher.on("addDir", (path) => loadDir(path));
    });

    const loadDir = (base) => {
        let dirs = readdirSync(base);
        dirs.forEach((path) => {
            const fullpath = resolve(base, path);
            const stats = statSync(fullpath);
            if (stats.isDirectory()) {
                loadDir(fullpath);
            } else if (stats.isFile()) {
                setView(fullpath);
            }
        });
    };

    loadDir(layoutDir);
});

到此主要功能以及實現了，其他待優化項這里就不描述了，可以看看完整實現源碼。

使用示例

以為 hexo-theme-async 為例，在根目錄新建 layout 目錄，然后添加 sidebar.ejs 文件，結構如下：

┌── blog
│   └── layout
│          └── sidebar.ejs
│   └── scaffolds
│   └── source
│   └── themes

sidebar.ejs 添加一點內容

<div>111</div>

然后在 _config.async.yml 中修改 layout 配置，替換掉默認 sidebar 模板。

layout:
    sidebar: async/sidebar

運行起來后，可以看到效果和 修改示例 中的效果一樣，但是簡化了用戶使用。

結語

通過上面方式，可以在使用 npm 安裝主題時，也支持自定義替換部分區域，來個性化的目的，當主題版本迭代升級后，也更方便用戶更新升級。

完整實現源碼可以參考 hexo-theme-async 中源碼。

總結

以上是生活随笔為你收集整理的Hexo 主题开发之自定义模板的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。