最近美化了一下我的博客首页,每次打开会随机选择一张图片作为封面

发现写了很多博客美化的文章了,罗列了一下

说明

本文是以我现在使用的Ayer主题为例

步骤

第一步 找到对应封面的代码位置

例如,ayer主题的位于hexo\themes\ayer\layout\_partial\ayer.ejs

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="cover-frame">
<!-- 从这里开始,修改代码 -->
<div class="bg-box">
<img src="" alt="" id="cover-pic" />
</div>
<script>
$(document).ready(function(){
var i=Math.floor((Math.random()*<%= theme.cover.num %>));
imgs=[<% for (var i in theme.cover.path){ %> "<%- url_for(theme.cover.path[i]) -%>",<% } %>]
pic=document.getElementById("cover-pic");
pic.src=imgs[i];
})
</script>
<!-- 到这里结束 -->
<div class="cover-inner text-center text-white">
<h1 class="center-text glitch" data-text="<%= config.title %>"><a href="<%- url_for() %>"><%= config.title %></a></h1>
<div id="subtitle-box">
<% if (theme.subtitle.enable) { %>
<span id="subtitle"></span>
<% }else{ %>
<span id="subtitle"><%= theme.subtitle.text %></span>
<% } %>
</div>

第二步,修改配置文件

找到主题下的配置文件_config.yml,修改cover项,例如我的是

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# 封面配置
cover:
enable: true
num: 8 #随机封面数量,前num张
path: #path可以任意修改
img1: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover1.JPG
img2: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover2.jpg
img3: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover3.jpg
img4: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover4.jpg
img5: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover5.JPG
img6: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover6.JPG
img7: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover7.JPG
img8: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover8.JPG
logo: false #如果不要直接设置成false

第三步,自定义

第二步中的num和path均可以任意修改,例如,如果想要减少对应的图片数量为4张:

1
2
3
4
5
6
7
8
9
cover:
enable: true
num: 4 #随机封面数量,前num张
path: #path可以任意修改
img1: 换上自己的图片url1
img2: 换上自己的图片url2
img3: 换上自己的图片url3
img4: 换上自己的图片url4
logo: false #如果不要直接设置成false

如果你想要自定义其他的,步骤和我这篇文章的一样,只需要找到对应的代码位置,一般在layout和source里面,再修改就行了,注意ejs的用法

下一篇文章想要介绍博客添加告示板😀