関連コンテンツ

関連するコンテンツを「See Also」セクションにリストします。

On this page

Hugo は、フロントマターのパラメータに基づいて、ページの関連コンテンツを特定するために一連の要素を使用します。これは、希望するインデックスとパラメータのセットに調整することも、Hugoのデフォルトの関連コンテンツ設定のままにしておくことも可能です。

最大 5 つの関連ページ (同じ date または keyword パラメータを共有する) を一覧表示するには、シングルページのテンプレートに以下のパーシャルと同様のものを含めるだけです。

layouts/partials/related.html

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
<h3>See Also</h3>
<ul>
 {{ range . }}
 <li><a href="{{ .RelPermalink }}">{{ .Title }}</a></li>
 {{ end }}
</ul>
{{ end }}

Related メソッドは、 Page またはオプションマップを引数にとります。オプションマップには、以下のオプションがあります。

indices: 検索するインデックス。
document: 関連コンテンツを検索するドキュメント。
namedSlices: 検索するキーワード
fragments: フラグメントは、“fragments” タイプとして設定されたインデックスに使用される特別なキーワードのリストを保持します。これはドキュメントのフラグメント識別子と一致します。

上記のオプションをすべて使用した架空の例として、以下を挙げておきます。

{{ $page := . }}
{{ $opts := 
  "indices" (slice "tags" "keywords")
  "document" $page
  "namedSlices" (slice (keyVals "tags" "hugo" "rocks") (keyVals "date" $page.Date))
  "fragments" (slice "heading-1" "heading-2")
}}

を参照してください。

Hugo はコンテンツ内の見出しにインデックスを付け、これを使用して関連コンテンツを検索できます。これを有効にするには、以下のように related 設定に fragments 型のインデックスを追加します。

related:
  includeNewer: true
  indices:
  - applyFilter: false
    name: fragmentrefs
    type: fragments
    weight: 80
  threshold: 20
  toLower: false

[related]
  includeNewer = true
  threshold = 20
  toLower = false
[[related.indices]]
  applyFilter = false
  name = 'fragmentrefs'
  type = 'fragments'
  weight = 80

{
   "related": {
      "includeNewer": true,
      "indices": [
         {
            "applyFilter": false,
            "name": "fragmentrefs",
            "type": "fragments",
            "weight": 80
         }
      ],
      "threshold": 20,
      "toLower": false
   }
}

name はオプションのフロントマターのスライス属性にマップされ、ページレベルからフラグメント/見出しレベルへリンクするために使用できます。.
applyFilter が有効な場合、結果の各ページの .HeadingsFiltered はフィルタリングされた見出しを反映します。これは関連コンテンツのリストで見出しを表示したい、以下のような場合に便利です。

{{ $related := .Site.RegularPages.Related . | first 5 }}
{{ with $related }}
  <h2>See Also</h2>
  <ul>
    {{ range $i, $p := . }}
      <li>
        <a href="{{ .RelPermalink }}">{{ .Title }}</a>
        {{ with .HeadingsFiltered }}
          <ul>
            {{ range . }}
              {{ $link := printf "%s#%s" $p.RelPermalink .ID | safeURL }}
              <li>
                <a href="{{ $link }}">{{ .Title }}</a>
              </li>
            {{ end }}
          </ul>
        {{ end }}
      </li>
    {{ end }}
  </ul>
{{ end }}

Hugo では、関連コンテンツのデフォルトの設定を適切に行うことができますが、必要に応じて、グローバルレベルまたは言語レベルで、これを細かく設定することができます。

デフォルト設定

プロジェクトに related 設定がない場合、Hugo の Related Content (関連コンテンツ) メソッドは以下のものを使用します。

related:
  includeNewer: false
  indices:
  - name: keywords
    weight: 100
  - name: date
    weight: 10
  threshold: 80
  toLower: false

[related]
  includeNewer = false
  threshold = 80
  toLower = false
[[related.indices]]
  name = 'keywords'
  weight = 100
[[related.indices]]
  name = 'date'
  weight = 10

