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