【Hexo】博客新增的若干功能
前情提要：使用 Hexo 搭建个人博客
在网站正式上线之后，我们根据用户的反馈与自身的优化计划，又陆续增加了一些新功能。在这里，我会逐一为大家介绍这些功能的安装方法和使用说明，方便有需要的朋友进行参考和操作。需要说明的是，这些新增功能大多属于页面美化或体验优化的类型，能够让网站在视觉效果、交互体验以及操作便捷性上有所提升。
新增加的功能：1. 使用 Github 作为图床；2. 阅读全文功能；3. 博客页面圆角化；4. Canvas-Nest 背景动画。
如果你追求更高的美观度、更流畅的交互体验，或者希望网站在细节上更加人性化，可以尝试安装并使用这些功能；但如果你对现有的使用体验已经满意，也可以选择不安装，不会影响网站的核心使用。
使用 Github 作为图床
Markdown 允许插入图片，通常做法是在本地存储图片并上传到网站，但如果图片数量过多，会使网站加载变慢。这时候我们也有第二种方案：图床。
图床，指的是专门用于存储和管理图片的在线服务。通常用户将图片上传到图床后，可以获得一个外链，然后用于博客文章、论坛帖子插图、社交媒体分享或是个人笔记。
虽然图床方便，但不同类型的图床各有缺陷：免费公共图床随时可能关闭、限流或更换域名。专门的付费商业图床价格不菲。这时候我们可以考虑 Github + PicGo + JSdelivr 的方法来自建图床。
新建 GitHub 仓库并生成 Token
首先需要新建一个 Github 仓库用来存储图像，为了方便我们将这个仓库命名为 img-bed。
接着，我们需要为账号生成一个 Token，点击个人头像，依次选择【Settings】-【Developer settings】-【Personal access tokens】-【Tokens (classic)】，选择【repo】，取消【Expiration Date】，点击【Generate token】生成Token，注意一定要将 Token 妥善保存，因为这个 Token 只会显示一次。
下载 PicGo并配置
Picgo 下载地址：Github 页面
安装完成后按照要求配置 Github 图床，建议设为默认图床。由于 Github
在中国大陆访问速度较慢，我们可以使用 JSdelivr 免费 CDN
加速访问，具体方法为将自定义域名设置为
https://cdn.jsdelivr.net/gh/用户名/仓库名.
在访问图片时使用链接
https://cdn.jsdelivr.net/gh/用户名/仓库名/图片路径.可以发现访问速度快了许多！
在配置完成后，就可以在 PicGo 软件中上传图片并获得图床链接了。
阅读全文功能
Next
主题默认显示文章的完整内容，有时不利于访问者观看，因此我们可以增加一个
“阅读全文”
功能。阅读全文功能比较简单，在编写你的文章的时候，在你不想在预览中显示的部分前加上
<!--more-->
标签，标签之后的部分就不会显示在主页了。
博客页面圆角化
为了使博客页面圆角化，我们新建一个文件
Hexo/source/_data/variables.styl（如果没有
_data 文件夹，就也新建一个），然后加入以下代码：
1 | // 圆角 |
然后在 Hexo/themes/next/_config.yml 文件中的
custom file paths. 中开 取消掉 variable
的注释。重新部署就可以看到页面圆角化了。
在 Next 的 issue 中提到侧边栏顶栏无法显示为圆角，目前并没有找到特别好的解决办法，可以参考资料6.
Canvas-Nest 背景动画
Canvas-Nest是一段超轻量的前端脚本，在页面背景里生成若干“粒子点”，点之间以线段相连并随鼠标交互漂移。它只依赖浏览器原生
<canvas>，体积小、接入简单，常见于个人博客、落地页、文档站的装饰性背景。
我们新建一个文件 Hexo/source/_data/footer.njk（如果没有
_data 文件夹，就也新建一个），然后加入以下代码：
1 | <script color="0,0,255" opacity="0.5" zIndex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script> |
其中 color、opacity 和 count
可以按个人喜好修改，分别影响线条的颜色，线条颜色的饱和度和粒子点的数量。
然后在 Hexo/themes/next/_config.yml 文件中的
custom file paths. 中开 取消掉 footer
的注释。重新部署就可以看到动画效果了。