From 0d2166cc8da8d6c7940c2fe1d7a626d962b4ee37 Mon Sep 17 00:00:00 2001
From: Eltrac <hi@guhub.cn>
Date: Fri, 23 May 2025 19:48:12 +0800
Subject: feat: change links to stats, add to postnav, and better style

---
 assets/css/components/_postlist.scss     | 16 +++++-
 content/links.md                         |  4 --
 content/stats.md                         |  4 ++
 layouts/_default/links.html              | 75 ---------------------------
 layouts/_default/stats.html              | 89 ++++++++++++++++++++++++++++++++
 layouts/partials/components/postnav.html |  4 +-
 6 files changed, 110 insertions(+), 82 deletions(-)
 delete mode 100644 content/links.md
 create mode 100644 content/stats.md
 delete mode 100644 layouts/_default/links.html
 create mode 100644 layouts/_default/stats.html

diff --git a/assets/css/components/_postlist.scss b/assets/css/components/_postlist.scss
index a5d38ba8..022f97bd 100644
--- a/assets/css/components/_postlist.scss
+++ b/assets/css/components/_postlist.scss
@@ -86,12 +86,26 @@
         li {
             flex-shrink: 0;
             flex-grow: 0;
+
             &.active {
                 font-weight: bolder
             }
-            a:not(.no-button) {
+            a:not(.icon-link) {
                 @include small-button;
             }
+
+            .icon-link {
+                opacity: 0.5;
+                transition: opacity 0.3s;
+            }
+            .icon-link:hover,
+            &.active .icon-link {
+                opacity: 1;
+            }
+            &.active .icon-link {
+                display: inline-block;
+                transform: scale(1.1) rotate(90deg);
+            }
         }
 
         #search-instruction {
diff --git a/content/links.md b/content/links.md
deleted file mode 100644
index 5f20a381..00000000
--- a/content/links.md
+++ /dev/null
@@ -1,4 +0,0 @@
----
-title: 链接
-layout: links
----
diff --git a/content/stats.md b/content/stats.md
new file mode 100644
index 00000000..cc23db72
--- /dev/null
+++ b/content/stats.md
@@ -0,0 +1,4 @@
+---
+title: 链接
+layout: stats
+---
diff --git a/layouts/_default/links.html b/layouts/_default/links.html
deleted file mode 100644
index d25566ba..00000000
--- a/layouts/_default/links.html
+++ /dev/null
@@ -1,75 +0,0 @@
-{{ 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;
-    }
-    .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>
-
-    <article>
-        {{ partial "header.html" . }}
-
-        <div class="markdown-content" style="line-height: 2">
-            {{ .Content }}
-        </div>
-
-        <h2>内部链接图谱</h2>
-        <div class="outbox small">
-            <iframe src="https://geedea.pro/graph"
-                style="width:100%;height: 30rem;border-radius:5px;border:none"></iframe>
-        </div>
-
-        <h2>外部链接排行</h2>
-
-        {{/* 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 href="https://{{ $label }}/" target="_blank">{{ $label }}</a>
-                        <span>{{ $count }}</span>
-                    </div>
-                    <div class="rank-item-bar" style="width:{{ $percent }}%"></div>
-                </li>
-            {{ end }}
-        {{ end }}
-        </ol>
-    </article>
-{{ end }}
diff --git a/layouts/_default/stats.html b/layouts/_default/stats.html
new file mode 100644
index 00000000..2d80ca05
--- /dev/null
+++ b/layouts/_default/stats.html
@@ -0,0 +1,89 @@
+{{ 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;
+    }
+    .rank-item-link {
+        display: inline-flex;
+        align-items: center;
+        gap: 0.5rem;
+    }
+    .rank-item-link img {
+        width: 1rem;
+        height: 1rem;
+    }
+    .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>
+
+    <article>
+        {{ partial "header.html" . }}
+        {{ partial "components/postnav.html" . }}
+
+        <div class="markdown-content" style="line-height: 2">
+            {{ .Content }}
+        </div>
+
+        <h2>内部链接图谱</h2>
+        <div class="outbox small">
+            <iframe src="https://geedea.pro/graph"
+                style="width:100%;height: 30rem;border-radius:5px;border:none"></iframe>
+        </div>
+
+        <h2>外部链接排行</h2>
+
+        {{/* 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>{{ $count }}</span>
+                    </div>
+                    <div class="rank-item-bar" style="width:{{ $percent }}%"></div>
+                </li>
+            {{ end }}
+        {{ end }}
+        </ol>
+    </article>
+    {{ partial "footer.html" . }}
+{{ end }}
diff --git a/layouts/partials/components/postnav.html b/layouts/partials/components/postnav.html
index ff78ddb7..5ada95e2 100644
--- a/layouts/partials/components/postnav.html
+++ b/layouts/partials/components/postnav.html
@@ -17,8 +17,8 @@
         <li id="search-instruction">
             <span>{{ T "searchInstruction" }}</span>
         </li>
-        <li class="list-decoration invert-if-dark">
-            <a href="/graph" class="no-button" target="_blank"><img src="/img/graph.svg" /></a>
+        <li class="list-decoration invert-if-dark{{ if eq "/stats/" $.Page.RelPermalink }} active{{ end }}">
+            <a href="{{ .Site.LanguagePrefix }}/stats" class="icon-link"><img src="/img/graph.svg" /></a>
         <li>
     </ul>
 </div>
-- 
cgit v1.2.3