apache · wu-sheng · May 25, 2026 · May 25, 2026
diff --git a/assets/scss/_custom_home.scss b/assets/scss/_custom_home.scss
@@ -761,10 +761,13 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
     p  { font-size: 16px; color: $body; line-height: 1.6; margin: 0; max-width: 660px; }
   }
 
-  .blog-wrap { max-width: 1200px; padding-top: 32px; padding-bottom: 64px; }
+  .blog-wrap { max-width: 1200px; padding-top: 18px; padding-bottom: 64px; }
   .blog-year {
-    font-size: 14px; font-weight: 700; color: $muted; border: 0; padding: 0;
-    margin: 28px 0 16px; letter-spacing: .02em;
+    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.
+    &:first-child { margin-top: 4px; }
   }
 
   .blog-grid {
@@ -786,18 +789,9 @@ $brand-grad: linear-gradient(180deg, #479EEB 0%, #3788D0 100%);
     padding: 2px 9px; border-radius: 999px;
     background: #eef1f5; color: #5b6573; border: 1px solid #e1e6ee;
   }
-  // label colors
-  .blog-label[data-label="Release"]      { background:#e6f6ec; color:#1a7f43; border-color:#bfe8cd; }
-  .blog-label[data-label="Tracing"]      { background:#fdecde; color:#c2580d; border-color:#f6d4ba; }
-  .blog-label[data-label="Metrics"]      { background:#e2f1fd; color:#1d6fb8; border-color:#c4e1f7; }
-  .blog-label[data-label="Logging"]      { background:#f0e7fd; color:#7c3aed; border-color:#ddccfa; }
-  .blog-label[data-label="Profiling"]    { background:#def5e7; color:#11814b; border-color:#bce8cf; }
-  .blog-label[data-label="Storage"]      { background:#e0f7fa; color:#0e7490; border-color:#bdeaf1; }
-  .blog-label[data-label="Agents"]       { background:#e8eafd; color:#4f46e5; border-color:#d3d7fa; }
-  .blog-label[data-label="Cloud Native"] { background:#e6f3fe; color:#0369a1; border-color:#c5e4fb; }
-  .blog-label[data-label="AI"]           { background:#fde8f3; color:#be2069; border-color:#f8cbe2; }
-  .blog-label[data-label="Community"]    { background:#eef1f5; color:#5b6573; border-color:#e1e6ee; }
-  .blog-label[data-label="Engineering"]  { background:#fef3e2; color:#b45309; border-color:#fbe0bb; }
+  // Per-topic colors are generated from data/blog_topics.yml by the
+  // partial layouts/partials/blog-topic-styles.html (included in
+  // blog/baseof.html, zh/baseof.html and tags/baseof.html).
 
   .blog-card-title {
     font-size: 17px; font-weight: 700; line-height: 1.35; margin: 0 0 10px;
@@ -836,14 +830,147 @@ $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;
+    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);
+    }
+  }
+  .album-top {
+    display: flex; align-items: center; justify-content: space-between;
+    gap: 8px; margin-bottom: 8px;
+  }
+  .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 {
+    display: inline-flex; align-items: center; gap: 4px;
+    color: $muted; font-size: 13px; font-weight: 600; text-decoration: none;
+    margin-bottom: 10px;
+    &:hover { color: $brand; }
+  }
+  .tag-hero-top {
+    display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
+  }
+  .tag-hero-chip {
+    font-size: 12px; padding: 4px 12px; line-height: 1.2;
+  }
+  .tag-hero-count {
+    font-size: 12px; font-weight: 700; color: $muted; letter-spacing: .04em;
+    text-transform: uppercase;
+  }
+
+  // ── Single-post right sidebar polish ────────────────────────────────────
+  // Blog detail page reuses .td-toc but lives under .td-blog. No left
+  // border — the vertical line made the natural prose-to-TOC gap look like
+  // an empty strip; without it the column reads cleanly.
+  .td-toc {
+    border-left: 0;
+    padding-left: 0;
+    font-size: 13px;
+    .td-toc-label {
+      font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
+      color: $muted; margin: 4px 0 10px;
+    }
+    .td-page-meta a {
+      display: inline-flex; align-items: center; gap: 6px;
+      color: $muted; font-weight: 600; font-size: 12.5px;
+      &:hover { color: $brand; }
+    }
+    #TableOfContents {
+      border-left: 0;
+      ul { padding-left: 0; list-style: none; margin: 0; }
+      li { line-height: 1.35; padding: 0; }
+      a {
+        display: block; position: relative;
+        padding: 5px 0 5px 12px; margin-left: -1px;
+        color: $muted; font-weight: 500;
+        border-left: 2px solid transparent;
+        transition: color .12s ease, border-color .12s ease;
+        &:hover { color: $ink; }
+        &.active { color: $brand; font-weight: 700; border-left-color: $brand; }
+      }
+      ul ul    a { padding-left: 24px; font-size: 12.5px; font-weight: 400; }
+      ul ul ul a { padding-left: 36px; }
+      ul ul ul ul a { padding-left: 48px; }
+    }
+    // Docsy injects an empty <div class="td-page-meta"> (edit-on-github
+    // etc.) above the TOC; the blog has nothing to put there so hide it,
+    // otherwise it leaves an awkward gap.
+    .td-page-meta { display: none; }
+  }
+  // Inline tag pills shown above the post body (replaces the theme's
+  // "Tags | …" link list). Same .blog-label pills as the /blog/ listing.
+  .post-tags-list {
+    display: flex; flex-wrap: wrap; gap: 6px;
+    .blog-label {
+      text-decoration: none;
+      transition: filter .12s ease, transform .12s ease;
+      &:hover { filter: brightness(.96); transform: translateY(-1px); }
+    }
+  }
+  .post-tags-list--inline {
+    margin: 4px 0 24px;
+  }
 }
 
-@media (max-width: 992px) { .td-blog .blog-grid { grid-template-columns: 1fr 1fr; } }
+// Below 992px stack the sidebar above the post grid; topic cards become a
+// horizontal-scroll row so they don't dominate the viewport.
+@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; }
-    .blog-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
-  }
+  .td-blog .blog-grid { grid-template-columns: 1fr; }
+  .td-blog .blog-hero { padding-top: calc(4rem + 18px); h1 { font-size: 30px; } }
 }
 
 // =====================================================================

diff --git a/content/blog/2018-05-24-skywalking-net/index.md b/content/blog/2018-05-24-skywalking-net/index.md
@@ -4,7 +4,7 @@ date: 2018-05-24
 author: Haoyang Liu, the major maintainer of SkyWalking .NET Core agent
 description: "SkyWalking .NET Core SDK is available."
 tags:
-- Agents
+  - Agents
 ---
 
 Translated by Sheng Wu.

diff --git a/content/blog/2018-12-12-skywalking-service-mesh-ready/index.md b/content/blog/2018-12-12-skywalking-service-mesh-ready/index.md
@@ -4,8 +4,8 @@ date: 2018-12-05
 author: Wu Sheng, tetrate
 description: "The integration of SkyWalking and Istio Service Mesh yields an essential open-source tool for resolving the chaos created by the proliferation of siloed, cloud-based services."
 tags:
-- Release
-- Cloud Native
+  - Release
+  - Cloud Native
 ---
 
 Original link, [Tetrate.io blog](https://www.tetrate.io/blog/apache-skywalking-v6/)

diff --git a/content/blog/2019-01-01-Understand-Trace/index.md b/content/blog/2019-01-01-Understand-Trace/index.md
@@ -4,7 +4,7 @@ date: 2019-01-01
 author: Wu Sheng(Tetrate)
 description: "Distributed tracing is a necessary part of modern microservices architecture, but how to understand or use distributed tracing data is unclear to some end users. This blog overviews typical distributed tracing use cases with new visualization features in SkyWalking v6."
 tags:
-- Tracing
+  - Tracing
 ---
 
 ## Background

diff --git a/content/blog/2019-01-25-mesh-loadtest/index.md b/content/blog/2019-01-25-mesh-loadtest/index.md
@@ -4,8 +4,8 @@ date: 2019-01-25
 author: Hongtao Gao(Tetrate)
 description: "Service mesh receiver performance test on Google Kubernetes Engine."
 tags:
-- Profiling
-- Engineering
+  - Profiling
+  - Engineering
 ---
 
 - Author: Hongtao Gao, Apache SkyWalking & ShardingShpere PMC

diff --git a/content/blog/2019-09-25-alarm-webhook-share/index.md b/content/blog/2019-09-25-alarm-webhook-share/index.md
@@ -4,7 +4,7 @@ date: 2019-09-25
 author: Wei Qiang
 description: " Alerts via SkyWalking alarm webhook for better perception of tracing."
 tags:
-- Engineering
+  - Engineering
 ---
 
 - Author: Wei Qiang

diff --git a/content/blog/2020-01-20-celebrate-200th-contributor/index.md b/content/blog/2020-01-20-celebrate-200th-contributor/index.md
@@ -4,7 +4,7 @@ date: 2020-01-20
 author: Sheng Wu(Tetrate)
 description: " SkyWalking community joins the 200+ contributors open source club."
 tags:
-- Community
+  - Community
 ---
 
 - Author: Wu Sheng, tetrate.io, SkyWalking original creator, SkyWalking V.P.

diff --git a/content/blog/2020-04-13-apache-skywalking-profiling/index.md b/content/blog/2020-04-13-apache-skywalking-profiling/index.md
@@ -4,9 +4,9 @@ date: 2020-04-13
 author: "Sheng Wu, Adrian Cole and Han Liu"
 description: "This post introduces a way to automatically profile code in production with Apache SkyWalking. We believe the profile method helps reduce maintenance and overhead while increasing the precision in root cause analysis."
 tags:
-- Profiling
-- Agents
-- Tracing
+  - Profiling
+  - Agents
+  - Tracing
 ---
 
 *This post originally appears on [The New Stack](https://thenewstack.io/apache-skywalking-use-profiling-to-fix-the-blind-spot-of-distributed-tracing/)*

diff --git a/content/blog/2020-07-26-apdex-and-skywalking/index.md b/content/blog/2020-07-26-apdex-and-skywalking/index.md
@@ -4,7 +4,7 @@ date: 2020-07-26
 author: Srinivasan Ramaswamy(Tetrate)
 description: " In managing Service Mesh Health, Asking `How are you' is more profound than `What are your symptoms'. Apdex goes a long way in helping this."
 tags:
-- Cloud Native
+  - Cloud Native
 ---
 
 - Author: Srinivasan Ramaswamy, tetrate

diff --git a/content/blog/2020-08-03-skywalking8-1-release/index.md b/content/blog/2020-08-03-skywalking8-1-release/index.md
@@ -4,8 +4,8 @@ date: 2020-08-03
 author: Srinivasan Ramaswamy(Tetrate)
 description: " SpringSleuth metrics, endpoint dependency detection, Kafka transport traces and metrics."
 tags:
-- Release
-- Agents
+  - Release
+  - Agents
 ---
 
 - Author: Sheng Wu, Hongtao Gao, and Tevah Platt(Tetrate)

diff --git a/content/blog/2020-08-11-observability-at-scale/index.md b/content/blog/2020-08-11-observability-at-scale/index.md
@@ -4,7 +4,7 @@ date: 2020-08-11
 author: Sheng Wu(Tetrate)
 description: " SkyWalking evolved to address the problem of observability at scale, and grew from a pure tracing system to a feature-rich observability platform that is now used to analyze deployments that collect tens of billions of traces per day. "
 tags:
-- Community
+  - Community
 ---
 
 - Author: Sheng Wu

diff --git a/content/blog/2020-10-29-skywalking8-2-release/index.md b/content/blog/2020-10-29-skywalking8-2-release/index.md
@@ -4,8 +4,8 @@ date: 2020-10-29
 author: Zhenxu Ke, Sheng Wu, Hongtao Gao, and Tevah Platt. tetrate.io
 description: "Browser Side Monitoring; Query Traces by Tags; Meter Analysis Language; Composite Alert Rules"
 tags:
-- Release
-- Agents
+  - Release
+  - Agents
 ---
 
 ![](0081Kckwly1gkl5m6kv3uj31lb0u0jum.jpg)

diff --git a/content/blog/2020-11-21-apachecon-keynote/index.md b/content/blog/2020-11-21-apachecon-keynote/index.md
@@ -4,7 +4,7 @@ date: 2020-11-20
 author: Sheng Wu, Founding Engineer, Tetrate.io
 description: "ApacheCon@Home 2020 Keynote, the progress about China embracing the Apache culture, and willing of enhancing the whole Apache community."
 tags:
-- Community
+  - Community
 ---
 
 Sheng Wu is a founding engineer at tetrate.io, leads the observability for service mesh and hybrid cloud. A searcher, evangelist, and developer in the observability, distributed tracing, and APM. He is a member of the Apache Software Foundation. Love open source software and culture. Created the Apache SkyWalking project and being its VP and PMC member. Co-founder and PMC member of Apache ShardingSphere. Also as a PMC member of Apache Incubator and APISIX. He is awarded as Microsoft MVP, Alibaba Cloud MVP, Tencent Cloud TVP.

diff --git a/content/blog/2020-11-21-apachecon-obs-apisix/index.md b/content/blog/2020-11-21-apachecon-obs-apisix/index.md
@@ -4,7 +4,7 @@ date: 2020-11-21
 author: Yuansheng Wang. Apache APISIX PMC member.
 description: "ApacheCon@Home 2020 Observability Track"
 tags:
-- Community
+  - Community
 ---
 
 Apache APISIX is a cloud-native microservices API gateway, delivering the ultimate performance, security, open-source and scalable platform for all your APIs and microservices. Apache SkyWalking: an APM(application performance monitor) system, especially designed for microservices, cloud-native and container-based (Docker, Kubernetes, Mesos) architectures. Through the powerful plug-in mechanism of Apache APISIX, Apache Skywalking is quickly supported, so that we can see the complete life cycle of requests from the edge to the internal service. Monitor and manage each request in a visual way, and improve the observability of the service.

diff --git a/content/blog/2020-11-21-apachecon-obs-shardingsphere/index.md b/content/blog/2020-11-21-apachecon-obs-shardingsphere/index.md
@@ -4,7 +4,7 @@ date: 2020-11-21
 author: Juan Pan. Apache ShardingSphere PMC member.
 description: "ApacheCon@Home 2020 Observability Track"
 tags:
-- Community
+  - Community
 ---
 
 The APM system provides the tracing or metrics for distributed systems or microservice architectures. Back to APM themselves, they always need backend storage to store the necessary massive data. What are the features required for backend storage? Simple, fewer dependencies, widely used query language, and the efficiency could be into your consideration. Based on that, traditional SQL databases (like MySQL) or NoSQL databases would be better choices. However, this topic will present another backend storage solution for the APM system viewing from NewSQL. Taking Apache Skywalking for instance, this talking will share how to make use of Apache ShardingSphere, a distributed database middleware ecosystem to extend the APM system's storage capability.

diff --git a/content/blog/2020-11-21-apachecon-obs-sourcemarker/index.md b/content/blog/2020-11-21-apachecon-obs-sourcemarker/index.md
@@ -4,7 +4,7 @@ date: 2020-11-21
 author: Brandon Fergerson. Apache SkyWalking committer.
 description: "ApacheCon@Home 2020 Observability Track"
 tags:
-- Community
+  - Community
 ---
 
 Today's monitoring solutions are geared towards operational tasks, displaying behavior as time-series graphs inside dashboards and other abstractions. These abstractions are immensely useful but are largely designed for software operators, whose responsibilities require them to think in systems, rather than the underlying source code. This is problematic given that an ongoing trend of software development is the blurring boundaries between building and operating software. This trend makes it increasingly necessary for programming environments to not just support development-centric activities, but operation-centric activities as well. Such is the goal of the feedback-driven development approach. By combining IDE and APM technology, software developers can intuitively explore multiple dimensions of their software simultaneously with continuous feedback about their software from inception to production.

diff --git a/content/blog/2020-11-21-apachecon-obs-storage/index.md b/content/blog/2020-11-21-apachecon-obs-storage/index.md
@@ -4,7 +4,7 @@ date: 2020-11-21
 author: Hongtao Gao. Apache SkyWalking PMC member. Tetrate.io
 description: "ApacheCon@Home 2020 Observability Track"
 tags:
-- Community
+  - Community
 ---
 
 Over the past few years, and coupled with the growing adoption of microservices, distributed tracing has emerged as one of the most commonly used monitoring and troubleshooting methodologies. New tracing tools are increasingly being introduced, driving adoption even further. One of these tools is Apache SkyWalking, a popular open-source tracing, and APM platform. This talk explores the history of the SkyWalking storage module, shows the evolution of distributed tracing storage layers, from the traditional relational database to document-based search engine. I hope that this talk contributes to the understanding of history and also that it helps to clarify the different types of storage that are available to organizations today.

diff --git a/content/blog/2020-11-25-skywalking-satellite-0.1.0-design/index.md b/content/blog/2020-11-25-skywalking-satellite-0.1.0-design/index.md
@@ -4,8 +4,8 @@ date: 2020-11-25
 author: Jiapeng Liu. Apache SkyWalking Committer.
 description: "The design of Satellite 0.1.0.  The structure of the project would follow this design."
 tags:
-- Agents
-- Engineering
+  - Agents
+  - Engineering
 ---
 
 

diff --git a/content/blog/2020-12-03-obs-service-mesh-with-sw-and-als/index.md b/content/blog/2020-12-03-obs-service-mesh-with-sw-and-als/index.md
@@ -4,7 +4,7 @@ date: 2020-12-03
 author: Zhenxu Ke, Sheng Wu, and Tevah Platt. tetrate.io
 description: In this tutorial, learn how to use Apache SkyWalking for service mesh observability without Istio Mixer
 tags:
-- Cloud Native
+  - Cloud Native
 ---
 
 ![](canyonhorseshoe.jpg)

diff --git a/content/blog/2021-01-01-300-contributors-mark/index.md b/content/blog/2021-01-01-300-contributors-mark/index.md
@@ -4,7 +4,7 @@ date: 2020-12-22
 author: Sheng Wu, Tetrate.io, Apache SkyWalking Creator. [GitHub](https://github.com/wu-sheng) [Twitter](https://twitter.com/wusheng1108) [Linkedin](https://www.linkedin.com/in/wusheng1108)
 description: "SkyWalking hits 300 contributors mark at one single repository"
 tags:
-- Community
+  - Community
 ---
 
 Apache SkyWalking is an open source APM for distributed system. Provide tracing, service mesh observability, metrics analysis, alarm and visualization.

diff --git a/content/blog/2021-01-17-elastic-change-license/index.md b/content/blog/2021-01-17-elastic-change-license/index.md
@@ -4,7 +4,7 @@ date: 2021-01-17
 author: Sheng Wu, Tetrate.io, Apache SkyWalking Creator. [GitHub](https://github.com/wu-sheng) [Twitter](https://twitter.com/wusheng1108) [Linkedin](https://www.linkedin.com/in/wusheng1108)
 description: "Elastic Search server doesn't release under Apache 2.0 anymore. What is the impact to the SkyWalking project?"
 tags:
-- Community
+  - Community
 ---
 
 [Elastic](https://elastic.co) announced their license change, [**Upcoming licensing changes to Elasticsearch and Kibana**.](https://www.elastic.co/blog/licensing-change)

diff --git a/content/blog/2021-01-23-tencent-cloud-violates-aplv2/index.md b/content/blog/2021-01-23-tencent-cloud-violates-aplv2/index.md
@@ -4,7 +4,7 @@ date: 2021-01-22
 author: Apache SkyWalking
 description: "Tencent Cloud Service, Tencent Service Watcher - TSW, have been reported as it violates Apache 2.0 License requirements."
 tags:
-- Community
+  - Community
 ---
 
 [Apache SkyWalking](https://skywalking.apache.org) is an open source APM for distributed system, Apache Software Foundation top-level project.
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,7 +4,7 @@ date: 2018-05-24 @@
     author: Haoyang Liu, the major maintainer of SkyWalking .NET Core agent
     description: "SkyWalking .NET Core SDK is available."
     tags:
-    - Agents
+      - Agents
     ---
     Translated by Sheng Wu.
@@ Expand Down @@