From 1f2b16c13438417f48e84c078486aa6e519f7ef7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=B0=8F=E8=B5=B5=E5=90=8C=E5=AD=A6?=
 <94612053+imzql@users.noreply.github.com>
Date: Fri, 27 Sep 2024 19:57:46 +0800
Subject: [PATCH] =?UTF-8?q?=E5=8F=8B=E9=93=BE=E6=94=B9=E7=89=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 content/links.md                            |   2 +-
 themes/Ying/layouts/_default/new-links.html | 130 ++++++++++++++++++++
 themes/Ying/static/css/main.css             |   3 +-
 3 files changed, 133 insertions(+), 2 deletions(-)
 create mode 100644 themes/Ying/layouts/_default/new-links.html

diff --git a/content/links.md b/content/links.md
index f9cb5a37..ef3009c8 100644
--- a/content/links.md
+++ b/content/links.md
@@ -1,6 +1,6 @@
 ---
 title: "友链"
 date: 2024-07-11
-layout: "links"  
+layout: "new-links"  
 draft: false  
 ---
\ No newline at end of file
diff --git a/themes/Ying/layouts/_default/new-links.html b/themes/Ying/layouts/_default/new-links.html
new file mode 100644
index 00000000..8956cf88
--- /dev/null
+++ b/themes/Ying/layouts/_default/new-links.html
@@ -0,0 +1,130 @@
+{{ define "main" }}
+<style>
+    @media only screen and (max-width: 768px) {
+
+        /* 针对宽度小于768px的设备(通常是平板和手机) */
+        .items {
+            grid-template-columns: repeat(1, 1fr)!important;
+            grid-gap: 10px;
+        }
+    }
+
+    /* 新版友链样式 */
+    .items {
+        /* padding: 10px; */
+        width: 100%;
+        height: 100%;
+        /* background-color: #f5f5f6; */
+        display: grid;
+        grid-template-columns: repeat(2, 1fr);
+        grid-gap: 10px;
+        /* 网格之间的间距 */
+        justify-content: space-between;
+    }
+
+    .item-box {
+        background-color: white;
+        border-radius: 5px;
+        padding: 8px;
+        /* width: 47%; */
+        height: 300px;
+        /* border: 1px solid #333; */
+        box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;
+    }
+
+    .website-img {
+        margin: 0 auto;
+        width: 90%;
+    }
+
+    .website-img img {
+        width: 100%;
+        height: 150px;
+        object-fit: contain;
+    }
+
+    .website-go-button {
+        margin: 0 auto;
+        width: 95%;
+        border-radius: 5px;
+        font-size: 14px;
+        padding: 5px;
+        text-align: center;
+        background-color: black;
+        color: white;
+    }
+
+    .link-info {
+        padding: 8px;
+        width: 100%;
+        height: 90px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+    }
+
+    .link-avatar {
+        width: 40%;
+        /* 设置弹性布局 */
+        display: flex;
+        /* justify-content: center; */
+        align-items: center;
+    }
+
+    .link-avatar img {
+        position: relative;
+        left: 5px;
+        width: 50px;
+        height: 50px;
+    }
+
+    .link-text-main {
+        width: 55%;
+        display: flex;
+        flex-direction: column;
+    }
+
+    .link-name {
+        position: relative;
+        right: 10px;
+        bottom: 5px;
+        width: 100%;
+        height: 50%;
+        font-weight: 600;
+    }
+
+    .link-des {
+        position: relative;
+        right: 10px;
+        top: 1px;
+        width: 100%;
+        height: 50%;
+    }
+</style>
+<div id="pjax-container">
+    <div class="post-content" itemprop="articleBody">
+        <div class="items" uk-scrollspy="target: > .item-box; cls: uk-animation-slide-bottom-small; delay: 0">
+            {{ range site.Data.links.blogs }}
+            <div class="item-box">
+                <div class="website-img">
+                    <img src="https://s0.wp.com/mshots/v1/{{ .url }}?w=800&h=600" alt="{{ .name }}">
+                </div>
+                <div class="link-info">
+                    <div class="link-avatar">
+                        <img src="{{ .image }}" alt="{{ .name }}">
+                    </div>
+                    <div class="link-des">
+                        <div class="link-name">{{ .name }}</div>
+                        <div class="link-des" style="color: #64748B;">{{ .description }}</div>
+                    </div>
+                </div>
+                <a href="{{ .url }}">
+                    <div class="website-go-button">逛一逛</div>
+                </a>
+            </div>
+            {{ end }}
+        </div>
+        <div style="clear:both;"></div>
+    </div>
+</div>
+{{ end }}
\ No newline at end of file
diff --git a/themes/Ying/static/css/main.css b/themes/Ying/static/css/main.css
index 53383bf7..a8078c42 100644
--- a/themes/Ying/static/css/main.css
+++ b/themes/Ying/static/css/main.css
@@ -2131,4 +2131,5 @@ img[atk-emoticon] {
     font-size: 14px;
     background-color: #e3e3e3!important;
     color: #000000!important;
-}
\ No newline at end of file
+}
+