blog/themes/Ying/layouts/page/links.html

{{ define "main" }}
<div id="pjax-container">
    <style>
        .friend-links {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-top: 16px;
        }
        @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;
        }
        .fl-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 24px rgba(0,0,0,0.08);
        }
        .fl-avatar {
            width: 48px; height: 48px;
            border-radius: 50%;
            object-fit: cover;
            flex-shrink: 0;
            background: #eee;
        }
        .fl-info { flex: 1; min-width: 0; }
        .fl-name {
            font-size: 15px; font-weight: 600;
            color: var(--fc-text, #333);
            line-height: 1.3;
        }
        .fl-desc {
            font-size: 12px;
            color: var(--fc-text, #666);
            opacity: 0.65;
            margin-top: 3px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        [data-theme="dark"] .fl-card {
            background: rgba(35,35,35,0.65);
            border-color: rgba(255,255,255,0.1);
        }
        [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="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 }}