Hexo博客实现随机文章功能

前言

想要给博客增加一些趣味性？让读者可以随机浏览你的文章是个不错的选择。
本文将详细介绍如何在Hexo博客中实现随机文章功能效果。

功能介绍

随机文章功能可以让访问者随机浏览博客中的任意一篇文章,这不仅能增加博客的趣味性,还能提高文章的曝光率,让一些早期的优质文章也有机会被读者发现。

实现步骤

创建主题文件

首先在主题的layout目录下创建random.ejs文件

<%
// 获取所有文章
const posts = site.posts.data;
// 随机选择一篇文章
const randomPost = posts[Math.floor(Math.random() * posts.length)];
%>

<script>
// 立即重定向到随机文章
window.location.href = '<%- url_for(randomPost.path) %>';
</script>

<noscript>
  <div style="text-align: center; padding: 20px;">
    <p>请点击下方链接访问随机文章：</p>
    <a href="<%- url_for(randomPost.path) %>"><%- randomPost.title %></a>
  </div>
</noscript>

创建页面文件

在source目录下创建random文件夹,并在其中创建index.md

---
title: 随机文章
date: 2023-12-31 12:00:00
type: random
layout: random
comments: false
---

添加菜单项

menu:
  random:
    path: /random
    text: 手气
    icon: fas fa-random

功能说明

工作原理

当访问者点击”随机文章”菜单时,会访问/random页面
模板会从所有文章中随机选择一篇
通过JavaScript自动跳转到选中的文章
如果浏览器禁用了JavaScript,则显示一个可点击的链接

待优化

性能优化: 如果博客文章很多,可以考虑缓存文章列表
用户体验: 可以添加加载动画
功能扩展: 可以按分类或标签随机

常见问题

页面闪烁

如果出现页面闪烁,可以添加loading效果

<style>
.loading {
  text-align: center;
  padding: 20px;
}
.loading:after {
  content: '正在随机选择文章...';
  color: #666;
}
</style>
<div class="loading"></div>

重复访问

如果想避免连续访问同一篇文章,可以使用sessionStorage记录历史

// 获取历史记录
const history = JSON.parse(sessionStorage.getItem('randomHistory') || '[]');
// 过滤已访问的文章
const availablePosts = posts.filter(post => !history.includes(post.path));
// 如果所有文章都访问过,清空历史
if (availablePosts.length === 0) {
  sessionStorage.removeItem('randomHistory');
  availablePosts = posts;
}
// 随机选择文章
const randomPost = availablePosts[Math.floor(Math.random() * availablePosts.length)];
// 记录到历史
history.push(randomPost.path);
sessionStorage.setItem('randomHistory', JSON.stringify(history));