This is an automated email from the ASF dual-hosted git repository. wu-sheng pushed a commit to branch blog/blog-index-3col in repository https://gitbox.apache.org/repos/asf/skywalking-website.git
commit f5cae8224ea09661a16afa2bef129bb87c70979f Author: Wu Sheng <[email protected]> AuthorDate: Mon Jun 22 10:35:32 2026 +0800 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. --- assets/scss/_custom_home.scss | 93 +++++++++++++++++++------------------------ layouts/blog/list.html | 87 +++++++++++++++++++++------------------- layouts/zh/list.html | 82 +++++++++++++++++++------------------- 3 files changed, 129 insertions(+), 133 deletions(-) diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss index 8e7a966cf93..51dc6e138ab 100644 --- a/assets/scss/_custom_home.scss +++ b/assets/scss/_custom_home.scss @@ -857,57 +857,52 @@ $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; - } + // ── 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-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; + .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: 280px; max-height: 64vh; 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: 6px; } - .album-top { + .topic-filter-item { display: flex; align-items: center; justify-content: space-between; - gap: 8px; margin-bottom: 8px; + gap: 10px; padding: 8px 10px; border-radius: 8px; text-decoration: none; + transition: background .12s ease; + .blog-label { text-decoration: none; } + &:hover { background: #f3f6fa; } + &.is-all { + font-weight: 700; color: $ink; + border-bottom: 1px solid $line; border-radius: 8px 8px 0 0; margin-bottom: 4px; + } } + // The per-topic count pill, reused in the dropdown rows. .album-count { font-size: 11px; font-weight: 800; color: $muted; 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 +976,18 @@ $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; } } @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; } } + // Let the topic dropdown go full-width so its menu never overflows. + .td-blog .blog-topbar { justify-content: stretch; } + .td-blog .topic-filter { width: 100%; } + .td-blog .topic-filter-btn { width: 100%; justify-content: space-between; } + .td-blog .topic-filter-menu { width: 100%; } } // ===================================================================== diff --git a/layouts/blog/list.html b/layouts/blog/list.html index 18697e978d4..a29d2edcfc7 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -25,52 +25,55 @@ </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> + {{- /* 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-item is-all" href="{{ "/blog/" | relLangURL }}"> + <span class="topic-filter-all">All posts</span> + <span class="album-count">{{ len $pages }}</span> + </a> + {{ range $topics }} + {{ $t := .name }} + {{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }} + {{ if gt (len $tagged) 0 }} + <a class="topic-filter-item" data-label="{{ $t }}" href="{{ printf "/tags/%s/" ($t | urlize) | relLangURL }}"> + <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span> + <span class="album-count">{{ len $tagged }}</span> + </a> + {{ end }} {{ end }} </div> - {{ end }} - </div> + </details> + </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"> - {{ 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"> - <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span> - <span class="album-count">{{ len $tagged }}</span> - </div> - <p class="album-intro">{{ .intro }}</p> - </a> - {{ end }} - {{ end }} + <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> - </div> - </aside> + {{ 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..9befe83efb3 100644 --- a/layouts/zh/list.html +++ b/layouts/zh/list.html @@ -22,50 +22,52 @@ </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> + <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-item is-all" href="{{ "/zh/" | relLangURL }}"> + <span class="topic-filter-all">全部文章</span> + <span class="album-count">{{ len $pages }}</span> + </a> + {{ range $topics }} + {{ $t := .name }} + {{ $tagged := where $pages ".Params.tags" "intersect" (slice $t) }} + {{ if gt (len $tagged) 0 }} + <a class="topic-filter-item" data-label="{{ $t }}" href="{{ printf "/tags/%s/" ($t | urlize) | relLangURL }}"> + <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span> + <span class="album-count">{{ len $tagged }}</span> + </a> + {{ end }} {{ end }} </div> - {{ end }} - </div> + </details> + </div> - <aside class="blog-sidebar"> - <div class="blog-sidebar-inner"> - <h2 class="blog-sidebar-head">按主题浏览</h2> - <div class="album-grid is-sidebar"> - {{ 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"> - <span class="blog-label" data-label="{{ $t }}">{{ $t }}</span> - <span class="album-count">{{ len $tagged }}</span> - </div> - <p class="album-intro">{{ .intro_zh }}</p> - </a> - {{ end }} - {{ end }} + <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> - </div> - </aside> + {{ 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 }}
