优化一下博客的性能

This commit is contained in:
zqlit committed 2026-05-20 14:33:05 +08:00
1 parent 15421ff0ac
commit 427b17d7a0
24 files changed
+2045 -148

No files matched your search

+1 -1
View File
@@ -1,5 +1,5 @@
{{ define "main" }}
<div id="pjax-container">
<div id="pjax-container" data-needs-echarts="true">
<div class="post-content" itemprop="articleBody" uk-scrollspy="target: > *; cls: uk-animation-slide-bottom-small; delay: 100">
{{ .Content }}
+1 -1
View File
@@ -38,7 +38,7 @@
<li data-date="{{ $year }}{{ printf "%02d" $month }}{{ .Date.Day }}">
<span class="articles_date_time">{{ .Date.Format "01/02" }}</span>
<a class="a-archives" href="{{ .Permalink }}">{{ .Title }}</a>
<a class="a-archives" href="{{ .RelPermalink }}">{{ .Title }}</a>
</li>
{{ end }}
+112 -36
View File
@@ -337,6 +337,15 @@
allPosts: [],
currentIndex: 0,
BATCH_SIZE: 10,
CACHE_KEY: 'friend-circle-v1',
CACHE_OPTIONS: {
version: 2,
softTtl: 5 * 60 * 1000,
hardTtl: 60 * 60 * 1000,
validate: function(data) {
return !!data && Array.isArray(data.posts);
}
},
timeAgo: function (dateStr) {
const date = new Date(dateStr);
@@ -403,6 +412,74 @@
});
},
renderEmpty: function () {
const container = document.getElementById("friend-circle-container");
if (!container) return;
container.innerHTML = '<div class="empty" style="grid-column: 1/-1; text-align:center; padding:20px;">暂无动态</div>';
},
renderError: function () {
const container = document.getElementById("friend-circle-container");
if (!container) return;
container.innerHTML = '<div class="error" style="grid-column: 1/-1; text-align:center; padding:20px; color:#d9534f;">加载失败,请稍后刷新重试</div>';
},
applyData: function (data) {
const container = document.getElementById("friend-circle-container");
if (!container) return;
if (!data.posts || data.posts.length === 0) {
this.renderEmpty();
return;
}
window.FriendCircle.allPosts = data.posts;
window.fcUpdateTime = new Date(data.updated).toLocaleString();
window.FriendCircle.currentIndex = 0;
container.innerHTML = "";
window.FriendCircle.loadMore();
},
fetchData: function () {
if (window.BrowserCache && typeof window.BrowserCache.log === 'function') {
window.BrowserCache.log('[FriendCircleCache][fetch]', {
key: window.BrowserCache ? window.BrowserCache.buildKey(window.FriendCircle.CACHE_KEY) : window.FriendCircle.CACHE_KEY,
softTtl: window.BrowserCache ? window.BrowserCache.formatDuration(window.FriendCircle.CACHE_OPTIONS.softTtl) : window.FriendCircle.CACHE_OPTIONS.softTtl,
hardTtl: window.BrowserCache ? window.BrowserCache.formatDuration(window.FriendCircle.CACHE_OPTIONS.hardTtl) : window.FriendCircle.CACHE_OPTIONS.hardTtl
});
}
return fetch("https://rssapi.usj.cc/api/articles?limit=50")
.then(function(res) {
if (!res.ok) throw new Error("Network response was not ok");
return res.json();
})
.then(function(apiData) {
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 (window.BrowserCache) {
window.BrowserCache.write(window.FriendCircle.CACHE_KEY, window.FriendCircle.CACHE_OPTIONS, data);
}
return data;
});
},
initTooltip: function() {
if (this.tooltipInitialized) return;
this.tooltipInitialized = true;
@@ -476,42 +553,35 @@
if (this.isFetching) return;
this.isFetching = true;
// 从 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(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 cached = window.BrowserCache && window.BrowserCache.read(this.CACHE_KEY, this.CACHE_OPTIONS);
if (cached) {
if (window.BrowserCache && typeof window.BrowserCache.log === 'function') {
window.BrowserCache.log('[FriendCircleCache][render]', {
key: cached.key,
age: cached.ageText,
isFresh: cached.isFresh,
softTtl: cached.softTtlText,
hardTtl: cached.hardTtlText
});
const data = { posts: posts, updated: apiData.timestamp || new Date().toISOString() };
}
this.applyData(cached.data);
if (cached.isFresh) {
this.isFetching = false;
return;
}
}
if (!data.posts || data.posts.length === 0) {
container.innerHTML = '<div class="empty" style="grid-column: 1/-1; text-align:center; padding:20px;">暂无动态</div>';
return;
}
window.FriendCircle.allPosts = data.posts;
window.fcUpdateTime = new Date(data.updated).toLocaleString();
window.FriendCircle.currentIndex = 0;
container.innerHTML = "";
window.FriendCircle.loadMore();
this.fetchData()
.then(function(data) {
window.FriendCircle.applyData(data);
})
.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>';
if (window.BrowserCache && window.BrowserCache.isDebug && window.BrowserCache.isDebug()) {
console.error("Friend Circle Error:", err);
}
if (!cached) {
window.FriendCircle.renderError();
}
})
.finally(function() {
window.FriendCircle.isFetching = false;
@@ -519,12 +589,18 @@
}
};
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", function() {
function initFriendCirclePage() {
if (window.FriendCircle && typeof window.FriendCircle.init === 'function') {
window.FriendCircle.init();
});
}
}
document.addEventListener('pjax:complete', initFriendCirclePage);
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", initFriendCirclePage);
} else {
window.FriendCircle.init();
initFriendCirclePage();
}
</script>
</div>
+88 -10
View File
@@ -78,18 +78,96 @@
var list = document.getElementById('links-list');
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) return;
var html = '';
links.forEach(function(l) {
html += '<li><a href="' + l.url + '" class="url-name" target="_blank">' + l.name + '</a><span style="margin-left: 13px;">' + (l.description || '') + '</span></li>';
var CACHE_KEY = 'friend-links-v1';
var CACHE_OPTIONS = {
version: 2,
softTtl: 6 * 60 * 60 * 1000,
hardTtl: 24 * 60 * 60 * 1000,
validate: function(data) {
return !!data && Array.isArray(data.links);
}
};
function escapeHtml(value) {
return String(value || '')
.replace(/&/g, '&amp;')
.replace(/</g, '&lt;')
.replace(/>/g, '&gt;')
.replace(/"/g, '&quot;')
.replace(/'/g, '&#39;');
}
function renderState(message, className) {
list.innerHTML = '<li class="' + className + '">' + escapeHtml(message) + '</li>';
}
function renderLinks(links) {
if (!Array.isArray(links) || links.length === 0) {
renderState('暂无友链数据', 'links-empty');
return;
}
var html = '';
links.forEach(function(l) {
html += '<li><a href="' + escapeHtml(l.url) + '" class="url-name" target="_blank" rel="noopener noreferrer">' + escapeHtml(l.name) + '</a><span style="margin-left: 13px;">' + escapeHtml(l.description || '') + '</span></li>';
});
list.innerHTML = html;
}
function logCache(event, payload) {
if (window.BrowserCache && typeof window.BrowserCache.log === 'function') {
window.BrowserCache.log('[LinksCache][' + event + ']', payload);
}
}
function fetchLinks() {
logCache('fetch', {
key: window.BrowserCache ? window.BrowserCache.buildKey(CACHE_KEY) : CACHE_KEY,
softTtl: window.BrowserCache ? window.BrowserCache.formatDuration(CACHE_OPTIONS.softTtl) : CACHE_OPTIONS.softTtl,
hardTtl: window.BrowserCache ? window.BrowserCache.formatDuration(CACHE_OPTIONS.hardTtl) : CACHE_OPTIONS.hardTtl
});
return fetch('https://rssapi.usj.cc/api/links')
.then(function(res) {
if (!res.ok) throw new Error('Failed to fetch links');
return res.json();
})
.then(function(data) {
var links = Array.isArray(data.links) ? data.links : [];
var payload = { links: links };
window.BrowserCache.write(CACHE_KEY, CACHE_OPTIONS, payload);
return payload;
});
list.innerHTML = html;
}
var cached = window.BrowserCache && window.BrowserCache.read(CACHE_KEY, CACHE_OPTIONS);
if (cached) {
logCache('render', {
key: cached.key,
age: cached.ageText,
isFresh: cached.isFresh,
softTtl: cached.softTtlText,
hardTtl: cached.hardTtlText
});
renderLinks(cached.data.links);
if (cached.isFresh) {
return;
}
} else {
renderState('友链加载中...', 'links-loading');
}
fetchLinks()
.then(function(payload) {
renderLinks(payload.links);
})
.catch(function() {});
.catch(function(err) {
if (window.BrowserCache && window.BrowserCache.isDebug && window.BrowserCache.isDebug()) {
console.error('Links Error:', err);
}
if (!cached) {
renderState('友链加载失败,请稍后刷新重试', 'links-error');
}
});
})();
</script>
</div>