From 9f2fb3bda733c32995c008bd0f40365e43c348da Mon Sep 17 00:00:00 2001 From: tanaka takashi Date: Sat, 22 Aug 2026 00:18:56 +0900 Subject: feat: Zolaで「たかしの記録」を構築 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Specifications.mdとDesign.mdを実装の基準として、個人アーカイブサイトをZola 0.23.3向けに構築する。 - Home、Notes、Software、About、Tagsの情報設計と専用URLを追加 - Notesの年別アーカイブ、タグ分類、目次、脚注、参考文献、更新日表示を実装 - Softwareの一覧・詳細、cgit/GitHub情報、Notesとの明示的な相互参照を実装 - Tera 2 componentによる再帰TOCと共通partialsを追加 - Minimal Editorial ArchiveのSCSS、レスポンシブ表示、アクセシビリティ対応を追加 - OS設定とlocalStorageに対応するLight/Darkテーマ切替を外部JavaScriptで実装 - Atom/RSS、sitemap、robots.txt、404、favicon、syntax highlightingを設定 - メールアドレスをzola.tomlへ一元化し、AboutとFooterから参照 - 表示名・内部ディレクトリ・変数・URLをSoftware/softwareへ統一 - public/をGit管理対象外とし、外部CDNやNode.js依存を導入しない - zola checkおよびzola buildの成功を確認 --- .gitignore | 1 + content/_index.md | 4 + content/about.md | 26 + content/notes/_index.md | 9 + content/notes/reading-and-questions.md | 12 + content/notes/static-sites-and-maintenance.md | 46 + content/software/_index.md | 9 + content/software/archive-site/index.md | 36 + content/software/archive-site/screenshot.svg | 17 + content/software/content-notes.md | 23 + doc/Design.md | 1851 +++++++++++++++++++++++++ doc/Specifications.md | 995 +++++++------ sass/_archive.scss | 90 ++ sass/_article.scss | 159 +++ sass/_base.scss | 47 + sass/_code.scss | 38 + sass/_footer.scss | 29 + sass/_header.scss | 77 + sass/_layout.scss | 106 ++ sass/_reset.scss | 41 + sass/_software.scss | 70 + sass/_taxonomy.scss | 19 + sass/_theme.scss | 16 + sass/_tokens.scss | 42 + sass/_typography.scss | 42 + sass/_utilities.scss | 25 + sass/main.scss | 14 + static/favicon.svg | 6 + static/js/theme.js | 75 + templates/404.html | 17 + templates/base.html | 26 + templates/index.html | 62 + templates/notes/page.html | 31 + templates/notes/section.html | 31 + templates/page.html | 15 + templates/partials/footer.html | 10 + templates/partials/header.html | 19 + templates/partials/note-list-item.html | 14 + templates/partials/related-notes.html | 11 + templates/partials/related-software.html | 11 + templates/partials/software-list-item.html | 4 + templates/partials/toc.html | 10 + templates/software/page.html | 27 + templates/software/section.html | 24 + templates/tags/list.html | 18 + templates/tags/single.html | 20 + zola.toml | 218 +++ 47 files changed, 3978 insertions(+), 515 deletions(-) create mode 100644 .gitignore create mode 100644 content/_index.md create mode 100644 content/about.md create mode 100644 content/notes/_index.md create mode 100644 content/notes/reading-and-questions.md create mode 100644 content/notes/static-sites-and-maintenance.md create mode 100644 content/software/_index.md create mode 100644 content/software/archive-site/index.md create mode 100644 content/software/archive-site/screenshot.svg create mode 100644 content/software/content-notes.md create mode 100644 doc/Design.md create mode 100644 sass/_archive.scss create mode 100644 sass/_article.scss create mode 100644 sass/_base.scss create mode 100644 sass/_code.scss create mode 100644 sass/_footer.scss create mode 100644 sass/_header.scss create mode 100644 sass/_layout.scss create mode 100644 sass/_reset.scss create mode 100644 sass/_software.scss create mode 100644 sass/_taxonomy.scss create mode 100644 sass/_theme.scss create mode 100644 sass/_tokens.scss create mode 100644 sass/_typography.scss create mode 100644 sass/_utilities.scss create mode 100644 sass/main.scss create mode 100644 static/favicon.svg create mode 100644 static/js/theme.js create mode 100644 templates/404.html create mode 100644 templates/base.html create mode 100644 templates/index.html create mode 100644 templates/notes/page.html create mode 100644 templates/notes/section.html create mode 100644 templates/page.html create mode 100644 templates/partials/footer.html create mode 100644 templates/partials/header.html create mode 100644 templates/partials/note-list-item.html create mode 100644 templates/partials/related-notes.html create mode 100644 templates/partials/related-software.html create mode 100644 templates/partials/software-list-item.html create mode 100644 templates/partials/toc.html create mode 100644 templates/software/page.html create mode 100644 templates/software/section.html create mode 100644 templates/tags/list.html create mode 100644 templates/tags/single.html create mode 100644 zola.toml diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..87174b6 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +/public/ diff --git a/content/_index.md b/content/_index.md new file mode 100644 index 0000000..7db2929 --- /dev/null +++ b/content/_index.md @@ -0,0 +1,4 @@ ++++ +title = "たかしの記録" +description = "日々考えたこととか思ったことを記録します" ++++ diff --git a/content/about.md b/content/about.md new file mode 100644 index 0000000..b0f203c --- /dev/null +++ b/content/about.md @@ -0,0 +1,26 @@ ++++ +title = "About" +template = "page.html" ++++ + +## 名前 + +たかし。ソフトウェアを作り、本を読み、考えたことを記録しています。 + +## このサイトについて + +「たかしの記録」は、日々考えたこと、感じたこと、調べたことと、作成したソフトウェアを長く保存するための個人アーカイブです。更新の速さよりも、あとから読み返せることを大切にしています。 + +## 関心分野 + +- 情報工学とソフトウェア +- 論理学 +- マルクス、資本論、政治経済 +- 地球環境 +- 読書を通じた考察 + +## 連絡先 + +[{{ config.extra.mail }}](mailto:{{ config.extra.mail }}) + +掲載内容は初期サンプルです。公開時に、プロフィールと連絡先を実際の情報へ差し替えてください。 diff --git a/content/notes/_index.md b/content/notes/_index.md new file mode 100644 index 0000000..3e6bb92 --- /dev/null +++ b/content/notes/_index.md @@ -0,0 +1,9 @@ ++++ +title = "Notes" +description = "考えたこと、感じたこと、調べたことの記録。" +sort_by = "date" +template = "notes/section.html" +page_template = "notes/page.html" ++++ + +分野を固定せず、文章として残したいものをまとめています。 diff --git a/content/notes/reading-and-questions.md b/content/notes/reading-and-questions.md new file mode 100644 index 0000000..6f67c0c --- /dev/null +++ b/content/notes/reading-and-questions.md @@ -0,0 +1,12 @@ ++++ +title = "読書の途中にある問いを残す" +description = "結論だけでなく、読んでいる途中の問いを記録することについて。" +date = 2025-11-03 + +[taxonomies] +tags = ["読書", "論理学"] ++++ + +本を読んだあとに結論だけを書こうとすると、文章を残す機会を逃すことがあります。理解できなかった箇所や、別の文章とのつながりも、その時点での大切な記録です。 + +問いを未完成のまま残しておけば、次に同じ主題へ戻ったときの出発点になります。 diff --git a/content/notes/static-sites-and-maintenance.md b/content/notes/static-sites-and-maintenance.md new file mode 100644 index 0000000..10fcd7d --- /dev/null +++ b/content/notes/static-sites-and-maintenance.md @@ -0,0 +1,46 @@ ++++ +title = "静的サイトと長期的な保守" +description = "仕組みを小さく保つことが、長く書き続けるためにどう役立つか。" +date = 2026-08-21 +updated = 2026-08-22 + +[taxonomies] +tags = ["情報工学", "Web"] + +[extra] +related_software = [ + "software/archive-site/index.md", +] ++++ + +個人サイトの目的は、必ずしも最新の機能を提供することではありません。文章を残し、必要なときに読み返せることが中心なら、静的な構成は今もよく合います。 + +## 保守する対象を減らす + +動的な仕組みを採用すると、アプリケーションだけでなく、実行環境やデータベースも保守対象になります。静的サイトでは、公開環境に置くものを生成済みのHTMLとCSSへ限定できます。 + +```text +Markdown → Zola → HTML / CSS / JS +``` + +構成を小さくすることは、機能を諦めることではありません。目的に必要な部分を見極め、理解できる範囲に留める判断です[^small]. + +### 更新の手順 + +記事を書くときの流れも単純です。 + +1. Markdownを追加する +2. `zola check`で内部リンクを確認する +3. `zola build`で静的ファイルを生成する +4. 生成物だけを配信する + +## 読む時間を中心に置く + +長く残す文章では、画面の動きより、行長や余白、リンクの見分けやすさが重要です。このサイトでは[Archive Site](@/software/archive-site/index.md)の設計を通して、その考え方を試しています。 + +## 参考文献 + +1. Zola, *Documentation*. +2. W3C, *Web Content Accessibility Guidelines (WCAG)*. + +[^small]: ここでいう「小さい」は、ファイル数ではなく、運用時に理解すべき境界が少ないことを指します。 diff --git a/content/software/_index.md b/content/software/_index.md new file mode 100644 index 0000000..d7e092e --- /dev/null +++ b/content/software/_index.md @@ -0,0 +1,9 @@ ++++ +title = "Software" +description = "作成したソフトウェアと、その背景や過程。" +sort_by = "date" +template = "software/section.html" +page_template = "software/page.html" ++++ + +ソースコードの正本は自前のcgitで公開し、ここでは人間向けの説明を記録します。 diff --git a/content/software/archive-site/index.md b/content/software/archive-site/index.md new file mode 100644 index 0000000..ef83fe1 --- /dev/null +++ b/content/software/archive-site/index.md @@ -0,0 +1,36 @@ ++++ +title = "archive-site" +description = "文章とソフトウェアを長く残すためのZolaサイト。" +date = 2026-08-21 +include_in_feeds = false + +[extra] +language = ["Zola", "Tera", "SCSS"] +license = "MIT" +source = "https://git.takashi-2521.com/archive-site/" +github_mirror = "https://github.com/takashi-2521/archive-site" +related_notes = [ + "notes/static-sites-and-maintenance.md", +] ++++ + +## 概要 + +NotesとSoftwareを中心に、文章と制作物を長期的に保存するための静的サイトです。 + +![archive-siteの画面構成例](screenshot.svg) + +## 作った背景 + +断片的なメモとソースコードの間にある、設計意図や調査の過程を一か所に残すために作りました。更新頻度が低くても自然に見える、索引としての情報構造を重視しています。 + +## 開発の過程 + +ZolaのSection、Page、Taxonomyをそのまま用い、独自のコンテンツ管理層を作らない方針にしました。表示はTera、スタイルはSCSS、テーマ切替だけを小さなJavaScriptで担当します。 + +## 特徴 + +- 年別のNotesアーカイブ +- タグによる横断的な分類 +- NotesとSoftwareの明示的な関連付け +- JavaScriptなしでも読める本文とナビゲーション diff --git a/content/software/archive-site/screenshot.svg b/content/software/archive-site/screenshot.svg new file mode 100644 index 0000000..18b05c5 --- /dev/null +++ b/content/software/archive-site/screenshot.svg @@ -0,0 +1,17 @@ + + archive-siteの画面構成例 + ヘッダー、Notes一覧、Software一覧を罫線で整理した画面。 + + + + + + + + + + + + + + diff --git a/content/software/content-notes.md b/content/software/content-notes.md new file mode 100644 index 0000000..0d5f6df --- /dev/null +++ b/content/software/content-notes.md @@ -0,0 +1,23 @@ ++++ +title = "content-notes" +description = "Markdownだけで考えの断片を整理する小さな道具。" +date = 2025-10-18 +include_in_feeds = false + +[extra] +language = ["Rust"] +license = "MIT" +source = "https://git.takashi-2521.com/content-notes/" ++++ + +## 概要 + +短いメモに日付と題名を付け、単純なディレクトリへ保存するためのコマンドラインツールです。 + +## 作った背景 + +思いついたことを残す前に保存場所や形式で迷わないよう、操作を限定した道具が必要でした。 + +## 開発の過程 + +保存形式には可搬性の高いMarkdownを採用しました。検索や分類を内部データベースへ閉じ込めず、通常のファイル操作でも扱えることを優先しています。 diff --git a/doc/Design.md b/doc/Design.md new file mode 100644 index 0000000..bddd04f --- /dev/null +++ b/doc/Design.md @@ -0,0 +1,1851 @@ +# Design.md + +# たかしの記録 — Zola 基本・詳細設計書 + +## 1. 文書目的 + +本書は `Specifications.md` の要求を、Zolaによる静的Webサイトとして矛盾なく実装するための基本設計・詳細設計を定義する。 + +設計上の基本原則は次のとおり。 + +1. Zola公式のSection / Page / Taxonomy / Tera modelに従う +2. Zola標準機能を優先する +3. 外部dependencyを増やさない +4. Build artifact `public/` のみで本番サイトを成立させる +5. Client PCでbuildし、VPSでbuildしない +6. 本番runtimeはCaddyのみ +7. コンテンツ構造とデザインを不要に複雑化しない + +--- + +## 2. 参照仕様とZola準拠方針 + +本設計は `Specifications.md` を上位仕様とする。 + +実装時は使用するZolaバージョンの公式ドキュメントを確認すること。 +設定キー・front matter・Tera関数を推測して追加してはならない。 + +主に以下のZola概念を使用する。 + +- `zola.toml` +- Section (`_index.md`) +- Page (`*.md`) +- Taxonomy +- Tera templates +- Sass/SCSS compilation +- Static assets +- Colocated assets +- Built-in feeds +- Built-in sitemap +- Built-in robots.txt +- `page.toc` +- `get_page` +- `get_section` +- `get_url` +- `get_taxonomy_url` +- Internal link `@/` + +Zolaはディレクトリ構造からSection/Pageを構成するため、独自CMS層やJSON indexを追加しない。 + +--- + +## 3. システム構成 + +```text +Client PC +│ +├── Zola +├── Git repository +│ ├── zola.toml +│ ├── content/ +│ ├── templates/ +│ ├── sass/ +│ └── static/ +│ +├── zola check +└── zola build + │ + ▼ + public/ + │ + │ archive + SSH + ▼ +VPS +└── /srv/www/takashi-2521.com/ + ├── releases// + └── current -> releases// + │ + ▼ + Caddy +``` + +ZolaはVPSへインストールしない。 + +--- + +## 4. Zolaサイト構造 + +```text +website/ +├── zola.toml +├── content/ +│ ├── _index.md +│ ├── about.md +│ ├── notes/ +│ │ ├── _index.md +│ │ ├── example-note.md +│ │ └── ... +│ └── software/ +│ ├── _index.md +│ ├── example-software.md +│ └── ... +├── templates/ +│ ├── base.html +│ ├── index.html +│ ├── page.html +│ ├── notes/ +│ │ ├── section.html +│ │ └── page.html +│ ├── software/ +│ │ ├── section.html +│ │ └── page.html +│ ├── tags/ +│ │ ├── list.html +│ │ └── single.html +│ ├── partials/ +│ │ ├── header.html +│ │ ├── footer.html +│ │ ├── note-list-item.html +│ │ ├── software-list-item.html +│ │ ├── toc.html +│ │ ├── related-notes.html +│ │ └── related-software.html +│ └── 404.html +├── sass/ +│ ├── main.scss +│ ├── _tokens.scss +│ ├── _reset.scss +│ ├── _base.scss +│ ├── _typography.scss +│ ├── _layout.scss +│ ├── _header.scss +│ ├── _footer.scss +│ ├── _archive.scss +│ ├── _article.scss +│ ├── _software.scss +│ ├── _taxonomy.scss +│ ├── _code.scss +│ ├── _theme.scss +│ └── _utilities.scss +├── static/ +│ ├── favicon.svg +│ └── js/ +│ └── theme.js +├── themes/ +└── public/ # generated; Git ignored +``` + +### 4.1 Themes + +`themes/` はZola標準ディレクトリとして存在してよいが、空のままとする。 +外部themeを使用しない。 + +### 4.2 public + +`public/` は生成物でありGit管理対象外。 + +--- + +## 5. `zola.toml` 基本設計 + +初期値の基準を以下とする。 + +```toml +base_url = "https://www.takashi-2521.com" +title = "たかしの記録" +description = "日々考えたこととか思ったことを記録します" +default_language = "ja" + +output_dir = "public" +compile_sass = true +minify_html = false + +generate_feeds = true +feed_filenames = ["atom.xml", "rss.xml"] + +generate_sitemap = true +generate_robots_txt = true + +build_search_index = false + +taxonomies = [ + { name = "tags", feed = false } +] + +[markdown] +render_emoji = false +external_links_class = "external-link" +external_links_target_blank = false +external_links_no_follow = false +external_links_no_referrer = false +external_links_external = true +smart_punctuation = false +lazy_async_image = true +bottom_footnotes = true +insert_anchor_links = "heading" + +[markdown.highlighting] +error_on_missing_language = true +style = "class" +light_theme = "github-light" +dark_theme = "github-dark" + +[link_checker] +internal_level = "error" +external_level = "warn" + +[slugify] +paths = "on" +taxonomies = "on" +anchors = "on" +paths_keep_dates = false + +[extra] +home_notes_limit = 5 +home_software_limit = 4 +``` + +### 5.1 設定上の注意 + +- `base_url` は本番URLと一致させる。 +- Searchは初期無効。 +- Taxonomyは`tags`のみ。 +- FeedはAtomとRSS。 +- Syntax highlightはclass方式とし、inline styleへの依存を避ける。 +- `external_links_class` を利用し外部リンク記号をCSSで表現する。 +- `minify_html` は開発中false。最終的にtrueへ変更する場合は生成結果を確認してから行う。 +- Highlight themeの具体設定は使用Zola版の公式仕様に合わせる。 +- 利用中Zola版で設定名・構造が異なる場合は、公式ドキュメントを優先してこの設計を等価に実現する。 + +--- + +## 6. Content model + +### 6.1 Root Section + +`content/_index.md` + +```toml ++++ +title = "たかしの記録" +description = "日々考えたこととか思ったことを記録します" ++++ +``` + +Home自体はZolaのroot sectionとして扱い、`templates/index.html` で描画する。 + +### 6.2 About Page + +`content/about.md` + +```toml ++++ +title = "About" +template = "page.html" ++++ +``` + +本文に以下をMarkdownで記述する。 + +- 名前 +- 一言プロフィール +- サイトの目的 +- 関心分野 +- 連絡先 + +構造化metadataを必要以上に増やさない。 + +### 6.3 Notes Section + +`content/notes/_index.md` + +```toml ++++ +title = "Notes" +sort_by = "date" +template = "notes/section.html" +page_template = "notes/page.html" ++++ +``` + +#### 6.3.1 Notesのsort + +Sectionはdate順にする。 +テンプレートでは新しい順で表示されることを検証する。 + +#### 6.3.2 Notes Page front matter + +```toml ++++ +title = "記事タイトル" +description = "記事の短い説明" +date = 2026-08-21 +updated = 2026-08-22 + +[taxonomies] +tags = ["情報工学", "AI"] + +[extra] +related_software = [ + "software/example-software.md" +] ++++ + +本文... +``` + +#### 6.3.3 Notes必須/任意項目 + +| Field | 必須 | 用途 | +|---|---:|---| +| `title` | Yes | タイトル | +| `date` | Yes | 公開日 | +| `description` | No | 一覧・meta description | +| `updated` | No | 更新日 | +| `taxonomies.tags` | No | 一覧分類 | +| `extra.related_software` | No | 明示的な関連Software | +| Body | Yes | 本文 | + +#### 6.3.4 Slug + +Markdown filenameを英語ASCII slugとする。 + +例： + +```text +content/notes/llm-compute-and-energy.md +``` + +表示タイトルは日本語でよい。 + +### 6.4 Software Section + +`content/software/_index.md` + +```toml ++++ +title = "Software" +sort_by = "date" +template = "software/section.html" +page_template = "software/page.html" ++++ +``` + +Software一覧の順序は初期状態ではdate順とする。 +公開日を表示する必要はないが、並び順制御に利用する。 + +将来、並びを明示したくなった場合は`weight`へ変更可能。 + +#### 6.4.1 Software Page front matter + +```toml ++++ +title = "example-software" +description = "短い概要" +date = 2026-08-21 +include_in_feeds = false + +[extra] +language = ["Rust", "HTML"] +license = "MIT" +source = "https://git.takashi-2521.com/example-software/" +github_mirror = "https://github.com/example/example-software" +related_notes = [ + "notes/example-note.md" +] ++++ + +## 概要 + +... + +## 作った背景 + +... + +## 開発の過程 + +... +``` + +#### 6.4.2 Software項目 + +| Field | 必須 | 用途 | +|---|---:|---| +| `title` | Yes | PJ名 | +| `description` | No | 短い概要 | +| `date` | Yes | 並び順 | +| `include_in_feeds` | Yes (`false`) | Notes中心のsite feedからSoftwareを除外 | +| `extra.language` | No | 使用言語 | +| `extra.license` | No | ライセンス | +| `extra.source` | Yes | cgit正本 | +| `extra.github_mirror` | No | GitHub mirror | +| `extra.related_notes` | No | 関連Note | +| Body | Yes | 背景・過程・詳細 | + +#### 6.4.3 Software image + +画像をSoftwareに紐付ける場合、Zolaのcolocated assetを優先する。 + +例： + +```text +content/software/example-software/ +├── index.md +└── screenshot.webp +``` + +この場合、Page URLは `/software/example-software/` とし、画像を同じPage Bundle内に置く。 + +画像が不要なSoftwareは単一Markdownでよい。 + +--- + +## 7. Related content設計 + +### 7.1 基本方針 + +関連付けはタグから自動推測せず、front matterで明示する。 + +理由： + +- 意図しない関連付けを防止 +- 記事数が少ないため手動管理コストが低い +- Zola `get_page` で確実に参照できる + +### 7.2 Path形式 + +`extra.related_software` / `extra.related_notes` には **contentディレクトリからのMarkdown path** を保存する。 + +例： + +```toml +related_software = ["software/ollama-web.md"] +related_notes = ["notes/ollama-tool-calling.md"] +``` + +### 7.3 Tera resolution + +例： + +```tera +{% for path in page.extra.related_notes %} + {% set related = get_page(path=path) %} + {{ related.title }} +{% endfor %} +``` + +Missing referenceはbuild/checkで検出できるよう、原則 `allow_missing=true` を使用しない。 + +--- + +## 8. Template設計 + +### 8.1 `base.html` + +責務： + +- HTML document skeleton +- `` +- `` +- charset / viewport +- title +- description +- canonical +- RSS/Atom autodiscovery +- CSS +- Zola生成syntax-highlight CSS (`giallo-light.css` / `giallo-dark.css`) +- theme JS +- Header +- Main block +- Footer + +概念構造： + +```tera + + + + ... + + + + + + + {% include "partials/header.html" %} +
+ {% block content %}{% endblock content %} +
+ {% include "partials/footer.html" %} + + +``` + +#### 8.1.1 Page title + +原則： + +- Home: `たかしの記録` +- Other: ` | たかしの記録` + +Tera blockまたは共通変数で実現する。 + +#### 8.1.2 meta description + +優先順位： + +1. `page.description` / `section.description` +2. `config.description` + +### 8.2 Header + +`partials/header.html` + +Desktop: + +```text +たかしの記録 Home Notes Software About [Theme] +``` + +Mobileでは自然にwrapさせ、初期実装ではHamburger menuを導入しない。 + +サイト名自体はHomeへのリンク。 + +Navigationには`aria-label="メインナビゲーション"`を設定する。 + +### 8.3 Footer + +`partials/footer.html` + +表示： + +- `© Takashi` +- RSS +- Mail + +Mail addressは設定値に直接埋め込むか、`config.extra`へ置く。 +公開時のspam対策を別途必要と判断した場合のみ変更する。 + +### 8.4 Home Template + +`templates/index.html` + +処理： + +1. root `section` +2. `get_section(path="notes/_index.md")` +3. Notesから上位5件取得 +4. `get_section(path="software/_index.md")` +5. Softwareから上位4件取得 +6. Aboutへのリンク + +概念： + +```tera +{% set notes = get_section(path="notes/_index.md") %} +{% set software = get_section(path="software/_index.md") %} +``` + +件数は`config.extra.home_notes_limit` / `home_software_limit`で管理する。 + +Homeでタグは必須表示としない。 + +### 8.5 Notes一覧 Template + +`templates/notes/section.html` + +#### 8.5.1 年別グルーピング + +Zola公式Archive patternに従い、`section.pages | group_by(attribute="year")` を利用する。 + +表示： + +```text +Notes + +2026 + 08-21 タイトル + タグ1 / タグ2 + +2025 + ... +``` + +ZolaのSection `sort_by = "date"` を前提とする。 + +#### 8.5.2 Note list item + +`partials/note-list-item.html` + +- `
` または適切なlist item +- `