feat: change links to stats, add to postnav, and better style

Former-commit-id: 0d2166cc8da8d6c7940c2fe1d7a626d962b4ee37

4 files changed, 33 insertions, 5 deletions

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/stats.md
index 5f20a381..cc23db72 100644
--- a/content/links.md
+++ b/content/stats.md
@@ -1,4 +1,4 @@
 ---
 title: 链接
-layout: links
+layout: stats
 ---
diff --git a/layouts/_default/links.html b/layouts/_default/stats.html
index d25566ba..2d80ca05 100644
--- a/layouts/_default/links.html
+++ b/layouts/_default/stats.html
@@ -21,6 +21,15 @@
         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;
@@ -34,6 +43,7 @@
 
     <article>
         {{ partial "header.html" . }}
+        {{ partial "components/postnav.html" . }}
 
         <div class="markdown-content" style="line-height: 2">
             {{ .Content }}
@@ -63,7 +73,10 @@
                 {{ $percent := div (mul $count 100) $max }}
                 <li class="rank-item">
                     <div class="rank-item-text">
-                        <a href="https://{{ $label }}/" target="_blank">{{ $label }}</a>
+                        <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>
@@ -72,4 +85,5 @@
         {{ 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>