偶然看见了一位大佬的博客给 Hugo 博客添加随机文章入口，发现了他做了这个功能，感觉可以搞一下，于是借鉴了她的代码，感谢。

1 显示效果

在博客的右上角添加了一个叫 STROLL 的随机访问入口，点击后即可随机浏览一篇文章。

2 解决方案

新增 layouts\partials\random.html ，并且在其中添加代码：

 1<script>
 2  function goToRandomPost() {
 3    const pages = [
 4      {{ range ((where .Site.RegularPages "Type" "post")) }}
 5      "{{ .RelPermalink }}?utm_source=random",
 6      {{ end -}}
 7    ];
 8    const rand = Math.floor(Math.random() * pages.length);
 9    window.location.href = pages[rand];
10  }
11</script>

然后再导航栏的html中添加一个入口，在 layouts\partials\nav.html 中添加：

1<li>
2    {{ partial "random" . }}
3    <a class="random" onclick='goToRandomPost()'>STROLL</a>
4</li>

这样就可以完成这个随机访问的功能了~

FEATURED TAGS

ai a记录 branch b站 chroma style gallery cname copy dns drawio fancybox fuse giscus git git bug github githubpages gitignore gpt html hugo jmeter knn lastmod mark mermaid pages python reset shortcodes sqlite ssh svm typora vue3 windows 万历十五年人工智能代码块代码漏洞代码高亮优化冷笑话分支刘慈欣博客搭建博客改造图片放大域名增加新页面大模型天气预报字体字数统计快捷键性能测试悉达多折叠拐点搜索李娟标记流程图深度学习灯箱热力图爱的艺术白盒扫描短代码神经网络与深度学习脚本自定义视频访问量评论进度条阅读笔记随机浏览

Hugo：添加随机浏览文章功能

1 显示效果

2 解决方案

目录

FEATURED TAGS