From 23c0657ffcb4bd33b8f2b466632a93905d80d753 Mon Sep 17 00:00:00 2001
From: zqlit <imql@qq.com>
Date: Tue, 19 May 2026 19:30:34 +0800
Subject: [PATCH] feat: connect friend links and friend circle to RSS API

- Friend links page now fetches from /api/links with avatar cards
- Friend circle fetches from /api/articles with real-time data

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
---
 themes/Ying/layouts/page/circles.html | 298 ++++++++++----------------
 themes/Ying/layouts/page/links.html   | 150 +++++++------
 2 files changed, 196 insertions(+), 252 deletions(-)

diff --git a/themes/Ying/layouts/page/circles.html b/themes/Ying/layouts/page/circles.html
index cfc64145..5388d5e9 100644
--- a/themes/Ying/layouts/page/circles.html
+++ b/themes/Ying/layouts/page/circles.html
@@ -15,9 +15,9 @@
     .friend-circle-list {
       display: grid;
       grid-template-columns: repeat(2, 1fr);
-      gap: 12px; /* Tighter gap to make cards wider */
+      gap: 12px;
       margin-top: 20px;
-      padding: 0; /* Remove padding to maximize width */
+      padding: 0;
       width: 100%;
     }
 
@@ -29,7 +29,7 @@
       }
     }
 
-    /* Card Style - Refined based on User Request */
+    /* Card Style */
     .fc-item {
       display: flex;
       flex-direction: column;
@@ -39,89 +39,57 @@
       height: 160px;
       justify-content: space-between;
       background: rgba(255, 255, 255, 0.4);
-      /* Enhanced Glassmorphism for non-mobile */
       backdrop-filter: blur(12px) saturate(120%);
       -webkit-backdrop-filter: blur(12px) saturate(120%);
       border: 1px solid #111827;
       box-shadow: none;
-      transition:
-        transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1),
-        box-shadow 0.3s ease,
-        background-color 0.3s ease,
-        border-color 0.3s ease;
+      transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease;
       will-change: transform;
       text-decoration: none;
-      transform: translateZ(0); /* Enable GPU acceleration */
-      overflow: hidden; /* 防止背景图溢出 */
+      transform: translateZ(0);
+      overflow: hidden;
     }
 
-    /* Mobile Optimization: Remove expensive effects */
     @media (max-width: 767px) {
-        .fc-item {
-            backdrop-filter: none !important;
-            -webkit-backdrop-filter: none !important;
-            background: rgba(255, 255, 255, 0.8); /* Higher opacity fallback */
-        }
-        [data-theme="dark"] .fc-item {
-            background: rgba(30, 30, 30, 0.8);
-        }
+      .fc-item {
+        backdrop-filter: none !important;
+        -webkit-backdrop-filter: none !important;
+        background: rgba(255, 255, 255, 0.8);
+      }
+      [data-theme="dark"] .fc-item {
+        background: rgba(30, 30, 30, 0.8);
+      }
     }
 
     .friend-circle-list a {
       text-decoration: none;
     }
 
-    /* Light Mode Override - if theme is light, keep it readable but consistent layout */
-    /* Assuming the user wants the dark look as shown in the reference, we prioritize that feel 
-           or make it adapt. Let's make it adapt but keep the structure. */
     :root {
-      /* --fc-bg: rgba(255, 255, 255, 0.8); */
       --fc-text: #333;
       --fc-meta-bg: rgba(0, 0, 0, 0.05);
-      /* --fc-border: rgba(0, 0, 0, 0.05); */
     }
 
     [data-theme="dark"] {
-      /* --fc-bg: rgba(35, 35, 35, 0.8); */
       --fc-text: #fff;
       --fc-meta-bg: rgba(255, 255, 255, 0.1);
-      /* --fc-border: rgba(255, 255, 255, 0.1); */
     }
 
