fix: restore original links style, only change data source to API

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

themes/Ying/layouts/page/links.html

@@ -1,103 +1,95 @@
 {{ define "main" }}
 <div id="pjax-container">
     <style>
-        .friend-links {
+        .links ul>li {
-            display: grid;
+            position: relative;
-            grid-template-columns: repeat(2, 1fr);
+            padding-left: 1.75em;
-            gap: 12px;
-            margin-top: 16px;
         }
-        @media (max-width: 768px) {
+
-            .friend-links { grid-template-columns: 1fr; }
+        .links a {
-        }
+            color: var(--link-color-light);
-        .fl-card {
+            font-weight: 500;
-            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;
         }
-        .fl-card:hover {
+
-            transform: translateY(-3px);
+        .links li {
-            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
+            margin-top: .5em;
+            margin-bottom: .5em;
         }
-        .fl-avatar {
+
-            width: 48px; height: 48px;
+        .links ul>li:before {
+            content: "";
+            position: absolute;
+            background-color: #d1d5db;
             border-radius: 50%;
-            object-fit: cover;
+            width: .375em;
-            flex-shrink: 0;
+            height: .375em;
-            background: #eee;
+            top: .6875em;
+            left: .25em;
         }
-        .fl-info { flex: 1; min-width: 0; }
+
-        .fl-name {
+        .url-name {
-            font-size: 15px; font-weight: 600;
+            position: relative;
-            color: var(--fc-text, #333);
+            display: inline-block;
-            line-height: 1.3;
         }
-        .fl-desc {
+
-            font-size: 12px;
+        .url-name::before {
-            color: var(--fc-text, #666);
+            content: "";
-            opacity: 0.65;
+            position: absolute;
-            margin-top: 3px;
+            height: 12px;
-            white-space: nowrap;
+            bottom: 3px;
-            overflow: hidden;
+            left: -4px;
-            text-overflow: ellipsis;
+            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%;
         }
-        [data-theme="dark"] .fl-card {
+
-            background: rgba(35,35,35,0.65);
+        .url-name:hover::before {
-            border-color: rgba(255,255,255,0.1);
+            opacity: 0.5;
         }
-        [data-theme="dark"] .fl-name { color: #e5e7eb; }
+
-        [data-theme="dark"] .fl-desc { color: #9ca3af; }
+        [data-theme="dark"] .links a {
-        .links-loading {
+            color: var(--link-color-dark);
-            grid-column: 1 / -1;
+        }
-            text-align: center;
+
-            padding: 40px;
+        [data-theme="dark"] .url-name::before {
-            color: #888;
+            background-color: #e5e7eb;
+            opacity: 0.18;
+        }
+
+        [data-theme="dark"] .url-name:hover::before {
+            opacity: 0.35;
         }
     </style>
-
     <div class="post-content" itemprop="articleBody">
-        <div class="friend-links" id="friend-links-list">
+        <div class="links">
-            <div class="links-loading">加载友链中...</div>
+            <ul id="links-list" uk-scrollspy="target: > li; cls: uk-animation-slide-bottom-small; delay: 50">
+            </ul>
         </div>
     </div>
 
     <script>
     (function() {
-        var container = document.getElementById('friend-links-list');
+        var list = document.getElementById('links-list');
-        if (!container) return;
+        if (!list) 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) {
+                if (links.length === 0) return;
-                    container.innerHTML = '<div class="links-loading">暂无友链</div>';
-                    return;
-                }
                 var html = '';
-                links.forEach(function(l, i) {
+                links.forEach(function(l) {
-                    var img = l.image || '';
+                    html += '<li><a href="' + l.url + '" class="url-name" target="_blank">' + l.name + '</a><span style="margin-left: 13px;">' + (l.description || '') + '</span></li>';
-                    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;
+                list.innerHTML = html;
             })
-            .catch(function() {
+            .catch(function() {});
-                container.innerHTML = '<div class="links-loading">加载失败，请刷新重试</div>';
-            });
     })();
     </script>
 </div>