首页 > 分享 > 博客运用Hexo

博客运用Hexo

萌宠菠菠乐园
2024-08-11 15:09

——转载链接见最下方

1，前言

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

2，炫酷特效

2.1，博客小宠物

效果如图：

lNWCkT.md.png

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，点击爱心效果

在 themeshexo-theme-spfksourcejs 下新建文件 love.js，在 love.js 文件中添加以下代码：

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

在 themeshexo-theme-spfklayoutlayout.ejs 文件末尾添加以下代码：

<script type="text/javascript" src="/js/love.js"></script>

3.完成以上操作后，当我们点击鼠标的时候就可以看见爱心的特效了

2.3，点击烟花在 themesmaterial-xsourcejs 目录下新建一个 fireworks.js 的文件，里面写入以下代码：

然后在 themesmaterial-xlayoutlayout.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()) + ")"

然后在 themeshexo-theme-spfklayoutlayout.ejs 文件末尾添加以下代码：

<script type="text/javascript" src="/js/click_show_text.js"></script>

ltLxfI.md.png