hexo的美化与优化

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

目录

一、安装喜欢的主题

二、细节美化

一、安装主题

1.博客生成后,默认的主题是自带的landscape,我们可以在官方网站上找自己喜欢的主题,博主之前在使用hexo的时候用过两套主题,一个是Next主题,一个是基于WordPress的主题修改的Sakura,本文以Next主题做示例,主题下载链接见下面。

sakurat
Next
主题是开源在国外平台,如果下载失败或者不知道怎么下载的,公众号回复hexo美化即可获得国内下载链接

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

往下找,一般是第96行
修改地址

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

hexo clea 
hexo g
hexo s

二、细节美化

1.左上角或右上角实现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文件
  • 配置完成后,清除缓存,重新部署到你的网站里,刷新就可以看到效果了.

公众号回复hexo美化

Last modification:April 20th, 2020 at 09:15 pm
如果觉得我的文章对你有用,请随意赞赏