hugoのshuffleを使って記事の並び順をランダムにする方法

記事内に商品プロモーションを含む場合があります。
2019.4.10 13 views

HUGO で関連する記事

ブログの記事に関連する記事の一覧を載せていることがあります。

一時期、最近書いた記事を一覧表示していましたが、古い記事が埋没してしまいそうな気がしたので、同じカテゴリ内の記事をランダムに表示するようにしてみました。

効果としては、人気の記事から過去に書いた記事も見てもらえるようになるといいなと思っています。

hugo には shuffle という関数があります。これを利用すると実現できそうです。

shuffle の構文

shuffle COLLECTION

shuffle に.Site.Pagesなどのコレクションを渡してあげると、中のデータを文字とおりシャッフルしてくれるようです。

実際のコード

このサイトではすでに、関連する記事の部分を shuffle で並び替えていますので、コードを紹介します。

<section>
    {{ if ne .Section "" }}
    <h1><a href="/{{ .Section }}/">{{ with .Site.GetPage "section" .Section }}{{ .Title }}{{ end }}</a>関連記事</h1>
    {{ range first 10 ( shuffle ( where .Site.Pages "Section" .Section ) ) }}
    {{ if .IsPage}}
    <hr>
    <div>
        <a href="{{.Permalink}}">{{ .Title }}</a>
    </div>
    {{ end }}
    {{ end }}
    {{ end }}
</section>

ポイントとなる箇所は、次のコードです。

shuffle ( where .Site.Pages "Section" .Section )

.Site.Pages"Secstion"が現在表示しているページの.Sectionと同じページデータを取得して、shuffle()でランダムに並び替えています。

まとめ

実際の効果は最近変更したばかりですので、よくわかりませんが、内部リンクが行き渡るようになると思います。

shuffle の内容ですが、もしかすると偏り出ているかもしれませんが、厳密にやろうとすると hugo の機能だけでは難しい気がしますので、必要に迫られるまでやらないです。

あと、関連する記事の並び順をランダムにしても、HUGO は静的ページ生成エンジンなので表示するたびに一覧の内容が切り替わることにはならないので注意です。
記事の生成タイミングでランダムになるだけです。

短い間隔で記事を生成してサーバに上げていけば、ときどき変わるという感じにはできます。

関連記事