hexo的美化与优化

上一章记录了如何配置环境与安装hexo，结束时我们已经拥有了一个可以访问的网站，现在，我们来完善它！本文所需要的的软件和问价都已经打包，关注公众号回复hexo美化即可获取下载链接.

目录

一、安装喜欢的主题
二、细节美化

一、安装喜欢的主题

博客生成后，默认的主题是自带的landscape，我们可以在官方网站上找自己喜欢的主题，博主之前在使用hexo的时候用过两套主题，一个是Next主题，一个是基于WordPress的主题修改的Sakura，本文以Next主题做示例，主题下载链接见下面。
sakurat主题
Nexo主题
主题是开源在国外平台，如果下载失败或者不知道怎么下载的，公众号回复hexo美化直接下载

二、细节美化

下载之后文件夹改名为next，放在网站目录下的theme文件夹下，用记事本或者notepad++打开网站根目录下的_config.yml文件，找到主题选项，将主题名称更改为你安装的主题名称。注意：输入主题名称的时候，需要打一个空格！

往下找，一般是第96行

现在使用生成命令重新生成博客

hexo clea 
hexo g
hexo s

二、细节美化

左上角或右上角实现fork me on github

样式一
样式二
文中链接如果打不开的话，公众号回复hexo美化自取

2.挑选自己喜欢的样式复制代码，粘贴到主题文件夹中layout下的_layout.swihg中，notepad++打开此文件，将代码复制在最后面</body>前，并将href改为你github地址

详细路径为：你的博客文件夹\themes/next/layout/_layout.swig

3.添加2d看板娘.

• 不知道什么是看板娘？看我网站的左下角那个动漫人物，可以逗她，也可以聊天.
• hexo官方是有看板娘的，已经封装为插件，但只是模型，不能说话，不能换装，功能少，我就不再重复官方版本的。
• 点击这里下载插件，下不了的就去公众号，将下载的文件解压到博客目录主题文件夹下的source下
  详细地址是：themes/next/source
• 修改autoload.js文件，用notepad++打开
• 将

const live2d_path = "https://cdn.jsdelivr.net/gh/stevenjoezhang/live2d-widget@latest/";

• 修改为

const live2d_path = "/live2d-widget/";

• 然后在/themes/next/layout/_layout.swing文件中，新增如下内容：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>

• 在主题配置文件中，新增如下内容：

live2d:
  enable: true

• 如果想修改大小、位置、格式、文本链接，可以修改 waifu-tips.js 、 waifu-tips.json 和 waifu.css文件
• 配置完成后，清除缓存，重新部署到你的网站里，刷新就可以看到效果了.