330 lines
14 KiB
HTML
330 lines
14 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns:th="http://www.thymeleaf.org"
|
|
th:replace="~{modules/layouts/layout :: layout(content = ~{::content}, htmlType = 'page',title = '朋友圈 | ' + ${site.title}, head = ~{::head})}">
|
|
|
|
<th:block th:fragment="head">
|
|
<th:block th:replace="~{modules/common/open-graph :: open-graph(_title = '朋友圈',
|
|
_permalink = '/moments',
|
|
_cover = '',
|
|
_excerpt = '友链朋友圈 - 发现更多精彩内容',
|
|
_type = 'website')}"></th:block>
|
|
<!-- 分离CSS文件 -->
|
|
<link rel="stylesheet" th:href="@{/assets/css/fmoments.css}" data-pjax>
|
|
</th:block>
|
|
|
|
<th:block th:fragment="content">
|
|
<div class="page" id="body-wrap">
|
|
<!-- 头部导航栏 -->
|
|
<header class="not-top-img" id="page-header">
|
|
<nav th:replace="~{modules/nav :: nav(title = '朋友圈')}"></nav>
|
|
</header>
|
|
|
|
<main class="layout hide-aside" id="content-inner">
|
|
<div id="page">
|
|
<!-- 朋友圈统计信息面板 -->
|
|
<div id="fMomentsMessageBoard">
|
|
<div class="fMomentsUpdatedTime">
|
|
<i class="fas fa-sync-alt"></i>
|
|
最近更新：<span id="lastUpdateTime">加载中...</span>
|
|
</div>
|
|
|
|
<div class="fMomentsStatsGrid">
|
|
<div class="fMomentsStatCard">
|
|
<div class="fMomentsStatIcon">📚</div>
|
|
<div class="fMomentsStatNumber" id="totalArticles">0</div>
|
|
<div class="fMomentsStatLabel">总文章数</div>
|
|
</div>
|
|
|
|
<div class="fMomentsStatCard">
|
|
<div class="fMomentsStatIcon">👥</div>
|
|
<div class="fMomentsStatNumber" id="totalAuthors">0</div>
|
|
<div class="fMomentsStatLabel">活跃作者</div>
|
|
</div>
|
|
|
|
<div class="fMomentsStatCard">
|
|
<div class="fMomentsStatIcon">🔥</div>
|
|
<div class="fMomentsStatNumber" id="todayCount">0</div>
|
|
<div class="fMomentsStatLabel">今日更新</div>
|
|
</div>
|
|
|
|
<div class="fMomentsStatCard">
|
|
<div class="fMomentsStatIcon">⚡</div>
|
|
<div class="fMomentsStatNumber" id="weekCount">0</div>
|
|
<div class="fMomentsStatLabel">本周更新</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 控制面板 -->
|
|
<div class="fMomentsControlPanel">
|
|
<div class="fMomentsSearchBox">
|
|
<i class="fas fa-search fMomentsSearchIcon"></i>
|
|
<input type="text" class="fMomentsSearchInput" placeholder="搜索文章标题或作者..." id="searchInput">
|
|
</div>
|
|
|
|
<div class="fMomentsFilterGroup">
|
|
<select class="fMomentsSelect" id="authorFilter">
|
|
<option value="">全部作者</option>
|
|
</select>
|
|
|
|
<select class="fMomentsSelect" id="sortSelect">
|
|
<option value="pubDate">按发布时间</option>
|
|
<option value="creationTime">按创建时间</option>
|
|
<option value="author">按作者名称</option>
|
|
<option value="title">按标题</option>
|
|
</select>
|
|
|
|
<div class="fMomentsToggle">
|
|
<span>升序</span>
|
|
<div class="fMomentsSwitch active" id="sortOrderSwitch"></div>
|
|
<span>降序</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 显示数量状态 -->
|
|
<div class="fMomentsDisplayStatus">
|
|
<div class="fMomentsDisplayInfo">
|
|
<i class="fas fa-filter"></i>
|
|
<span>显示</span>
|
|
<span class="fMomentsDisplayCount" id="displayedCount">0</span>
|
|
<span>/</span>
|
|
<span class="fMomentsDisplayCount" id="totalCount">0</span>
|
|
<span>篇文章</span>
|
|
</div>
|
|
<div class="fMomentsDisplayInfo" id="filterStatus" style="display: none;">
|
|
<i class="fas fa-info-circle"></i>
|
|
<span id="filterText">已应用筛选条件</span>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 加载状态 -->
|
|
<div id="loadingIndicator" class="fMomentsLoading">
|
|
<div class="fMomentsLoadingSpinner"></div>
|
|
<div class="fMomentsLoadingText">正在加载动态内容...</div>
|
|
</div>
|
|
|
|
<!-- 朋友圈文章容器 -->
|
|
<div id="fmomentsContainer"></div>
|
|
|
|
<!-- 加载更多按钮 -->
|
|
<div id="loadingStatus" style="display: none;">
|
|
<button id="fmomentsMoreBtn" type="button">
|
|
<i class="fas fa-angle-double-down"></i>
|
|
<span>加载更多</span>
|
|
</button>
|
|
<div class="fMomentsNoMore" id="noMoreTip" style="display: none;">
|
|
<i class="fas fa-check-circle"></i>
|
|
<div>🎉 已显示全部内容</div>
|
|
<small>共找到 <span id="finalCount">0</span> 篇文章</small>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 错误状态 -->
|
|
<div class="fMomentsErrorState" id="errorState" style="display: none;">
|
|
<i class="fas fa-exclamation-triangle"></i>
|
|
<h3>加载失败</h3>
|
|
<div id="errorMessage">请检查网络连接后重试</div>
|
|
<button class="fMomentsRetryBtn" id="retryBtn">重新加载</button>
|
|
</div>
|
|
|
|
<!-- 空状态 -->
|
|
<div class="fMomentsEmptyState" id="emptyState" style="display: none;">
|
|
<i class="fas fa-search"></i>
|
|
<h3>没有找到匹配的文章</h3>
|
|
<p>尝试更换搜索词或调整筛选条件</p>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 底部 -->
|
|
<footer th:replace="~{modules/footer}" />
|
|
|
|
<!-- 资源检查和动态加载脚本 -->
|
|
<script data-pjax th:inline="javascript">
|
|
// 资源动态加载器
|
|
window.MomentsResourceLoader = {
|
|
// 检查CSS是否已加载
|
|
isCSSLoaded: function (href) {
|
|
const links = document.getElementsByTagName('link');
|
|
for (let i = 0; i < links.length; i++) {
|
|
if (links[i].href && links[i].href.includes(href)) {
|
|
return true;
|
|
}
|
|
}
|
|
return false;
|
|
},
|
|
|
|
// 检查JS是否已加载
|
|
isJSLoaded: function (src) {
|
|
const scripts = document.getElementsByTagName('script');
|
|
for (let i = 0; i < scripts.length; i++) {
|
|
if (scripts[i].src && scripts[i].src.includes(src)) {
|
|
return true;
|
|
}
|
|
}
|
|
// 也检查是否已经定义了相关的全局变量/函数
|
|
return typeof FriendMomentsApp !== 'undefined';
|
|
},
|
|
|
|
// 动态加载CSS
|
|
loadCSS: function (href) {
|
|
return new Promise((resolve, reject) => {
|
|
if (this.isCSSLoaded(href)) {
|
|
// console.log('CSS already loaded:', href);
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
const link = document.createElement('link');
|
|
link.rel = 'stylesheet';
|
|
link.href = href;
|
|
link.setAttribute('data-pjax', '');
|
|
|
|
link.onload = () => {
|
|
// console.log('CSS loaded successfully:', href);
|
|
resolve();
|
|
};
|
|
|
|
link.onerror = () => {
|
|
console.error('Failed to load CSS:', href);
|
|
reject(new Error(`Failed to load CSS: ${href}`));
|
|
};
|
|
|
|
document.head.appendChild(link);
|
|
});
|
|
},
|
|
|
|
// 动态加载JS
|
|
loadJS: function (src) {
|
|
return new Promise((resolve, reject) => {
|
|
if (this.isJSLoaded(src)) {
|
|
// console.log('JS already loaded:', src);
|
|
resolve();
|
|
return;
|
|
}
|
|
|
|
const script = document.createElement('script');
|
|
script.src = src;
|
|
script.setAttribute('data-pjax', '');
|
|
|
|
script.onload = () => {
|
|
// console.log('JS loaded successfully:', src);
|
|
resolve();
|
|
};
|
|
|
|
script.onerror = () => {
|
|
console.error('Failed to load JS:', src);
|
|
reject(new Error(`Failed to load JS: ${src}`));
|
|
};
|
|
|
|
document.head.appendChild(script);
|
|
});
|
|
},
|
|
|
|
// 加载所有必需的资源
|
|
loadRequiredResources: async function () {
|
|
const cssPath = /*[[@{/assets/css/fmoments.css}]]*/ '/assets/css/fmoments.css';
|
|
const jsPath = /*[[@{/assets/js/fmoments.js}]]*/ '/assets/js/fmoments.js';
|
|
|
|
try {
|
|
// console.log('Checking and loading required resources...');
|
|
|
|
// 并行加载CSS和JS
|
|
await Promise.all([
|
|
this.loadCSS(cssPath),
|
|
this.loadJS(jsPath)
|
|
]);
|
|
|
|
// console.log('All resources loaded successfully');
|
|
return true;
|
|
} catch (error) {
|
|
console.error('Error loading resources:', error);
|
|
return false;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
<!-- 初始化脚本 -->
|
|
<script data-pjax th:inline="javascript">
|
|
// 朋友圈配置
|
|
// 从主题设置获取
|
|
window.fmomentsConfig = {
|
|
apiUrl: /*[[${theme.config.link.fmomentsApiUrl}]]*/ '/apis/api.friend.moony.la/v1alpha1/friendposts',
|
|
pageSize: /*[[${theme.config.link.fmomentsPageSize}]]*/ 12,
|
|
errorImg: /*[[${theme.config.other.error_404.background}]]*/ '/assets/images/404.gif'
|
|
};
|
|
|
|
// 全局初始化状态追踪
|
|
window._momentsInitializing = false;
|
|
|
|
// 初始化朋友圈应用
|
|
async function initMomentsApp() {
|
|
// 防止并发初始化
|
|
if (window._momentsInitializing) {
|
|
// console.log('Moments initialization already in progress');
|
|
return;
|
|
}
|
|
|
|
// console.log('Starting Moments initialization');
|
|
window._momentsInitializing = true;
|
|
|
|
try {
|
|
// 首先检查并加载必需的资源
|
|
const resourcesLoaded = await window.MomentsResourceLoader.loadRequiredResources();
|
|
|
|
if (!resourcesLoaded) {
|
|
console.error('Failed to load required resources');
|
|
return;
|
|
}
|
|
|
|
// 等待一小段时间确保资源完全加载
|
|
await new Promise(resolve => setTimeout(resolve, 100));
|
|
|
|
// 检查FriendMomentsApp是否可用
|
|
if (typeof FriendMomentsApp !== 'undefined') {
|
|
// 创建新实例（构造函数会处理旧实例的清理）
|
|
window.fMomentsApp = new FriendMomentsApp();
|
|
// 显式调用初始化
|
|
await window.fMomentsApp.init();
|
|
// console.log('FriendMomentsApp initialized successfully');
|
|
} else {
|
|
console.error('FriendMomentsApp is not available after loading resources');
|
|
}
|
|
} catch (error) {
|
|
console.error('Error initializing FriendMomentsApp:', error);
|
|
} finally {
|
|
window._momentsInitializing = false;
|
|
}
|
|
}
|
|
|
|
// PJAX开始时立即清理
|
|
document.addEventListener('pjax:start', function () {
|
|
// console.log('PJAX start - cleaning up Moments');
|
|
if (window._momentsInstance) {
|
|
window._momentsInstance.destroy();
|
|
}
|
|
window._momentsInitializing = false;
|
|
});
|
|
|
|
// DOM加载完成后初始化
|
|
if (document.readyState === 'loading') {
|
|
document.addEventListener('DOMContentLoaded', initMomentsApp);
|
|
} else {
|
|
// DOM已经加载完成
|
|
initMomentsApp();
|
|
}
|
|
|
|
// PJAX完成后重新初始化
|
|
document.addEventListener('pjax:complete', function () {
|
|
if (document.getElementById('fmomentsContainer')) {
|
|
// 延迟一点时间确保DOM稳定
|
|
setTimeout(initMomentsApp, 150);
|
|
}
|
|
});
|
|
</script>
|
|
|
|
</div>
|
|
</th:block>
|
|
|
|
</html> |