73 lines
2.2 KiB
Plaintext
73 lines
2.2 KiB
Plaintext
---
|
|
import BaseLayout from "../layouts/BaseLayout.astro";
|
|
import { featuredMessage, messagesIntro, twikooConfig } from "../data/messages";
|
|
import { site } from "../data/site";
|
|
import twikooThemeUrl from "../styles/twikoo2.css";
|
|
---
|
|
|
|
<BaseLayout title={`${messagesIntro.title} · ${site.className}`}>
|
|
<main class="page-main">
|
|
<section class="page-hero">
|
|
<div class="section-inner">
|
|
<a class="back-link" href="/">返回首页</a>
|
|
<p class="eyebrow">Messages</p>
|
|
<h1>{messagesIntro.title}</h1>
|
|
<p>{messagesIntro.text}</p>
|
|
</div>
|
|
</section>
|
|
|
|
<section class="gallery-band sticky-message-band">
|
|
<div class="section-inner">
|
|
<article class="message featured message-preamble">
|
|
<p>“{featuredMessage.text}”</p>
|
|
<cite>{featuredMessage.author}</cite>
|
|
</article>
|
|
|
|
{
|
|
twikooConfig.envId ? (
|
|
<div
|
|
id="twikoo"
|
|
class="twikoo-sticky-wall"
|
|
data-env-id={twikooConfig.envId}
|
|
data-path={twikooConfig.path}
|
|
data-lang={twikooConfig.lang}
|
|
/>
|
|
) : (
|
|
<div class="twikoo-empty-note">
|
|
<h2>Twikoo 评论区待配置</h2>
|
|
<p>
|
|
在本地或部署平台设置 <code>PUBLIC_TWIKOO_ENV_ID</code> 后，这里会自动加载评论区。
|
|
</p>
|
|
</div>
|
|
)
|
|
}
|
|
</div>
|
|
</section>
|
|
</main>
|
|
|
|
{
|
|
twikooConfig.envId && (
|
|
<>
|
|
<link rel="stylesheet" href={twikooThemeUrl} />
|
|
<script is:inline src={twikooConfig.scriptSrc} defer></script>
|
|
<script is:inline>
|
|
window.addEventListener("DOMContentLoaded", function () {
|
|
const container = document.querySelector("#twikoo");
|
|
|
|
if (!container || !window.twikoo) {
|
|
return;
|
|
}
|
|
|
|
window.twikoo.init({
|
|
envId: container.dataset.envId,
|
|
el: "#twikoo",
|
|
path: container.dataset.path || location.pathname,
|
|
lang: container.dataset.lang || "zh-CN"
|
|
});
|
|
});
|
|
</script>
|
|
</>
|
|
)
|
|
}
|
|
</BaseLayout>
|