avatar


6.Butterfly主题的配置

关于Butterfly主题的配置,官方文档中有已经有了非常详细的描述。
包括评论插件等、这些看起来很高端的功能,都只需要进行简单的配置
这里我们主要做一些微小的补充。

本文关于Butterfly主题的配置,主要基于版本"2.2.5",与最新版本的Butterfly存在部分区别。

_config.yml的区分

在主题安装完成后,我们会看到两个_config.yml,其中在Hexo根目录下的_config.yml用以配置Hexo的配置。在Butterfly下的_config.yml用以配置主题相关的_config.yml。在Butterfly的文档中,除非有特别说明,否则一般都是指Butterfly下的_config.yml

fontawesome_v5的注意

如这个博客所示,我们在菜单栏中会看到很多图标,实际上这些图标并不是一张一张的图片,而是所谓的fontawesome,图标字体库。该图标字体库有好几个版本,Butterfly中默认使用V4版本,目前最新的是V5版本(在2022年,最新版本的已经是V6了)。和V4版本相比,V5版本的图标数量更多。
关于如何从V4升级到V5,参考Butterfly的文档。
我们主要讲一下需要注意的地方。在V4版本的fontawesome,格式都是类似这个fa fa-github。但是在V5版本的fontawesome,格式改为了fab fa-githubfas fa-home等,其中fab开头的表示brand,品牌。fas开头的继续写作fa也可以。
关于V4和V5的区别,在fontawesome官网中有明确描述。但是在通过百度搜索出来的,所谓的fontawesome中国站等假的官网中,并没有进行说明。

fontawesome的官网是 https://www.fontawesome.com/

font_link的注意

在Butterfly的配置文件中有默认配置如下:

1
font_link: https://fonts.googleapis.com/css?family=Titillium+Web

这是一个字体的链接,访问的是谷歌的地址。一般网上会有建议换成中科大的地址,如下:

1
font_link: https://fonts.lug.ustc.edu.cn/css?family=Titillium+Web

但是!实际上!国内请求fonts.googleapis.com,早就是访问北京的机器了。大家ping一下,搜一下IP地址即可发现。而且根据站长之家测速工具,fonts.lug.ustc.edu.cn已经不可用了。
两个地址测速的区别

版权邮箱的配置

每一篇文章的底部,我们都可以配置版权信息。在版权信息中有一个文章作者,点击后应该是调用邮箱发邮件。
版权信息的邮箱
该处邮箱的配置,在文档中没有说明,但是在答疑群里,管理员很快的解答我的疑惑了。
修改Hexo的_config.yml,添加一行email:

Valine评论系统的邮件提醒

Butterfly主题提供了多种评论系统,且都只需要进行简单的配置。其中Gitment、Gitalk都是用的GitHub issue。

这里,我们介绍Valine评论系统的邮件系统,能够轻松地发送邮件提醒,而且该款还可以在邮件提醒的时候提供链接,链接直达文章。

直达文章的链接

在Valine官方文档,有描述

!!! 自带的邮件提醒功能将在v1.4.0发布时下线,请使用自带邮件提醒的用户注意更改为第三方邮件提醒
https://valine.js.org/notify.html

同时valine官方推荐的第三方邮件提醒是 Valine-Admin

https://github.com/DesertsP/Valine-Admin

Valine-Admin的配置

登录Leancloud,依次点击云引擎 - 设置代码库中填入Valine-Admin的Git地址。

https://github.com/DesertsP/Valine-Admin.git

然后在下方配置自定义环境变量
加粗为必填项目。

变量名 介绍 例如
SITE_NAME 博客的名称 kakawanyifan.com
SITE_URL 博客的地址 https://kakawanyifan.com
SMTP_USER 发件人用户名,一般即发件人邮箱。 ***@***.com
SMTP_PASS 发件人密码 ******
SENDER_NAME 发件人名称 KakaWanYifan-博客评论提醒
SMTP_SERVICE 邮件服务商 QQ
SENDER_EMAIL 发件人邮箱 ***@***.com
ADMIN_URL www的博客地址SENDER_EMAIL www.kakawanyifan.com
BLOGGER_EMAIL 博主的邮箱地址,默认值为 i@m.kakawanyifan.com
MAIL_SUBJECT 评论回复邮件标题 见下文
MAIL_TEMPLATE 评论回复邮件模板 见下文
MAIL_SUBJECT_ADMIN 新评论邮件标题 见下文
MAIL_TEMPLATE_ADMIN 新评论邮件模板 见下文

邮件模板和标题由一些参数拼接而成。

  • 所有的参数需要用${变量名}包裹起来。
  • 斜体部分表示只能在评论回复邮件中用。

可以用到的参数有

参数 说明
SITE_NAME 博客名称
SITE_URL 博客首页地址
POST_URL 文章地址(完整路径)
PARENT_NICK 收件人昵称(被@者,父级评论人)
PARENT_COMMENT 父级评论内容
NICK 新评论者昵称
COMMENT 新评论内容

例如这两个:

1
2
MAIL_TEMPLATE
Hi,${PARENT_NICK}。有人回复了您在${SITE_NAME}上的评论,您说:${PARENT_COMMENT}${NICK}说:${COMMENT}点击查看${POST_URL}
1
2
MAIL_TEMPLATE_ADMIN
${NICK}说:${COMMENT} ${POST_URL}

特别注意,一般建议SITE_URL不要带有/,即建议写作https://kakawanyifan.com,而不是https://kakawanyifan.com/,否则效果会像这样
SITE_URL
注意有两个//,虽然并不影响访问。

Valine-Admin的部署

依次点击云引擎 - 部署。选择Git源码部署生产环境master分支Do not use cache 需要勾选上。然后点击部署即可。

Valine-Admin的定时任务

受限于免费的LeanCloud有休眠正常,我们通过配置定时任务来弥补。
新建定时任务,配置分别为

  1. 自动唤醒

    1. 名称:自动唤醒
    2. 生产环境:self-wake
    3. cron表达式:0 0/30 7-23 * * ?
  2. 补发邮件

    1. 名称:定时检查24小时内漏发的邮件通知
    2. 生产环境:resend-mails
    3. cron表达式:0 0 8 * * ?

BUG发现

如下图所示,每一篇文章都有一个阅读量。但是我们也发现,同一篇文章,在不同的浏览器上,阅读量居然不一样。
同一篇文章有不同的阅读量
Butterfly的阅读量计算,其实是调用的busuanzi的。
在答疑群中,我发现,不只有我遇到了这个问题,其他人也有。

  • 或者是我们都配置错了
  • 或者是Butterfly错了
  • 或者是busuanzi错了

在BUG没有得到修复之前,我暂时把该功能移除了。
Butterfly中,可以选择对busuanzi部分功能开启或关闭。

1
2
3
4
busuanzi:
site_uv: true
site_pv: true
page_pv: false
  • site_uv是指博客的用户量
  • site_pv是指博客的访问量
  • page_pv是指文章的阅读量,也是出现BUG的地方。
文章作者: Kaka Wan Yifan
文章链接: https://kakawanyifan.com/10106
版权声明: 本博客所有文章版权为文章作者所有,未经书面许可,任何机构和个人不得以任何形式转载、摘编或复制。

评论区