基于Hexo和Butterfly创建个人技术博客，(11) 使用插件增强博客站点能力

Butterfly官方网站，请 点击进入

本章目标：
掌握常用的plugin插件的用法，本文中是butterfly主题内置集成的第三方插件(部分插件需要再次安装)；

一、建议开启的三方插件

KaTeX-数学公式

katex:
  enable: true
  # true 表示每一页都加载katex.js
  # false 需要时加载，须在使用的Markdown Front-matter 加上 katex: true
  per_page: false
  hide_scrollbar: true
markdown:
    plugins:
      - '@renbaoshuo/markdown-it-katex  

npm un hexo-renderer-marked --save # 如果有安装这个的话，卸载
npm un hexo-renderer-kramed --save # 如果有安装这个的话，卸载

npm i hexo-renderer-markdown-it --save # 需要安装这个渲染插件
npm install katex @renbaoshuo/markdown-it-katex #需要安装这个katex插件

Algolia-搜索

请记得配置 fields 参数的 title, permalink 和 content。需要安裝 hexo-algolia或 hexo-algoliasearch。

algolia_search:
  enable: true
  hits:
    per_page: 6

Algolia-Doc搜索

需要注册，具体申请和使用请查看 DocSearch 文檔 ，前4个参数全是必须填写的，最后option可查看这里 |

docsearch:
  enable: false
  appId:
  apiKey:
  indexName:
  option:

local_search-本地搜索

需要安裝 hexo-generator-searchdb 或者 hexo-generator-search。

# Local search
local_search:
  enable: false
  # 预加载，开启后，进入网页后会自动加载搜索文件。关闭时，只有点击搜索按钮后，才会加载搜索文件
  preload: false
  # 匹配的文章结果，默认显示最开始的 1段结果
  top_n_per_article: 1
  # 将 html 字符串解码为可读字符串
  unescape: false
  # 搜索文件的 CDN 地址（默认使用的本地链接）
  CDN:

comments-评论

开启评论需要在comments-use中填写你需要的评论。支持双评论显示，只需要配置两个评论（第一个为默认显示），这个可选择就非常多了。通用配置如下：

comments:
  # 使用的评论（请注意，最多支持两个，如果不需要请留空），一般一个就行了
  # Choose: Disqus/Disqusjs/Livere/Gitalk/Valine/Waline/Utterances/Facebook Comments/Twikoo
  use: Valine,Disqus
  # 是否显示评论服务商的名字
  text: true 
  # lazyload: 是否为评论开启lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）
  lazyload: true
  # 是否在文章顶部显示评论数，livere、Giscus 和 utterances 不支持评论数显示
  count: true 
  # 是否在首页文章卡片显示评论数gitalk、livere 、Giscus 和 utterances 不支持评论数显示
  card_post_count: false 

可选的服务插件

插件名称	特点说明
disqus	无法在内地使用
Disqusjs
livere
gitalk	github提供的功能
valine
Waline	一款从 Valine 衍生的带后端评论系统
utterances	与Gitalk一样，基于 GitHub issues 的评论工具
Twikoo	是一个简洁、安全、无后端的静态网站评论系统，基于腾讯云开发。
Giscus	一个基于 GitHub Discussions 的评论
remark42	只支持私有部署的评论
artalk	只支持私有部署的评论

chat-在线聊天

Butterfly主题内置了多种在綫聊天工具，设置chat_btn: true。这个聊天按钮将会出现在右下角工具条里。

chat_btn: true # 显示工具条的聊天图标
chat_hide_show: true # 只有向上滚动才会显示聊天按钮
rightside-bottom: #如果使用工具自带的聊天按钮，按钮位置可能会遮挡右下角图标，调正右下角图标位置

工具名称	配置名称	网址
chatra	chatra	打开chatra并注册帐号。
tidio	tidio	打开tidio并注册帐号。
crisp	crisp	打开crisp并注册帐号。
daovoice	daovoice	打开daovoice并注册帐号。

analytics-代码分析統計

工具名称	配置	说明
百度统计	baidu_analytics	登錄百度統計的官方網站
谷歌分析	google_analytics	登錄谷歌分析的官方網站
Cloudflare	cloudflare_analytics	登錄 Cloudflare 分析的官方網站
Clarity	microsoft_clarity	登錄 Clarity 的官方網站

google_adsense-广告

主题已集成谷歌广告（自动广告）

google_adsense:
  enable: true
  auto_ads: true
  js: https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
  client: # 填入個人识别码
  enable_page_level_ads: true

ad-手动广告配置

主题预留了三个位置可供插入广告，分别为主页文章(每三篇文章出现广告)/aside公告之后/文章页打赏之后。把html代码填写到下边配置的对应的位置。

