Hexo博客 | 采用随机图片作为博客封面背景，真香！

Justlovesmile

发布于 2021-12-13 20:56:33

2.3K0

发布于 2021-12-13 20:56:33

文章被收录于专栏：云+分享云+分享

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

说明

本文是以我现在使用的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的用法