博客框架优化

本文最后更新于：2022年4月25日 晚上

🌈Hexo博客优化

🧐博客构架简介

基于Hexo博客框架和Fluid: 一款 Material Design 风格的 Hexo 主题

下面记录了博客细节基本所有优化

⛔注意：博客优化引用的所有素材和代码基本上都搬在此网站上面了~（引用的接口就是此网站在用的）

🤡添加原装的Live2D模型

效果之一如下

先进入博客主目录下面

1
cd /···/···/hexo

在博客主目录安装 hexo-helper-live2d

1
npm install --save hexo-helper-live2d

去下载更多的Live2D模型：下载地址

解压后直接把packages下的文件夹全部复制粘贴到博客目录下的node_moduels目录中

在博客根目录下找到主题配置文件_config.yml打开并编辑（在最后一行后面顶格加入这一段代码）

1
2
3
4
5
6
7
8
9
10
11
live2d:
  enable: true  #是否显示看板娘
  pluginModelPath: assets/
  model:
    use: live2d-widget-model-koharu  #模板目录，在node_modules里，就刚刚复制的那些，直接更换名字即可
  display:
    position: left   #宽高以及位置可以自己调
    width: 200 
    height: 300
  mobile:
    show: true 	#是否在手机进行显示

🙆‍♀️PS：要换成其他的样子？

就只修改上面的代码use:这一项，后面跟的就是刚刚复制的那些文件夹，具体它们都是怎么样的，自己可以多试试就好啦~

1
use: 刚刚复制的那些其中一个的文件夹名  #模板目录，在node_modules里，就刚刚复制的那些，直接更换名字即可

最后重新对Hexo插件“重启”一下就好

1
hexo clean && hexo g

🥳添加外源的Live2D模型

先进入博客主目录下面的目录下

1
cd /···/···/hexo/themes/[主题名字我这里的是Fluid]/layout

找到layout.ejs来进行更改

找到<body>下面直接添加以下代码

1
2
3
4
5
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome/css/font-awesome.min.css"/>
<script src="https://portb.kbai.cc/live2d/widget/autoload.js"></script>
######这句代码可有可无######
<script src="https://cdn.jsdelivr.net/npm/jquery/dist/jquery.min.js"></script>
###########################

最后刷新一下网页可以了

🌸樱落背景特效添加

依然进入博客主目录下面的目录下

1
cd /···/···/hexo/themes/[主题名字我这里的是Fluid]/layout

找到layout.ejs来进行更改（如上图，跟添加外源的Live2D模型代码一样，往后追加就行）

1
<script async src="https://portb.kbai.cc/hexo&kbai/sakura.js"></script>

🏹鼠标指针轨迹

继续找到layout.ejs来进行更改（如上图，跟添加外源的Live2D模型代码一样，往后追加就行）

1
<script async src="https://portb.kbai.cc/hexo&kbai/sbhuadong.js"></script>

🏹鼠标指针样式更换

继续找到layout.ejs来进行更改（如上图，跟添加外源的Live2D模型代码一样，往后追加就行）

1
<link rel="stylesheet" href="https://portb.kbai.cc/hexo&kbai/mousezhizhen.css"/>

💥点击爆炸效果

继续找到layout.ejs来进行更改（如上图，跟添加外源的Live2D模型代码一样，往后追加就行）

1
2
3
<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 9999; pointer-events: none;" ></canvas>
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
<script src="https://script-1256884783.file.myqcloud.com/cursor/explosion.min.js"></script>

🪅会变的网站标题

继续找到layout.ejs来进行更改（如上图，跟添加外源的Live2D模型代码一样，往后追加就行）

1
<script src="https://portb.kbai.cc/hexo&kbai/titlestl.js"></script>

➰我有更好玩的优化？

那就请你在下方评论出来吧~

让折腾党多开一开眼界~！！🥳🥳🥳

📣特别声明

此文章全部都是依靠自己的学习理解来写的原创文章，难免可能会出现有错误的地方，

如果大家以后阅读的时候发现有问题，那就麻烦到下方评论区来进行错误指出，使错误尽快做出改正，

在此，感谢大家的阅读与支持！🤝💦🎉

🍻支持一下

觉得我写的好的话可以支持一下我哦~持续关注我，会更新其他好玩且实用的项目。

👋如果我能帮助到你，那就请我喝杯🧋呗~👇👇👇

blog
资源

本博客所有文章除特别声明外，均采用 CC BY-SA 4.0 协议 ，转载请注明出处！