45 lines
1.7 KiB
Plaintext
45 lines
1.7 KiB
Plaintext
---
|
|
import { commentConfig } from "@/data/comments"
|
|
|
|
const envId =
|
|
(import.meta.env.PUBLIC_TWIKOO_ENV_ID as string | undefined) || commentConfig.twikooEnvId
|
|
const isEnabled = Boolean(envId)
|
|
---
|
|
|
|
{
|
|
isEnabled && (
|
|
<section class="mt-12 pb-12" data-comments>
|
|
{/*
|
|
twikoo 的基础样式必须用静态 <link> 引入，不能只靠 twikoo.min.js 运行时注入。
|
|
|
|
原因：脚本会把样式 appendChild 到 <head>，而 Astro 的 ClientRouter 在切页
|
|
时会清掉 head 里它不认识的 <style>；脚本本身又只执行一次（window.twikoo
|
|
已存在就跳过），样式不会重新注入。表现为「从一篇带评论的文章点进另一篇后，
|
|
评论区排版全崩」——markdown 图标被撑成几百像素、文件输入框露出来、
|
|
表情面板塌成一列；整页刷新才恢复。
|
|
|
|
顺序：twikoo.css（官方原样，随版本从 npm 更新）→ twikoo-custom.css（主题适配）。
|
|
放在 body 里而不是 head，是为了让 ClientRouter 每次切页都把它一起换进来。
|
|
*/}
|
|
<link rel="stylesheet" href="/assets/css/twikoo.css" />
|
|
<link rel="stylesheet" href="/assets/css/twikoo-custom.css" />
|
|
|
|
<div class="px-6">
|
|
<div class="max-w-3xl mx-auto">
|
|
<h2 class="mb-6 flex items-center gap-3 text-2xl font-semibold text-foreground">
|
|
<span class="h-6 w-1 rounded-full bg-primary" />
|
|
评论
|
|
</h2>
|
|
|
|
<div
|
|
id="twikoo"
|
|
data-env-id={envId}
|
|
data-lang={commentConfig.lang}
|
|
data-strip-trailing-slash={commentConfig.stripTrailingSlash ? "true" : "false"}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
)
|
|
}
|