404 页面添加猜你喜欢系统
Quote
跟着ChatGPT做的，太简单了，这里记录下，技术已死啊啊啊 演示效果：把本文路径随便修改在访问即刻触发
✅ 步骤 1：创建自定义 404 页面模板
在项目的 overrides/ 目录中创建或编辑 404.html 文件，内容如下：
404.html
{#-
This file was automatically generated - do not edit
-#}
{% extends "main.html" %}
{% block content %}
<h1>页面未找到</h1>
<p>很抱歉，您访问的页面不存在。</p>
<h2>猜你可能感兴趣的文章：</h2>
<ul id="suggested-posts">
<!-- 推荐文章将由 JavaScript 动态插入 -->
</ul>
{% endblock %}
✅ 步骤 2：添加推荐文章的 JavaScript
在 docs/assets/js/404.js 中添加以下 JavaScript 代码，用于动态插入推荐的博客文章链接：
404.js
document.addEventListener("DOMContentLoaded", function () {
const posts = [
{ title: "如何使用 MkDocs 构建博客", url: "/blog/posts/how-to-use-mkdocs/" },
{ title: "Markdown 写作技巧", url: "/blog/posts/markdown-tips/" },
{ title: "部署 MkDocs 到 GitHub Pages", url: "/blog/posts/deploy-to-github-pages/" },
{ title: "使用 MkDocs Material 主题的技巧", url: "/blog/posts/mkdocs-material-tips/" },
{ title: "MkDocs 插件推荐", url: "/blog/posts/mkdocs-plugins/" }
// 添加更多文章链接
];
// 随机选择三篇文章
const shuffled = posts.sort(() => 0.5 - Math.random());
const selected = shuffled.slice(0, 3);
const container = document.getElementById("suggested-posts");
selected.forEach(post => {
const li = document.createElement("li");
const a = document.createElement("a");
a.href = post.url;
a.textContent = post.title;
li.appendChild(a);
container.appendChild(li);
});
});
✅ 步骤 3：在 mkdocs.yml 中引入 JavaScript 文件
在 mkdocs.yml 文件中，添加以下配置：