Hugo でドラフトページの一覧を簡単に確認できるようにする

2024-10-26

やりたいこと

Hugo では、作成途中の記事ページをドラフトとしてマークしておくと、デフォルトで非公開扱いになるので、気軽に記事を書き始めることができます。ただ、ドラフトページがたくさん溜まってくると、自分が中途半端に書き始めた記事が散らばって分かりにくくなってしまいます。そこで、ここでは下記のような仕組みを実装して、Hugo のドラフト機能をより便利に使用できるようにします。

/p/qpcvfzi/img-001.png — 図: ドラフト一覧のページへ移動するボタン

ドラフトの一覧ページに飛ぶための ドラフト記事一覧ボタン をサイドバー上に表示する（上図）
ドラフトの一覧ページでは、最終更新日 や タグ情報 も一緒に表示する
上記は ローカルでの作業中のみ表示する こととする（具体的には hugo server で実行中のみ）

ドラフト記事一覧のページにジャンプするボタンを配置する

ドラフトページへジャンプするためのボタンは、レイアウトファイルから簡単に配置できるように、パーシャルファイルとして作成します。個人的に、ローカルでしか有効にしないコードは、下記のように debug ディレクトリの下に入れるようにしています。そして、全体のコードを if hugo.IsServer の条件で囲むことで、ローカルサーバーで起動しているときのみ出力されるようにしています。

layouts/partials/debug/draft-button.html

{{- if hugo.IsServer -}}
<style>
  .xDraftButton {
    display: block;
    text-align: center;
    width: 100%;
    font-weight: bolder;
    color: white !important;
    background: blue;
    padding: 0.3em 0.5em;
    border-radius: 0.5em;
  }
</style>
<a href="/drafts/" class="xDraftButton">ドラフト記事一覧</a>
{{- end }}

簡単に言えば、このパーシャルは、https://example.com/drafts/ といった URL へのリンクを出力しているだけです。上記では style 要素も含めてしまっていますが、みなさんはちゃんと CSS ファイルでスタイル定義するようにしてください。

このパーシャルファイルを、サイドバーを出力するテンプレートから呼び出します。

layouts/partials/sidebar/all.html（抜粋）

{{ partial "debug/draft-button" . }}

ドラフト記事一覧を表示するページを作成する

ドラフト記事をリストアップするためのショートコードを作成します。下記のようにすれば、フロントマター部分に draft: true と記述された記事のみをループ処理できます。

layouts/shortcodes/list-drafts.html

<ul>
{{- range (where .Site.Pages ".Draft" true) }}
  <li>
    <a href="{{ .RelPermalink }}">{{ .Title }}</a>
    <small>
      ({{ .Lastmod.Format "2006-01-02" }})
      {{ range .Params.tags }}#{{ . }} {{ end }}
    </small>
  </li>
{{- end }}
</ul>

このショートコードを、ドラフト記事一覧のページを生成するための Markdown ファイルから呼び出します。ドラフトボタンのリンク先 URL を /drafts/ にしたので、その URL に合うように、drafts/_index.md というパスに作成します。

content/drafts/_index.md

---
title: "ドラフト記事一覧"
draft: true
---

（ここに本文を書くこともできるよ！）

{{< list-drafts >}}

これで、hugo server -D とサーバーモードで起動したときに、ドラフト記事一覧へのリンクボタンが表示されるようになり、簡単に書きかけの記事を確認できるようになります。ドラフト記事をビルド対象にするために、-D オプションが必要になることに注意してください。

2024-10-26