正在搬运下一页::>_<:: . . .

matery自定义banner图片更换频率


matery自定义banner图片更换频率

主题默认是根据星期数一天一换的,但是随之而来存在一些问题:

  • 比如参与轮换的图片上限只能是7张,我想多放一些
  • 比如我想每小时一更换,亦或每分钟更换呢

让我们来自定义一下吧

1.首先找到静态资源的位置

在主题文件夹中的medias目录里,

hexo\themes\hexo-theme-matery-master\source\medias\banner

这里就是默认存放banner图的位置了。

2.再寻找更换图片的逻辑

找到bg-cover-content.ejs文件,

hexo\themes\hexo-theme-matery-master\layout\_partial\bg-cover-content.ejs

发现每日更换图片的代码:

主要逻辑就是利用字符串拼接路径,其中图片名为星期数+".jpg"

new Date().getTime()方法就是获取当前星期数。

3.开始修改

方便起见还是按照原本的逻辑,稍作修改达到我们的要求即可。

比如我想放10张图片,并且每分钟改变一次

首先是每分钟改变,则先获取 当前的分钟数:

new Date().getMinutes()

然后放10张图片并按顺序重命名好:

最后,由于是10张,可以通过分钟数对10取余,得到余数作为文件名即可

new Date().getMinutes() % 10

如此以来就达到目的了,

4.补充

在原本基础上小改的缺点就是,走不出原本的框架:

  • 比如拼接文件名,最后是”.jpg”,我们放的图片就必须是jpg格式

  • 比如根据时间改变图片的逻辑,我们的图片命名必须是从0开始连续的数字

  • 比如想要用随机数的方法,排除时间因素直接随机出来

这些问题要解决也不难,可以自己重写一下这部分~

5.附:js中Date对象的常用获取时间方法

Date() 返回当日的日期和时间。
getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth() 从 Date 对象返回月份 (0 ~ 11)。
getFullYear() 从 Date 对象以四位数字返回年份。
getYear() 请使用 getFullYear() 方法代替。
getHours() 返回 Date 对象的小时 (0 ~ 23)。
getMinutes() 返回 Date 对象的分钟 (0 ~ 59)。
getSeconds() 返回 Date 对象的秒数 (0 ~ 59)。
getMilliseconds() 返回 Date 对象的毫秒(0 ~ 999)。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
getTimezoneOffset() 返回本地时间与格林威治标准时间 (GMT) 的分钟差。
getUTCDate() 根据世界时从 Date 对象返回月中的一天 (1 ~ 31)。
getUTCDay() 根据世界时从 Date 对象返回周中的一天 (0 ~ 6)。
getUTCMonth() 根据世界时从 Date 对象返回月份 (0 ~ 11)。
getUTCFullYear() 根据世界时从 Date 对象返回四位数的年份。
getUTCHours() 根据世界时返回 Date 对象的小时 (0 ~ 23)。
getUTCMinutes() 根据世界时返回 Date 对象的分钟 (0 ~ 59)。
getUTCSeconds() 根据世界时返回 Date 对象的秒钟 (0 ~ 59)。
getUTCMilliseconds() 根据世界时返回 Date 对象的毫秒(0 ~ 999)。
parse() 返回1970年1月1日午夜到指定日期(字符串)的毫秒数。

6.(推荐⭐)我现在使用的:随机法

有几张图片都可以方便地适应,比如我还是那10张图,那么需要从0~9中产生随机数:

Math.round(Math.random()*9)

ps:当然,不需要被原有的规则禁锢,图片名只要是连续数字,依然可以产生符合要求的随机数,详情参考js的Math.random()方法使用即可。


畅所欲言
 上一篇
在CloudflarePages上部署hexo,再见了vercel 在CloudflarePages上部署hexo,再见了vercel
在CloudflarePages上部署hexo,再见了vercel 刚把网站搬到vercel上,几天后vercel就被墙了ORZ 希望cloudflare依然坚挺 1.注册CloudFlare传送门 2.常规操作:静态文件上传到githu
2021-05-14
下一篇 
git在push时出现”fatal: unable to access 'https://github.com/...“的解决方案 git在push时出现”fatal: unable to access 'https://github.com/...“的解决方案
git在push时出现”fatal: unable to access’ https://github.com/...'“的解决方案 出现这种问题有许多种情况,根据不同错误提示选择不同解决方式 1.OpenSSL SSL_read: C
2021-05-10
  目录