【blog002】hexo博客NexT主题下配置和美化

type

status

date

slug

summary

NexT主题代码高亮显示配置问题

参考next主题设定代码高亮格式

需要动的地方有：

主题的_config.yml文件

站点的_config.yml文件

代码块的语言标注

在站点的_config.yml中，搜索hightlight，将auto_detect改为true:

目前我所使用的NexT 8.0.0版本使用tomorrow-theme,支持五种高亮格式。参考NexT官方文档,在主题的_config.yml中添加高亮配置，使用文档中提到的下方配置方法发现无效。

找到codeblock列，配置light后，tomorrow-theme样式的风格可以显示了。推测dark是在另一个模式（暗黑模式？）下才生效的，但是不配会报错。

实际配置下来，代码块上不指定语言也会有颜色高亮。如果还是不会代码高亮的话，代码块上标注语言,例如：

配置字数统计等页面数据

安装字数统计插件 npm i hexo-symbols-count-time 在hexo的_config.yml下找到# Extensions在下面配置插件配置如下

### NexT8动画背景Canvas Nest和three配置

hexo目录下安装动画库

next主题的_config.yml找到canvas_ribbon，在下面添加Canvas-nest动画的配置，three动画配置自带了，要启用哪个就将enable置为true。

canvas_nest另外还需要多一些配置，参考canvas_nest的github仓库README: 1. hexo目录下操作如下：

创建footer.swig文件，添加内容

然后在next主题下的_config.yml中找到custom_file_path添加一行配置footer: source/_data/footer.swig

重新启动hexo:

文章摘要配置

找到三种方式添加文章摘要，显示阅读全文方式。

在文章中使用手动进行截断,测试可用,但是感觉挺麻烦的。

配置自动截取。无论是在hexo的_config.yml还是在next主题的_config.yml下配置，最后都没有生效。

在文章中的front-matter中添加description字段，然后在这个字段内写摘要。因为还是觉得麻烦，干脆懒得测试。暂时打算先用第一种，后面再找找看别的方案。

修改文内链接样式

参考： Hexo NexT主题美化记录在themes\next\source\css\_common\components\post\post.styl文件中添加下列的代码：

主页文章添加阴影效果

参考： Hexo NexT主题美化记录打开themes\next\source\css\_common\components\post\post.styl文件，将post-block代码进行如下更改：

回到顶部按钮显示百分比

next主题的_config.yml配置修改：

添加背景图片和透明度

hexo目录下，在source/_data(_data目录之前没手动创建过的话要手动创建)下新建styles.styl，内容为：

说明：

background:图片路径，也可以直接使用链接

background-repeat：若果背景图片不能全屏，那么是否平铺显示，充满屏幕，no-repeat不平铺

background-attachment：背景是否随着网页上下滚动而滚动，fixed为当页面的其余部分滚动时，背景图像不会移动

background-position：就是调整图片的位置

background-size：图片展示大小，这里如果设置100% 100%，当背景图片不能全屏，通过拉伸的方式将背景强制拉伸至全屏显示。如果不添加，图片虽然不会完整显示，但不会因为拉伸变形。个人更喜欢不加这个属性。

然后在next主题的_config.yml下custom_file_path解开style: source/_data/styles.styl注释。

在后在next主题的source/images目录下添加background.jpg文件,重新启动hexo。

添加吉祥物

项目目前有好几款模型挂件，可以去里面找自己喜欢的，也可以按照项目里给出的方式自定义模型。

安装

hexo的_config.yml添加配置

界面语言配置

next的_config.yml添加:

menu配置

配置菜单

除了home和archives外，其他都需要做额外配置。以tags为例，hexo目录下,执行hexo new page tags,会在hexo目录下的source生成一个tags目录，并在里面生成一个index.md文件。

next主题的icon使用的是fontawesome的，通过下面地址查找到可配置使用的icon

配置网站图标

图片资源存放到hexo/next/images下。next的_config.yml:

配置头像

图片资源存放到hexo/next/images下。next的_config.yml:

修改底部样式

next的_config.yml:

配置版权声明

next的_config.yml:

本地搜索框

hexo目录下，先安装插件npm install hexo-generator-searchdb --save,配置hexo的_config.yml。

文章固定id

默认是按时间title生成文章序列，但是每次发布可能会造成变动。abbrlink插件能为每篇文章生成独立的唯一id。hexo目录下安装插件npm install hexo-abbrlink --save,然后配置hexo的_config.yml,这里我把插件相关都配置在# Extensions位置下，方便查找。

hexo的_config.yml内找到permalink节点，修改文章链接序列生成方式。

注意： 文章中的abbrlink在hexo g构建后才会在文章中生成。

参考

next主题设定代码高亮格式

Hexo NexT主题美化记录