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

推荐订阅源

宝玉的分享
宝玉的分享
NISL@THU
NISL@THU
E
Exploit-DB.com RSS Feed
L
LINUX DO - 热门话题
L
Lohrmann on Cybersecurity
K
Kaspersky official blog
Project Zero
Project Zero
Cisco Talos Blog
Cisco Talos Blog
T
The Exploit Database - CXSecurity.com
P
Palo Alto Networks Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
T
Threatpost
S
Schneier on Security
G
GRAHAM CLULEY
The Hacker News
The Hacker News
T
Threat Research - Cisco Blogs
Scott Helme
Scott Helme
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
P
Privacy & Cybersecurity Law Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
Cyberwarzone
Cyberwarzone
C
CERT Recently Published Vulnerability Notes
T
Tor Project blog
AWS News Blog
AWS News Blog
Simon Willison's Weblog
Simon Willison's Weblog
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
爱范儿
爱范儿
P
Privacy International News Feed
云风的 BLOG
云风的 BLOG
P
Proofpoint News Feed
S
Securelist
G
Google Developers Blog
The Last Watchdog
The Last Watchdog
Google Online Security Blog
Google Online Security Blog
美团技术团队
F
Fortinet All Blogs
小众软件
小众软件
Recorded Future
Recorded Future
V
Visual Studio Blog
B
Blog RSS Feed
H
Help Net Security
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
Google DeepMind News
Google DeepMind News
Blog — PlanetScale
Blog — PlanetScale
博客园 - 聂微东
Stack Overflow Blog
Stack Overflow Blog
Martin Fowler
Martin Fowler
Latest news
Latest news
Spread Privacy
Spread Privacy
H
Heimdal Security 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资源设计平台,堆出你的未来 【QD-Today】自建私有自动签到服务 Long time no see Butterfly的魔改教程:聊天记录页 Butterfly的魔改教程:个性定位信息 近况记事 - 5 Butterfly的魔改教程:好物推荐页 CDN加速 二刷《想见你》 网络言论不是法外之地 近况记事 - 4 深夜训斥 近况记事 - 3 近况记事 - 2 日常打理的那些事 随笔 · 封 布柒糖FM项目进展报告 清明路雨纷纷 TA - 仲夏夜的荒原 重构记录 - 4 近况记事 Butterfly的魔改教程:评论弹窗 2021款 Model Y 近两年用车总结 重构记录 - 3 百日祭 避风的港湾 Emoji表情大全 iCat-APP 开源记录 Butterfly的调整教程:文章外挂标签美化 iOS修改 - 万铲铲的致富之路 Markdown 基础教程 从你的全世界路过 小米摄像头!避!雷! VuePress 搭建教程 Hexo跳过指定文件渲染 百度贴吧每日自动签到 重构记录 - 1 GitHub Desktop提交报错 快速批量处理重命名 Git连接仓库常用命令 Ubuntu处理deb命令 掘金自动签到并挖矿 一个简洁的橙色调个人简介 我的猫以前也是流浪猫 布柒糖FM 最新指北 初学写个了油猴脚本 幽灵404页面 PC游戏 · 植物大战僵尸 语言包 · 越狱篇 砸壳多开 · 越狱篇 HuiRan Cursors 手动关闭Win10自动更新 iPhone XR 完美越狱 成功实例 三年的跌撞 关于《小橘妈妈》 魔改前置教程:添加自定义css和js文件 Hexo 博客添加RSS插件 Butterfly的魔改教程:导航栏魔改美化
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 所有,完整转载,请注明来源!