hexo博客美化

最新推荐文章于 2024-04-26 09:49:42 发布

于小猿Sup

最新推荐文章于 2024-04-26 09:49:42 发布

阅读量698

点赞数 1

文章标签：前端 css html

本文链接：https://blog.csdn.net/weixin_51002159/article/details/121729137

版权

博客添加live2d小人

1.安装模块

在hexo博客根目录下，打开Git，输入下面命令：

npm install --save hexo-helper-live2d

2.下载live2d模型

模型选择点击此处，模型预览点击此处，这里我用的是live2d-widget-model-hijiki，输入以下命令下载：

npm install live2d-widget-model-hijiki

根据自己的喜好选择相应模型，修改即可。

3.配置`_config.yml`文件

打开hexo根目录下的_config.yml文件，添加如下代码：

live2d:
	enable: true
	scriptFrom: local
	model: 
		use: live2d-widget-model-hijiki #模型选择
	display: 
		position: left  #模型位置
		width: 150       #模型宽度
		height: 300      #模型高度
	mobile: 
		show: true      #是否在手机端显示

4.效果图

在这里插入图片描述

博客添加canvas-nest背景特效

Bamboo主题自带的只有ribbon一种背景特效，nest需要手动添加。

1. 修改主题下的`layout.ejs`文件

仿照ribbon部分的代码

<html>
<head>
	...
</head>
<body>
	...
	...
	<% if(theme.nest.on === true ) { %>
      <script type="text/javascript" color="0,0,0" opacity='0.6' zIndex="-1" count="99" src="//cdn.bootcss.com/canvas-nest.js/1.0.1/canvas-nest.min.js"></script>
    <% } %>

</body>
</html>

2.参数修改

color: 线条颜色, 默认: '0,0,0' ；三个数字分别为(R,G,B)，注意用,分割
opacity: 线条透明度（0~1）, 默认: 0.5
count: 线条的总数量, 默认: 150
zIndex: 背景的z-index属性，css属性用于控制所在层的位置, 默认: -1

3.修改主题下的`_config.yml`文件

同样仿照ribbon代码

ribbon:
  on: false # 关闭ribbon背景特效

nest:
  on: true # 开启nest背景特效

4.效果图

在这里插入图片描述

于小猿Sup

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
hexo博客美化

hexo博客美化
复制链接

扫一扫

hexo博客美化

博客添加live2d小人

1.安装模块

2.下载live2d模型

3.配置_config.yml文件

4.效果图

博客添加canvas-nest背景特效

1. 修改主题下的layout.ejs文件

2.参数修改

3.修改主题下的_config.yml文件

4.效果图

“相关推荐”对你有帮助么？

3.配置`_config.yml`文件

1. 修改主题下的`layout.ejs`文件

3.修改主题下的`_config.yml`文件