refactor: stats page now uses partial components

Extracted the site stats table and external link rank sections into separate partials (stats-table.html and external-link-rank.html) for better modularity and maintainability. Updated stats.html to use these new components and improved section structure.

3 files changed, 147 insertions, 144 deletions

diff --git a/layouts/_default/stats.html b/layouts/_default/stats.html
index f8eff423..683b559d 100644
--- a/layouts/_default/stats.html
+++ b/layouts/_default/stats.html
@@ -1,128 +1,24 @@
 {{ define "main" }}
-    <style>
-    #external-link-rank {
-        padding: 0;
-        margin: 0;
-        max-height: 700px;
-        overflow-y: auto;
-        box-sizing: border-box;
-    }
-
-    .rank-item {
-        list-style: none;
-        width: 100%;
-        margin: 0.5rem 0;
-        box-sizing: border-box;
-        padding: 0.1rem 0.5rem;
-        position: relative;
-    }
-    .rank-item-text {
-        margin-bottom: 0.2rem;
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-    }
-    .rank-item-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-    }
-    .rank-item-link img {
-        width: 1rem;
-        height: 1rem;
-    }
-    .rank-item-count {
-        color: var(--secondary-text-color);
-    }
-    .rank-item-bar {
-        background-color: rgba(103,173,91,0.35);
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        z-index: -1;
-    }
-
-    .site-stats-table {
-      width: 100%;
-      max-width: 700px;
-      border-collapse: collapse;
-      margin-bottom: 1.5rem;
-    }
-    .site-stats-table td {
-      padding: 0.5rem;
-      text-align: left;
-    }
-    .site-stats-table td:nth-child(2n) {
-      text-align: right;
-    }
-    .number-pill {
-        text-align: center;
-        display: inline-block;
-        line-height: 1.75rem;
-        box-sizing: border-box;
-        border-radius: 5px;
-        padding: 0 0.5rem;
-        background-color: var(--block-background-color);
-        font-size: 1rem;
-    }
-    </style>
-
     <article>
         {{ partial "header.html" . }}
         {{ partial "components/postnav.html" . }}
 
-        <div class="markdown-content" style="line-height: 2">
-            {{ .Content }}
-        </div>
-
         <section>
             <h2>站点统计</h2>
-            <table class="site-stats-table">
-              <tbody>
-                <tr>
-                    <td>页面总数</td>
-                    <td><span class="number-pill">{{ len .Site.RegularPages }}</span></td>
-                    <td>总字数</td>
-                    <td>
-                        <span class="number-pill">
-                        {{- $words := 0 -}}
-                        {{- range .Site.RegularPages -}}
-                            {{- $words = add $words .WordCount -}}
-                        {{- end -}}
-                        {{ $words }}
-                        </span>
-                    </td>
-                </tr>
-                <tr>
-                  <td>标签总数</td>
-                  <td><span class="number-pill">{{ len .Site.Taxonomies.tags }}</span></td>
-                  <td>专栏数量</td>
-                  <td><span class="number-pill">{{ len .Site.Taxonomies.categories }}</span></td>
-                </tr>
-                <tr>
-                  <td>卡片数量</td>
-                  <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "cards") }}</span></td>
-                  <td>小说数量</td>
-                  <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "fictions") }}</span></td>
-                </tr>
-                <tr>
-                  <td>书评数量</td>
-                  <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "library") }}</span></td>
-                  <td>精选文章数量</td>
-                  <td><span class="number-pill">{{ len (where .Site.RegularPages ".Params.featured" true) }}</span></td>
-                </tr>
-              </tbody>
-            </table>
+            {{ partial "components/stats-table" . }}
         </section>
 
-        <h2>每月文章字数</h2>
-        {{ partial "components/word-count-chart" . }}
+        <section>
+            <h2>每月文章字数</h2>
+            {{ partial "components/word-count-chart" . }}
+        </section>
 
-        <h2>文章发布时间段分布</h2>
-        <div class="outbox">{{ partial "components/publish-time-chart" . }}</div>
-        
+        <section>
+            <h2>文章发布时间段分布</h2>
+            <div class="outbox">
+                {{ partial "components/publish-time-chart" . }}
+            </div>
+        </section>
         <hr>
 
         <section>
@@ -133,40 +29,12 @@
                     style="width:100%;height: 30rem;border-radius:5px;border:none"></iframe>
             </div>
         </section>
-
         <hr>
 
         <section>
             <h2>外部链接排行</h2>
             <p>我在页面中嵌入的外部链接主要来自以下域名，引用次数少于 3 的已被排除。</p>
