Skip to content

Commit 57da574

Browse files
author
lzm
committed
feat(home): show 分类 / 标签 chip cloud below profile
PaperMod's profile-mode home stops at the buttons block — no entry points for browsing by topic. Hugo auto-generates /categories/ and /tags/ listing pages via PaperMod's taxonomy.html, so all we needed was a clickable summary on the home. Override layouts/_partials/index_profile.html (same approach as the existing assets/js/fastsearch.js override — don't touch the upstream submodule). The override reproduces PaperMod's profile block verbatim and appends a .home-taxonomies section as a sibling of .profile, not inside it: PaperMod's .main .profile is display:flex with align-items:center, so anything nested inside sits beside the avatar rather than below. Each chip uses .Page.LinkTitle rather than the taxonomy iteration key to preserve the original front matter casing ('VS Code' instead of 'vs code'). Counts are shown as a small badge so a one-post taxonomy isn't visually identical to a five-post one at a glance. Override .main .profile { min-height } so the chips are reachable on an 800px viewport — PaperMod's default calc(100vh - ...) hero spacing pushed the cloud below the fold. Verified: chips render with both English and CJK; clicking '工具' navigates to /categories/<encoded>/ with the correct h1; clicking 'VS Code' navigates to /tags/vs-code/ and shows the single matching post. No change to other pages (override only fires when .home partial is rendered).
1 parent 0b5fae7 commit 57da574

2 files changed

Lines changed: 211 additions & 0 deletions

File tree

‎assets/css/extended/home-taxonomies.css‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
/* Home taxonomy cloud: chip-style entry points under the profile block.
2+
Visual language mirrors PaperMod's existing .terms-tags on
3+
/categories/ and /tags/ pages so the home looks consistent with
4+
those archives.
5+
6+
PaperMod sets `.main .profile { min-height: calc(100vh - header -
7+
footer - gap*2) }` to give the profile a hero feel. With our taxonomy
8+
block rendered as a sibling of .profile (see layouts/_partials/
9+
index_profile.html), that min-height pushes the chips below the
10+
fold on most screens. Override it here so the cloud is reachable
11+
without scrolling. */
12+
13+
.main .profile {
14+
min-height: auto;
15+
padding: 1.5rem 0 1rem;
16+
}
17+
18+
.home-taxonomies {
19+
max-width: 480px;
20+
margin: 1.75rem auto 0;
21+
padding-top: 1.5rem;
22+
border-top: 1px dashed var(--border);
23+
display: flex;
24+
flex-direction: column;
25+
gap: 1.25rem;
26+
}
27+
28+
.home-taxonomies-section {
29+
text-align: left;
30+
}
31+
32+
.home-taxonomies-title {
33+
margin: 0 0 0.6rem;
34+
font-size: 0.85rem;
35+
font-weight: 600;
36+
color: var(--secondary);
37+
letter-spacing: 0.05em;
38+
}
39+
40+
.home-taxonomies-list {
41+
display: flex;
42+
flex-wrap: wrap;
43+
gap: 0.5rem;
44+
margin: 0;
45+
padding: 0;
46+
list-style: none;
47+
}
48+
49+
.home-taxonomy-chip {
50+
display: inline-flex;
51+
align-items: center;
52+
gap: 0.4rem;
53+
padding: 0.3rem 0.7rem;
54+
background: var(--code-bg);
55+
color: var(--primary);
56+
border-radius: 999px;
57+
border: 1px solid var(--border);
58+
text-decoration: none;
59+
font-size: 0.85rem;
60+
line-height: 1.2;
61+
transition: background-color 0.15s, border-color 0.15s, transform 0.1s;
62+
}
63+
64+
.home-taxonomy-chip:hover {
65+
background: var(--tertiary);
66+
border-color: var(--secondary);
67+
transform: translateY(-1px);
68+
}
69+
70+
.home-taxonomy-name {
71+
/* keeps CJK and ASCII on the same baseline */
72+
white-space: nowrap;
73+
}
74+
75+
.home-taxonomy-count {
76+
display: inline-flex;
77+
align-items: center;
78+
justify-content: center;
79+
min-width: 1.4em;
80+
height: 1.4em;
81+
padding: 0 0.35em;
82+
background: var(--secondary);
83+
color: var(--theme);
84+
border-radius: 999px;
85+
font-size: 0.7rem;
86+
font-weight: 600;
87+
line-height: 1;
88+
}

‎layouts/_partials/index_profile.html‎

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
{{- /*
2+
Override of PaperMod's _partials/index_profile.html.
3+
4+
Why: PaperMod's profile-mode home shows avatar + buttons and stops
5+
there — no taxonomy entry points. We append a small "分类 / 标签"
6+
chip cloud below the profile so visitors can browse content by topic
7+
from the home page. /categories/ and /tags/ already render
8+
correctly via PaperMod's taxonomy.html; we only link to them.
9+
10+
Layout gotcha: PaperMod's .main .profile is `display: flex;
11+
align-items: center`, so anything appended inside the .profile div
12+
becomes a flex sibling of .profile_inner and sits *beside* the
13+
centered avatar/title — not below it. The taxonomy block is rendered
14+
here as a sibling of .profile (outside the flex parent) so it sits
15+
full-width underneath the profile, in normal block flow.
16+
17+
The .profile div itself is reproduced verbatim from PaperMod so
18+
`git diff themes/PaperMod/layouts/_partials/index_profile.html`
19+
stays focused on the additions.
20+
*/}}
21+
22+
<div class="profile">
23+
{{- with site.Params.profileMode }}
24+
<div class="profile_inner">
25+
{{- if .imageUrl -}}
26+
{{- $img := "" }}
27+
{{- if not (urls.Parse .imageUrl).IsAbs }}
28+
{{- $img = resources.Get .imageUrl }}
29+
{{- end }}
30+
{{- if $img }}
31+
{{- $processableFormats := (slice "jpg" "jpeg" "png" "tif" "bmp" "gif") -}}
32+
{{- if hugo.IsExtended -}}
33+
{{- $processableFormats = $processableFormats | append "webp" -}}
34+
{{- end -}}
35+
{{- $prod := (hugo.IsProduction | or (eq site.Params.env "production")) }}
36+
{{- if and (in $processableFormats $img.MediaType.SubType) (eq $prod true)}}
37+
{{- if (not (and (not .imageHeight) (not .imageWidth))) }}
38+
{{- $img = $img.Resize (printf "%dx%d" .imageWidth .imageHeight) }}
39+
{{- else if .imageHeight }}
40+
{{- $img = $img.Resize (printf "x%d" .imageHeight) }}
41+
{{ else if .imageWidth }}
42+
{{- $img = $img.Resize "%dx" .imageWidth }}
43+
{{ else }}
44+
{{- $img = $img.Resize "150x150" }}
45+
{{- end }}
46+
{{- end }}
47+
<img draggable="false" src="{{ $img.Permalink }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}"
48+
height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" />
49+
{{- else }}
50+
<img draggable="false" src="{{ .imageUrl | absURL }}" alt="{{ .imageTitle | default "profile image" }}" title="{{ .imageTitle }}"
51+
height="{{ .imageHeight | default 150 }}" width="{{ .imageWidth | default 150 }}" />
52+
{{- end }}
53+
{{- end }}
54+
<h1>{{ .title | default site.Title | markdownify }}</h1>
55+
<span>{{ .subtitle | markdownify }}</span>
56+
{{- partial "social_icons.html" -}}
57+
58+
{{- with .buttons }}
59+
<div class="buttons">
60+
{{- range . }}
61+
<a class="button" href="{{ trim .url " " }}" rel="noopener" title="{{ .name }}">
62+
<span class="button-inner">
63+
{{ .name }}
64+
{{- if (findRE "://" .url) }}&nbsp;
65+
<svg fill="none" shape-rendering="geometricPrecision" stroke="currentColor" stroke-linecap="round"
66+
stroke-linejoin="round" stroke-width="2.5" viewBox="0 0 24 24" height="14" width="14">
67+
<path d="M18 13v6a2 2 0 01-2 2H5a2 2 0 01-2-2V8a2 2 0 012-2h6"></path>
68+
<path d="M15 3h6v6"></path>
69+
<path d="M10 14L21 3"></path>
70+
</svg>
71+
{{- end }}
72+
</span>
73+
</a>
74+
{{- end }}
75+
</div>
76+
{{- end }}
77+
</div>
78+
{{- end}}
79+
</div>
80+
81+
{{/* BEGIN home taxonomy cloud — additions over upstream.
82+
Rendered as a sibling of .profile so PaperMod's flex layout on
83+
.main .profile does not put us beside the avatar. */}}
84+
{{- $catTerms := site.Taxonomies.categories -}}
85+
{{- $tagTerms := site.Taxonomies.tags -}}
86+
{{- if or $catTerms $tagTerms }}
87+
<div class="home-taxonomies">
88+
{{- if $catTerms }}
89+
<section class="home-taxonomies-section">
90+
<h3 class="home-taxonomies-title">📂 分类</h3>
91+
<ul class="home-taxonomies-list">
92+
{{- range $name, $term := $catTerms }}
93+
{{- $display := $term.Page.LinkTitle | default $name }}
94+
<li>
95+
<a class="home-taxonomy-chip" href="{{ $term.Page.RelPermalink }}" aria-label="分类 {{ $display }}，共 {{ $term.Count }} 篇">
96+
<span class="home-taxonomy-name">{{ $display }}</span>
97+
<span class="home-taxonomy-count">{{ $term.Count }}</span>
98+
</a>
99+
</li>
100+
{{- end }}
101+
</ul>
102+
</section>
103+
{{- end }}
104+
105+
{{- if $tagTerms }}
106+
<section class="home-taxonomies-section">
107+
<h3 class="home-taxonomies-title">🏷️ 标签</h3>
108+
<ul class="home-taxonomies-list">
109+
{{- range $name, $term := $tagTerms }}
110+
{{- $display := $term.Page.LinkTitle | default $name }}
111+
<li>
112+
<a class="home-taxonomy-chip" href="{{ $term.Page.RelPermalink }}" aria-label="标签 {{ $display }}，共 {{ $term.Count }} 篇">
113+
<span class="home-taxonomy-name">{{ $display }}</span>
114+
<span class="home-taxonomy-count">{{ $term.Count }}</span>
115+
</a>
116+
</li>
117+
{{- end }}
118+
</ul>
119+
</section>
120+
{{- end }}
121+
</div>
122+
{{- end }}
123+
{{/* END home taxonomy cloud */}}

0 commit comments

Comments
 (0)