请在 Blogger 后台进入“页面 (Pages)”，新建或编辑您的页面，将编辑器切换为 “HTML 视图 (HTML View)”，然后将以下完整代码直接粘贴进去：
部署注意事项
代码展示
<!-- 1. DNS 预热与 CSS 异步加载 (防阻塞) -->
<link rel="preconnect" href="https://your-custom-domain.com" crossorigin="anonymous" />
<link rel="dns-prefetch" href="https://your-custom-domain.com" />
<link rel="preconnect" href="https://unpkg.zhimg.com" crossorigin="anonymous" />
<link rel="preload" href="https://unpkg.zhimg.com/@waline/client@v3/dist/waline.css" as="style" onload="this.onload=null;this.rel='stylesheet'" />
<noscript><link rel="stylesheet" href="https://unpkg.zhimg.com/@waline/client@v3/dist/waline.css" /></noscript>
<!-- 2. 防页面抖动 (CLS) 样式 -->
<style>
/* 在评论加载出来前占位，确保阅读体验极其流畅 */
#waline {
width: 100%;
min-height: 250px;
margin-top: 1.5rem;
background: transparent;
}
</style>
<!-- 3. 评论区挂载容器 -->
<div id="waline"></div>
<!-- 4. 核心空闲预载与图片加速逻辑 -->
<script type="module">
const loadWaline = () => {
import('https://unpkg.zhimg.com/@waline/client@v3/dist/waline.js').then(({ init }) => {
init({
el: '#waline',
// ⚠️ 极其重要：替换为您绑定的自定义后端域名
serverURL: 'https://your-custom-domain.com',
// Blogger 专属优化：剥离 ?m=1 后缀，确保手机端和电脑端共享同一份评论数据
path: window.location.pathname,
// 头像极速分发：通过 wsrv.nl 图像代理突破国内直连墙，消除图片破损
avatarCDN: 'https://wsrv.nl/?url=https://www.gravatar.com/avatar/',
// 表情包提速：强制使用知乎境内节点
emoji: [
'https://unpkg.zhimg.com/@waline/emojis@1.2.0/weibo'
],
search: false,
imageUploader: false,
});
});
};
const walineEl = document.getElementById('waline');
if (walineEl) {
// 监听系统空闲状态，在首屏图文加载完毕后的空闲时间“偷跑”加载评论
if ('requestIdleCallback' in window) {
requestIdleCallback(loadWaline, { timeout: 2000 });
} else {
setTimeout(loadWaline, 1000);
}
}
</script>
1.HTML 视图编辑：粘贴后，请不要再切换回“撰写视图 (Compose View)”，直接点击右上角的“更新”或“发布”。Blogger 的撰写视图有时会自动将 HTML 代码中的换行转换为 <br> 标签，破坏代码结构。
2.替换域名：务必将两处 [https://your-custom-domain.com](https://your-custom-domain.com) 替换为您在 Vercel 或其他平台绑定的自定义 API 域名，这是国内能够毫秒级获取历史评论数据的基石。
2.替换域名：务必将两处 [https://your-custom-domain.com](https://your-custom-domain.com) 替换为您在 Vercel 或其他平台绑定的自定义 API 域名，这是国内能够毫秒级获取历史评论数据的基石。