-
-            {{/* Find the maximum link count */}}
-            {{ $max := 0 }}
-            {{ range .Site.Data.externallinks }}
-                {{ if gt (index . 1) $max }}
-                    {{ $max = index . 1 }}
-                {{ end }}
-            {{ end }}
-
-            <ol id="external-link-rank">
-            {{ range .Site.Data.externallinks }}
-                {{ $label := index . 0 }}
-                {{ $count := index . 1 }}
-                {{ if gt $count 2 }}
-                    {{ $percent := div (mul $count 100) $max }}
-                    <li class="rank-item">
-                        <div class="rank-item-text">
-                            <a class="rank-item-link" href="https://{{ $label }}/" target="_blank">
-                                <img src="https://favicone.com/{{ $label }}?s=50" />
-                                {{ $label }}
-                            </a>
-                            <span class="rank-item-count font-mono">{{ $count }}</span>
-                        </div>
-                        <div class="rank-item-bar" style="width:{{ $percent }}%"></div>
-                    </li>
-                {{ end }}
-            {{ end }}
-            </ol>
+            {{ partial "components/external-link-rank" . }}
         </section>
     </article>
     {{ partial "footer.html" . }}
diff --git a/layouts/partials/components/external-link-rank.html b/layouts/partials/components/external-link-rank.html
new file mode 100644
index 00000000..8ffe04d6
--- /dev/null
+++ b/layouts/partials/components/external-link-rank.html
@@ -0,0 +1,73 @@
+{{/* Find the maximum link count */}}
+{{ $max := 0 }}
+{{ range .Site.Data.externallinks }}
+    {{ if gt (index . 1) $max }}
+        {{ $max = index . 1 }}
+    {{ end }}
+{{ end }}
+
+<ol id="external-link-rank">
+{{ range .Site.Data.externallinks }}
+    {{ $label := index . 0 }}
+    {{ $count := index . 1 }}
+    {{ if gt $count 2 }}
+        {{ $percent := div (mul $count 100) $max }}
+        <li class="rank-item">
+            <div class="rank-item-text">
+                <a class="rank-item-link" href="https://{{ $label }}/" target="_blank">
+                    <img src="https://favicone.com/{{ $label }}?s=50" />
+                    {{ $label }}
+                </a>
+                <span class="rank-item-count font-mono">{{ $count }}</span>
+            </div>
+            <div class="rank-item-bar" style="width:{{ $percent }}%"></div>
+        </li>
+    {{ end }}
+{{ end }}
+</ol>
+
+<style>
+#external-link-rank {
+    padding: 0;
+    margin: 0;
+    max-height: 700px;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.rank-item {
+    list-style: none;
+    width: 100%;
+    margin: 0.5rem 0;
+    box-sizing: border-box;
+    padding: 0.1rem 0.5rem;
+    position: relative;
+}
+.rank-item-text {
+    margin-bottom: 0.2rem;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+}
+.rank-item-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+.rank-item-link img {
+    width: 1rem;
+    height: 1rem;
+}
+.rank-item-count {
+    color: var(--secondary-text-color);
+}
+.rank-item-bar {
+    background-color: rgba(103,173,91,0.35);
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: -1;
+}
+</style>
diff --git a/layouts/partials/components/stats-table.html b/layouts/partials/components/stats-table.html
new file mode 100644
index 00000000..24e2b45d
--- /dev/null
+++ b/layouts/partials/components/stats-table.html
@@ -0,0 +1,62 @@
+<table class="site-stats-table">
+  <tbody>
+    <tr>
+        <td>页面总数</td>
+        <td><span class="number-pill">{{ len .Site.RegularPages }}</span></td>
+        <td>总字数</td>
+        <td>
+            <span class="number-pill">
+            {{- $words := 0 -}}
+            {{- range .Site.RegularPages -}}
+                {{- $words = add $words .WordCount -}}
+            {{- end -}}
+            {{ $words }}
+            </span>
+        </td>
+    </tr>
+    <tr>
+      <td>标签总数</td>
+      <td><span class="number-pill">{{ len .Site.Taxonomies.tags }}</span></td>
+      <td>专栏数量</td>
+      <td><span class="number-pill">{{ len .Site.Taxonomies.categories }}</span></td>
+    </tr>
+    <tr>
+      <td>卡片数量</td>
+      <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "cards") }}</span></td>
+      <td>小说数量</td>
+      <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "fictions") }}</span></td>
+    </tr>
+    <tr>
+      <td>书评数量</td>
+      <td><span class="number-pill">{{ len (where .Site.RegularPages "Section" "library") }}</span></td>
+      <td>精选文章数量</td>
+      <td><span class="number-pill">{{ len (where .Site.RegularPages ".Params.featured" true) }}</span></td>
+    </tr>
+  </tbody>
+</table>
+
+<style>
+.site-stats-table {
+  width: 100%;
+  max-width: 700px;
+  border-collapse: collapse;
+  margin-bottom: 1.5rem;
+}
+.site-stats-table td {
+  padding: 0.5rem;
+  text-align: left;
+}
+.site-stats-table td:nth-child(2n) {
+  text-align: right;
+}
+.number-pill {
+    text-align: center;
+    display: inline-block;
+    line-height: 1.75rem;
+    box-sizing: border-box;
+    border-radius: 5px;
+    padding: 0 0.5rem;
+    background-color: var(--block-background-color);
+    font-size: 1rem;
+}
+</style>