Hugoメモ

クイックリンク

TODO,バグ,疑問点

検索が機能していない?
CSS調整(見出し)
記事上部に目次を追加

Hugo Tips

バージョン指定してインストール

npm init
npm i -D hugo-installer

npm scriptsにhugo-installer --version 0.126.3を追加して実行

ページ作成コマンド

チャプター作成 : ./bin/hugo/hugo new --kind chapter misc/_index.md
ページ作成 : ./bin/hugo/hugo new misc/hugo.md

custom.css追加

assets/css/custom.css を追加

hugo.tomlに以下を追加

[params]
    custom_css = ['css/custom.css']

Relearn Tips

画像のサイズ指定

[](images/hoge.png?width=10vw)

Markdown Syntax > Images

Chapterページの “Chapter 1” という表示を削除

RelearnではChapterページに強制的に「Chapter {weightの数字}」が表示されるので修正。

layouts/chapter/views/article.htmlをthemeからコピーしてChapterの表示部分を削除

HomeやChapterページの日付を削除

Relearnではページに指定したhideAuthorDateが無視されるバグ

layouts/partials/content-footer.htmlをthemeからコピーして修正

site.Paramsと.ParamsのORを取る用に修正

{{- $hideDate := or site.Params.hideAuthorDate .Params.hideAuthorDate }}
...
  {{- with and (not $hideDate) .Date }}
    {{- $Date = . | time.Format $dateFormat }}
  {{- end }}
...
{{- with $Date }}
  <i class='fa-fw fas fa-calendar'></i> {{ . }}
{{- end }}

lastModの追加

記事ページに日付だけでなく更新日も表示

*.mdのフロントマターにlastmodを追加

+++
title = 'Hugoメモ'
date = 2025-04-26
lastmod = 2025-04-27
+++

これはHugoデフォルトの機能であり、.Lastmodで取得できる

layouts/partials/content-footer.htmlを修正

{{- $updated   := .Lastmod | time.Format $dateFormat }}
...
{{- if and $updated (ne $updated $Date) }}
  &nbsp;|&nbsp;
  <i class="fa-fw fas fa-pen"></i> {{ $updated }}
{{- end }}

updatedとDateが異なる場合のみ表示

faviconの追加

assets/images/favicon.icoを設置するだけ。

https://mcshelby.github.io/hugo-theme-relearn/configuration/branding/logo/index.html

記事上部にtoc追加

記事上部にtoc(Table of contents)を追加します。ただし、HomeやChapterでは除外します。

layouts/_default/views/article.htmlを追加して以下の修正。

// 見出し(heading)の後に以下を追加

  {{ $toc := .TableOfContents }}
  {{ if and
        (not .IsHome)           /* Homeではない */
        (ne .Layout "chapter")  /* Chapterではない */
        (not (in $toc "<nav id=\"TableOfContents\"></nav>")) /* 空ではない */
     }}
    <nav class="article-toc">{{ $toc }}</nav>
  {{ end }}

assets/css/custom.cssでスタイル調整
(親コンテナの50%、最小幅30rem、最大幅100%=親コンテナを超えない)

.article-toc {
  border: 1px solid #b7bece;
  background-color: #eef4f8;
  width: 50%;
  min-width: 30rem;
  max-width: 100%;
}