ad:
  index: :block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8919908724705274" data-ad-slot="1538867630">>>(adsbygoogle=window.adsbygoogle||[]).push({})>
  aside: :block" data-ad-client="ca-pub-8919908724705274" data-ad-slot="8108145410" data-ad-format="auto" data-full-width-responsive="true">>>(adsbygoogle=window.adsbygoogle||[]).push({})>
  post: :block" data-ad-format="fluid" data-ad-layout-key="-fb+5w+4e-db+86" data-ad-client="ca-pub-8919908724705274" data-ad-slot="5978969231">>>(adsbygoogle=window.adsbygoogle||[]).push({})>

例如:

  index: :block" data-ad-format="fluid" data-ad-layout-key="xxxxxxxxxxxx" data-ad-client="ca-pub-xxxxxxxxxx" data-ad-slot="xxxxxxxxxx">>>(adsbygoogle=window.adsbygoogle||[]).push({})>

site_verification-网站验证平台收录

如果需要搜索引擎收录网站，需要登录对应搜索引擎的管理平台进行提交，各自的验证码可从各自管理平台拿到。

site_verification:
  # - name: google-site-verification
  #   content: xxxxxx
  # - name: baidu-site-verification
  #   content: xxxxxxx

Snackbar-弹窗

# https://github.com/polonel/SnackBar
# position 弹窗位置：top-left / top-center / top-right / bottom-left / bottom-center / bottom-right
snackbar:
  enable: true
  position: bottom-left
  bg_light: '#49b1f5' #light mode时弹窗背景
  bg_dark: '#2d3035' #dark mode时弹窗背景

二、性能提升插件

Pjax-提速资源缓存

当用户点击链接，通过ajax更新页面需要变化的部分，然后使用HTML5的pushState修改浏览器的URL地址。这样可以不用重复加载相同的资源（css/js）， 从而提升网页的加载速度，对于一些第三方插件，有些并不支持 pjax 。你可以把网页加入到 exclude 里，这个网页会被 pjax 排除在外。

pjax: 
  enable: true
  exclude:
    - /music/
    - /no-pjax/

CDN-加速

配置文件中最後一部分CDN，裏面是主題所引用到的文件，可自行配置CDN。（非必要請勿修改，配置後請確認鏈接是否能訪問）

CDN:
  # The CDN provider of internal scripts (主題內部 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # Dev version can only choose. ( dev版的主題只能設置為 local )
  # custom 为自定义格式，需配置 custom_format
  internal_provider: local

  # The CDN provider of third party scripts (第三方 js 的 cdn 配置)
  # option: local/jsdelivr/unpkg/cdnjs/custom
  # when set it to local, you need to install hexo-butterfly-extjs
  # custom 为自定义格式，需配置 custom_format
  third_party_provider: jsdelivr

  # Add version number to CDN, true or false  
  version: false

  # Custom format
  # For example: https://cdn.staticfile.org/${cdnjs_name}/${version}/${min_cdnjs_file}
  custom_format:

  option: #可以在这里更换部分文件,会覆盖原有的配置
    # main_css:
    # main:
    # utils:
    # translate:
    # local_search:
    # algolia_js:
    # algolia_search:
    # instantsearch:
    # docsearch_js:
    # docsearch_css:
    # pjax:
    # gitalk:
    # gitalk_css:
    # blueimp_md5:
    # valine:
    # disqusjs:
    # disqusjs_css:
    # twikoo:
    # waline_js:
    # waline_css:
    # giscus:
    # sharejs:
    # sharejs_css:
    # mathjax:
    # katex:
    # katex_copytex:
    # mermaid:
    # canvas_ribbon:
    # canvas_fluttering_ribbon:
    # canvas_nest:
    # lazyload:
    # instantpage:
    # typed:
    # pangu:
    # fancybox_css:
    # fancybox:
    # medium_zoom:
    # snackbar_css:
    # snackbar:
    # activate_power_mode:
    # fireworks:
    # click_heart:
    # ClickShowText:
    # fontawesome:
    # flickr_justified_gallery_js:
    # flickr_justified_gallery_css:
    # aplayer_css:
    # aplayer_js:
    # meting_js:
    # prismjs_js:
    # prismjs_lineNumber_js:
    # prismjs_autoloader:
    # artalk_js:
    # artalk_css:
    # busuanzi:
    # abcjs_basic_js:

version：如需修改版本號，可修改主題目录的 ‘plugins.yml’ 中對应插件的 version，请确保你修改的版本号，你所使用的 cdn 有收录；

custom_format提供以下参数

参数	说明
name	npm 上的包名
file	npm 上的文件路徑
min_file	npm 上的文件路徑（壓縮過的文件）
cdnjs_name	cdnjs 上的包名
cdnjs_file	cdnjs 上的文件路徑
min_cdnjs_file	cdnjs 上的文件路徑（壓縮過的文件）
version	插件版本號

