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: truenum: 8 #随机封面数量，前num张path: #path可以任意修改img1: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover1.JPGimg2: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover2.jpgimg3: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover3.jpgimg4: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover4.jpgimg5: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover5.JPGimg6: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover6.JPGimg7: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover7.JPGimg8: https://cdn.jsdelivr.net/gh/Justlovesmile/CDN2/post/cover8.JPGlogo: false #如果不要直接设置成false
第三步，自定义
第二步中的num和path均可以任意修改，例如，如果想要减少对应的图片数量为4张：
cover:enable: truenum: 4 #随机封面数量，前num张path: #path可以任意修改img1: 换上自己的图片url1img2: 换上自己的图片url2img3: 换上自己的图片url3img4: 换上自己的图片url4logo: false #如果不要直接设置成false
如果你想要自定义其他的，步骤和我这篇文章的一样，只需要找到对应的代码位置，一般在layout和source里面，再修改就行了，注意ejs的用法
下一篇文章想要介绍博客添加告示板
Hexo博客 | Ayer主题采用随机图片作为博客封面背景相关推荐
- Hexo博客+ayer主题+部署giteepage
演示地址:https://soandend.gitee.io/blog/ 文章目录 一. 所需的软件和平台 二. 安装说明 三. 检验是否成功安装 四. Hexo的安装 五. Git的配置 六. He ...
- Hexo博客Ayer主题自定义配置
Ayer主题,下面是我的部分配置,可以参考,希望能帮到你
- 如何在 WordPress 博客文章中隐藏 Pinterest 图片
您想学习如何在 WordPress 中隐藏 Pinterest 图片吗? Pinterest 是一种为您的博客增加流量的好方法,但在您的帖子中显示 Pinterest 图像会使您的内容难于阅读. 在本 ...
- 博客园页面定制html代码,你要的博客园主题都有！！！
基于最近很多小伙伴加我微信想要我的博客园主题,那我就把博客园主题整理一下,送给喜欢的小伙伴,园友们喜欢可以收藏,关注,博客园主题仅供参考,博主顺便再多说一句,虽然我可以分享给你们,但是我更愿意你们加我 ...
- php随机调用百度背景图片,如何在网页中调用岁月小筑随机图片API——背景图片...
简介 本次以随机图片API中的环境背景图片为例子,调用地址为: https(推荐): https://img.xjh.me/random_img.php?type=bg&ctype=natur ...
- hexo博客yilia主题 如何自定义个人博客的背景图片
hexo博客yilia主题 博客背景的设置 个人博客系列文章目录 hexo博客yilia主题 所有文章模块缺失最新解决方案 hexo+yilia博客报错post.categories forEach ...
- 给hexo个人博客 next主题添加背景图片
前几天没事自己通过hexo加github搭建了一个自己的个人博客,用的是next主题,发现挺好用,捣鼓了半天终于把全部全部配置完了,但是想改给自己的博客添加一张背景图片,在网上找了很久没找到相关的资料 ...
- hexo博客matery主题的个性化配置
文章目录 一.matery主题的下载与安装 二.基本配置 1.根目录下的 `_config.yml` 1.1. title 1.2. deploy与theme 2.themes目录下的`_config ...
- hexo博客matery主题个性化配置
hexo博客个性化配置 参考博客 CDN加速:在页脚底部添加又拍云图片logo 博客文章开头format格式 修改hexo new post格式的方法 hexo s手机端查看 修改博客标题在手机端的字 ...
最新文章
- 3星|《终身成长》：成长型思维让人进步，固定型思维让人固步自封。有新意的励志书，但有锤子模式的嫌疑。...
- dirname(__FILE__) 的使用总结
- 开始学习jQuery和准备工作
- springmvc新建拦截器
- ghost还原固态硬盘_最完整用GHOST安装UEFI(GPT)引导的系统请关注收藏
- 别人家的程序员是如何使用 Java 进行 Web 抓取的？ 1
- 【java】线程的简单使用以及注意的问题
- 一个计算机自动作图程序
- 汇编语言王爽实验17
- Windows Kernel Programming Windows内核编程(一)
- BOS 系统 定区关联客户功能实现
- 安装Centos8设置基础软件仓库时出错
- Redis trouble21 -- aof持久化导致redis命令阻塞
- SICP习题2.6 题目理解
- android方向传感器 指南针,Android如何实现电子罗盘(指南针)方向传感器的应用
- 工作日志----统一工号补充了啦
- 算法：去除英文文本中重复单词
- 送你一个励志故事—掌握这些你也可能拿到腾讯offer
- ADOBE AIR是什么？
- Fastformer论文解读
热门文章