1 問題及需求

問題

• 首頁（home）默認顯示按日期排序的文章列表佳簸，使用 `` 省略內(nèi)容仍顯得繁雜冗長遣鼓；
• 分類（categories）頁面雖然有按類型、日期排序的文章列表，但切換分類需要往返多次蛙粘。

需求

• 建立一個首頁目錄，將文章分類（categories 參數(shù)）和標題但壮，分別作為列表的一級么库、二級顯示；
• 標題即為文章鏈接久橙，點擊可直接到達俄占；想查看其他分類，直接回到首頁即可淆衷。

2 解決方案

2.1 建立文件

在 source/ 下建立 index.md缸榄，命名標題，內(nèi)容留空祝拯。

2.2 關(guān)閉默認首頁

修改 hexo 配置文件 _config.yml甚带，找到 index_generator 配置項，修改 path 屬性為一個無效值：

index_generator:
  path: 'xxxx'
  per_page: 10
  order_by: -date

此時啟動項目后佳头，首頁將不再出現(xiàn)文章列表鹰贵，轉(zhuǎn)而顯示 index.md 內(nèi)容。

注：index.md 在渲染后成為 index.html

3 動態(tài)更新目錄

若文章分類多康嘉，每次更新碉输、調(diào)整文章都需要將相應(yīng)鏈接手工同步到首頁也是一件相當繁瑣的事情。因此有必要考慮自動更新首頁亭珍。

3.1 hexo 加載順序

根據(jù) hexo 文檔 https://hexo.io/zh-cn/api/posts#%E6%B8%B2%E6%9F%93 關(guān)于渲染順序的說明敷钾，要實現(xiàn) index.md 的寫入，要在 hexo g 命令執(zhí)行之前完成肄梨，可引入 before_post_render 過濾器實現(xiàn)該需求阻荒。

3.2 hexo 過濾器

過濾器文檔：https://hexo.io/zh-cn/api/filter#%E6%A6%82%E8%A6%81

在主題目錄下 themes\next\filters\ 新建 index.js，添加 priority 分別為 9 和 10 的兩個 before_post_render 過濾器众羡，如下所示：

'use strict'

const categoriesMap = new Map();

hexo.extend.filter.register('before_post_render', data => {

    // 首頁目錄不顯示草稿內(nèi)容
    if (data.source.indexOf("_drafts") >= 0) {
        return data;
    }

    if (data.path.indexOf("index") < 0 && data.categories.length > 0) {

        let curCategorie = data.categories.data[0].name;

        if (categoriesMap.has(curCategorie)) {
            let valueArray = categoriesMap.get(curCategorie);
            valueArray = valueArray.concat(`  - [${data.title}](/${data.path})\n`)
            categoriesMap.set(curCategorie, valueArray);
        } else {
            categoriesMap.set(curCategorie, [`  - [${data.title}](/${data.path})\n`]);
        }
    }
    return data;
}, 9);

hexo.extend.filter.register('before_post_render', data => {
    // 精確定位index.html侨赡，防止誤寫其他路徑不同但同名的文件
    if (data.path.indexOf("index") === 0) {

        for (let key of categoriesMap.keys()) {
            data.content += `- ${key}\n`
            let valueArray = categoriesMap.get(key);
            valueArray.forEach(element => {
                data.content += element;
            });
        }
        return data;
    }
    return data;
}, 10);

代碼說明

• 第一個過濾器遍歷全部文章，獲取所有現(xiàn)存的分類及所屬文章鏈接；
• 第二個過濾器寫入 index.html

3.3 有關(guān)屬性

為探究 data 為何物羊壹，可打斷點觀察其結(jié)構(gòu)：

{
  title: "DataGrip-2018.3.4-數(shù)據(jù)導出配置案例",
  date: {……文章生成日期的有關(guān)參數(shù)（略）},
  _content: "……正文內(nèi)容（略）",
  source: "_posts/DataGrip-2018-3-4-數(shù)據(jù)導出配置案例.md",
  raw: "……正文內(nèi)容（略）",
  slug: "DataGrip-2018-3-4-數(shù)據(jù)導出配置案例",
  published: true,
  updated: {……文章更新日期的有關(guān)參數(shù)（略）},
  comments: true,
  layout: "post",
  photos: [
  ],
  link: "",
  _id: "cljzhnjmb001oz0u6en5ab6xb",
  path: "2022/12/07/DataGrip-2018-3-4-數(shù)據(jù)導出配置案例/",
  permalink: "http://www.dcheng.site/2022/12/07/DataGrip-2018-3-4-%E6%95%B0%E6%8D%AE%E5%AF%BC%E5%87%BA%E9%85%8D%E7%BD%AE%E6%A1%88%E4%BE%8B/",
  full_source: "C:\\mainProjects\\blog\\source\\_posts\\DataGrip-2018-3-4-數(shù)據(jù)導出配置案例.md",
  asset_dir: "C:\\mainProjects\\blog\\source\\_posts\\DataGrip-2018-3-4-數(shù)據(jù)導出配置案例\\",
  tags: {
    data: [
      {
        name: "DataGrip",
        _id: "cljzhnjmc001uz0u6hlov172o",
        slug: "DataGrip",
        path: "tags/DataGrip/",
        permalink: "http://www.dcheng.site/tags/DataGrip/",
        posts: {
          data: [
          ],
          length: 0,
        },
        length: 0,
      },
    ],
    length: 1,
  },
  categories: {
    data: [
      {
        name: "配置案例",
        _id: "cljzhnjmc001tz0u6967u3bji",
        slug: "配置案例",
        path: "categories/配置案例/",
        permalink: "http://www.dcheng.site/categories/%E9%85%8D%E7%BD%AE%E6%A1%88%E4%BE%8B/",
        posts: {
          data: [
          ],
          length: 0,
        },
        length: 0,
      },
    ],
    length: 1,
  },
  content: "……正文內(nèi)容（略）",
  site: {
    data: {
    },
  },
}

4 最終效果

圖1-默認效果.png

圖2-動態(tài)目錄效果.png