Skip to content

Commit 39c9d19

Browse files
author
lzm
committed
feat(blog): render series box at bottom of single posts
Override PaperMod's _partials/extend_post_content.html (the official post-body-extension hook) so any post with 'series' in front matter shows a '本文属于系列 [TestDemo] (N 篇)' panel below its content. The box lists every post in the series ordered by date (Hugo's default taxonomy ordering). The current post gets a filled '✓' marker on a slightly darker row so readers can locate themselves in the sequence; sibling posts keep the numbered '1/2/3...' badge. If only one post claims the series, the box collapses to a one-line header (no list) since there's nothing to enumerate. Verified end-to-end with a temporary 'series: [TestDemo]' on both existing posts: both posts show the box, /series/testdemo/ renders both posts, /series/ index lists 'TestDemo (2)', and the box is absent from posts without 'series' front matter. Front matter was reverted before this commit; the feature is opt-in per post.
1 parent 27dfe61 commit 39c9d19

2 files changed

Lines changed: 189 additions & 0 deletions

File tree

‎assets/css/extended/series-box.css‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
/* Series box: rendered at the bottom of any post that opts into a
2+
series via front matter (see layouts/_partials/extend_post_content.html).
3+
Visual language leans on the same chip/border tokens as the home
4+
taxonomy cloud so the two related surfaces look like siblings. */
5+
6+
.series-box {
7+
margin-top: 2.5rem;
8+
padding: 1rem 1.25rem;
9+
background: var(--entry);
10+
border: 1px solid var(--border);
11+
border-radius: var(--radius);
12+
font-size: 0.92rem;
13+
}
14+
15+
.series-box--solo {
16+
/* Single-post series — no list to render, just the header chip */
17+
display: flex;
18+
flex-wrap: wrap;
19+
align-items: center;
20+
gap: 0.4rem;
21+
}
22+
23+
.series-box-header {
24+
display: flex;
25+
flex-wrap: wrap;
26+
align-items: baseline;
27+
gap: 0.4rem 0.6rem;
28+
margin-bottom: 0.85rem;
29+
}
30+
31+
.series-box--solo .series-box-header {
32+
margin-bottom: 0;
33+
}
34+
35+
.series-box-icon {
36+
font-size: 1.05rem;
37+
line-height: 1;
38+
}
39+
40+
.series-box-label {
41+
color: var(--secondary);
42+
font-weight: 500;
43+
}
44+
45+
.series-box-title {
46+
font-weight: 600;
47+
color: var(--primary);
48+
text-decoration: none;
49+
border-bottom: 1px solid transparent;
50+
transition: border-color 0.15s;
51+
}
52+
53+
.series-box-title:hover {
54+
border-bottom-color: var(--secondary);
55+
}
56+
57+
.series-box-count {
58+
color: var(--secondary);
59+
font-size: 0.85em;
60+
}
61+
62+
.series-box-list {
63+
margin: 0;
64+
padding: 0;
65+
list-style: none;
66+
display: flex;
67+
flex-direction: column;
68+
gap: 0.35rem;
69+
}
70+
71+
.series-box-item {
72+
display: flex;
73+
align-items: center;
74+
}
75+
76+
.series-box-link {
77+
display: inline-flex;
78+
align-items: center;
79+
gap: 0.6rem;
80+
padding: 0.25rem 0.55rem;
81+
border-radius: var(--radius);
82+
color: var(--primary);
83+
text-decoration: none;
84+
transition: background-color 0.12s;
85+
width: 100%;
86+
}
87+
88+
.series-box-link:hover {
89+
background: var(--tertiary);
90+
}
91+
92+
.series-box-index,
93+
.series-box-marker {
94+
display: inline-flex;
95+
align-items: center;
96+
justify-content: center;
97+
min-width: 1.6em;
98+
height: 1.6em;
99+
padding: 0 0.3em;
100+
font-size: 0.78rem;
101+
font-weight: 600;
102+
line-height: 1;
103+
background: var(--code-bg);
104+
color: var(--secondary);
105+
border-radius: 999px;
106+
border: 1px solid var(--border);
107+
}
108+
109+
.series-box-item--current .series-box-link {
110+
background: var(--tertiary);
111+
color: var(--primary);
112+
}
113+
114+
.series-box-item--current .series-box-marker {
115+
background: var(--primary);
116+
color: var(--theme);
117+
border-color: var(--primary);
118+
}
119+
120+
.series-box-name {
121+
/* keep titles on one line when reasonable */
122+
overflow: hidden;
123+
text-overflow: ellipsis;
124+
white-space: nowrap;
125+
}

‎layouts/_partials/extend_post_content.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
{{- /*
2+
Override of PaperMod's _partials/extend_post_content.html.
3+
4+
Renders a "系列文章" box at the bottom of any post that opts into
5+
a series via front matter:
6+
7+
series:
8+
- "Hugo折腾笔记"
9+
10+
The series itself is backed by Hugo's taxonomy machinery (configured
11+
in hugo.yaml: `taxonomies: { category: categories, tag: tags,
12+
series: series }`), so /series/<name>/ listing pages come for free
13+
via PaperMod's taxonomy.html.
14+
15+
Inside the box we list every post in the series, sorted by date
16+
(taxonomy's default ordering), and mark the current post with a
17+
check so readers can see where they are in the sequence.
18+
*/}}
19+
20+
{{- $seriesTerms := .GetTerms "series" }}
21+
{{- if $seriesTerms }}
22+
{{- range $seriesTerms }}
23+
{{- $seriesName := .LinkTitle }}
24+
{{- $seriesUrl := .RelPermalink }}
25+
{{- $seriesPages := .Pages.ByDate }}
26+
{{- $total := len $seriesPages }}
27+
28+
{{- if eq $total 1 }}
29+
{{- /* Only one post in this series — link the name, no list. */}}
30+
<aside class="series-box series-box--solo" aria-label="系列文章">
31+
<header class="series-box-header">
32+
<span class="series-box-icon" aria-hidden="true">📚</span>
33+
<span class="series-box-label">本文属于系列</span>
34+
<a class="series-box-title" href="{{ $seriesUrl }}">{{ $seriesName }}</a>
35+
<span class="series-box-count">（{{ $total }} 篇）</span>
36+
</header>
37+
</aside>
38+
{{- else }}
39+
<aside class="series-box" aria-label="系列文章">
40+
<header class="series-box-header">
41+
<span class="series-box-icon" aria-hidden="true">📚</span>
42+
<span class="series-box-label">本文属于系列</span>
43+
<a class="series-box-title" href="{{ $seriesUrl }}">{{ $seriesName }}</a>
44+
<span class="series-box-count">（{{ $total }} 篇）</span>
45+
</header>
46+
<ol class="series-box-list">
47+
{{- range $i, $p := $seriesPages }}
48+
<li class="series-box-item {{ if eq $p.RelPermalink $.RelPermalink }}series-box-item--current{{ end }}">
49+
<a href="{{ $p.RelPermalink }}" class="series-box-link">
50+
{{- if eq $p.RelPermalink $.RelPermalink }}
51+
<span class="series-box-marker" aria-label="当前篇">✓</span>
52+
{{- else }}
53+
<span class="series-box-index" aria-hidden="true">{{ add $i 1 }}</span>
54+
{{- end }}
55+
<span class="series-box-name">{{ $p.LinkTitle }}</span>
56+
</a>
57+
</li>
58+
{{- end }}
59+
</ol>
60+
</aside>
61+
{{- end }}
62+
63+
{{- end }}
64+
{{- end }}

0 commit comments

Comments
 (0)