前言

随着文章慢慢的增多，后面的文章似乎就变的很少被看到，于是我想起来了这个随机访问一篇文章的功能。
果然，多浏览他人博客能出现更多的想法。

我首先想到的就是洪哥的随机文章功能，没错，又是洪哥
其实我想到的解决方案是通过ajax自动获取文章URL，然后随机选择一个进行访问。但是为了避免浪费时间，我选择先看一下洪哥的实现思路，省的再重复造轮子。
洪哥使用的是创建一个random.hml文件，然后在里面弄了一个函数，里面包含了他的文章URL。不知道是自动生成的还是手动添加的。不过不管是怎么弄的，我都不打算使用这个办法。

于是我决定按我自己的思路来：使用AJAX来获取文章URL。
现在的问题就是怎么能获取到所有文章的URL。
首先我就想到了RSS订阅，这里面肯定会有文章URL。
但是获取之后才发现rss文件仅有20篇文章的URL，于是我又试了一下sitemap。
刚打开sitemap的时候猛地一失望，因为它没有文章标题，然后我愣了一会儿，嗯？感觉好像哪里不对——我根本不需要标题啊！有URL不就可以了

后来发现rss限制20条原来是可以设置的，不过还是不推荐使用rss，内容太多了。

获取sitemap之后又发现了一个问题，获取的URL数量比文章多很多，检查了一下发现原来是有各种页面和主页的URL。虽然处理一下也可以用，但是我还是选择暂时搁置。

新增：

@林木木大佬写了sitemap的方案，如果你在使用sitemap且不想下载baidusitemap可以看这里：利用 SiteMap 随机访问站内页面

相同功能的还有@Heo大佬在同一天发布的文章：Hexo的Butterfly魔改：随机网页跳转（无缝版）

最后我把目标锁定在了baidusitemap上面，有了上次的经验我没有上来就直获取数据，而是先打开看一下有没有其他不需要的URL。
然后就得到了一个好消息：全是文章URL！！于是就很快的写出了一个随机文章的函数。
效果可点击右上角小星星图标查看

教程

首先我们需要先下载baidusitemap插件
运行命令：npm install hexo-generator-baidu-sitemap --save
相信大部分人的hexo版本都在3以上，所以不需要在config.yml进行配置。

插件地址：https://www.npmjs.com/package/hexo-generator-baidu-sitemap

添加随机文章函数

然后在我们的自定义js文件中添加一个js函数
自定义js看这篇文章：Hexo博客添加自定义css和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
// 发现有时会和当前页面重复，加一个判断
function randomPost() {
    fetch('/baidusitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {
        let ls = data.querySelectorAll('url loc');
        while (true) {
            let url = ls[Math.floor(Math.random() * ls.length)].innerHTML;
            if (location.href == url) continue;
            location.href = url;
            return;
        }
    })
}
// 阅读文章时看了一遍写的代码，发现加个数组和一个遍历完全没必要，改成下面这个即可。
// function randomPost() {
//     fetch('/baidusitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {
//         let ls = data.querySelectorAll('url loc');
//         location.href = ls[Math.floor(Math.random() * ls.length)].innerHTML
//     })
// }
// 旧代码
// function randomPost() {
    // fetch('/baidusitemap.xml').then(res => res.text()).then(str => (new window.DOMParser()).parseFromString(str, "text/xml")).then(data => {
    //     let ls = data.querySelectorAll('url loc');
    //     let list = [];
    //     ls.forEach(i => list.push(i.innerHTML))
    //     location.href = list[Math.floor(Math.random() * ls.length)]
    // })
// }

添加导航栏按钮

魔改用户

添加好js之后，我们可以在右上角的按钮区添加一个按钮方便用户点击。

注意：此方法只适合魔改的用户，没魔改的使用可能会乱码。没有css基础谨慎添加。
没有魔改的用户可以继续往下看，我专门准备了另一个方法。（还是那么贴心）

打开themes\butterfly\layout\includes\header\nav.pug，在适当位置添加：

1
2
3
#randomPost
  a.site-page.social-icon.search(href="javascript:;" onclick="randomPost()" title="随机访问一篇文章")
    i.fas.fa-circle-notch.fa-fw

普通用户

没有魔改的用户可以在配置中添加一个导航按钮

1
2
menu:
  随机访问: javascript:randomPost(); || fa-solid fa-shuffle

如果你只想显示图标不想显示文字的话，你可以这么写(图标后面会有一个小空格，不影响)

1
2
menu:
  "": javascript:randomPost(); || fa-solid fa-shuffle

如果有什么问题可以评论，我看到后会尽快进行回复。