hexo个人博客搭建（三）butterfly主题配置

Butterfly主题安装文档(三)之主题配置

一、在线聊天功能

从 3.0 开始，Butterfly 主题内置了 4 种在綫聊天工具。

• chatra： https://chatra.io/
• tidio： https://www.tidio.com/
• gitter： https://gitter.im/
• crisp： https://crisp.chat/en/

主题提供了一个集合主题特色的按钮来替换这些工具本身的按钮，这个聊天按钮将会出现在右下角里。
只需要把 chat_btn 打开就行。
修改主题配置文件_config.butterfly.yml：

chat_btn: true

tidio

1、打开tidio注册账号 https://www.tidio.com/

依次完成步骤注册

2、在 Settings>
Developer 中找到 Public key

3、修改主题配置文件_config.butterfly.yml 填上public_key：

# tidio
# https://www.tidio.com/
tidio:
  enable: true
  public_key:

4、样式自行调整

5、效果图

二、评论功能

修改主题配置文件_config.butterfly.yml：

comments:
  use: # 使用的评论（请注意，填写的评论首字母需要大写。最多支持两个，如果不需要请留空）
    - Gitalk 
    - Disqus
  # - Valine
  # - Disqus
  text: true # 是否显示评论服务商的名字
  lazyload: false # 是否为评论开启 lazyload，开启后，只有滚动到评论位置时才会加载评论所需要的资源（开启 lazyload 后，评论数将不显示）
  count: false # 是否在文章顶部显示评论数 livere 和 utterances 不支持评论数显示

Hexo 集成 Gitalk 评论系统

1、什么是gitalk

官方网址： https://gitalk.github.io
官方中文文档： https://github.com/gitalk/gitalk/blob/master/readme-cn.md

2、gitalk特点

1、使用 GitHub 登录
2、支持多语言 [en, zh-CN, zh-TW, es-ES, fr, ru]
3、支持个人或组织
4、无干扰模式（设置 distractionFreeMode 为 true 开启）
5、快捷键提交评论 （cmd|ctrl + enter）

3、集成

（1）在github上注册新应用

申请GitHub OAuth application流程：

1、打开github网站登陆后，点击右上角的用户图标，选择Settings
2、 在Settings页面选择Developer settings选项。
3、在Developer settings选择OAuth Apps,然后会在页面右边有一个New OAuth App按钮，点击这个按钮就进入到新建OAuth application页面
4、也可以直接代开这个链接：https://github.com/settings/applications/new 进入新建页面

参数说明：
Application name： # 应用名称，可以随意
Homepage URL： # 网站URL，要求不严格，可以是自己的网站地址
Application description # 描述，随意
Authorization callback URL：# 网站URL，填自己要使用Gitalk的博客地址，不可乱填

填写完成可以得到Client ID和Client Secret

（2）申请一个仓库做评论存储，记住仓库名，到时需要填入hexo的_config.yml配置中

（3）修改主题配置文件_config.butterfly.yml

# gitalk
# https://github.com/gitalk/gitalk
gitalk:
  client_id: #你的client id
  client_secret: #你的client_secret
  repo: #你的仓库名
  owner: #你的github用户名
  admin: #该仓库的拥有者和协作者
  language: zh-CN # en, zh-CN, zh-TW, es-ES, fr, ru
  perPage: 10 # Pagination size, with maximum 100.
  distractionFreeMode: false # Facebook-like distraction free mode.
  pagerDirection: last # Comment sorting direction, available values are last and first.
  createIssueManually: false # Gitalk will create a corresponding github issue for your every single page automatically
  option: