V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
hahagood
V2EX  ›  程序员

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

  •  
  •   hahagood · 2022-12-19 13:29:48 +08:00 · 2193 次点击
    这是一个创建于 704 天前的主题,其中的信息可能已经有所发展或是发生改变。

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

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

    有哪位见过这种主题吗?

    13 条回复    2022-12-19 21:46:45 +08:00
    janus77
        1
    janus77  
       2022-12-19 13:42:58 +08:00
    hugo 是静态生成,生成的内容是固定的吧
    yumusb
        2
    yumusb  
       2022-12-19 13:46:41 +08:00 via Android
    做一个 json 然后每次用 js 随机抽取一个
    dimlau
        3
    dimlau  
       2022-12-19 14:17:14 +08:00
    如前面网友所说,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
        4
    weeei  
       2022-12-19 14:20:05 +08:00
    静态博客的特性决定了做不到这一点。
    hahagood
        5
    hahagood  
    OP
       2022-12-19 14:58:19 +08:00
    @dimlau
    多谢多谢. 实在是太有用了.
    我想做一个编故事的网站,
    每次打开主页, 都会随机展示一个以前已经发布的故事.
    所以就不需要 summary. 只要展示一篇完整的故事就可以了.
    这儿的"summary", 是不是可以换成"content"?
    hahagood
        6
    hahagood  
    OP
       2022-12-19 15:31:12 +08:00
    @dimlau
    刚才测试了一下. 似乎这一段代码的作用, 是在我运行
    '''
    hugo server -D
    '''
    的时候, 才会进行排序, 而不是在浏览器端刷新页面的时候重新排序.
    我需要的是在每次打开页面的时候, 都会随机出现一个完整的页面. 不是-摘要-
    hahagood
        7
    hahagood  
    OP
       2022-12-19 15:45:27 +08:00
    受上面的启发, 找到了一篇文章, 正在慢慢琢磨. (因为我不懂代码. 哈...)
    https://dev.to/idontremember/add-a-random-page-button-to-hugo-site-45e9
    Add a Random Page Button to Hugo Site - DEV Community 👩‍💻👨‍💻
    dimlau
        8
    dimlau  
       2022-12-19 17:41:21 +08:00
    @hahagood 是的,上面稍微解释过,要想刷新即有变化最简单就是 js 脚本了吧,比如我在自己博客里实现的文章无刷新加载:

    https://kaix.in/0001/
    hahagood
        9
    hahagood  
    OP
       2022-12-19 18:47:39 +08:00
    @dimlau
    这个真的不错. 棒...
    learningman
        10
    learningman  
       2022-12-19 20:15:54 +08:00
    能做到,编译的时候生成一个索引 json ,js 从这个 json 里抽一个出来放到首页。
    alexkuang
        11
    alexkuang  
       2022-12-19 21:00:50 +08:00
    理论上是做得到的,但抽取文章的操作必须在前端做,想展示随机的完整页面,可以生成一个含有文章 URL 的 JSON array ,然后随机跳转;也可以直接从 JSON 中获取所有文章信息在客户端渲染。
    nightwitch
        12
    nightwitch  
       2022-12-19 21:32:52 +08:00 via Android
    你这个需求明显更适合用动态博客做。。
    hahagood
        13
    hahagood  
    OP
       2022-12-19 21:46:45 +08:00
    @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.
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5265 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 24ms · UTC 07:25 · PVG 15:25 · LAX 23:25 · JFK 02:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.