Hexo博客主题安装及Next主题个性化修改

原文链接https://www.lixint.me/hexo-theme-diy.html

欢迎加入博客搭建交流群（QQ群号60429576）>点击加入<

写在最前面：
1.在修改时请注意博客配置文件与主题配置文件的区别：博客配置文件是指博客根目录下的_config.yml文件，
主题配置文件是指/themes/主题名/路径下的_config.yml文件，例如我使用的主题为next主题，主题配置文件为/themes/next/_config.yml。
2.文内所有命令行命令全部是在博客根目录打开命令行下输入的。根目录下目录结构为：

.
├── _config.yml
├── package.json
├── scaffolds
├── source
|   ├── _drafts
|   └── _posts
└── themes

默认情况下，命令行输入命令ls显示如下：

目录

设置作者头像	设置作者昵称与站点描述	设置代码高亮主题	侧边栏社交链接
开启打赏功能	修改打赏字体不闪动	开启友情链接or侧边栏推荐阅读	设置RSS
设置网站图标	实现全站及文章字数统计及阅读时长	添加顶部加载条	自定义鼠标样式
实现点击出现桃心	修改网页底部的小图标	去掉页面底部的强力驱动信息及设置备案信息	添加动态背景
增加波浪背景动画	在右上角实现fork me on github按钮	增加回到顶部按钮及显示当前浏览进度	修改顶部菜单与下方信息栏的间隙大小
网站标题栏背景颜色	为博客加上萌萌的	添加DaoVoice实现在线联系	主页文章添加阴影效果
增加本地搜索功能	修改语言	修改菜单及创建分类页	修改主题风格

主题选择

可以到Nexo官方主题页选择自己喜欢的主题，每个主题的使用方法略有不同，所以如果你是跟我一样的小白，建议使用流行热门的主题，这样出现问题网上基本都可以搜到解决方法。
推荐Next主题，我的博客使用的就是Next的主题

Next主题修改

主题安装

Next主题文档页面
目前Next主题的项目分成了两个项目，一个是5.1.4版本以下的，一个是一直更新的，现在已经更新到了6.5，建议直接用最新的，最新版本的主题已经把很多常用的功能集成了，用起来很方便。本篇文章是基于Next 6.5进行的修改与展示。
Next主题项目页面(v5.1.4)
v6.5版本页面
方法1：项目页面点击releases，找到最新版本的主题zip包并下载，解压放到博客根目录/themes重命名文件夹为next，两版本通用。

方法2：博客根目录打开命令行，用5.1版本输入命令

git clone https://github.com/iissnan/hexo-theme-next themes/next

6.5版本输入命令：

git clone https://github.com/theme-next/hexo-theme-next themes/next

安装完成后，打开博客配置文件修改最上方的theme项为next。

主题配置文件是根目录/themes/next目录下的_config.yml文件。
修改完成后命令行输入hexo s本地运行一下看是否生效。

主题修改

修改语言

修改博客配置文件下的language项为zh-CN

这里要注意一下，看一下主题文件夹内的languange文件夹中中文的配置文件叫什么名字，Next主题有些版本的叫zh-Hans那这里就填zh-Hans，Next最新版本中用的是zh-CN，故这里填写zh-CN

修改菜单及创建分类页

修改主题配置文件下的menu项，按需要打开菜单。例如我需要把标签页面打开，就把tags项前面的#去掉就行了。

Hexo s运行一下可以看到菜单多了一个标签项。但是此时还不行，只是有了入口。点击标签菜单，会显示：

因为只有了入口，但还没有标签页面，需要在命令行输入如下命令：hexo new page tags新建出标签页。

同样的道理，开启分类页的时候要输入hexo new page categories来新建出分类页。

修改主题风格

Next自带四种主题风格，可以在主题配置文件搜索Scheme项，将需要的风格前的#去掉，注意只能开启一个风格。

设置作者头像

编辑主题配置文件，搜索修改字段 avatar， 值设置成头像的链接地址。可以设置成在线的图片地址。也可以把图片放在本地。
方法1：
在线图片设置：现在有一张网络图片， 使用百度上随便搜的。


方法2：
本地设置：放置在source/images目录下，设置为url: /images/avatar.jpg

这个rounded项可以设置头像为圆形，设置为ture后会自动根据头像的尺寸将头像变化为圆形或者椭圆，头像图片为正方形的话则为圆形。长方形的话长宽相差越大，椭圆越明显。
设置opacity的值控制头像的透明度，值为0 - 1。
rotated项为头像旋转，设置为true，则鼠标指到头像时头像会旋转。

设置作者昵称与站点描述

这个比较简单。设置博客配置文件中的author为昵称，description为描述。
同理，subtitle为副标题，keywords为关键词，timezone为时区，可以按需求填写。

设置代码高亮主题

NexT 使用 Tomorrow Theme作为代码高亮，共有5款主题供你选择。 NexT 默认使用的是 白色的 normal 主题，可选的值有 normal，night， night blue， night bright， night eighties
更改 主题配置文件中的highlight_theme 字段，将其值设定成你所喜爱的高亮主题即可。

侧边栏社交链接

侧栏社交链接的修改包含两个部分， 配置在 主题配置文件 中。social字段为连接，格式为显示文本: 链接地址 || Font Awesome图标名称
例如：

图标名称 是 Font Awesome 图标的名字（不必带 fa- 前缀）。enable 选项用于控制是否显示图标，你可以设置成 false 来去掉图标。例如: 百度: https://baidu.com || firefox
Font Awesome图标可以到Font Awesome查看

开启打赏功能

主题自带支付宝跟微信及比特币打赏功能，只需要主题配置文件 中填入 微信和 支付宝 收款二维码图片地址即可开启该功能。
搜索reward字段，将wechatpay及alipay字段前面的#去掉即可。在source文件夹中放置支付宝跟微信收款码并修改文件名字即可。reward_comment自带为打赏按钮上方的文字&