{
   "related": {
      "includeNewer": false,
      "indices": [
         {
            "name": "keywords",
            "weight": 100
         },
         {
            "name": "date",
            "weight": 10
         }
      ],
      "threshold": 80,
      "toLower": false
   }
}

なお、タクソノミーとして tags を設定している場合は、上記のデフォルトの設定に tags も 80 という重みで追加されることになります。

カスタム設定も同じ構文で設定する必要があります。

related 設定セクションを追加する場合、完全な設定を追加する必要があります。たとえば includeNewer のみ設定し、残りは Hugo のデフォルトを使用する、ということはできません。

トップレベルの設定オプション

threshold: 0 から 100 の値です。値が低いほど、より多くの一致が得られますが、あまり関連性がない可能性があります。
includeNewer: true に設定すると、現在のページより新しいページ も関連コンテンツのリストに含まれます。これは、新しい関連コンテンツが追加されたときに、古い投稿の出力が変更される可能性があることを意味します。
toLower: true に設定すると、インデックスとクエリの両方でキーワードを小文字にします。これにより、パフォーマンスがわずかに低下しますが、より正確な結果が得られる場合があります。これは、インデックスごとに設定することもできます。

インデックスごとの設定オプション

name: インデックス名です。この値は、ページパラメータに直接マッピングされます。Hugo は文字列 (例では author) とリスト (tags、keywords など)、そして時刻と日付のオブジェクトをサポートしています。
type: . basic (デフォルト) または fragments のいずれか。
applyFilter: . 検索結果に type 固有のフィルタを適用します。これは現在のところ、fragments タイプにのみ使用されます。
weight: このパラメータが他のパラメータに対してどの程度重要であるかを示す、整数の重みです。 0 を指定するとこの指数をオフにすることができ、負の値を指定することもできます。さまざまな値を試して、自分のコンテンツに最適なものを確認してください。
cardinalityThreshold (default 0): . インデックスから一般的なキーワードを削除するために使用されるパーセンテージ (0 ～ 100) です。たとえば、これを 50 に設定すると、インデックス内のドキュメントの 50% 以上で使用されているすべてのキーワードが削除されます。
pattern: これは現在、日付にのみ関連しています。関連コンテンツを一覧表示する場合、時間的にも近いコンテンツをリストしたい場合があります。日付インデックスのパターンとして “2006” (日付インデックスのデフォルト値) を設定すると、同じ年に公開されたページに重みが追加されます。より忙しいブログの場合は、“200601” (年と月) がデフォルトとして適している場合があります。
toLower: 上記を参照してください。

パフォーマンスに関する考慮事項

Hugo のミドルネームは “Fast” ですから、この機能が非常に高速でなければリリースしなかったでしょう。

この機能は、長い間、バックログにあり、多くの人から要望されていました。最近、以下の Twitter のスレッドから開発がスタートしました。

Holy smokes! Build time dropped to 1.2 seconds!
— Scott S. Lowe (@scott_lowe) August 18, 2017

Scott S. Lowe は、タグの intersect テンプレート機能を使って構築した「関連コンテンツ」セクションを削除し、1700 コンテンツページサイズのブログのビルド時間を 30秒から 2秒未満に短縮しました。

これで、高速なライブリロードをあきらめることなく、「関連コンテンツ」セクションの改良版を追加できるはずです。ただし、以下の点に注意してください。

Related メソッドを使用しない場合は、Relate Content (関連コンテンツ) 機能を使用せず、パフォーマンスは以前と同じになります。
.RegularPages.Related などを呼び出すと、同じページコレクション内の検索に再利用される 1 つの逆インデックス (投稿リストと呼ばれることもあります) が作成されます。例として、.Pages.Related の呼び出しに加えてこれを行うと、期待どおりに機能しますが、追加の逆インデックスが 1 つ作成されます。これでも非常に高速ですが、特に大規模なサイトの場合は注意が必要です。

現在、ページコンテンツ のインデックスは作成していません。シャーロックの最後の事件を解決する前に、多くの人に喜んでもらえるようなものを公開しようと考えたのです。

関連コンテンツ