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: