hexo添加动态背景

发现

本来想为 hexo 设置背景图片，又不想单调的只有一张图，碰巧发现知乎有个问题：哪里有获取随机图片的服务接口？，因此就准备加到博客里面，这样也好看一些。

注意这张图的地址是api，返回是随机的。

资源整理

免费的 api

如果有兴趣可以右键打开试试呢

• https://unsplash.it/1920/1080/?random
• https://api.ixiaowai.cn/gqapi/gqapi.php
• https://img.xjh.me/random_img.php?type=bg&ctype=nature
• https://source.unsplash.com/user/erondu/1920x1080
• http://lorempixel.com/1920/1080/
• https://picsum.photos/1920/1080
• https://uploadbeta.com/api/pictures/random/
• https://uploadbeta.com/api/pictures/random/?key…
• https://img.xjh.me/random_img.php

CSS 设置

我的主题是Hexo的Next主题，我是在themes\next\layout\_layout.swig的_layout.swig的body上加了个样式bosy-class

然后在themes\next\source\css\main.styl中添加如下样式：

/* 媒体查询，屏幕太窄了显示背景图片也无用 */
@media (min-width: 992px){
  // body 处理
  .body-class{
    /* 背景图片的地址 */
    background: url(https://api.dujin.org/bing/1920.php);
    /* 不重复 */
    background-repeat: no-repeat;
    /* 背景图像的位置固定 */
    background-attachment: fixed;
    /* 背景居中 */
    background-position: 50% 50%;
    /* 全部覆盖 如果图片小会拉伸，图片大会压缩*/
    background-size: cover;
  }
}

接下来就可以看到背景图片的地址每次都会刷新变化了。