目前有收录butterfly使用的插件的可用的第三方 CDN 列表，选择新的 CDN 时需要确认有收录butterfly主题使用的第三方插件。

提供商	格式	備註
Staticfile（七牛云）	https://cdn.staticfile.org/$cdnj{s}_{n}ame/${version}/${min_cdnjs_file}	同步 cdnjs
BootCDN	https://cdn.bootcdn.net/ajax/libs/$cdnj{s}_{n}ame/${version}/${min_cdnjs_file}	同步 cdnjs
Baomitu（360）	最新版本： https://lib.baomitu.com/$cdnj{s}_{n}ame/latest/${min_cdnjs_file} 指定版本： https://lib.baomitu.com/$cdnj{s}_{n}ame/${version}/${min_cdnjs_file}	同步 cdnjs
Elemecdn	最新版本： https://npm.elemecdn.com/$name@latest/${file} 指定版本： https://npm.elemecdn.com/$name@${version}/${file}	同步 npm

三、推荐三方插件

permalink转为数字的插件

可以把链接permalink转为数字的插件，配置容易，生成时自动转为数字。也可解决解决中文URL问题。

• hexo-abbrlink

生成RSS文件的插件

• hexo-generator-feed

加强网站SEO和防止权重流失

为网站使用到的所有外链添加rel="noopener external nofollow noreferrer"

• hexo-filter-nofollow

生成sitemap的插件

• hexo-generator-sitemap

  百度生成sitemap的插件

• hexo-generator-baidu-sitemap

四、可选开启的三方插件

Open Graph - 自定义meta信息

在 head 里增加一些 meta 资料，例如缩略图、标题、时间等等。当你分享网页到一些平台时，平台会读取 Open Graph 的内容，展示缩略图，标题等等信息。

# Open graph meta tags
Open_Graph_meta:
  enable: true
  option:
    # twitter_card:
    # twitter_image:

douban-电影

电影界面使用了插件 hexo-butterfly-douban使用方法请参考插件的文檔。

1. hexo-butterfly-douban 会主动生成页面，所以不需要自己创建。
2. 如遇到无法抓取问题，只能重试。

日志-说说

一种类似随时发心情短blog的功能带时间线的，大概如下所示：

Artitalk

安装插件 hexo-butterfly-artitalk
文档说明插件文檔

HexoPlusPlus Talk

安裝插件 hexo-butterfly-hpptalk
文档说明插件文檔

五、不建议开启的插件

pwd-google渐进式WEB增强

渐进式增强WEB应用，是Google 在2016年提出的概念，2017年落地的web技术。是提升 Web App 的体验的一种新方法，能给用户原生应用的体验。可以参考 Google Tools for Web Developers

打开工作目录，npm install hexo-offline --save 或者 yarn add hexo-offline，然后在根目录创建 hexo-offline.config.cjs 文件，并增加以下内容：

// offline config passed to workbox-build.
module.exports = {
  globPatterns: ['**/*.{js,html,css,png,jpg,gif,svg,webp,eot,ttf,woff,woff2}'],
  // 静态文件合集，如果你的站点使用了例如 webp 格式的文件，请将文件类型添加进去。
  globDirectory: 'public',
  swDest: 'public/service-worker.js',
  maximumFileSizeToCacheInBytes: 10485760, // 缓存的最大文件大小，以字节为单位。
  skipWaiting: true,
  clientsClaim: true,
  runtimeCaching: [ // 如果你需要加载 CDN 资源，请配置该选项，如果没有，可以不配置。
    // CDNs - should be CacheFirst, since they should be used specific versions so should not change
    {
      urlPattern: /^https:\/\/cdn\.example\.com\/.*/, // 可替换成你的 URL
      handler: 'CacheFirst'
    }
  ]
}

然后修改配置文件：

pwa:
  enable: true
  manifest: /img/pwa/manifest.json
  apple_touch_icon: /img/pwa/apple-touch-icon.png
  favicon_32_32: /img/pwa/32.png
  favicon_16_16: /img/pwa/16.png
  mask_icon: /img/pwa/safari-pinned-tab.svg

在创建source/目录中创建manifest.json文件，可以通过 Web App Manifest快速创建manifest.json。

{
    "name": "string",
    "short_name": "Junzhou",
    "theme_color": "#49b1f5",
    "background_color": "#49b1f5",
    "display": "standalone",
    "scope": "/",
    "start_url": "/",
    "icons": [
        {
          "src": "images/pwaicons/36.png",
          "sizes": "36x36",
          "type": "image/png"
        },
        {
            "src": "images/pwaicons/48.png",
          "sizes": "48x48",
          "type": "image/png"
        }
      ],
      "splash_pages": null
  }