先新建一个switch-banner.ejs文件

我先用Everything搜索*.ejs，然后随便复制一个ejs文件（最好是D盘的）到桌面。

然后用Notepad++打开，全部删除原来的代码，然后粘贴以下代码：

1
2
3
4
5
6
7
8
9
<script>
    <% if (theme.switch_banner){ %>
    var number_of_banners = 6;
    var randnum = Math.floor(Math.random() * number_of_banners + 1);
    document.getElementById("banner").style.backgroundImage = "url(/css/images/banner" + randnum + ".jpg)";
    <% } else { %>
    document.getElementById("banner").style.backgroundImage = "url(/css/images/banner.jpg)";
    <% } %>
</script>

保存后放到themes\你的主题目录\layout\_partial\，我就把他拖进D:\hexo\themes\landscape-plus\layout\_partial目录下。

调用switch-banner.ejs文件

编辑themes\你的主题目录\layout\_partial\header.ejs,在最后一行（</header>标记）之前加入一行<%- partial('switch-banner') %>即可。

1
2
3
4
    </div>
  </div>
  <%- partial('switch-banner') %>
</header>

最后，编辑你的主题配置文件themes\你的主题目录\_config.yml，在里面添加：

1
switch_banner: true

添加随机图片

在网上找6张高清图片（我找的是1920×1080），拖进themes\你的主题目录\source\css\images里，分别命名为banner1.jpg、banner2.jpg、banner3.jpg、banner4.jpg、banner5.jpg、banner6.jpg

最后在编辑themes/你的主题目录/source/css/_partial/header.styl，在background: url(banner-url) center #000的前面打两个f反斜杠注释掉。

1
2
3
4
5
6
7
8
9
10
#banner
  position: absolute
  top: 0
  left: 0
  width: 100%
  height: 100%
  //background: #21282E
  //background: url(banner-url) center #000
  background-size: cover
  z-index: -1

保存后重新部署。

OK! Enjoy!

参考：http://kuangqi.me/tricks/hexo-banner-auto-switcher/