butterfly主题魔改（一）

分享 hexo

发布时间 : 2022-09-29 11:16

字数:596 阅读 :

评论:

书记留言板
Gitalk评论

书记留言板

效果如图：

修改方法：

npm install hexo-butterfly-envelope --save

打开网站配置文件或者主题配置文件，添加如下代码

# envelope_comment
# see https://akilar.top/posts/e2d3c450/
envelope_comment:
  enable: true #控制开关
  custom_pic:      
    cover: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/violet.jpg #信笺头部图片
    line: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/line.png #信笺底部图片
    beforeimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/before.png # 信封前半部分
    afterimg: https://npm.elemecdn.com/hexo-butterfly-envelope/lib/after.png # 信封后半部分
  message: #信笺正文，多行文本，写法如下
    - 有什么想问的？
    - 有什么想说的？
    - 有什么想吐槽的？
    - 哪怕是有什么想吃的，都可以告诉我哦~
  bottom: 自动书记人偶竭诚为您服务！ #仅支持单行文本
  height: #1050px，信封划出的高度
  path: #【可选】comments 的路径名称。默认为 comments，生成的页面为 comments/index.html
  front_matter: #【可选】comments页面的 front_matter 配置
    title: 留言板
    comments: true

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、也可以直接打开这个链接进入新建页面

填写完成可以得到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:

转载请注明来源，欢迎对文章中的引用来源进行考证，欢迎指出任何有错误或不够清晰的表达。可以在下面评论区评论，也可以邮件至 1096485692@qq.com