惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

U
Unit 42
罗磊的独立博客
博客园 - 聂微东
T
The Blog of Author Tim Ferriss
博客园 - 司徒正美
Stack Overflow Blog
Stack Overflow Blog
F
Fortinet All Blogs
A
About on SuperTechFans
腾讯CDC
Apple Machine Learning Research
Apple Machine Learning Research
B
Blog RSS Feed
IT之家
IT之家
V
Visual Studio Blog
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
宝玉的分享
宝玉的分享
C
Check Point Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Vercel News
Vercel News
爱范儿
爱范儿
Microsoft Security Blog
Microsoft Security Blog
月光博客
月光博客
T
Tailwind CSS Blog
The Cloudflare Blog
Hugging Face - Blog
Hugging Face - Blog

爱吃肉的猫

那就,再相逢 Butterfly的魔改教程:最新评论页 离歌不夜天 前端分享 - 滑动阻尼效果 Butterfly的魔改教程:右键菜单 音乐分享 - doi微醺氛围 Butterfly的魔改教程:动态相册页 近况记事 - 11 微信公众号:Ai大模型让回复更具智能化 近况记事 - 10 PWA:让你的网站变成桌面应用APP Healthy Love Butterfly的魔改教程:关于本站 近况记事 - 9 Butterfly的魔改教程:待办清单 TrollStore - 不掉签助手 近况记事 - 8 Twikoo评论回复邮件模版 过一个很特别的七夕 The Young Boy and the Sea Butterfly的魔改教程:文章订阅页 思考题目:混乱是阶梯 近况记事 - 7 Butterfly的魔改教程:即刻短文页 Butterfly的魔改教程:loading加载动画 差旅游记 再见,不惑之年:二十又一 近况记事 - 6 Butterfly的魔改教程:自定页数跳转 堆友AI作图:3D资源设计平台,堆出你的未来
Butterfly的魔改教程:随机阅读一篇文章
亦小封 · 2023-04-20 · via 爱吃肉的猫

在最早的版本里,我使用的是洪哥的魔改教程而来的。
在这修修补补的版本更新中,有很多功能需要进行优化整合。又在新版本中,有很多功能会使用到文章数据的获取。以至于需要重新对这个功能动手重写。

效果预览

点击右上角骰子按钮体验。

创建数据

小节开始前,提醒事项。
对于初次魔改新手,建议先过一遍:魔改前置教程:添加自定义css和js文件

  • 新建[主题目录]/scripts/helpers/articles_json.js文件,并新增以下内容
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47






'use strict'

hexo.extend.generator.register('thePages', function(locals) {
const postData = locals.posts
.filter(post => post.random !== false)
.map(post => {
const date = new Date(post.date);
const formattedDate = date.toISOString().split('T')[0];
return {
title: post.title || "暂无标题",
time: formattedDate,
update: post.updated ? new Date(post.updated).toISOString().replace('T', ' ').split('.')[0] : formattedDate,
link: post.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/'),
cover: post.cover || hexo.theme.config.default_top_img
}
})
.sort((a, b) => new Date(b.time) - new Date(a.time))

const exclude = ['.js', '.wechatOA', '.json'];
const pageData = locals.pages
.filter(page => {return page.random !== false && !exclude.some(ext => page.source.endsWith(ext));})
.map(page => {
const date = new Date(page.date);
const formattedDate = date.toISOString().split('T')[0];
return {
title: page.title || "暂无标题",
time: formattedDate,
link: page.permalink.replace(/^(?:\/\/|[^/]+)*\//, '/').replace(/\/index\.html$/, '/')
}
})

const jsonData = {
post: postData,
page: pageData
}

return {
path: 'articles.json',
data: JSON.stringify(jsonData)
}
})
  • 打开[博客根目录]/source/js/meuicat.js文件,新增以下内容。
1
2
3
4
5
6
7
8
9
10
let ArticleData

const toRandomPost = async (to = false) => {
if (!ArticleData) ArticleData = await fetch('/articles.json').then(res => res.json())

if (!to) pjax.loadUrl(ArticleData.post[Math.floor(Math.random() * ArticleData.post.length)].link)



}
  • [主题目录]/layout/includes/header/nav.pug文件中,新增以下内容。
1
2
3
4
5
6
7
8
9
  #menus
+ #random-post
+ span.site-page(href='javascript:void(0)' onclick='toRandomPost()' title='随机文章' alt='随机阅读一篇文章')
+ i.MeuiCat.icon-dice-fill
if theme.search.use
#search-button
span.site-page.social-icon.search
i.fas.fa-search.fa-fw
span= ' ' + _p('search.title')

参考文献

引用站外地址,注意辨别

Hexo的Butterfly魔改教程:随机网页跳转(无缝版)

这篇文章介绍了如何在Hexo的Butterfly主题中进行随机网页跳转的魔改,使用的方法是通过Hexo函数直接生成js并执行跳转函数,解决了原有插件的一些问题。同时提供了两种实现方式,适用于开启或未开启pjax的用户。

引用站外地址,注意辨别

随机访问一篇文章的实现

随着文章慢慢的增多,后面的文章似乎就变的很少被看到,于是我想起来了这个随机访问一篇文章的功能。

更新历史

  • 20241224 更新:封装通用函数,优化逻辑实现。

Butterfly的魔改教程:随机阅读一篇文章

此文章版权归 MeuiCat 所有,完整转载,请注明来源!