hexo的next主题的最新优化_4

前言

前三篇介绍了一些简单点的操作,希望对你们有所帮助,如果实在看不懂,可以扫一扫文章最后的QQ群二维码,有什么问题可以私聊我呦!好的废话就不多说了。我们开始吧!

主题优化_4

添加看板娘

更改的地方:

更改的内容:

第一步:在站点配置文(_config.yml)进入dos命令窗执行:

1
npm install --save hexo-helper-live2d

第二步:请向Hexo的 _config.yml 文件添加如下代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
live2d:
enable: true
scriptFrom: local
model:
scale: 1
hHeadPos: 0.5
vHeadPos: 0.618
display:
superSample: 2
width: 200
height: 400
position: right
hOffset: 0
vOffset: -20
mobile:
show: false
react:
opacity: 0.7

添加Aplayer音乐播放器

更改的地方:

更改的内容:

下载链接:https://github.com/zyh1020/APlayer

1,解压后将dist文件夹复制到themes\next\source文件夹下

2,新建themes\next\source\dist\music.js文件,music.js文件内容如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
const ap = new APlayer({
container: document.getElementById('aplayer'),
fixed: true,
autoplay: false,
loop:'all',
audio: [
{
name: "生僻字",
artist: '陈柯宇',
url: 'http://qiniuyun.zouyuhang.club/music%E8%94%A1%E4%BE%9D%E6%9E%97%20-%20%E6%97%A5%E4%B8%8D%E8%90%BD.mp3',
cover: 'http://qiniuyun.zouyuhang.club/%E7%94%9F%E5%83%BB%E5%AD%97.jpg',

},
{
name: '远走高飞',
artist: '金志文',
url: 'http://qiniuyun.zouyuhang.club/music%E9%87%91%E5%BF%97%E6%96%87%20-%20%E8%BF%9C%E8%B5%B0%E9%AB%98%E9%A3%9E.flac',
cover: 'http://qiniuyun.zouyuhang.club/%E8%BF%9C%E8%B5%B0%E9%AB%98%E9%A3%9E.jpg',

},
{
name: '日不落',
artist: '蔡依林',
url: 'http://qiniuyun.zouyuhang.club/music%E8%94%A1%E4%BE%9D%E6%9E%97%20-%20%E6%97%A5%E4%B8%8D%E8%90%BD.mp3',
cover: 'http://qiniuyun.zouyuhang.club/%E6%97%A5%E4%B8%8D%E8%90%BD.jpg',
},
{
name: '成都',
artist: '赵雷',
url: 'http://qiniuyun.zouyuhang.club/music%E8%B5%B5%E9%9B%B7%20-%20%E6%88%90%E9%83%BD.mp3',
cover: 'http://qiniuyun.zouyuhang.club/%E6%88%90%E9%83%BD.jpg',
}

]
});

3,_layout.swig打开themes\next\layout_layout.swig文件,将下面的内容复制到

1
2
3
4
5
6

```html
<link rel="stylesheet" href="/dist/APlayer.min.css">
<div id="aplayer"></div>
<script type="text/javascript" src="/dist/APlayer.min.js"></script>
<script type="text/javascript" src="/dist/music.js"></script>

隐藏底部强力驱动

更改的地方:

更改的内容:


如何在hexo博客中插入本地图片

第一步:安装插件 可以上传本地图片的插件

1
npm install hexo-asset-image --save

第二步,更改站点配置文件(_config.yml)中的内容

第三步,再运行hexo n "xxxx"来生成md博文时,/source/_posts文件夹内除了xxxx.md文件还有一个同名的文件夹

第四步,最后在xxxx.md中想引入图片时,先把图片复制到xxxx这个文件夹中,然后只需要在xxxx.md中按照markdown的格式引入图片:

1
![你想输入的替代文字](xxxx/图片名.jpg)

如何在hexo插入视频

一般在博客中插入视频,音频还是图片都有本地和网络两种方式。一般图片比较小我采用本地插入,音频是比较大的,所以一般我采用网络的方式插入。下面是以哔哔哩哔哩视频为例。

第一步:将想要插入的视频上传到哔哩哔哩(他没有广告)。

第二步:找到分享按钮如下图:

1
<iframe src="//player.bilibili.com/player.html?aid=53660661&cid=93868411&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

第三步,将代码复制到你想要插入的位置,效果如下


插入音频

插入音频和插入视频是类似的。

第一步:将想要插入的音频上传到网易云音乐(为例)。

第二步:找到分享按钮如下图:

1
<iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=298 height=52 src="//music.163.com/outchain/player?type=2&id=411754401&auto=0&height=32"></iframe>

第三步,将代码复制到你想要插入的位置,效果如下


了解更多

zyh wechat
扫一扫关注微信公众号
你可以打赏我哦!