配置Hexo博客主题和页面功能

更换主题

安装Maupassant主题和渲染器（每个主题安装会有区别，可以参考具体的文档）

1
2
3

git clone https://github.com/tufu9441/maupassant-hexo.git themes/maupassant  
npm install hexo-renderer-pug --save  
npm install hexo-renderer-sass --save

编辑Hexo目录下的 _config.yml，将theme的值改为maupassant

网页语言/头像/个签/链接/导航栏的设置

在根目录下的_config.yml修改标题、副标题和语言(zh-CN)
在blog/themes/maupassant/source/img/avatar.png目录下修改头像，替换原有的png文件即可
在blog/themes/maupassant下的_config.yml修改info和links部分，来改变个签和链接。同时修改menu部分，来修改导航栏。

注意：邮件地址前应该加mailto:才有效

添加页面

新的页面创建直接使用命令行即可，并在index.md的front-matter中设置layout为layout: page

1	hexo new pages "tags" #创建标签页面

注意：创建新页面必须在blog文件夹下进行

如果创建的标签页面，将页面的layout设置为layout: tagcloud即可。若需要单栏页面，就将layout设置为 layout: single-column。

添加文章摘要/目录/评论/数学公式

首页默认显示文章摘要而非全文，可以在文章的front-matter中使用description:来设置显示的摘要
在文章的front-matter中添加toc: true即可让该篇文章显示目录。
文章的评论功能可以在front-matter中设置comments: true或comments: false来进行开启关闭
要启用数学公式支持，可以在Hexo目录的_config.yml中添加mathjax: true，并在相应文章的front-matter中添加mathjax: true。数学公式的默认定界符是$$...$$和\\[...\\]（对于块级公式），以及 $...$ 和\$...\$（对于行内公式）

更换网页背景动态效果

使用canvas_nest效果，只需把根目录的_config.yml中canvas_nest改为true即可

本网站背景动态效果采用的是[Vanta.js](https://www.vantajs.com/)的clouds效果，添加方式也很简单，只需把网页右上角生成的样式代码添加到maupassant/layout/_partial目录下的`head.pug`文件，以下是示例

script(src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js')
 script(src='https://cdn.jsdelivr.net/npm/vanta/dist/vanta.clouds.min.js') 
 script.
   document.addEventListener('DOMContentLoaded', function() {
     VANTA.CLOUDS({
       el: "body", // Apply the effect to the whole body
       cloudShadowColor: 0x183550, // Light blue cloud shadows
       skyColor: 0xffffff,
       cloudColor: 0xadc1de,
       sunColor: 0xff9919,
       sunGlareColor: 0xff6633,
       sunlightColor: 0xff9933,
       speed: 0.80
     });
   });

添加完成保存后使用hexo g生成并部署hexo d到远端即可

设置网站图标Favicon

首先制作favicon，将制作好的favicon.ico放在Hexo根目录的source文件夹下，将命名为apple-touch-icon.png的图片放在同样的位置，生成并部署完成后一定要强制刷新浏览器或者清除缓存，不然会不显示。

注意：我因为不显示的问题耽误好长时间，通过一一排查：ico文件没问题/文件路径没问题/源码路径也没问题head.pug/检查网页源码点击ico文件可以显示，最后发现是浏览器缓存的问题，command+shift+R强制刷新浏览器之后favicon显示正常

代码高亮

按以下方式编辑Hexo目录下的 _config.yml的highlight部分即可

v7.0.0以下：

# _config.yml
highlight:
  enable: true
  auto_detect: false
  line_number: true
  line_threshold: 0
  tab_replace: ''
  exclude_languages:
    - example
  wrap: true
  hljs: false
prismjs:
  enable: false
  preprocess: true
  line_number: true
  line_threshold: 0
  tab_replace: ''

v7.0.0及以上：

# _config.yml
syntax_highlighter: highlight.js
highlight:
  auto_detect: false
  line_number: true
  line_threshold: 0
  tab_replace: ''
  exclude_languages:
    - example
  wrap: true
  hljs: false
prismjs:
  preprocess: true
  line_number: true
  line_threshold: 0
  tab_replace: ''

注：本文撰写参考屠·城