NexT 文章随机背景图

摘要

NexT 主题做为 Hexo 博客中相当受欢迎的主题之一,得益于它简洁精致的外观,丰富多样的设置。不过相比与动态博客而言仍然少了许多重量级的功能。之前笔者介绍了 Hexo 文章加密的配置方法,今天作者来介绍 Hexo 博客随机背景头图的设置方法

效果

p1

p2

鉴于笔者并没有完全弄懂 NexT 主题的 layout,因此作者的思路仍然是通过运行 js 的方式来生成随机背景

添加 js 文件

大致思路是,先给出一个静态的图片链接列表,然后用 js 生成随机数,然后把这个下标对应的图片用 getElementsByClassName 方法给对应的标签的背景图片添加属性。js 代码如下

var imgArr=[
    "https://.../001.png",
    "https://.../002.png",
    "https://.../003.png",
    "https://.../004.png",
    "https://.../005.png",
    "https://.../006.png"
]; 
var task=document.getElementsByClassName("post-block");
for(var i=0;i<task.length;i++){var idx=parseInt(Math.random()*(imgArr.length));// 生成随机数
    task[i].style.backgroundImage="url("+imgArr[idx]+")"; 
    task[i].style.backgroundPosition="top";// 图片置顶部
    task[i].style.backgroundRepeat="no-repeat";// 防止图片重复拼接
    task[i].style.backgroundSize="100%";
}

事实上笔者在调试 js 的时候没有直接把这个 js 文件部署上去,而是在油猴上新建脚本来调试,这样就方便了很多。最后要部署到博客上,请参考 Hexo 博文加密 一文,使用类似添加 js 的方法即可

更好的随机方式是数组乱序,这样不容易在同一页面出现相同头图

var imgArr=[
    "https://.../001.png",
    "https://.../002.png",
    "https://.../003.png",
    "https://.../004.png",
    "https://.../005.png",
    "https://.../006.png"
];
for (let i = 1; i < imgArr.length; i++) {// 数组乱序
    const random = Math.floor(Math.random() * (i + 1));
    [imgArr[i], imgArr[random]] = [imgArr[random], imgArr[i]];
}
var task=document.getElementsByClassName("post-block");
for(var i=0;i<task.length;i++){//var idx=parseInt(Math.random()*(imgArr.length));
    var idx=i%imgArr.length;
    task[i].style.backgroundImage="url("+imgArr[idx]+")";
    task[i].style.backgroundPosition="top";
    task[i].style.backgroundRepeat="no-repeat";
    task[i].style.backgroundSize="100%";
}

两种 js 都可行

关于图片

为了防止标题看不清,笔者给图片加了一个半透明效果。而为了追求简洁性与速度,笔者并没有使用 css 遮罩来达到半透明背景图片的效果,而是直接使用 PS 在图片上做修改。而且使用 PS 的另一个好处就是可以自定义半透明的区域

当然,笔者使用 linux 系统,使用在线 PS 的网站进行图片的编辑。这里推荐一个:photopea. 透明遮罩的方法自己百度啦

然后就可以用自己喜欢的图片来做头图啦~


 上一篇
[POI2010]GIL-Guilds [POI2010]GIL-Guilds
摘要 之前文化课要准备月考,颓了一会儿 Hexo 博客配置,现在考完了,刷点水题恢复一下 给一张无向图,要求你用黑白灰给点染色,且满足对于任意一个黑点,至少有一个白点和他相邻;对于任意一个白点,至少有一个黑点与他相邻,对于任意一个灰点
2019.04.02
下一篇 
Hexo 文章加密 Hexo 文章加密
摘要 Hexo 作为简洁高效的静态博客生成,却没有足够安全的博文加密插件。本文记录了笔者一步步探索 Hexo 在文章源代码上加密的过程 效果展示密码是 helloworld 哦~ 不要妄图查看源代码获取内容哦~ 一级二级三级四级五级六级
2019.03.23
  目录