一、添加顶部导航菜单

1. 修改主题配置文件

首先，打开主题的配置文件 _config.butterfly.yml，在 menu 部分添加或修改你希望展示的导航链接。

1
2
3
4
5
6
7
# _config.butterfly.yml
menu:
  首页: / || fas fa-home
  分类: /categories/ || fas fa-folder-open
  标签: /tags/ || fas fa-tags
  说说: /shuoshuo/ || fas fa-comment-dots
  时间轴: /archives/ || fas fa-history

2. 创建对应的页面

菜单链接需要指向真实存在的页面，否则会产生 404 错误。因此，需要使用以下命令创建对应的页面文件。

1
2
3
4
5
6
7
8
# 创建分类页面
hexo new page categories

# 创建标签页面
hexo new page tags

# 创建说说页面
hexo new page shuoshuo

3. 配置页面类型

Hexo 创建的页面默认是普通页面，需要修改其 Front-matter（文件顶部 --- 之间的内容）来指定它们的特殊类型。

分类页

打开 source/categories/index.md，修改其内容：

1
2
3
4
5
6
---
title: 分类
date: 2024-07-30 10:00:00
type: "categories"
top_img: /img/your-categories-banner.jpg
---

标签页

打开 source/tags/index.md，修改其内容：

1
2
3
4
5
6
---
title: 标签
date: 2024-07-30 10:01:00
type: "tags"
top_img: /img/your-categories-banner.jpg
---

说说页 (以 Artitalk 为例)

以下是使用 Artitalk 作为独立说说页面的配置方法。

  1. 安装插件：
    执行 npm install hexo-butterfly-artitalk
  2. 获取密钥：
    根据 插件官方文档 的指引，在 LeanCloud 等平台获取 appID 和 appKey。
  3. 配置页面：
    打开 source/shuoshuo/index.md 文件，参考以下配置进行修改。这种方式将 Artitalk 的功能直接嵌入页面中。
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    ---
    title: 说说
    date: 2024-03-21 12:00:00
    aside: false
    comments: false
    type: "artitalk"
    top_img: /img/home-banner.jpg
    ---

    <div id="artitalk_main"></div>

    <script type="text/javascript" src="https://unpkg.com/artitalk"></script>

    <script>
    new Artitalk({
        appId: 'xxx',
        appKey: 'xxx',
        serverURL: 'xxx',
        shuoPla: '来都来了，说点什么吧...', // 输入框提示语
        avatar: '/img/photo.png', // 你的头像
        pageSize: 10,
        motion: 1
        // 去掉 lang 配置，使用默认中文
    });
    </script>

二、添加 Giscus 评论系统

Giscus 是一款优秀的评论系统，它免费、无广告，并将评论数据存储在你的 GitHub Discussions 中，非常适合个人博客。

配置步骤

  1. 开启 GitHub Discussions
    确保你的博客项目关联的 GitHub 仓库是公开的。然后在仓库的 Settings > General > Features 区域，勾选 Discussions 功能。

  2. 访问 Giscus 官网
    前往 giscus.app 并授权你的 GitHub 账号。

  3. 获取 Giscus 配置
    在 Giscus 官网页面，按指引输入你的仓库名、选择一个讨论分类等。网站会自动生成所需的配置信息。

  4. 填入主题配置文件
    打开 _config.butterfly.yml，找到 comments 和 giscus 部分，填入上一步获取到的信息。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    comments:
      # 选择 giscus 作为评论系统
      use: giscus
      # ... 其他设置
       
    # ...
       
    # Giscus
    # https://giscus.app/
    giscus:
      repo: yourname/your-repo          # 替换成你的仓库
      repo_id: xxxxxxxxxxxxxxxxxx      # 替换成你的 repo_id
      category_id: xxxxxxxxxxxxxxxxxx  # 替换成你的 category_id
      light_theme: light
      dark_theme: dark
      option:
        data-lang: 'zh-CN' # 这个必须加在option下面， 否则无效
      # ... 其他设置

  5. 设置安全域名
    为了安全，Giscus 需要知道你的网站域名。在你的 GitHub 仓库根目录下创建 .github/giscus.json 文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    {
      "origins": [
        "http://localhost:4000",
        "https://posts.netlib.re"
      ],
      "originsRegex": [
        "http://localhost:[0-9]+"
      ]
    }