タグに対応して検索性をよくしたい。
config.tomlに、taxonomies の定義を追加する。feedはタグごとにRSSを出力するかどうかの設定。とりあえず出すことにしておく。
% vi config.toml
taxonomies = [
{ name = "tags", feed = true }
]
各記事の front matter に tags を書く。
% vi content/2025-11-24.md
tags = ["ハードウェア", "USB", "Type-C", "ケーブル"]
% vi themes/andromeda/templates/section.html
<div class="post-text">
<h2 class="post-title">{{/* page.title | safe */}}/
</h2>
<span class="post-description post-description-multiline">{{/* page.description | replace(from="\n", to="<br>") | safe */}}</span>
{% if page.date %}<span class="post-date">{{ page.date | date(/format="%Y/%m/%d") */}}</span>{% endif %}
</div>
書き換え。
<h2 class="post-title">{{/* page.title | safe */}}</h2>
<span class="post-description post-description-multiline">
{{/* page.description | replace(from="\n", to="<br>") | safe */}}
</span>
{% if page.date %}
<span class="post-date">{{/* page.date | date(format="%Y/%m/%d") */}}</span>
{% endif %}
{# ここからタグ表示を追加 #}
{% if page.taxonomies.tags %}
<ul class="post-tags">
{% for tag in page.taxonomies.tags %}
<li>
<a href="{{/* tag.permalink */}}">{{/* tag.name */}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
{# ここまで #}
トップページにも、個別ページにもタグが出てこない。 こちらも生成されていない。
- /tags/ … タグ一覧ページ
- /tags/usb/ のような「タグごとの記事一覧ページ」
renderが設定されていなかったか...
% vi config.toml
taxonomies = [
{ name = "tags", feed = true, render = true }
]
でも変化なしだな...
tags用のテンプレートを用意する必要があるらしい。
- templates/tags/list.html
- templates/tags/single.html
作る。
% mkdir -p templates/tags/
% vi templates/tags/list.html
{% extends "base.html" %}
{% block content %}
<section class="post-list">
<h1>Tags</h1>
<ul>
{% for term in terms %}
<li>
<a href="{{/* term.permalink | safe */}}">
{{/* term.name */}} ({{/* term.page_count */}})
</a>
</li>
{% endfor %}
</ul>
</section>
{% endblock content %}
% vi templates/tags/single.html
{% extends "base.html" %}
{% block content %}
<section class="post-list">
<h1>#{{/* term.name */}}</h1>
<a href="{{/* config.base_url | safe */}}/tags">すべてのタグ</a>
<ul>
{% for page in term.pages %}
<li>
<a href="{{/* page.permalink | safe */}}">
{{/* page.title */}}
{% if page.date %} ({{/* page.date | date(format="%Y-%m-%d") */}}){% endif %}
</a>
</li>
{% endfor %}
</ul>
</section>
{% endblock content %}
エラー。base.htmlを継承する前提のようだ。
% zola serve
Building site...
Error: Failed to serve the site
Error: Template 'tags/single.html' is inheriting from 'base.html', which doesn't exist or isn't loaded.
base.htmlとかないものな... 継承しない生のHTMLを書く。
% vi templates/tags/list.html
{# templates/tags/list.html #}
{% import "macros.html" as macros ignore missing %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タグ一覧 - {{/* config.title */}}</title>
{# Andromeda の CSS。パスは必要に応じて調整 #}
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
</head>
<body>
{# テーマ側でナビのマクロがあれば呼ぶ。無ければこの行は消してOK #}
{# {{/* macros::navbar() */}} #}
<main class="content">
<h1>タグ一覧</h1>
<ul>
{# `terms` に全タグが入ってくる #}
{% for term in terms %}
<li>
<a href="{{/* term.permalink | safe */}}">
{{/* term.name */}} ({{/* term.pages | length */}})
</a>
</li>
{% endfor %}
</ul>
</main>
{# フッタ用のマクロがあれば。無ければこの行は消す #}
{# {{/* macros::pagefooter() */}} #}
</body>
</html>
% vi templates/tags/single.html
{# templates/tags/single.html #}
{% import "macros.html" as macros ignore missing %}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{{/* term.name */}} の記事 - {{/* config.title */}}</title>
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
</head>
<body>
{# {{/* macros::navbar() */}} #}
<main class="content">
<h1>タグ: {{/* term.name */}}</h1>
{% if term.pages | length == 0 %}
<p>このタグの記事はまだありません。</p>
{% else %}
<ul>
{% for page in term.pages %}
<li>
<a href="{{/* page.permalink | safe */}}">
{{/* page.title */}}
</a>
<span> — {{/* page.date | date(format="%Y-%m-%d") */}}</span>
</li>
{% endfor %}
</ul>
{% endif %}
</main>
{# {{/* macros::pagefooter() */}} #}
</body>
</html>
まだダメ。
% zola serve
Building site...
Error: Failed to serve the site
Error: Error parsing templates from the /templates directory
Error: Reason:
* Failed to parse "/Users/kinneko/Documents/fanbox-zola/templates/tags/single.html"
--> 2:35
|
2 | {% import "macros.html" as macros ignore missing %}
| ^---
|
= expected `%}` or `-%}`
* Failed to parse "/Users/kinneko/Documents/fanbox-zola/templates/tags/list.html"
--> 2:35
|
2 | {% import "macros.html" as macros ignore missing %}
| ^---
|
= expected `%}` or `-%}`
マクロとかないぞ...
% vi templates/tags/list.html
{# templates/tags/list.html #}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>タグ一覧 - {{/* config.title */}}</title>
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
</head>
<body>
<main class="content">
<h1>タグ一覧</h1>
<ul>
{% for term in terms %}
<li>
<a href="{{/* term.permalink | safe */}}">
{{/* term.name */}} ({{/* term.pages | length }})
</a>
</li>
{% endfor %}
</ul>
</main>
</body>
</html>
% vi templates/tags/single.html
{# templates/tags/single.html #}
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>{{/* term.name */}} の記事 - {{/* config.title */}}</title>
<link rel="stylesheet" href="{{ get_url(path='main.css') }}">
</head>
<body>
<main class="content">
<h1>タグ: {{/* term.name */}}</h1>
{% if term.pages | length == 0 %}
<p>このタグの記事はまだありません。</p>
{% else %}
<ul>
{% for page in term.pages %}
<li>
<a href="{{/* page.permalink | safe */}}">
{{/* page.title */}}
</a>
{% if page.date %}
<span> — {{/* page.date | date(format="%Y-%m-%d") */}}</span>
{% endif %}
</li>
{% endfor %}
</ul>
{% endif %}
</main>
</body>
</html>
なんも変わらなない... tagsの生成もなし。
これか...
[taxonomies]
tags = ["ハードウェア", "USB", "Type-C", "ケーブル"]
次は、こいつがダメらしい。
% grep -R "tag.permalink" templates themes -n
themes/andromeda/templates/section.html:46: <a href="{{/* tag.permalink */}}">{{/* tag.name */}}</a>
% vi themes/andromeda/templates/section.html
{% if page.taxonomies and page.taxonomies.tags %}
<ul class="tags">
{% for tag in page.taxonomies.tags %}
{# tag は文字列なので URL は関数で作る #}
{% set tag_url = get_taxonomy_url(kind="tags", name=tag) %}
<li>
<a href="{{/* tag_url | safe */}}">#{{/* tag */}}</a>
</li>
{% endfor %}
</ul>
{% endif %}
なんかできたけど美しくはないね...
四角がズレてしまう。タグの改行はしなくていいような。
% vi themes/andromeda/templates/section.html
{% if page.taxonomies.tags %}
<p class="tags">
{% for tag in page.taxonomies.tags %}
{% set tag_url = get_taxonomy_url(kind="tags", name=tag) %}
<a class="tag-pill" href="{{/* tag_url */}}">#{{/* tag */}}</a>{% if not loop.last %} {% endif %}
{% endfor %}
</p>
{% endif %}
タグは改行なしに並ぶようになった。フォントの色は白くない。四角のズレは直っていない。
% vi themes/andromeda/sass/_custom.scss
/* タグ表示の調整 */
.tags {
margin-top: 1rem;
text-align: center;
white-space: nowrap; /* 改行させない */
overflow: hidden; /* はみ出たら隠す */
}
.tags a,
.tags .tag-pill {
color: #fff; /* 白文字 */
text-decoration: none;
margin: 0 0.25em; /* タグ同士のすきま */
font-weight: 600;
}
.tags a:hover,
.tags .tag-pill:hover {
text-decoration: underline;
}
フォントの色は白くなった。四角のズレは直っていない。
なかなか思ったようにはいかないな...
タイトルとdescription文字が読みにくいので、にシャドウを落としてほしい。
% vi ./themes/andromeda/sass/_custom.scss
/* カバー画像の上に載るタイトル／説明を読みやすくする */
article h1,
article h2,
article h3,
article p {
text-shadow:
0 0 4px rgba(0, 0, 0, 0.8),
0 0 12px rgba(0, 0, 0, 0.8);
}
変化なーし。
トップページの背景画像にマウスオーバーすると、全体に暗くなるのだけど、背景画像だけデフォルトでその暗さでいいような。というわけで、背景画像を暗くして解決しよう、そうしよう。
% vi themes/andromeda/templates/section.html
<img data-src="{{/*page.extra.header_img*/}}" class="lozad" data-placeholder-background="darkgrey">
書き換え
<img
data-src="{{/*page.extra.header_img*/}}"
class="lozad"
data-placeholder-background="darkgrey"
style="filter: brightness(0.5);"
/>
これでいいんじゃね？
んで、タグ部分がセンタリングされていない。以下をulからpタグに変更して、さらに書き換え。
<a class="tag-pill" href="{{/* tag_url */}}">#{{/* tag */}}</a>{% if not loop.last %} {% endif %}
書き換え。
<a class="tag-pill" href="{{/* tag_url */}}">#{{/* tag */}}</a>
あと、下に揃えられていない。 これは、ulタグをp閉じしてたから。修正したら直った。けど、またulにしたらダメなので、spanにしたら下揃えになったのだけど、こんどはフォントが白くなくなった。
CSSで変更する。
% cat themes/andromeda/sass/_custom.scss
// themes/andromeda/sass/_custom.scss
.post-description-multiline {
white-space: pre-line;
}
.body-container p {
font-size: 1.3rem;
line-height: 1.9;
}
.page-description {
white-space: pre-line;
}
/* タグ表示の調整（カード内） */
.post-container .post-text {
/* カード内のテキストを下揃えにする */
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.4rem; /* 行間（タイトル／説明／タグの間） */
}
.post-container .tags {
display: block;
margin-top: 0; /* タグの上の余白を消す */
margin-bottom: 0;
text-align: center;
}
.post-container .tag-pill {
display: inline-block;
margin: 0 0.25rem;
font-weight: 600;
text-decoration: none;
color: #fff !important; /* 必ず白にする */
}
.post-container .tag-pill:hover {
text-decoration: underline;
}
あらら、タグが改行になっている...
/* タグ表示の調整（カード内） */
.post-container .post-text {
/* カード内のテキストを下揃えにする */
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: 0.4rem;
}
.post-container .tags {
display: flex; /* 横並びにする */
justify-content: center; /* 中央寄せ */
flex-wrap: wrap; /* はみ出る場合は折り返し */
margin-top: 0; /* 上の空白を消す */
margin-bottom: 0;
}
.post-container .tag-pill {
display: inline-block !important;
margin: 0 0.25rem;
font-weight: 600;
text-decoration: none;
color: #fff !important; /* 白文字を強制 */
}
.post-container .tag-pill:hover {
text-decoration: underline;
}
AIのやつCSSでやるのあきらめて、HTML側でやろうと言い出した...
こんだけにダイエット。
// themes/andromeda/sass/_custom.scss
.post-description-multiline {
white-space: pre-line;
}
.body-container p {
font-size: 1.3rem;
line-height: 1.9;
}
.page-description {
white-space: pre-line;
}
んで、HTMLのほうはこんな感じ。
{# ここからタグ表示を追加 #}
{% if page.taxonomies and page.taxonomies.tags %}
<span class="tags">
{% for tag in page.taxonomies.tags %}
{# tag は文字列なので URL は関数で作る #}
{% set tag_url = get_taxonomy_url(kind="tags", name=tag) %}
<a class="tag-pill"
href="{{/* tag_url */}}"
style="color:#ffffff;text-decoration:none;">
#{{/* tag */}}
</a>
{% endfor %}
</span>
{% endif %}
{# ここまで #}
これでタグ白文字になって１行で固定できた。
タグとディスクリプションの間が気に入らない。
% vi themes/andromeda/sass/_custom.scss
/* カード内の description とタグの間隔調整 */
.post-container .post-description {
margin-bottom: 0.1rem; /* さらに詰めたいなら 0 にしてもいい */
}
.post-container .tags {
display: block; /* 1行として扱う */
margin-top: 0; /* 上の余白をなくす */
}
イマイチ変わっていない。
/* description とタグの間隔をギリギリまで詰める */
.post-container .post-description {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.post-container .tags {
display: block;
margin-top: 0.15rem !important; /* ほんの少しだけ余白を入れる */
margin-bottom: 0 !important;
}
% vi themes/andromeda/templates/section.html
<span class="post-description post-description-multiline"
style="margin-bottom:0; line-height:1.25;">
{% if page.taxonomies and page.taxonomies.tags %}
<span class="tags"
style="display:block; margin-top:-0.1rem; margin-bottom:0;">
うーん、andromedaのsass/_page.scssで.post-textが display: flex; flex-direction: column; justify-content: space-between; になっていて、子要素（date / title / description / tags）の間に余白を自動的にばら撒いてい るのじゃかなろうか。なので、descriptionとtagsのmarginをいじっても、上からの「space-between」のせいで、間がどうしても空く。
justify-contentを上書きする。
% vi themes/andromeda/sass/_custom.scss
/* カード内テキストの縦レイアウト調整 */
.post-container .post-text {
justify-content: flex-end; /* 下側に寄せる */
row-gap: 0.2rem; /* 要素同士のすき間（description とタグの距離もここで決まる） */
}
まったく変わらない...
もうしょうがないので、相談の結果、descriptionの中にタグ行を入れてしまうことになった。
% vi themes/andromeda/templates/section.html
<span class="post-description post-description-multiline"
style="margin:0; line-height:1.25;">
{{/* page.description | replace(from="\n", to="<br>") | safe */}}
{% if page.taxonomies and page.taxonomies.tags %}
<br>
{% for tag in page.taxonomies.tags %}
{% set tag_url = get_taxonomy_url(kind="tags", name=tag) %}
<a class="tag-pill"
href="{{/* tag_url */}}"
style="color:#ffffff;text-decoration:none;">
#{{/* tag */}}
</a>
{% endfor %}
{% endif %}
</span>
悪化したな...
もう、AIさんとやる堂々巡りにはいっているな。
もう、Andromedaは捨てるか...
オリジナル投稿： Zola使ってみる -4-｜kinneko｜pixivFANBOX
https://www.fanbox.cc/@kinneko/posts/10950769
