Files
blog/themes/Ying/layouts/partials/footer.html
T
zqlit 50a906e07c perf(comments): 评论加载提速 + 骨架屏 + 友链弹窗 pjax 修复 + toast 统一 Message.js
优化:
- initArtalk 加节点级幂等守卫(mount.__atkInited,失败回滚),
  消除 artalk.html/mypjax 多入口导致的 4× comments + 4× pv 重复请求
- fetch 包装层对无 body 的 GET/HEAD 去掉多余 content-type,
  消掉 Artalk 对 GET /comments 的 CORS 预检(按完整 URL 缓存,
  每篇文章都重付一次 RTT)。实测评论列表 +1150~1565ms → +626ms

修复:
- 评论列表骨架屏改注入 .atk-list-body(原骨架在 #Comments 内,
  被 Artalk.init 清空),list-loaded/故障/12s 兜底移除
- 友链申请弹窗抽成 modules/friendlink.js 进 page-only bundle
  (原内联脚本在 #pjax-container 外,pjax 后 flApplyOpenModal 未定义)
- toast 统一走本地化 Message.js/Qmsg 适配层(保留 window.Toast/showToast 旧 API)

文档:
- README / 架构总览 更新;新增 评论加载优化方案.md
2026-10-04 15:00:52 +08:00

182 lines
7.3 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<div class="footer">
<nav class="nav" style="clear: both;">
© 2019 - {{ now.Year }}
<br>
<a href="https://beian.miit.gov.cn/" target="_blank"><span style="color:#999999;">鄂ICP备2022015735号-1</span></a>
<br>
本站由<a href="https://www.upyun.com/?utm_source=lianmeng&utm_medium=referral" target="blank" title="又拍云"
style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<span style="color: var(--contentColor);font-weight: 700;">又拍云CDN</span>
</a>提供CDN加速服务
<br>
</nav>
</div>
</div>
</div>
<div class="floating-tools">
<a href="javascript:;" id="search-btn" title="搜索文章">
<i class="ri-search-line"></i>
</a>
<a href="javascript:;" id="theme-toggle" title="切换主题">
<i class="ri-sun-line"></i>
</a>
<a href="#Comments" id="to-comments" title="跳转评论">
<i class="ri-chat-2-line"></i>
</a>
<a href="#" id="back-to-top" title="返回顶部">
<i class="ri-arrow-up-line"></i>
</a>
</div>
<!-- Search Modal -->
<div id="search-modal" class="search-modal">
<div class="search-modal-content">
<div class="search-header">
<h3>搜索文章</h3>
<span class="close-search">&times;</span>
</div>
<div class="search-body">
<div class="search-input-wrapper">
<input type="text" id="search-input" placeholder="输入关键词搜索..." autocomplete="off">
<button id="search-submit"><i class="ri-search-line"></i></button>
</div>
<div id="search-results" class="search-results">
<!-- Search results will appear here -->
<p class="search-tip">输入关键词并回车进行搜索</p>
</div>
</div>
</div>
</div>
{{/* ====== 优化后的JS加载策略(方案1:保守优化) ====== */}}
{{/* ====== 1. 核心JS Bundle - 始终加载 ====== */}}
{{ $iconfont := resources.Get "js/libs/iconfont.js" }}
{{ $uikit := resources.Get "js/libs/uikit.min.js" }}
{{ $viewimage := resources.Get "js/libs/view-image.min.js" }}
{{/* Message.js(Qmsg)+ Toast 适配层放在 utils 之前,保证任何 toast 调用点执行时组件已就绪 */}}
{{ $message := resources.Get "js/libs/message.min.js" }}
{{ $toast := resources.Get "js/modules/toast.js" }}
{{ $utils := resources.Get "js/modules/utils.js" }}
{{ $loader := resources.Get "js/modules/loader.js" }}
{{ $cache := resources.Get "js/modules/cache.js" }}
{{ $search := resources.Get "js/modules/search.js" }}
{{ $floatingTools := resources.Get "js/modules/floating-tools.js" }}
{{ $nprogress := resources.Get "js/libs/nprogress.js" }}
{{ $pjaxLib := resources.Get "js/libs/pjax.js" }}
{{ $mypjax := resources.Get "js/modules/mypjax.js" }}
{{ $pangu := resources.Get "js/modules/pangu.js" }}
{{ $linkify := resources.Get "js/modules/linkify.js" }}
{{ $shortcodesJs := resources.Get "js/shortcodes.js" }}
{{ $lazyload := resources.Get "js/modules/lazyload.js" }}
{{ $main := resources.Get "js/main.js" }}
{{ $coreScripts := slice $iconfont $uikit $viewimage $message $toast $utils $loader $cache $search $floatingTools $nprogress $pjaxLib $mypjax $pangu $linkify $shortcodesJs $lazyload $main | resources.Concat "js/core.js" | resources.Minify | resources.Fingerprint }}
<script defer src="{{ $coreScripts.RelPermalink }}"></script>
{{/* ====== 2. 配置变量 ====== */}}
<script>
window.enableInfiniteScroll = {{ .Site.Params.infiniteScroll.enable | default false }};
</script>
{{/* ====== 3. 远程数据获取 - 构建时 ====== */}}
{{/* Fetch friend data at build time — no runtime network requests */}}
{{ $linkHosts := slice }}
{{ $linkNames := slice }}
{{ with resources.GetRemote (printf "%s/api/links?all=1" (site.Params.rssapi.base | default "https://api.200181.xyz")) }}
{{ with .Err }}
{{ warnf "Links API fetch failed: %s" . }}
{{ else }}
{{ with .Content | transform.Unmarshal }}
{{ range .links }}
{{ $host := "" }}
{{ with .url | urls.Parse }}
{{ $host = .Host | strings.TrimPrefix "www." }}
{{ end }}
{{ $title := .name | default "" }}
{{ if $host }}
{{ $linkHosts = $linkHosts | append (dict "host" $host "title" $title) }}
{{ end }}
{{ if $title }}
{{ $linkNames = $linkNames | append (dict "lower" (lower $title) "title" $title) }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<script>
window.friendLinks = {{ dict "hosts" $linkHosts "names" $linkNames | jsonify | safeJS }};
</script>
{{ $feedHosts := slice }}
{{ $feedNames := slice }}
{{ with resources.GetRemote (printf "%s/api/feeds" (site.Params.rssapi.base | default "https://api.200181.xyz")) }}
{{ with .Err }}
{{ warnf "Feeds API fetch failed: %s" . }}
{{ else }}
{{ with .Content | transform.Unmarshal }}
{{ range .feeds }}
{{ $host := "" }}
{{ with .url | urls.Parse }}
{{ $host = .Host | strings.TrimPrefix "www." }}
{{ end }}
{{ $title := .feedTitle | default "" }}
{{ if $host }}
{{ $feedHosts = $feedHosts | append (dict "host" $host "title" $title) }}
{{ end }}
{{ if $title }}
{{ $feedNames = $feedNames | append (dict "lower" (lower $title) "title" $title) }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
{{ end }}
<script>
window.friendFeeds = {{ dict "hosts" $feedHosts "names" $feedNames | jsonify | safeJS }};
</script>
{{/* ====== 4. 页面特定JS - 按需加载 ====== */}}
{{/* 文章详情页专用JS */}}
{{ if .IsPage }}
{{/* 友链申请弹窗放最前:artalk.js 渲染申请卡片时会调 window.flApplyOpenModal */}}
{{ $friendlink := resources.Get "js/modules/friendlink.js" }}
{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
{{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }}
{{ $reward := resources.Get "js/modules/reward.js" }}
{{ $pageScripts := slice $friendlink $artalkModule $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }}
<script defer src="{{ $pageScripts.RelPermalink }}"></script>
<script>window._pageOnlyScriptUrl = '{{ $pageScripts.RelPermalink }}';</script>
{{ else }}
{{/* 非文章页面:仍然计算URL,但不加载,用于PJAX动态加载 */}}
{{ $friendlink := resources.Get "js/modules/friendlink.js" }}
{{ $artalkModule := resources.Get "js/modules/artalk.js" }}
{{ $paragraphComments := resources.Get "js/modules/paragraph-comments.js" }}
{{ $reward := resources.Get "js/modules/reward.js" }}
{{ $pageScripts := slice $friendlink $artalkModule $paragraphComments $reward | resources.Concat "js/page-only.js" | resources.Minify | resources.Fingerprint }}
<script>window._pageOnlyScriptUrl = '{{ $pageScripts.RelPermalink }}';</script>
{{ end }}
{{/* 首页专用JS */}}
{{ if .IsHome }}
{{ if .Site.Params.infiniteScroll.enable }}
{{ $infiniteScroll := resources.Get "js/modules/infinite-scroll.js" }}
<script defer src="{{ $infiniteScroll.RelPermalink }}"></script>
{{ end }}
{{ end }}
{{/* 特定页面专用JS */}}
{{ if or (eq .Type "links") (eq .Type "circles") }}
{{ $tiaozhuan := resources.Get "js/modules/tiaozhuan.js" }}
<script defer src="{{ $tiaozhuan.RelPermalink }}"></script>
{{ end }}
{{/* ====== 5. 第三方脚本 ====== */}}
<script async src="/js/bsz.js"></script>
</body>
</html>