优化一下博客的性能
This commit is contained in:
1 parent
15421ff0ac
commit
427b17d7a0
24 files changed
+2045
-148
No files matched your search
@@ -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 }}
|
||||
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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, '&')
|
||||
.replace(/</g, '<')
|
||||
.replace(/>/g, '>')
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, ''');
|
||||
}
|
||||
|
||||
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>
|
||||
|
||||
Reference in new issue
Block a user