网站更新

更新内容

  • 更方便的管理博文
  • 添加了live2d看板娘
  • 添加了网页动态背景

详细过程

参考文章

因为本博客的主题是ayer并不是next所以在添加动态背景的时候稍作了更改。

安装并配置hexo-admin插件

废话不多说直接上正题

1. 在hexo目录下开git bash键入以下内容并回车

1
npm install --save hexo-admin

2. 启动项目

1
hexo s

启动项目前记得构建网页文件
然后用浏览器访问localhost:4000/admin

3. 配置hexo admin

为了安全,不能让所有人访问这个地址都能够有administrator的权限,所以要添加用户名与密码,

其实这个admin的管理界面不会被部署到服务器,所以个人认为设不设置其实都可以

在localhost:4000/admin/网页中点击右上角的settings,然后点击下面的 Setup authentification here 。
接着填写好用户名和密码还有secret phrase

这个secret phrase算是给密码加密的一串公钥,如果你密码忘记了可以在配置文件中用密文和secret phrase找一个在线解码bcrypt的工具来解码

然后就可以看到后面加密后的信息,接着复制到项目的核心配置文件_config.yml中,粘贴到最后面。
保存之后重新运行hexo就看到了效果


添加动态背景

本博客使用的是点线动态背景 废话你们都看到了

操作

此处需要改动主题文件,对自己操作不放心的话可以先进行备份,不过方法其实很简单。

  • 1.打开主题文件夹下的layout文件夹下的layout.ejs或layout.swig文件
  • 2.在body标签之间添加一行代码
1
2
3
<body>
# body标签是这个样子的
</body>

就是这样一行代码

1
2
<script type="text/javascript"
color="0,0,255" opacity='0.7' zIndex="-2" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.0/canvas-nest.min.js"></script>

配置项说明

  • color:线条颜色,默认为"0,0,0";三个数字分别代表(R,G,B)
  • opacity:线条透明度(0~1),默认为0.5
  • count:线条总数量,默认为150
  • zIndex:背景的z-Index属性,该css属性用于控制所在层的位置,默认为-1

添加live2d看板娘

1. 在博客根目录下执行

1
npm install --save hexo-helper-live2d

2. 下载model文件

3. 在博客的站点配置文件_config.yml添加配置项

1
2
3
4
5
6
7
8
9
10
11
live2d:
enable: true
pluginModelPath: assets/
model:
use: live2d-widget-model-epsilon2_1 #模板目录,在node_modules里
display:
position: right
width: 150
height: 300
mobile:
show: false #是否在手机进行显示

4. 构建网页,开始部署

1
hexo g && hexo d

至此网站更新完成


后记

在搞定动态背景和看板娘的时候真的遇到了很大的问题,一个是swig的代码不能在ejs中用,另一个是添加了看板娘和动态背景之后神奇的发现看板娘不见了! 按下浏览器的F12赶紧审查元素,意外的发现看板娘的布局还是在网页上的。
第一感觉是动态背景的布局把看板娘吞了,于是尝试把代码放在layout的各种地方,然后发现还是不行。
无奈之下只能打开审查元素仔细检查;检索之后发现控制台中live2d报错!内容还是找不到模型的资源文件???
重新配置了一遍live2d发现node_modules里还真没有模型 /手动扶脸
最后看板娘出来了我就把动态背景的js放回了body了
谢天谢地我终于把bug修完了
审查元素真好用

打赏
  • 版权声明: 本博客所有文章除特别声明外,均采用 Apache License 2.0 许可协议。转载请注明出处!
  • © 2020 凛梦
  • Powered by Hexo Theme Ayer
  • PV: UV:

请我喝杯奶茶吧~

支付宝
微信