-    /* 
-        .fc-item {
-            background: var(--fc-bg);
-            border-color: var(--fc-border);
-        } 
-        */
-
-    /* UK Style Animation & Hover */
-    /* 优化后的 hover 效果 */
     .fc-item:hover {
-      /* 位移+缩放：微调数值，更克制不夸张 */
       transform: translateY(-6px) scale(1.015);
-      /* 阴影：分层阴影，更有立体感（主阴影+柔和光晕） */
-      box-shadow:
-        0 12px 28px rgba(0, 0, 0, 0.1),
-        /* 主阴影：缩小范围，降低不透明度 */ 0 2px 8px rgba(0, 0, 0, 0.06); /* 次级光晕：增加柔和感 */
-      /* 背景：轻微提亮，保留通透感 */
+      box-shadow: 0 12px 28px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
       background: rgba(255, 255, 255, 0.7);
-      /* 边框：轻微加亮，避免纯黑太突兀 */
       border-color: #1a1a1a;
-      /* 层级：保持原有值 */
       z-index: 10;
-      /* 光标：交互提示 */
       cursor: pointer;
     }
 
-    /* 可选：点击回弹效果，增强交互反馈 */
     .fc-item:active {
       transform: translateY(-3px) scale(1.005);
       box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
       transition: all 0.15s ease;
     }
 
-    /* Top: Title */
     .fc-title {
       font-size: 18px;
       font-weight: 700;
@@ -133,14 +101,13 @@
       -webkit-line-clamp: 2;
       -webkit-box-orient: vertical;
       overflow: hidden;
-      margin-right: 60px; /* Space for the image */
+      margin-right: 60px;
     }
 
     .fc-item:hover .fc-title {
       color: #000000;
     }
 
-    /* Background Image (Decorative) */
     .fc-bg-image {
       position: absolute;
       right: -20px;
@@ -162,7 +129,6 @@
       filter: grayscale(0%);
     }
 
-    /* Bottom Row: Author Pill & Date */
     .fc-bottom {
       display: flex;
       justify-content: space-between;
@@ -170,7 +136,6 @@
       z-index: 2;
     }
 
-    /* Author Pill */
     .fc-author-pill {
       display: flex;
       align-items: center;
@@ -200,7 +165,6 @@
       opacity: 0.9;
     }
 
-    /* Date */
     .fc-date {
       font-size: 12px;
       color: var(--fc-text);
@@ -214,14 +178,12 @@
       font-size: 11px;
     }
 
-    /* FontAwesome fallback if not available, simple calendar icon via CSS or Unicode */
     .fc-icon-calendar::before {
       content: "\f133";
       font-family: "Font Awesome 5 Free", "FontAwesome";
       font-weight: 900;
     }
 
-    /* Loading Animation */
     .loading-container {
       grid-column: 1 / -1;
       display: flex;
@@ -241,14 +203,8 @@
       margin-bottom: 15px;
     }
 
-    /* Dark Mode Specific Adjustments to match the reference exactly */
     [data-theme="dark"] .fc-item {
-      background: rgba(
-        35,
-        35,
-        35,
-        0.65
-      ); /* More transparent for glass effect */
+      background: rgba(35, 35, 35, 0.65);
       box-shadow: none;
       border: 1px solid rgba(255, 255, 255, 0.1);
     }
@@ -271,19 +227,15 @@
       color: #ffffff;
     }
 
-    /* Removed unused fadeInUp to keep clean, utilizing ukFadeInUp instead */
-
     @keyframes spin {
-      to {
-        transform: rotate(360deg);
-      }
+      to { transform: rotate(360deg); }
     }
-    /* Load More Button */
+
     .fc-load-more-btn {
       grid-column: 1 / -1;
       padding: 5px 30px;
       margin: 30px auto 10px;
-      background: #000; /* Black background */
+      background: #000;
       border: 1px solid rgba(255, 255, 255, 0.1);
       border-radius: 30px;
       color: #fff;
@@ -310,12 +262,10 @@
       background: #222;
     }
 
-    /* Artalk Dark Mode Adjustment */
     [data-theme="dark"] .artalk .atk-main-editor {
       border: 1px solid rgba(255, 255, 255, 0.1) !important;
     }
 
-    /* Friend Circle Tooltip Card */
     .fc-tooltip {
       position: fixed;
       z-index: 9999;
@@ -334,7 +284,7 @@
       font-size: 14px;
       line-height: 1.6;
       color: #333;
-      display: none; /* Hidden by default */
+      display: none;
     }
 
     .fc-tooltip.is-visible {
@@ -356,7 +306,7 @@
       color: #555;
       text-align: justify;
       display: -webkit-box;
-      -webkit-line-clamp: 6; /* Limit lines */
+      -webkit-line-clamp: 6;
       -webkit-box-orient: vertical;
       overflow: hidden;
     }
