有没有一种 hugo 主题, 在主页上随机展示一篇 post, 而不是顺序展示一系列的 post title 和摘要.

[hahagood]

最近几天在搭建一个博客网站, 选定的是 hogo + cloudflare pages + github, 主题是选的 even, 还不错.

不过现在想要弄一个在主页上随机展示一篇文章的主题, 因为我不会写代码, 只能找个现成的用用.

有哪位见过这种主题吗?

[janus77]

hugo 是静态生成，生成的内容是固定的吧

[yumusb]

做一个 json 然后每次用 js 随机抽取一个

[dimlau]

如前面网友所说，hugo 生成静态页面，所以一旦生成了主页，直到妳下一次重新生成，它都一直保持不变。也就是说，「随机」列出来的一篇文章，也是直到下次更新时才会有变化。

如果你可以接受这一点的话，我搜索到你说的 even 主题，这一段内容稍做修改即可：

```
<section id="posts" class="posts">
{{/* (index .Site.Paginate) */}}
{{- $paginator := .Paginate (where (where .Site.RegularPages "Type" "post") ".Params.hiddenfromhomepage" "!=" true) }}
//此处增加代码
{{- range $paginator.Pages -}}
{{ .Render "summary" }}
{{ end -}}
</section>
```

增加代码：

```
{{ range ((shuffle (where .Site.RegularPages "Type" "post")) |first 1) }}
{{ .Render "summary" }}
{{ end }}
```

如果想每次刷新页面都有变化，那可能就得用其他方式了。

[weeei]

静态博客的特性决定了做不到这一点。

[hahagood]

@dimlau
多谢多谢. 实在是太有用了.
我想做一个编故事的网站,
每次打开主页, 都会随机展示一个以前已经发布的故事.
所以就不需要 summary. 只要展示一篇完整的故事就可以了.
这儿的"summary", 是不是可以换成"content"?

[hahagood]

@dimlau
刚才测试了一下. 似乎这一段代码的作用, 是在我运行
'''
hugo server -D
'''
的时候, 才会进行排序, 而不是在浏览器端刷新页面的时候重新排序.
我需要的是在每次打开页面的时候, 都会随机出现一个完整的页面. 不是-摘要-

[hahagood]

受上面的启发, 找到了一篇文章, 正在慢慢琢磨. (因为我不懂代码. 哈...)
https://dev.to/idontremember/add-a-random-page-button-to-hugo-site-45e9
Add a Random Page Button to Hugo Site - DEV Community 👩‍💻👨‍💻

[dimlau]

@hahagood 是的，上面稍微解释过，要想刷新即有变化最简单就是 js 脚本了吧，比如我在自己博客里实现的文章无刷新加载：

https://kaix.in/0001/

[hahagood]

@dimlau
这个真的不错. 棒...

[learningman]

能做到，编译的时候生成一个索引 json ，js 从这个 json 里抽一个出来放到首页。

[alexkuang]

理论上是做得到的，但抽取文章的操作必须在前端做，想展示随机的完整页面，可以生成一个含有文章 URL 的 JSON array ，然后随机跳转；也可以直接从 JSON 中获取所有文章信息在客户端渲染。

[nightwitch]

你这个需求明显更适合用动态博客做。。

[hahagood]

@alexkuang
太对了.
刚才问了下 ChatGPT, 他也是这么说的. 哈哈....
我不知道在这儿怎么贴代码, ChatGPT 有些例程的

Yes, it is possible to use JavaScript to display a random post on the homepage of your Hugo + Cloudflare + GitHub blog site. Here is an example of how you can do this:

First, you will need to create a list of all the posts that you want to be included in the random selection. You can do this by querying the Hugo API for a list of all your posts and storing the results in a JavaScript array.

Next, you will need to write a function that selects a random post from the array of posts. This can be done using the Math.random() function to generate a random number, and then using this number to select a random post from the array.

Finally, you will need to call this function whenever the homepage is refreshed. This can be done using the window.onload event in JavaScript, which is triggered whenever the page is loaded.