博客功能更新 —— 增加说说页面

说说页面供我自己使用，不要尝试我的用户名和密码哦。

接下来做个记录，方便后期维护，留下了一点小问题，表情不能加载以后再修吧。

注册和配置 LeanCloud

按照官方文档弄就行，链接

建议使用国际版 LeanCloud

butterfly 主题安装插件和配置使用

安装插件

butterfly 主题 Hexo 博客已经整合了 artitalk 功能，所以直接安装 hexo-butterfly-artitalk 插件即可：

1
npm install hexo-butterfly-artitalk

yml配置

我把配置文件添加在 _config.yml 文件里了

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
# Artitalk说说
artitalk:
  enable: true
  appId: #【必须】LeanCloud 创建的应用中的 AppID
  appKey: #【必须】LeanCloud 创建的应用中的 AppKEY
  path: #【可选】Artitalk 的路径名称（默认为 artitalk，生成的页面为 artitalk/index.html）
  js: https://unpkg.com/aligu_artitalk@1.0.10/artitalk_aligu.js
  option: 
    serverURL: 'https://artitalk.bd6khe.cn'  # 这里替换为 LeanCloud 中配置的二级域名，否则会造成说说一直加载
    pageSize: 10 
    atComment: 0  # 是否可评论
    atEmoji:  
    color1: 'linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%)'  # 说说背景色1（默认是橙色）
    color2: 'linear-gradient(60deg, #ffd7e4 0, #c8f1ff 93%)'  # 说说背景色2（默认是绿色）
    color3: '#4c4948'  # 说说文字内容颜色（默认是白色）

黑暗模式适配

在自定义样式 [BlogRoot]\source\css\custom.css 中增加 artitalk 暗黑模式时的样式：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*artitalk说说暗黑模式背景色和字体色*/
/*配置项https://artitalk.js.org/settings.html*/
[data-theme="dark"] #artitalk_main .cbp_tmtimeline>li:nth-child(odd) .cbp_tmlabel {
    background: #2c2c2c;
}
[data-theme="dark"] #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel {
    background: #2c2c2c;
}
[data-theme="dark"] #artitalk_main .cbp_tmtimeline>li .cbp_tmlabel {
    color: rgba(255, 255, 255, 0.9);
}
#operare_artitalk .at_button, #artitalk_main .at_button {
    background-color: var(--btn-bg) !important;
    color: var(--btn-color) !important;
    border-radius: 0.5em !important;
}
#operare_artitalk .at_button, #artitalk_main .at_button:hover {
    background-color: var(--btn-hover-color) !important;
}

修改和引用插件中的js文件

好像能解决表情无法加载的问题，留个参考链接