This is an automated email from the ASF dual-hosted git repository.
wu-sheng pushed a commit to branch master
in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
The following commit(s) were added to refs/heads/master by this push:
new 1a396491aed Blog index: 3 posts per row via a topic dropdown filter
(#862)
1a396491aed is described below
commit 1a396491aed79c05eeb3f49c88f1319cfeae7a84
Author: 吴晟 Wu Sheng <[email protected]>
AuthorDate: Mon Jun 22 15:54:43 2026 +0800
Blog index: 3 posts per row via a topic dropdown filter (#862)
* feat(blog): full-width 3-up post grid with a topic dropdown filter
The 300px right 'Browse topics' sidebar forced the post grid to 2 columns.
Move the topics into a compact dropdown above the grid (native <details>, no
JS), so the cards take the full content width: 3-up on desktop, 2-up <=992px,
1-up <=600px. Applied to both the English (/blog/) and Chinese (/zh/) listings;
topic rows still link to their /tags/ pages, plus an 'All posts' row. Drops the
now-unused .blog-layout / .blog-sidebar / .album-* rules.
* feat(blog): keep topic descriptions in the dropdown, two-column layout
Restore each topic's one-line description ('the words') in the
Browse-topics dropdown and lay the topics out in two columns: a full-width 'All
posts' row, then a 2-col grid of cards (pill + count + description), bound to
intro / intro_zh.
Hardening from an adversarial review pass:
- a11y: add a keyboard :focus-visible ring on the dropdown links/button
(the Docsy reboot's 'a { outline: none }' otherwise leaves no focus state);
darken the count pill to meet AA contrast.
- keep the words: 3-line description clamp so the longest intro_zh isn't
ellipsised.
- robustness: no-shrink guard on the card head for a future 12th topic;
collapse to one full-width column at <=760px so the tablet band isn't a
near-full-bleed 2-col panel.
- cleanup: drop the dead $allTags/$blogTags template vars and the unused
data-label on the card anchor; refresh stale 'sidebar' comments to 'dropdown'.
* fix(mobile): restore content gutter on landing pages + consistent drawer
menu fonts
Two mobile-only style fixes:
1. Left/right gutter. The theme's _styles_project.scss zeroes .container
padding globally; pages with a Bootstrap .col still get ~15px from the column,
but the custom landing pages (home, docs, events, downloads, team, users) drop
content straight into a bare .container, so on phones it sat flush against the
viewport edge. Add a 20px gutter at <=991.98px, page-scoped so it outranks the
theme rule without editing the theme. Blog/article pages keep their .col gutter
unchanged.
2. Drawer menu font consistency. In the slide-in mobile drawer the dropdown
groups (中文资料 / Links) rendered as tiny gray uppercase headers while the other
items were dark 15px/600 .nav-link. Make .sidebar .dropdown-title match
.nav-link. Scoped to .sidebar, so the desktop navbar is untouched.
* fix(mobile): drawer uses the site font stack (drop stale Lato fallback)
The mobile drawer's .nav-item carried the theme's font-family: Lato,
sans-serif, but Lato is no longer loaded (Google Fonts were dropped), so the
whole drawer fell back to generic sans-serif instead of the site's
-apple-system stack. Add font-family: inherit so the drawer matches the rest of
the UI. Completes the drawer font-consistency fix.
---
assets/scss/_custom_home.scss | 159 ++++++++++++++++++++++++++----------------
data/blog_topics.yml | 6 +-
layouts/blog/list.html | 84 +++++++++++-----------
layouts/zh/list.html | 77 ++++++++++----------
4 files changed, 186 insertions(+), 140 deletions(-)
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
index 8e7a966cf93..44a7ff7f57a 100644
--- a/assets/scss/_custom_home.scss
+++ b/assets/scss/_custom_home.scss
@@ -791,8 +791,8 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
.blog-year {
font-size: 12px; font-weight: 700; color: $muted; border: 0; padding: 0;
margin: 28px 0 12px; letter-spacing: .1em; text-transform: uppercase;
- // The very first year heading in the main column must align with the
- // sidebar's "Browse topics" heading on the same grid row.
+ // Tighten the first year heading's top margin — it now sits just below the
+ // Browse-topics topbar (no sidebar to align a shared grid row to).
&:first-child { margin-top: 4px; }
}
@@ -857,57 +857,75 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
.page-item.active .page-link { background: $brand; border-color: $brand;
color: #fff !important; }
}
- // ── Two-column layout: main posts + right "Browse topics" sidebar ─────
- .blog-layout {
- display: grid;
- grid-template-columns: minmax(0, 1fr) 300px;
- gap: 36px;
- align-items: start;
- }
- .blog-content { min-width: 0; } // prevent grid blowout from wide cards
- .blog-sidebar { position: relative; }
- // No internal scroll: the sidebar just scrolls with the page. (Sticky here
- // doesn't behave usefully — align-items: start sizes the grid cell to the
- // sidebar's own height, so there's nothing to stick to.)
- .blog-sidebar-inner { padding-right: 2px; }
- // Same font/weight/spacing as .blog-year so both column heads visually
- // align on the first row of .blog-layout.
- .blog-sidebar-head {
- font-size: 12px; font-weight: 700; letter-spacing: .1em;
- text-transform: uppercase; color: $muted;
- margin: 4px 0 12px; border: 0; padding: 0;
- }
- // With sidebar present the main grid should be 2 cols to keep cards readable
- .blog-grid { grid-template-columns: 1fr 1fr; }
-
- // ── "Album" topic cards — used inside the sidebar ─────────────────────
- .album-grid {
- display: grid; grid-template-columns: 1fr; gap: 10px;
- }
- .album-card {
- display: flex; flex-direction: column;
+ // ── Full-width post grid + a "Browse topics" dropdown filter ──────────
+ // The post grid stays 3-up (its base rule above) because the topic list
+ // now lives in a dropdown instead of a 300px sidebar, freeing the width.
+ .blog-topbar { display: flex; justify-content: flex-end; margin: 0 0 18px; }
+ .topic-filter { position: relative; }
+ .topic-filter-btn {
+ list-style: none; cursor: pointer; user-select: none;
+ display: inline-flex; align-items: center; gap: 8px;
+ height: 38px; padding: 0 14px;
+ background: #fff; border: 1px solid $line; border-radius: 10px;
+ font-size: 13px; font-weight: 600; color: $ink;
+ transition: border-color .15s ease, box-shadow .15s ease;
+ &::-webkit-details-marker { display: none; }
+ &::marker { content: ""; }
+ &:hover { border-color: #d6e4f5; }
+ }
+ .topic-filter[open] .topic-filter-btn {
+ border-color: #d6e4f5; box-shadow: 0 0 0 3px rgba(44, 108, 176, .10);
+ }
+ .topic-filter-caret { flex: 0 0 auto; transition: transform .18s ease; }
+ .topic-filter[open] .topic-filter-caret { transform: rotate(180deg); }
+ .topic-filter-menu {
+ position: absolute; right: 0; top: calc(100% + 8px); z-index: 30;
+ width: 580px; max-width: calc(100vw - 32px); max-height: 72vh; overflow-y:
auto;
background: #fff; border: 1px solid $line; border-radius: 12px;
- padding: 12px 14px; text-decoration: none;
- transition: box-shadow .18s ease, border-color .18s ease, transform .18s
ease;
- &:hover {
- box-shadow: 0 12px 28px -16px rgba(17,24,39,.22);
- border-color: #d6e4f5; transform: translateY(-1px);
- }
+ box-shadow: 0 24px 48px -24px rgba(17, 24, 39, .30);
+ padding: 8px;
}
- .album-top {
- display: flex; align-items: center; justify-content: space-between;
- gap: 8px; margin-bottom: 8px;
+ // Full-width "All posts" reset row above the two-column topic grid.
+ .topic-filter-all {
+ display: flex; align-items: center; justify-content: space-between; gap:
10px;
+ padding: 9px 10px; border-radius: 8px; text-decoration: none;
+ font-size: 13.5px; font-weight: 700; color: $ink;
+ border-bottom: 1px solid $line; margin-bottom: 6px;
+ &:hover { background: #f3f6fa; }
+ }
+ .topic-filter-grid {
+ display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
+ }
+ // Each topic keeps its pill, count and one-line description ("the words").
+ .topic-filter-card {
+ display: flex; flex-direction: column; gap: 6px;
+ padding: 10px; border-radius: 9px; text-decoration: none;
+ transition: background .12s ease;
+ &:hover { background: #f3f6fa; }
+ }
+ .topic-filter-card-top {
+ display: flex; align-items: center; justify-content: space-between; gap:
8px;
+ .blog-label { text-decoration: none; min-width: 0; }
+ .album-count { flex: 0 0 auto; }
+ }
+ .topic-filter-card-intro {
+ font-size: 12px; color: $body; line-height: 1.5;
+ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
+ }
+ // Keyboard focus ring. The Docsy reboot sets `a { outline: none }`, which
+ // would otherwise leave these link cards / buttons with no visible focus.
+ .topic-filter-btn:focus-visible,
+ .topic-filter-all:focus-visible,
+ .topic-filter-card:focus-visible {
+ outline: 2px solid rgba(55, 136, 208, .7);
+ outline-offset: 2px;
}
+ // The per-topic count pill, reused in the dropdown rows.
.album-count {
- font-size: 11px; font-weight: 800; color: $muted; letter-spacing: .04em;
+ font-size: 11px; font-weight: 800; color: #5b6573; letter-spacing: .04em;
padding: 1px 7px; border-radius: 999px;
background: #f3f6fa; border: 1px solid $line;
}
- .album-intro {
- font-size: 12.5px; color: $body; line-height: 1.5;
- margin: 0;
- display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
overflow: hidden;
- }
// ── Tag term page hero ─────────────────────────────────────────────────
.bf-back {
@@ -981,22 +999,24 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
}
}
-// Below 992px stack the sidebar above the post grid; topic cards become a
-// horizontal-scroll row so they don't dominate the viewport.
+// Step the post grid down on narrower viewports (3 → 2 → 1 columns).
@media (max-width: 992px) {
- .td-blog .blog-layout { grid-template-columns: 1fr; gap: 24px; }
- .td-blog .blog-sidebar { order: -1; }
- .td-blog .blog-sidebar-inner { position: static; max-height: none; overflow:
visible; }
- .td-blog .album-grid {
- display: flex; gap: 10px; overflow-x: auto;
- padding-bottom: 6px; scroll-snap-type: x mandatory;
- }
- .td-blog .album-card { flex: 0 0 240px; scroll-snap-align: start; }
.td-blog .blog-grid { grid-template-columns: 1fr 1fr; }
}
+// Collapse the two-column topic dropdown to one full-width column early, so
the
+// ~600–760px band gets a clean single column instead of a 580px panel almost
as
+// wide as the viewport.
+@media (max-width: 760px) {
+ .td-blog .topic-filter-menu { width: 100%; }
+ .td-blog .topic-filter-grid { grid-template-columns: 1fr; }
+}
@media (max-width: 600px) {
.td-blog .blog-grid { grid-template-columns: 1fr; }
.td-blog .blog-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px;
} }
+ // Make the dropdown trigger button full-width too on phones.
+ .td-blog .blog-topbar { justify-content: stretch; }
+ .td-blog .topic-filter { width: 100%; }
+ .td-blog .topic-filter-btn { width: 100%; justify-content: space-between; }
}
// =====================================================================
@@ -1302,7 +1322,10 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
padding: 12px 10px 24px;
.nav-links { padding: 0; }
- .nav-links .nav-item, .nav-links .repo-link { border: 0; margin: 0; }
+ // `font-family: inherit` neutralizes the theme's stale `Lato` (dropped with
+ // Google Fonts) so the drawer uses the site's system font stack, not the
+ // generic sans-serif fallback.
+ .nav-links .nav-item, .nav-links .repo-link { border: 0; margin: 0;
font-family: inherit; }
// top-level links
.nav-links a.nav-link {
@@ -1314,12 +1337,15 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%,
#3788D0 100%);
// dropdown groups (中文资料 / Links)
.dropdown-wrapper { margin-top: 4px; }
+ // The dropdown groups (中文资料 / Links) are top-level menu entries too, so
+ // match the .nav-link items above instead of rendering as tiny gray
uppercase
+ // section labels — keeps the drawer's font style consistent.
.dropdown-wrapper .dropdown-title {
display: flex; align-items: center; justify-content: space-between;
padding: 10px 14px; border-radius: 9px;
- color: #8a93a3; font-weight: 700; font-size: 11px; letter-spacing: .08em;
text-transform: uppercase;
+ color: #4b5563; font-weight: 600; font-size: 15px; line-height: 1.3;
cursor: pointer;
- &:hover { background: #f4f7fb; color: #4b5563; }
+ &:hover { background: #eef5fd; color: #1F1F20; }
}
.dropdown-wrapper .nav-dropdown { margin: 2px 0 8px; padding: 0; list-style:
none; }
.dropdown-wrapper .nav-dropdown .dropdown-item a {
@@ -1331,6 +1357,21 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0
100%);
.dropdown-wrapper .dropdown-title .arrow { display: none; }
}
+// ── Mobile gutter for the custom full-bleed landing pages
─────────────────────
+// These pages drop content straight into a <section> > .container with no
+// Bootstrap .col to supply a gutter, and the theme zeroes .container padding
+// globally — so on small screens the content sits flush against the viewport
+// edge. Page-scoped so it outranks the theme's bare `.container { padding: 0
}`
+// without touching the theme; the blog/article pages keep their .col gutter.
+@media (max-width: 991.98px) {
+ .td-home .container,
+ .td-docs-landing .container,
+ .td-events .container,
+ .td-downloads .container,
+ .td-team .container,
+ .td-users .container { padding-left: 20px; padding-right: 20px; }
+}
+
// ── Permalink "hook" on project cards (docs landing + downloads)
──────────────
// Global (cards live under different page scopes); copies the deep link on
click.
.card-anchor {
diff --git a/data/blog_topics.yml b/data/blog_topics.yml
index 257729e4669..ed489be59ae 100644
--- a/data/blog_topics.yml
+++ b/data/blog_topics.yml
@@ -1,7 +1,7 @@
# Single source of truth for blog topics (a.k.a. "tags").
#
# Used by:
-# - layouts/blog/list.html + layouts/zh/list.html — sidebar topic cards
+# - layouts/blog/list.html + layouts/zh/list.html — Browse-topics
dropdown cards
# - layouts/partials/blog-topic-styles.html — generates the
#
.blog-label[data-label="X"]
# color rules at
build time
@@ -11,8 +11,8 @@
#
# Field reference:
# name Canonical tag string. Match exactly in post frontmatter `tags:`.
-# intro One-line EN description, shown on /blog/ sidebar topic card.
-# intro_zh CN counterpart, shown on /zh/ sidebar topic card.
+# intro One-line EN description, shown on the /blog/ Browse-topics
dropdown card.
+# intro_zh CN counterpart, shown on the /zh/ Browse-topics dropdown card.
# color bg/fg/border for the colored pill. Bg should be a light tint,
# fg the accessible darker text/icon color, border the same hue
# slightly deeper than bg.
diff --git a/layouts/blog/list.html b/layouts/blog/list.html
index 18697e978d4..7e47f6c1e98 100644
--- a/layouts/blog/list.html
+++ b/layouts/blog/list.html
@@ -7,12 +7,6 @@
{{ $pages := ($.Scratch.Get "blog-pages") }}
{{ $groups := $pages.GroupByDate (i18n "year") }}
-{{- /* Tag list derived only from blog posts (Site.Taxonomies.tags would
- also include docs frontmatter, which is unrelated). */ -}}
-{{ $allTags := slice }}
-{{ range $pages }}{{ range .Params.tags }}{{ $allTags = $allTags | append .
}}{{ end }}{{ end }}
-{{ $blogTags := sort (uniq $allTags) }}
-
{{- /* Topics (name + intro + color) are defined in data/blog_topics.yml. */
-}}
{{ $topics := .Site.Data.blog_topics.topics }}
@@ -25,52 +19,60 @@
</section>
<div class="container blog-wrap">
- <div class="blog-layout">
- <div class="blog-content">
- {{ range $groups }}
- <h2 class="blog-year">{{ T "post_posts_in" }} {{ .Key }}</h2>
- <div class="blog-grid">
- {{ range .Pages }}
- <article class="blog-card">
- {{ with .Params.tags }}
- <div class="blog-labels">
- {{ range . }}<a class="blog-label" data-label="{{ . }}" href="{{
printf "/tags/%s/" (. | urlize) | relLangURL }}">{{ . }}</a>{{ end }}
- </div>
- {{ end }}
- <h3 class="blog-card-title"><a href="{{ .RelPermalink }}">{{
.LinkTitle }}</a></h3>
- <p class="blog-card-preview">{{ with .Description }}{{ . }}{{ else
}}{{ .Plain | safeHTML | truncate 160 }}{{ end }}</p>
- <div class="blog-card-foot">
- <span class="blog-date">{{ .Date.Format "Jan 2, 2006" }}</span>
- {{ with .Params.author }}<span class="blog-author">{{ . |
markdownify }}</span>{{ end }}
- </div>
- </article>
- {{ end }}
- </div>
- {{ end }}
- </div>
-
- {{- /* Right sidebar: "Browse topics" — one compact card per canonical tag,
- clicking opens /tags/<term>/. */ -}}
- <aside class="blog-sidebar">
- <div class="blog-sidebar-inner">
- <h2 class="blog-sidebar-head">Browse topics</h2>
- <div class="album-grid is-sidebar">
+ {{- /* Topic filter: a dropdown of the canonical tags (data/blog_topics.yml),
+ each linking to its /tags/<term>/ page. Replaces the old right sidebar
+ so the post grid gets the full width (3-up). */ -}}
+ <div class="blog-topbar">
+ <details class="topic-filter">
+ <summary class="topic-filter-btn">
+ <span>Browse topics</span>
+ <svg class="topic-filter-caret" width="13" height="13" viewBox="0 0 24
24" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor"
stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+ </summary>
+ <div class="topic-filter-menu">
+ <a class="topic-filter-all" href="{{ "/blog/" | relLangURL }}">
+ <span>All posts</span>
+ <span class="album-count">{{ len $pages }}</span>
+ </a>
+ <div class="topic-filter-grid">
{{ range $topics }}
{{ $t := .name }}
{{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }}
{{ if gt (len $tagged) 0 }}
- <a class="album-card" data-label="{{ $t }}" href="{{ printf
"/tags/%s/" ($t | urlize) | relLangURL }}">
- <div class="album-top">
+ <a class="topic-filter-card" href="{{ printf "/tags/%s/" ($t |
urlize) | relLangURL }}">
+ <span class="topic-filter-card-top">
<span class="blog-label" data-label="{{ $t }}">{{ $t }}</span>
<span class="album-count">{{ len $tagged }}</span>
- </div>
- <p class="album-intro">{{ .intro }}</p>
+ </span>
+ <span class="topic-filter-card-intro">{{ .intro }}</span>
</a>
{{ end }}
{{ end }}
</div>
</div>
- </aside>
+ </details>
+ </div>
+
+ <div class="blog-content">
+ {{ range $groups }}
+ <h2 class="blog-year">{{ T "post_posts_in" }} {{ .Key }}</h2>
+ <div class="blog-grid">
+ {{ range .Pages }}
+ <article class="blog-card">
+ {{ with .Params.tags }}
+ <div class="blog-labels">
+ {{ range . }}<a class="blog-label" data-label="{{ . }}" href="{{
printf "/tags/%s/" (. | urlize) | relLangURL }}">{{ . }}</a>{{ end }}
+ </div>
+ {{ end }}
+ <h3 class="blog-card-title"><a href="{{ .RelPermalink }}">{{
.LinkTitle }}</a></h3>
+ <p class="blog-card-preview">{{ with .Description }}{{ . }}{{ else
}}{{ .Plain | safeHTML | truncate 160 }}{{ end }}</p>
+ <div class="blog-card-foot">
+ <span class="blog-date">{{ .Date.Format "Jan 2, 2006" }}</span>
+ {{ with .Params.author }}<span class="blog-author">{{ . |
markdownify }}</span>{{ end }}
+ </div>
+ </article>
+ {{ end }}
+ </div>
+ {{ end }}
</div>
</div>
{{ end }}
diff --git a/layouts/zh/list.html b/layouts/zh/list.html
index 3c2344391d1..a7012749dcb 100644
--- a/layouts/zh/list.html
+++ b/layouts/zh/list.html
@@ -7,10 +7,6 @@
{{ $pages := ($.Scratch.Get "blog-pages") }}
{{ $groups := $pages.GroupByDate (i18n "year") }}
-{{ $allTags := slice }}
-{{ range $pages }}{{ range .Params.tags }}{{ $allTags = $allTags | append .
}}{{ end }}{{ end }}
-{{ $blogTags := sort (uniq $allTags) }}
-
{{ $topics := .Site.Data.blog_topics.topics }}
<section class="blog-hero">
@@ -22,50 +18,57 @@
</section>
<div class="container blog-wrap">
- <div class="blog-layout">
- <div class="blog-content">
- {{ range $groups }}
- <h2 class="blog-year">{{ .Key }} 年</h2>
- <div class="blog-grid">
- {{ range .Pages }}
- <article class="blog-card">
- {{ with .Params.tags }}
- <div class="blog-labels">
- {{ range . }}<a class="blog-label" data-label="{{ . }}" href="{{
printf "/tags/%s/" (. | urlize) | relLangURL }}">{{ . }}</a>{{ end }}
- </div>
- {{ end }}
- <h3 class="blog-card-title"><a href="{{ .RelPermalink }}">{{
.LinkTitle }}</a></h3>
- <p class="blog-card-preview">{{ with .Description }}{{ . }}{{ else
}}{{ .Plain | safeHTML | truncate 160 }}{{ end }}</p>
- <div class="blog-card-foot">
- <span class="blog-date">{{ .Date.Format "2006-01-02" }}</span>
- {{ with .Params.author }}<span class="blog-author">{{ . |
markdownify }}</span>{{ end }}
- </div>
- </article>
- {{ end }}
- </div>
- {{ end }}
- </div>
-
- <aside class="blog-sidebar">
- <div class="blog-sidebar-inner">
- <h2 class="blog-sidebar-head">按主题浏览</h2>
- <div class="album-grid is-sidebar">
+ <div class="blog-topbar">
+ <details class="topic-filter">
+ <summary class="topic-filter-btn">
+ <span>按主题浏览</span>
+ <svg class="topic-filter-caret" width="13" height="13" viewBox="0 0 24
24" aria-hidden="true"><path d="M6 9l6 6 6-6" fill="none" stroke="currentColor"
stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"/></svg>
+ </summary>
+ <div class="topic-filter-menu">
+ <a class="topic-filter-all" href="{{ "/zh/" | relLangURL }}">
+ <span>全部文章</span>
+ <span class="album-count">{{ len $pages }}</span>
+ </a>
+ <div class="topic-filter-grid">
{{ range $topics }}
{{ $t := .name }}
{{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }}
{{ if gt (len $tagged) 0 }}
- <a class="album-card" data-label="{{ $t }}" href="{{ printf
"/tags/%s/" ($t | urlize) | relLangURL }}">
- <div class="album-top">
+ <a class="topic-filter-card" href="{{ printf "/tags/%s/" ($t |
urlize) | relLangURL }}">
+ <span class="topic-filter-card-top">
<span class="blog-label" data-label="{{ $t }}">{{ $t }}</span>
<span class="album-count">{{ len $tagged }}</span>
- </div>
- <p class="album-intro">{{ .intro_zh }}</p>
+ </span>
+ <span class="topic-filter-card-intro">{{ .intro_zh }}</span>
</a>
{{ end }}
{{ end }}
</div>
</div>
- </aside>
+ </details>
+ </div>
+
+ <div class="blog-content">
+ {{ range $groups }}
+ <h2 class="blog-year">{{ .Key }} 年</h2>
+ <div class="blog-grid">
+ {{ range .Pages }}
+ <article class="blog-card">
+ {{ with .Params.tags }}
+ <div class="blog-labels">
+ {{ range . }}<a class="blog-label" data-label="{{ . }}" href="{{
printf "/tags/%s/" (. | urlize) | relLangURL }}">{{ . }}</a>{{ end }}
+ </div>
+ {{ end }}
+ <h3 class="blog-card-title"><a href="{{ .RelPermalink }}">{{
.LinkTitle }}</a></h3>
+ <p class="blog-card-preview">{{ with .Description }}{{ . }}{{ else
}}{{ .Plain | safeHTML | truncate 160 }}{{ end }}</p>
+ <div class="blog-card-foot">
+ <span class="blog-date">{{ .Date.Format "2006-01-02" }}</span>
+ {{ with .Params.author }}<span class="blog-author">{{ . |
markdownify }}</span>{{ end }}
+ </div>
+ </article>
+ {{ end }}
+ </div>
+ {{ end }}
</div>
</div>
{{ end }}
