友圈卡片背景头像效果恢复:背景图/头像统一用自建favicon绝对地址+失败兜底,缓存key升v2
Deploy to Production / pre-check (push) Successful in 1m47s
Deploy to Production / build (push) Successful in 4m23s
Deploy to Production / deploy-edgeone (push) Successful in 3m57s
Deploy to Production / finalize (push) Successful in 28s
Deploy to Production / notify-failure (push) Skipped

This commit is contained in:
zqlit committed 2026-10-03 17:39:06 +08:00
1 parent 899dcfd006
commit ae93bc7d08
1 file changed
+21 -8
+21 -8
View File
@@ -335,18 +335,33 @@
<script>
/* 站内 RSS/favicon 服务地址(友圈头像兜底用,替代原先的 cravatar 默认灰头像) */
var RSS_API_BASE = '{{ site.Params.rssapi.base | default "https://api.200181.xyz" }}';
/* 统一解析头像地址:
绝对地址原样用;历史遗留的相对 /api/favicon... 补上 API 域名;空值则按站点地址走自建 favicon 服务 */
function fcAvatarUrl(post) {
var a = (post && post.avatar) || '';
if (a.indexOf('//') > 0 || a.indexOf('data:') === 0) return a;
if (a.charAt(0) === '/') return RSS_API_BASE + a;
var target = (post && (post.blogUrl || post.link)) || '';
return RSS_API_BASE + '/api/favicon' + (target ? '?url=' + encodeURIComponent(target) : '');
}
/* 头像加载失败 → 换站内 favicon 服务;再失败就让它显示接口自带的字母兜底图 */
function fcAvatarFallback(img) {
img.onerror = null;
var target = img.getAttribute('data-fallback') || '';
img.src = RSS_API_BASE + '/api/favicon' + (target ? '?url=' + encodeURIComponent(target) : '');
}
/* 卡片背景那张"若隐若现"的头像:失败先换站内 favicon,仍失败才淡出(保证效果尽量在) */
function fcBgFallback(img) {
img.onerror = function () { img.style.opacity = 0; };
var target = img.getAttribute('data-fallback') || '';
img.src = RSS_API_BASE + '/api/favicon' + (target ? '?url=' + encodeURIComponent(target) : '');
}
window.FriendCircle = {
allPosts: [],
currentIndex: 0,
BATCH_SIZE: 10,
CACHE_KEY: 'friend-circle-v1',
CACHE_KEY: 'friend-circle-v2',
CACHE_OPTIONS: {
version: 2,
softTtl: 5 * 60 * 1000,
@@ -374,16 +389,17 @@
let html = "";
posts.forEach((post, index) => {
const dateStr = this.timeAgo(post.date);
const bgImageSrc = post.avatar;
const avatarUrl = fcAvatarUrl(post);
const bgImageSrc = avatarUrl;
const description = post.description ? post.description.replace(/"/g, '&quot;') : '';
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">'
+ '<img src="' + bgImageSrc + '" class="fc-bg-image" data-fallback="' + (post.blogUrl || post.link || '') + '" onerror="fcBgFallback(this)">'
+ '<div class="fc-bottom">'
+ '<div class="fc-author-pill">'
+ '<img src="' + post.avatar + '" class="fc-avatar" data-fallback="' + (post.blogUrl || post.link || '') + '" onerror="fcAvatarFallback(this)">'
+ '<img src="' + avatarUrl + '" class="fc-avatar" data-fallback="' + (post.blogUrl || post.link || '') + '" onerror="fcAvatarFallback(this)">'
+ '<span class="fc-author-name">' + post.author + '</span>'
+ '</div>'
+ '<div class="fc-date"><i class="ri-calendar-line"></i> ' + dateStr + '</div>'
@@ -469,10 +485,7 @@
link: a.link || '',
date: a.pubDate || '',
author: a.feedName || a.author || '',
// 源里没图标 → 用站内 favicon 服务(返回真实图标或字母 SVG,不是灰头像)
avatar: a.favicon || (a.siteUrl || a.link
? RSS_API_BASE + '/api/favicon?url=' + encodeURIComponent(a.siteUrl || a.link)
: ''),
avatar: a.favicon || '', // 渲染时统一由 fcAvatarUrl() 解析(含相对地址/空值兜底)
blogUrl: a.siteUrl || '',
image: null,
description: ''