Hexo博客 | Ayer主题采用随机图片作为博客封面背景

我的博客：https://blog.justlovesmile.top

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

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

• Type.js打字机效果: 添加打字机效果
• 博客中能用到的代码: 关于font awesome图标字体库，使用动态图标，添加网页运行时间，全站变黑白，鼠标点击特效，网页标题的动态效果，网页樱花特效，鼠标触动音乐特效
• 博客中能用到的代码（二）: 添加旋转小人和每日诗句
• 博客美化之Valine: 关于valine添加一言，每日诗句，自定义表情，自定义背景
• 添加二级菜单: 添加二级菜单的简单方法
• 添加博客加密: 文章添加密码功能
• Hexo博客美化之随机封面: 封面图片随机更换功能

说明

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

步骤

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

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

<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项，例如我的是

# 封面配置
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张：

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

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

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