修改主题并美化我的博客

前言

自从我使用Hexo起,就一直坚持使用Butterfly主题。这个主题实在是太对我审美啦,有着恰到好处的花哨,但也没有到华而不实的程度。同时网上相关的资源教程也有很多,也就方便了后续对主题的魔改美化。

主题配置

启用搜索功能

Butterfly可以在配置中开启搜索功能,详见文档：Butterfly主题配置
我这里开启的是Local Search,因为配置稍微简单一点。也没有啥依赖。
注意：请务必在加密文章的Front-matter部分加上indexing: false,否则访问者可以通过搜索其中文本的方式来访问你的明文(有点逆天了)。

增加live2d看板娘

在inject处插入相应HTML代码即可。效果如左下角(移动端默认不开启)

启用pangu

如果你有在中英文字符之间添加空格的强迫症的话，可以开启此功能，记得把范围设置为post。
~~upd:我还是把这个关掉了,因为有bug~~

安装插件

安装插件是最简便的优化方式。安装方式也很简单:

1	npm install hexo-plugin-name --save

其中hexo-plugin-name为你想要安装的插件名。部分插件可能还需要手动去根目录下的_config.yml文件里修改plugins配置项。
在此推荐以下几个插件：

hexo-blog-encrypt
一个强大的博客加密插件,使用AES256-CBC并利用HMAC验证密文的来源以防篡改。值得注意的是该插件可能导致部分功能不正常，例如复制代码等。
hexo-abbrlink
生成短链,让你的文章URL不那么长,对搜索引擎收录友好。但是我没有使用这个插件。
hexo-generator-index
让你的文章拥有置顶功能,在Front-matter插入top: 100即可。top值越大文章就越靠前，最高100。
hexo-generator-sitemap
生成sitemap。
hexo-filter-nofollow
为网站使用到的所有外链添加rel="noopener external nofollow noreferrer",可以加强网站SEO和防止权重流失。
hexo-spoiler
提供文字遮盖效果,示例：1111你看不见我(点击文本即可恢复)
注意如果在front-matter设置了disableNunjucks: true该插件就不起作用了。
hexo-generator-search
为你的博客启用本地的搜索功能。
hexo-renderer-markdown-it
便于后续启用KaTex数学功能,记得卸载原先的Markdown渲染插件。

修改主题

Butterfly主题本身已足够优秀。但毕竟不同的人有不同的需求,因此我对着网上教程自己稍微修改了一下主题：

调整全局字体及字体大小

说实话,默认的字体其实看得也还蛮舒服的。但是自从看到了霞鹜文楷LXGWWenKaiMonoLite-Regular后就决定使用这个字体了(加载速度如果慢的话还是慎用)
想要修改原始字体,需要在配置中替换或添加你的字体名称,并插入如下css文件：

@font-face {
    font-family: 'LXGWWenKaiMonoLite-Regular';
    font-display: swap;
    src: url('/fonts/LXGWWenKaiMonoLite-Regular.ttf') format("truetype");  
}

如果按照以上方式配置字体未生效,请检查你的css文件inject是否正确；如果你将.ttf文件存在服务器上,请检查Nginx的配置文件,看看是否启用了对truetype的访问。当然，更佳的做法是利用对象存储来存取字体文件。
并且对于我来说,默认的字体大小还是有点小了,看得不够舒服。所以还需要调整一下全局字体大小。
在theme/butterfly/source/css/目录下找到var.styl,查找font-size并修改至你想要的大小即可。
例如：

1	$font-size = hexo-config('font.global-font-size') ? convert(hexo-config('font.global-font-size')) : 16px

增加ToDoList页面

之前在逛大佬们的博客时偶然看到了这个：博客添加待办清单页，于是就打算跟着教程也加一个ToDoList页面。
成品在这里:ToDoList

调整网站配色

这个看自己了,怎么好看怎么来。