fix: restore original links style, only change data source to API
Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
zqlitandClaude Opus 4.7 committed
1 parent
8a9bcfbbad
commit
15421ff0ac
1 file changed
+64
-72
@@ -1,103 +1,95 @@
|
|||||||
{{ define "main" }}
|
{{ define "main" }}
|
||||||
<div id="pjax-container">
|
<div id="pjax-container">
|
||||||
<style>
|
<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;
|
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%;
|
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>
|
</style>
|
||||||
|
|
||||||
<div class="post-content" itemprop="articleBody">
|
<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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
(function() {
|
(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())
|
fetch('https://rssapi.usj.cc/api/links?t=' + new Date().getTime())
|
||||||
.then(function(res) { return res.json(); })
|
.then(function(res) { return res.json(); })
|
||||||
.then(function(data) {
|
.then(function(data) {
|
||||||
var links = data.links || [];
|
var links = data.links || [];
|
||||||
if (links.length === 0) {
|
if (links.length === 0) return;
|
||||||
container.innerHTML = '<div class="links-loading">暂无友链</div>';
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
var html = '';
|
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>
|
</script>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in new issue
Block a user