博客运用Hexo-Next主题美化（中）-CSDN博客

本文链接：https://blog.csdn.net/jomes_wang/article/details/111628198

这篇博客详细介绍了如何使用Hexo-Next主题进行博客美化，包括炫酷特效如博客小宠物、爱心点击效果、烟花动画等，背景和网页图标设置，文章内部优化如代码块样式、链接文本样式，以及便利小工具如阅读百分比、站内搜索等功能的实现。通过这些步骤，可以让你的博客更加个性化和吸引人。

摘要由CSDN通过智能技术生成

——转载链接见最下方

1，前言

大家是不是因为那个博客宠物才找到这篇博客的呢！！好，现在我为大家揭开谜底！为你们开启博客的精彩世界！

2，炫酷特效

2.1，博客小宠物

效果如图：

1.输入如下命令获取 live2d ：

npm install --save hexo-helper-live2d

2 输入以下命令，下载相应的模型，将 packagename 更换成模型名称即可，更多模型选择请点击此处，各个模型的预览请访问原作者的博客 .

npm install packagename

3.打开站点目录下的 _config.yml 文件，在最末尾添加如下代码：

live2d:
    enable: true
    scriptFrom: local
    model: 
    use: live2d-widget-model-haruto #模型选择
    display: 
    position: right  #模型位置
    width: 150       #模型宽度
    height: 300      #模型高度
    mobile: 
    show: false      #是否在手机端显示
    react:
    opacity: 0.7       #设置透明度

2.2，点击爱心效果

在 themes\hexo-theme-spfk\source\js 下新建文件 love.js，在 love.js 文件中添加以下代码：

打开(点此)获取其中love.js中的代码
在 themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加以下代码：
```

<script type="text/javascript" src="/js/love.js"></script>
```
3.完成以上操作后，当我们点击鼠标的时候就可以看见爱心的特效了

2.3，点击烟花

在 \themes\material-x\source\js 目录下新建一个 fireworks.js 的文件，里面写入以下代码：

然后在 \themes\material-x\layout\layout.ejs 文件中写入以下代码：

<canvas class="fireworks" style="position: fixed;left: 0;top: 0;z-index: 1; pointer-events: none;" ></canvas> 
<script type="text/javascript" src="//cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script> 
<script type="text/javascript" src="/js/fireworks.js"></script>

2.4，添加鼠标点击显示字体效果

在 themes/hexo-theme-spfk/source/js 下新建文件 click_show_text.js，在 click_show_text.js 文件中添加以下代码：

打开(点此)获取其中 click_show_text.js 中的代码

2.其中的社会主义核心价值观可以根据你自己的创意替换为其他文字

如果想要每次点击显示的文字为不同颜色，可以将其中 color 值进行如下更改：

"color": "rgb(" + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + "," + ~~(255 * Math.random()) + ")"

然后在 themes\hexo-theme-spfk\layout\layout.ejs 文件末尾添加以下代码：

<!--单击显示文字-->
<script type="text/javascript" src="/js/click_show_text.js"></script>

2.5，添加彩色滚动变换字体

打开(点此)获取其中 添加彩色滚动变换字体.js 中的代码，将其复制到自己想要有字的地方。点击此处查看next主题的目录框架。

2.6，浏览器网页标题恶搞

当用户访问你的博客时点击到了其他网页，我们可以恶搞一下网页标题，呼唤用户回来，首先在目录 themes\material-x\source\js 下新建一个 FunnyTitle.js 文件，在里面填写如下代码：

// 浏览器搞笑标题
var OriginTitle =