Create a page for friendlinks

_config.yml

@@ -44,6 +44,10 @@ menu:
         name: tags
         theme: solid
         link: /tags
+    Links:
+        name: link
+        theme: solid
+        link: /friends
 
 # Side info card
 card:
@@ -156,3 +160,9 @@ twikoo:
     region:
     path: location.pathname
     lang:
+
+my_friends:
+    ColdRain:
+        url: https://ziheng5.github.io/
+        avatar: https://ziheng5.github.io/images/head.jpg
+        desc: 理想主义重症患者

layout/friends.ejs

@@ -0,0 +1,17 @@
+<main class="content">
+  <div class="friends-container">
+    <% Object.entries(theme.my_friends).forEach(([key, value]) => { %>
+      <a href="<%= url_for(value.url) %>" class="friend-card" target="_blank" rel="noopener">
+        <div class="friend-avatar">
+          <img src="<%= url_for(value.avatar) %>" alt="<%= key %>">
+        </div>
+        <div class="friend-info">
+          <h3><%= key %></h3>
+          <p><%= value.desc %></p>
+        </div>
+      </a>
+    <% }) %>
+  </div>
+
+</main>
+

layout/post.ejs

@@ -2,6 +2,10 @@
     <div>
         <h1><%= page.title %></h1>
     </div>
+
+
+     <% if (page.__post) { %>
+    <!-- post 部分设计 -->
     <div class="info">
         <span class="date">
             <span class="icon">
@@ -56,9 +60,13 @@
         <div class="content" ref="content" v-show="cryptoStatus === 'success'"></div>
     </transition>
     <% } else { %>
+
+    <!-- 显示文章特有的模块（如标签、分类） -->
     <div class="content" v-pre>
-        <%- page.content %>
-    </div>
+        <%- partial('toc')%>
+            <%- page.content %>
+        </div>
+
     <% } %>
     <% if (page.comments) { %>
     <% if (theme.gitalk.enable) { %>
@@ -83,3 +91,32 @@
     <% } %>
     <% } %>
 </div>
+
+
+    <% } else { %>
+        <!-- page 部分设计 -->
+        <% if (page.type === 'friend_links') { %>
+            <!-- 友链设计部分 -->
+            <div
+                id="home-posts-wrap"
+                ref="homePostsWrap"
+                <%- theme.card.enable || 'class="home-posts-wrap-no-card"' %>
+            >
+
+            <div class="page-container">
+                <div class="page-content">
+                  <%- page.content %>
+                </div>
+              </div>
+
+                <!-- 在这里插入友链 -->
+                <div id="friend_links">
+                    <%- partial('friends') -%>
+                </div>
+            </div>
+
+
+        <% } else { %>
+            <!-- 其他 page 部分 -->
+        <% }%>
+    <% } %>

source/css/main.css

@@ -973,3 +973,139 @@ ol li {
         padding-left: 20px;
     }
 }
+
+/* 卡片容器 - 响应式网格布局 */
+/* .friends-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    padding: 15px;
+  } */
+  .friends-container {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
+    gap: 20px;
+    width: 100%;
+    padding: 15px;
+  }
+
+  /* 单个卡片样式 */
+  .friend-card {
+    display: flex;
+    height: 140px;
+    width: 360;
+    text-decoration: none; /* 移除链接下划线 */
+    color: inherit; /* 继承文字颜色 */
+    border: 4px solid #eaeaea;
+    border-radius: 10px;
+    transition: all 0.3s ease;
+    background-color: rgba(255, 255, 255, 0.85);
+  }
+
+  .friend-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
+  }
+
+  /* 头像区域（固定宽度） */
+  .friend-avatar {
+    width: 140px;
+    flex-shrink: 0;
+  }
+
+  .friend-avatar img {
+    position: absolute;
+    width: 60%;
+    height: 60%;
+    top: 10%; /* 50% - (60%/2) */
+    left: calc(50% - 30%);
+    object-fit: contain;
+    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
+    background-size: 200% 100%;
+    animation: loading 1.5s infinite;
+    justify-content: center;
+    align-items: center;
+    display: flex;
+  }
+
+  @keyframes loading {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  /* 文字区域（自适应剩余空间） */
+  .friend-info {
+    font-size: 16px; /* 基准大小 */
+    flex: 1;
+    padding: 10px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+
+  .friend-info h3 {
+    font-size: 1.2em; /* 19.2px */
+    margin-bottom: 0.3em;
+    margin-top: 0.3em;
+  }
+
+  .friend-info p {
+    font-size: 0.875em;  /* 14px */
+    line-height: 1.6;
+    color: #555;
+    margin: 0;
+    transition: font-size 0.3s ease; /* 平滑过渡 */
+  }
+
+  @media (max-width: 768px) {
+    .friend-info {
+      font-size: 15px; /* 移动端基准略小 */
+        }
+    }
+
+
+/* page 界面添加背景图片 */
+.page-container {
+    position: relative;
+    min-height: 100vh;
+  }
+
+  .page-container::before {
+    content: "";
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-image: url('/images/background3.jpg'); /* 图片路径 */
+    background-size: cover;
+    background-position: center;
+    background-repeat: no-repeat;
+    z-index: -1; /* 置于内容下层 */
+    opacity: 0.75; /* 透明度0-1 */
+  }
+
+
+  @media (max-width: 768px) {
+    .page-container::before {
+      background-attachment: scroll; /* 移动端取消固定背景 */
+    }
+    .page-content {
+      background-color: rgba(255, 255, 255, 0.9); /* 移动端提高可读性 */
+    }
+  }
+
+  /* 视差滚动效果 */
+.page-container::before {
+    background-attachment: fixed;
+    transform: translateZ(0);
+  }
+
+  /* 动态渐变透明度 */
+  .page-content {
+    background: linear-gradient(
+      to bottom,
+      rgba(255,255,255,0.9) 0%,
+      rgba(255,255,255,0.7) 100%
+    );
+  }