butterfly功能扩展

评论功能扩展

1. 解锁 GitHub 评论功能

• 进入对应仓库的设置页面
• 勾选 Discussions 选项
• 侧边栏选择 GitHub Apps
• 安装 giscus 应用

2. 配置 Giscus

• 访问 Giscus 官方网站
• 选择对应的语言
• 填入对应的仓库
• 映射关系选择第一个 pathname
• 分类选择 Announcement
• 其他选择默认即可，最后启用giscus下面会生成一个 <script> 标签
• 配置 _config.butterfly.yml 中的 giscus 配置信息

  comments:
    use: Giscus  # 启用 Giscus 评论功能
    text: true   # 启用文本评论
    lazyload: true # 启用懒加载评论
    count: false   # 启用评论数量统计
    card_post_count: false # 启用卡片评论数量统计
  
  giscus:
    repo: yourname/yourrepo # 填写script标签中的 data-repo 值
    repo_id: your_repo_id   # 填写script标签中的 data-repo-id 值
    category_id: your_category_id # 填写script标签中的 data-category-id 值
    theme:
        light: light
        dark: dark
    option:
        mapping: pathname # 填写script标签中的 data-mapping 值
        strict: 0 # 填写script标签中的 data-strict 值
        reactions-enabled: 1 # 填写script标签中的 data-reactions-enabled 值
        emit-metadata: 0 # 填写script标签中的 data-emit-metadata 值
        input-position: bottom # 填写script标签中的 data-input-position 值
        lang: zh-CN # 填写script标签中的 data-lang 值

3. 验证 Giscus 评论功能

• 访问博客
• 查看评论功能是否正常
• 如果正常，说明 Giscus 评论功能配置成功
• 如果不正常，说明 Giscus 评论功能配置失败

搜索功能扩展

1. 安装搜索插件

   npm install hexo-generator-searchdb --save

2. 配置 _config.yml ,在末尾加入以下内容

   search:
     path: search.xml
     field: post
     content: true
     format: html

3. 配置 _config.butterfly.yml

   search:
     use: local_search
     placeholder: 搜索
   
   local_search:
     preload: false
     top_n_per_article: 1
     unescape: false
     CDN:

4. 验证搜索功能

• 访问博客
• 查看搜索功能是否正常
• 如果正常，说明搜索功能配置成功
• 如果不正常，说明搜索功能配置失败

自定义美化

1. source 中新建 css\custom.css 文件和 js\custom.js 文件
2. 配置 _config.butterfly.yml

   inject:
   head:
       - <link rel="stylesheet" href="/css/custom.css">
   bottom:
       - <script src="/js/custom.js"></script>

3. 接下来就可以尝试在这两个文件中添加自定义的样式和脚本了

可能遇到的问题

1. 评论功能或搜索功能配置失败

   hexo clean
   hexo g
   hexo s

2. 搜索按钮点击后没有反应

• 严格检查两个配置文件的相关内容，可能是一些细节输入有误