Butterfly 安装文档 - 主题配置

📖 本教程更新于 2022 年 08 月 18 日，教程的内容针对最新稳定版而更新（如果你是旧版，教程会有些出入，请留意）

🦋 Butterfly 已经更新到 4.4.0

开启评论功能

前置要求，参考 Artitalk 文档 - LeanCloud 的相关准备，必须要配置好 LeanCloud 再往下看

前往 LeanCloud 国际版，注册账号。

注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。

绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。

在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。

回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。

然后新建一个名为atComment的class，权限什么的使用默认的即可。

点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。

在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。

最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

在_config.butterfly.yml 下找到，按下图修改

开启说说功能

安裝插件

npm install hexo-butterfly-artitalk

前置要求，参考 Artitalk 文档 - LeanCloud 的相关准备，必须要配置好 LeanCloud 再往下看

前往 LeanCloud 国际版，注册账号。

注册完成之后根据 LeanCloud 的提示绑定手机号和邮箱。

绑定完成之后点击创建应用，应用名称随意，接着在结构化数据中创建 class，命名为 shuoshuo。

在你新建的应用中找到结构化数据下的用户。点击添加用户，输入想用的用户名及密码。

回到结构化数据中，点击 class 下的 shuoshuo。找到权限，在 Class 访问权限中将 add_fields 以及 create 权限设置为指定用户，输入你刚才输入的用户名会自动匹配。为了安全起见，将 delete 和 update 也设置为跟它们一样的权限。

然后新建一个名为atComment的class，权限什么的使用默认的即可。

点击 class 下的 _User 添加列，列名称为 img，默认值填上你这个账号想要用的发布说说的头像url，这一项不进行配置，说说头像会显示为默认头像 —— Artitalk 的 logo。

在最菜单栏中找到设置-> 应用 keys，记下来 AppID 和 AppKey ，一会会用。

最后将 _User 中的权限全部调为指定用户，或者数据创建者，为了保证不被篡改用户数据以达到强制发布说说。

在_config.butterfly.yml 下将此代码完整复制过去

*开始使用**

在线聊天

https://www.ze520.cn/posts/9.html

只能选择一个分享服务商

访问 AddThis 官网找到你的 pub-id

修改主题配置文件

如果你不知道 sharejs，看看它的说明。

修改主题配置文件

可以到 addtoany 查看使用说明

搜索系統

记得运行 hexo clean

如果你使用 hexo-algoliasearch，请记得配置 fields 参数的 title, permalink 和 content

你需要安装 hexo-algolia 或 hexo-algoliasearch. 根据它们的说明文档去做相应的配置。

修改主题配置文件

记得运行 hexo clean

你需要安装 hexo-generator-search，根据它的文档去做相应配置

修改主题配置文件

网站验证

如果需要搜索引擎收录网站，可能需要登录对应搜索引擎的管理平台进行提交。各自的验证码可从各自管理平台拿到

修改主题配置文件

分析统计

登录百度统计的官方网站

找到你百度统计的统计代码

修改主题配置文件

登录谷歌分析的官方网站

找到你的谷歌分析的跟踪 ID

修改主站配置文件

找到站点设置 - 获取代码

找到你的 web_id

修改主题配置文件

找到 JavaScript 程式码片段

找到你的 token

修改主题配置文件

创建 PROJECT

找到你的 ID

修改主題配置文件

Math 数学

不要在标题里使用 mathjax 语法，toc 目录不一定能正确显示 mathjax，可能显示 mathjax 代码

建议使用 KaTex 获得更好的效果，下文有介绍！

修改主题配置文件:

如果 per_page 设为 true, 则每一页都会加载 Mathjax 服务。设为 false，则需要在文章 Front-matter 添加 mathjax: true, 对应的文章才会加载 Mathjax 服务。

然后你需要修改一下默认的 markdown 渲染引擎来实现 MathJax 的效果。

查看: hexo-renderer-kramed

以下操作在你 hexo 博客的目录下 (不是 Butterfly 的目录):

安装插件

效果：

不要在标题里使用 KaTeX 语法，toc 目录不能正确显示 KaTeX。

首先禁用MathJax（如果你配置过 MathJax 的话），然后修改你的主题配置文件以便加载katex.min.css

你不需要添加 katex.min.js 来渲染数学方程。相应的你需要卸载你之前的 hexo 的 markdown 渲染器，然后安装其它插件。

卸载掉 marked 插件，安装 hexo-renderer-markdown-it

在 hexo 的根目录的 _config.yml 中配置

如需配置其它参数，請參考 katex 官网

注意，此方法生成的 katex 沒有斜体

卸载掉 marked 插件，然后安装新的hexo-renderer-markdown-it-plus:

注意到 [hexo-renderer-markdown-it-plus](<https://github.com/CHENXCHEN/hexo-renderer-markdown-it-plus>)已经无人持续维护, 所以我们使用 [@upupming/hexo-renderer-markdown-it-plus](<https://github.com/upupming/hexo-renderer-markdown-it-plus>)。这份 fork 的代码使用了 [@neilsustc/markdown-it-katex](<https://github.com/yzhang-gh/markdown-it-katex>)同时它也是 VSCode 的插件 Markdown All in One 所使用的, 所以我们可以获得最新的 KaTex 功能例如 \\tag{}。

你还可以通过 [@neilsustc/markdown-it-katex](<https://github.com/yzhang-gh/markdown-it-katex>)控制 KaTeX 的设置，所有可配置的选项参见 https://katex.org/docs/options.html。比如你想要禁用掉 KaTeX 在命令行上输出的宂长的警告信息，你可以在根目录的 _config.yml 中使用下面的配置将 strict 设置为 false:

当然，你还可以利用这个特性来定义一些自己常用的 macros。

因为 KaTeX 更快更轻量，因此没有 MathJax 的功能多（比如右键菜单）。为那些使用 MathJax 的用户，主题也内置了 katex 的复制功能。