Hugoのランディングページをマークダウン・ファイル／Markdown Fileで記述する

C:\Hugo\Benkyo\content_index.mdに記述する

• 記事一覧を羅列するので、index.mdではなく、_index.mdにする必要がある。
  • _index.md：リストページになる。記事一覧を羅列するためには、_index.mdを選択する必要がある。
  • index.md：シングルページになる。
• _index.mdまたはindex.mdのレイアウトを制御するHTMLは、\layouts\index.htmlである。

_index.mdまたはindex.mdのフロントマターと記事一覧部分

+++
date = "2025-03-11T23:20:55+09:00"
lastmod = "2025-03-12T02:01:00+09:00"
slug = "2025-03-11-23-20-55-09-00"
categories = ["●●●"]
tags = ["●●●タグ"]
title = "●●●タイトル"
+++

## 記事一覧〔更新日時を基準にした降順＝最新がトップにくる〕

{{　←　この改行を取り去る。
< details-with-posts class="button-1" summary="［全記事｜更新順］を見るor閉じる" >　←　この改行を取り去る。改行を取り去ってしまうと、実際にショートコードが機能してしまい、コードが見えなくなる。
}}

C:\Hugo\Benkyo\layouts\shortcodes\details-with-posts.htmlの中身

<details>
  <summary class="{{ .Get "class" }}">{{ .Get "summary" }}</summary>
  <div>
    <small>
      <ul>
        {{ $pages := .Page.Site.RegularPages.ByLastmod.Reverse }}
        {{ if not $pages }}
          <li>No pages found.</li>
        {{ else }}
          {{ range first 8000 $pages }}
            {{ .Render "lili" }}
          {{ end }}
        {{ end }}
      </ul>
    </small>
  </div>
</details>

C:\Hugo\Benkyo\layouts_default\lili.html

<!-- オリジナル -->
<li><lastmod>{{ with .Site.Params.lastmodFormat }}{{ $.Lastmod.Format . }}{{ else }}{{ .Lastmod.Format "2006-01-02 15:04" }}{{ end }}</lastmod> - <a href="{{ .Permalink }}">{{ .Title }}</a></li>

C:\Hugo\Benkyo\config.toml

# ▼日付時刻フォーマット▼
dateFormat = "2006-01-02 15:04"
lastmodFormat = "2006-01-02 15:04"
# ▼CSSのカスタマイズとJavaScript▼
custom_css = ["css/customize.css","syntax.css"]
custom_js = ["js/sorttable.js","js/jquery-3.5.1.min.js"]

C:\Hugo\Benkyo\static\css\customize.cssの中身

.button-1 {
	display: inline-block;
	width: auto;
	padding: 8px;
	margin: 5px;
	height: auto;
	text-align: center;
	text-decoration: none;
	line-height: 22px;
	outline: none;
}
.button-1::before,
.button-1::after {
	position: absolute;
	z-index: -1;
	display: block;
	content: '';
}
.button-1,
.button-1::before,
.button-1::after {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	-webkit-transition: all .3s;
	transition: all .3s;
	border-radius: 4px;
}

.button-1 {
	background-color: #C4E502;
	color: #333;
}
.button-1:hover {
	background-color: #1d56a5;
	color: #fff;
}