管理者だけに表示させるセクションを作る

• WordPress の場合、管理者（ログインユーザー）だけに表示させる内容を切り替えることができる
  • （画面上部に固定表示される）管理画面へアクセスするための管理画面バー（アドミンバー）なども含む
• Hugo の場合、.Site.IsServer メソッドを使うことによって、ローカルサーバーではその内容を表示させつつも、最終的にデプロイする際にはその内容を出力しないといった切り分けができる
• 具体的には、以下のようなリンクをローカルサーバーサイトだけに表示させることで、各ページのコンテンツ管理が容易になる
  • 当該ページの .md ファイルをエディタで開く
  • 内部リンク用の Markdown 構文をクリップボードにコピーする etc.

Hugo で WordPress ライクな管理画面バーを作る

テンプレート

• baseof.html あたりに以下のようなコードを記述する

{{- if .Site.IsServer }}
<div class="admin-bar">
  <ul>
    <li><a href="vscode://file{{.Site.Data.common.localPath}}/content/{{ .File }}">
      <img src="/img/icon/edit.svg" alt="edit">
    </a></li>
    <li><a href="vscode://file{{.Site.Data.common.localPath}}/content/{{ .File }}">
      <img src="/img/icon/link.svg" alt="link">
    </a></li>
  </ul>
</div>
{{- end }}

グローバルで参照する環境変数を設定する

• data ディレクトリに toml などの設定ファイルを作成し、そこで変数を定義するとグローバルから参照できるようになる
  -呼び出しは {{.Site.Data.ファイル名.変数名}}

{{.Site.Data.common.localPath}}

.md ファイルを VS Code で開く

• <a href="vscode://file/ファイル絶対パス"> とすることで、当該ファイルを直接 VS Code で開くことができる

Markdown (.md) ファイルを VS Code で開くリンクを表示する - まくまくHugoノート

スタイル

• 適当なスタイルを当てる

.admin-bar {
    // display: none;
    position: fixed;
    top: 0;
    right: 0;

    ul {
        @extend %flex;
    }
    a {
        background: #000;
        display: block;
        padding: 10px;

        &:hover {
            background: #555;
        }
    }
    img {
        height: 16px;
    }
}