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

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

效果预览

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

创建数据

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

新建[主题目录]/scripts/helpers/articles_json.js文件，并新增以下内容

/**
 * MeuiCat
 * generate json - pages_posts_random
 * modify by yife.Liang
 */

'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文件，新增以下内容。

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)

  // 未开启pjax则需使用下面这段代码
  // if (!to) window.open(ArticleData.post[Math.floor(Math.random() * ArticleData.post.length)].link)
}

在[主题目录]/layout/includes/header/nav.pug文件中，新增以下内容。

  #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')