@@ -383,7 +333,6 @@
   </div>
 
   <script>
-    // 使用全局对象管理友圈逻辑
     window.FriendCircle = {
       allPosts: [],
       currentIndex: 0,
@@ -394,7 +343,7 @@
         const year = date.getFullYear();
         const month = String(date.getMonth() + 1).padStart(2, "0");
         const day = String(date.getDate()).padStart(2, "0");
-        return `${year}-${month}-${day}`;
+        return year + "-" + month + "-" + day;
       },
 
       renderPosts: function (posts) {
@@ -407,29 +356,21 @@
         let html = "";
         posts.forEach((post, index) => {
           const dateStr = this.timeAgo(post.date);
-          // 背景图固定使用头像，以获得一致的装饰效果
           const bgImageSrc = post.avatar;
-          // Escape quotes for data attribute
           const description = post.description ? post.description.replace(/"/g, '&quot;') : '';
-          
-          // Calculate delay for staggered animation
           const delay = index * 100;
 
-          html += `
-                        <a href="${post.link}" target="_blank" class="fc-item" data-desc="${description}" data-title="${post.title}" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: ${delay}">
-                            <div class="fc-title" title="${post.title}">${post.title}</div>
-                            <img src="${bgImageSrc}" class="fc-bg-image" onerror="this.style.opacity=0">
-                            <div class="fc-bottom">
-                                <div class="fc-author-pill">
-                                    <img src="${post.avatar}" class="fc-avatar" onerror="this.src='https://cravatar.cn/avatar/default?s=50'">
-                                    <span class="fc-author-name">${post.author}</span>
-                                </div>
-                                <div class="fc-date">
-                                    <i class="ri-calendar-line"></i> ${dateStr}
-                                </div>
-                            </div>
-                        </a>
-                    `;
+          html += '<a href="' + post.link + '" target="_blank" class="fc-item" data-desc="' + description + '" data-title="' + post.title + '" uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: ' + delay + '">'
+            + '<div class="fc-title" title="' + post.title + '">' + post.title + '</div>'
+            + '<img src="' + bgImageSrc + '" class="fc-bg-image" onerror="this.style.opacity=0">'
+            + '<div class="fc-bottom">'
+              + '<div class="fc-author-pill">'
+                + '<img src="' + post.avatar + '" class="fc-avatar" onerror="this.src=\'https://cravatar.cn/avatar/default?s=50\'">'
+                + '<span class="fc-author-name">' + post.author + '</span>'
+              + '</div>'
+              + '<div class="fc-date"><i class="ri-calendar-line"></i> ' + dateStr + '</div>'
+            + '</div>'
+          + '</a>';
         });
 
         container.insertAdjacentHTML("beforeend", html);
@@ -439,14 +380,13 @@
           btn.id = "fc-load-more-btn";
           btn.className = "fc-load-more-btn";
           btn.innerText = "加载更多";
-          btn.onclick = () => this.loadMore();
+          btn.onclick = function() { window.FriendCircle.loadMore(); };
           container.appendChild(btn);
         } else {
           if (window.fcUpdateTime) {
             const footer = document.createElement("div");
-            footer.style.cssText =
-              "grid-column: 1 / -1; text-align: center; margin-top: 20px; font-size: 12px; color: #999; opacity: 0.6;";
-            footer.innerText = `最近更新: ${window.fcUpdateTime}`;
+            footer.style.cssText = "grid-column: 1 / -1; text-align: center; margin-top: 20px; font-size: 12px; color: #999; opacity: 0.6;";
+            footer.innerText = "最近更新: " + window.fcUpdateTime;
             container.appendChild(footer);
           }
         }
@@ -455,12 +395,11 @@
       loadMore: function () {
         const nextBatch = this.allPosts.slice(
           this.currentIndex,
-          this.currentIndex + this.BATCH_SIZE,
+          this.currentIndex + this.BATCH_SIZE
         );
         this.currentIndex += this.BATCH_SIZE;
-        // 使用 requestAnimationFrame 优化渲染性能
-        requestAnimationFrame(() => {
-          this.renderPosts(nextBatch);
+        requestAnimationFrame(function() {
+          window.FriendCircle.renderPosts(nextBatch);
         });
       },
 
@@ -475,130 +414,115 @@
 
         if (!tooltip || !container) return;
 
-        // Move tooltip to body to prevent clipping by overflow:hidden or transforms
         if (tooltip.parentNode !== document.body) {
-            document.body.appendChild(tooltip);
+          document.body.appendChild(tooltip);
         }
 
-        // Cleanup tooltip when navigating away (PJAX)
-        const cleanup = () => {
-            if (tooltip && tooltip.parentNode === document.body) {
-                tooltip.remove();
-            }
-            document.removeEventListener('pjax:send', cleanup);
+        const cleanup = function() {
+          if (tooltip && tooltip.parentNode === document.body) {
+            tooltip.remove();
+          }
+          document.removeEventListener('pjax:send', cleanup);
         };
         document.addEventListener('pjax:send', cleanup);
 
-        const updateTooltip = (e) => {
-            // Disable tooltip on mobile devices
-            if (window.innerWidth <= 768) return;
-
-            const item = e.target.closest('.fc-item');
-            if (item) {
-                const desc = item.getAttribute('data-desc');
-                const title = item.getAttribute('data-title');
-                
-                if (desc) {
-                    titleEl.innerText = title;
-                    contentEl.innerText = desc;
-                    tooltip.classList.add('is-visible');
-                    
-                    const tooltipWidth = tooltip.offsetWidth;
-                    const tooltipHeight = tooltip.offsetHeight;
-                    const winWidth = window.innerWidth;
-                    const winHeight = window.innerHeight;
-                    const gap = 15; // Gap between cursor and tooltip
-                    
-                    let left = e.clientX + gap;
-                    let top = e.clientY + gap;
-                    
-                    // Horizontal Logic
-                    if (left + tooltipWidth > winWidth - gap) {
-                        // Flip to left
-                        left = e.clientX - tooltipWidth - gap;
-                        
-                        // If flipping makes it go off-screen to the left (e.g. wide tooltip, cursor near left)
-                        if (left < gap) {
-                            // Clamp to left edge
-                            left = gap;
-                        }
-                    }
-
-                    // Vertical Logic
-                    if (top + tooltipHeight > winHeight - gap) {
-                        // Flip to top
-                        top = e.clientY - tooltipHeight - gap;
-                        
-                        // If flipping makes it go off-screen to the top
-                        if (top < gap) {
-                            // Clamp to top edge
-                            top = gap;
-                        }
-                    }
-                    
-                    tooltip.style.left = `${left}px`;
-                    tooltip.style.top = `${top}px`;
-                } else {
-                    tooltip.classList.remove('is-visible');
-                }
+        const updateTooltip = function(e) {
+          if (window.innerWidth <= 768) return;
+          const item = e.target.closest('.fc-item');
+          if (item) {
+            const desc = item.getAttribute('data-desc');
+            const title = item.getAttribute('data-title');
+            if (desc) {
+              titleEl.innerText = title;
+              contentEl.innerText = desc;
+              tooltip.classList.add('is-visible');
+              const tooltipWidth = tooltip.offsetWidth;
+              const tooltipHeight = tooltip.offsetHeight;
+              const winWidth = window.innerWidth;
+              const winHeight = window.innerHeight;
+              const gap = 15;
+              let left = e.clientX + gap;
+              let top = e.clientY + gap;
+              if (left + tooltipWidth > winWidth - gap) {
+                left = e.clientX - tooltipWidth - gap;
+                if (left < gap) left = gap;
+              }
+              if (top + tooltipHeight > winHeight - gap) {
+                top = e.clientY - tooltipHeight - gap;
+                if (top < gap) top = gap;
+              }
+              tooltip.style.left = left + 'px';
+              tooltip.style.top = top + 'px';
             } else {
-                tooltip.classList.remove('is-visible');
+              tooltip.classList.remove('is-visible');
             }
+          } else {
+            tooltip.classList.remove('is-visible');
+          }
         };
 
         container.addEventListener('mousemove', updateTooltip);
-        container.addEventListener('mouseleave', () => {
-             tooltip.classList.remove('is-visible');
+        container.addEventListener('mouseleave', function() {
+          tooltip.classList.remove('is-visible');
         });
       },
 
       init: function () {
         const container = document.getElementById("friend-circle-container");
         if (!container) return;
-        
+
         this.initTooltip();
 
-        // 防止重复初始化导致掉帧
         if (this.isFetching) return;
         this.isFetching = true;
 
-        fetch("/json/friend_circle_data.json?t=" + new Date().getTime())
-          .then((res) => {
+        // 从 RSS API 拉取按时间排序的文章
+        fetch("https://rssapi.usj.cc/api/articles?limit=50&t=" + new Date().getTime())
+          .then(function(res) {
             if (!res.ok) throw new Error("Network response was not ok");
             return res.json();
           })
-          .then((data) => {
+          .then(function(apiData) {
+            // 将 API 格式转换为友圈格式
+            const posts = (apiData.articles || []).map(function(a) {
+              return {
+                title: a.title || '',
+                link: a.link || '',
+                date: a.pubDate || '',
+                author: a.feedName || a.author || '',
+                avatar: a.favicon || '',
+                blogUrl: a.siteUrl || '',
+                image: null,
+                description: ''
+              };
+            });
+            const data = { posts: posts, updated: apiData.timestamp || new Date().toISOString() };
+
             if (!data.posts || data.posts.length === 0) {
-              container.innerHTML =
-                '<div class="empty" style="grid-column: 1/-1; text-align:center; padding:20px;">暂无动态</div>';
+              container.innerHTML = '<div class="empty" style="grid-column: 1/-1; text-align:center; padding:20px;">暂无动态</div>';
               return;
             }
 
-            this.allPosts = data.posts;
+            window.FriendCircle.allPosts = data.posts;
             window.fcUpdateTime = new Date(data.updated).toLocaleString();
-            this.currentIndex = 0;
+            window.FriendCircle.currentIndex = 0;
             container.innerHTML = "";
-            this.loadMore();
+            window.FriendCircle.loadMore();
           })
-          .catch((err) => {
+          .catch(function(err) {
             console.error("Friend Circle Error:", err);
-            container.innerHTML =
-              '<div class="error" style="grid-column: 1/-1; text-align:center; padding:20px; color:#d9534f;">加载失败，请稍后刷新重试</div>';
+            container.innerHTML = '<div class="error" style="grid-column: 1/-1; text-align:center; padding:20px; color:#d9534f;">加载失败，请稍后刷新重试</div>';
           })
-          .finally(() => {
-            this.isFetching = false;
+          .finally(function() {
+            window.FriendCircle.isFetching = false;
           });
-      },
+      }
     };
 
-    // 移除多余的 pjax:complete 监听，因为脚本在 PJAX 容器内，每次导航都会重新执行
-    // 避免了重复触发 init 导致的性能问题
-
-    // 立即执行初始化
     if (document.readyState === "loading") {
-      document.addEventListener("DOMContentLoaded", () =>
-        window.FriendCircle.init(),
-      );
+      document.addEventListener("DOMContentLoaded", function() {
+        window.FriendCircle.init();
+      });
     } else {
       window.FriendCircle.init();
     }
diff --git a/themes/Ying/layouts/page/links.html b/themes/Ying/layouts/page/links.html
index d577651c..ea477184 100644
--- a/themes/Ying/layouts/page/links.html
+++ b/themes/Ying/layouts/page/links.html
@@ -1,84 +1,104 @@
 {{ define "main" }}
 <div id="pjax-container">
     <style>
-        .links ul>li {
-            position: relative;
-            padding-left: 1.75em;
+        .friend-links {
+            display: grid;
+            grid-template-columns: repeat(2, 1fr);
+            gap: 12px;
+            margin-top: 16px;
         }
-
-        .links a {
-            color: var(--link-color-light);
-            font-weight: 500;
+        @media (max-width: 768px) {
+            .friend-links { grid-template-columns: 1fr; }
+        }
+        .fl-card {
+            display: flex;
+            align-items: center;
+            gap: 14px;
+            padding: 16px 18px;
+            border-radius: 10px;
+            background: rgba(255,255,255,0.4);
+            backdrop-filter: blur(10px);
+            -webkit-backdrop-filter: blur(10px);
+            border: 1px solid rgba(0,0,0,0.08);
             text-decoration: none;
+            transition: transform 0.25s ease, box-shadow 0.25s ease;
         }
-
-        .links li {
-            margin-top: .5em;
-            margin-bottom: .5em;
+        .fl-card:hover {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
         }
-
-        .links ul>li:before {
-            content: "";
-            position: absolute;
-            background-color: #d1d5db;
+        .fl-avatar {
+            width: 48px; height: 48px;
             border-radius: 50%;
-            width: .375em;
-            height: .375em;
-            top: .6875em;
-            left: .25em;
+            object-fit: cover;
+            flex-shrink: 0;
+            background: #eee;
         }
-
-        .url-name {
-            position: relative;
-            display: inline-block;
+        .fl-info { flex: 1; min-width: 0; }
+        .fl-name {
+            font-size: 15px; font-weight: 600;
+            color: var(--fc-text, #333);
+            line-height: 1.3;
         }
-
-        .url-name::before {
-            content: "";
-            position: absolute;
-            height: 12px;
-            bottom: 3px;
-            left: -4px;
-            z-index: -1;
-            background-color: #5d5d5d;
-            opacity: .3;
-            transform: skew(-35deg);
-            transition: opacity .2s ease;
-            border-radius: 3px 8px 10px 6px;
-            transition: 0.1s ease background-color;
-            width: 112%;
-            /* 宽度根据a标签的内容动态变化 */
+        .fl-desc {
+            font-size: 12px;
+            color: var(--fc-text, #666);
+            opacity: 0.65;
+            margin-top: 3px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
         }
-
-        .url-name:hover::before {
-            opacity: 0.5;
-            /* 鼠标悬浮时可以改变不透明度 */
+        [data-theme="dark"] .fl-card {
+            background: rgba(35,35,35,0.65);
+            border-color: rgba(255,255,255,0.1);
         }
-
-        [data-theme="dark"] .links a {
-            color: var(--link-color-dark);
-        }
-
-        [data-theme="dark"] .url-name::before {
-            background-color: #e5e7eb;
-            opacity: 0.18;
-        }
-
-        [data-theme="dark"] .url-name:hover::before {
-            opacity: 0.35;
+        [data-theme="dark"] .fl-name { color: #e5e7eb; }
+        [data-theme="dark"] .fl-desc { color: #9ca3af; }
+        .links-loading {
+            grid-column: 1 / -1;
+            text-align: center;
+            padding: 40px;
+            color: #888;
         }
     </style>
+
     <div class="post-content" itemprop="articleBody">
-        <div class="links">
-            <ul id="links-list" uk-scrollspy="target: > li; cls: uk-animation-slide-bottom-small; delay: 50">
-                <!-- 静态生成的内容作为 SEO 兜底或构建时数据 -->
-                {{ range site.Data.links.blogs }}
-                <li><a href="{{ .url }}" class="url-name" target="_blank">{{ .name }}</a><span style="margin-left: 13px;">{{ .description }}</span></li>
-                {{ end }}
-            </ul>
+        <div class="friend-links" id="friend-links-list">
+            <div class="links-loading">加载友链中...</div>
         </div>
     </div>
-    
-    <!-- 移除动态加载脚本，仅保留静态生成内容 -->
+
+    <script>
+    (function() {
+        var container = document.getElementById('friend-links-list');
+        if (!container) return;
+
+        fetch('https://rssapi.usj.cc/api/links?t=' + new Date().getTime())
+            .then(function(res) { return res.json(); })
+            .then(function(data) {
+                var links = data.links || [];
+                if (links.length === 0) {
+                    container.innerHTML = '<div class="links-loading">暂无友链</div>';
+                    return;
+                }
+                var html = '';
+                links.forEach(function(l, i) {
+                    var img = l.image || '';
+                    html += '<a href="' + l.url + '" target="_blank" class="fl-card"' +
+                        ' uk-scrollspy="cls: uk-animation-slide-bottom-small; delay: ' + (i * 60) + '">' +
+                        (img ? '<img src="' + img + '" class="fl-avatar" onerror="this.style.opacity=0">' : '') +
+                        '<div class="fl-info">' +
+                        '<div class="fl-name">' + l.name + '</div>' +
+                        '<div class="fl-desc">' + (l.description || '') + '</div>' +
+                        '</div></a>';
+                });
+                container.innerHTML = html;
+            })
+            .catch(function() {
+                container.innerHTML = '<div class="links-loading">加载失败，请刷新重试</div>';
+            });
+    })();
+    </script>
 </div>
 {{ end }}