留言
This commit is contained in:
@@ -2,3 +2,4 @@ node_modules/
|
||||
dist/
|
||||
.astro/
|
||||
*.log
|
||||
.env.local
|
||||
@@ -1,6 +1,6 @@
|
||||
export const messagesIntro = {
|
||||
title: "留言墙",
|
||||
text: "可以把收集来的留言放在这里。老师寄语、同学短句、匿名祝福都很适合。"
|
||||
text: "在这里留下给一年后的自己、老同学或整个班级的一句话。新的留言会像便利贴一样贴在这面墙上。"
|
||||
};
|
||||
|
||||
export const featuredMessage = {
|
||||
@@ -18,3 +18,11 @@ export const messages = [
|
||||
text: "愿你打开这个页面的时候，刚好想起一个很好的下午。"
|
||||
}
|
||||
];
|
||||
|
||||
export const twikooConfig = {
|
||||
envId: import.meta.env.PUBLIC_TWIKOO_ENV_ID ?? "",
|
||||
scriptSrc: "https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.nocss.js",
|
||||
styleSrc: "https://cdn.jsdelivr.net/npm/twikoo@1.7.7/dist/twikoo.css",
|
||||
path: "/messages/",
|
||||
lang: "zh-CN"
|
||||
};
|
||||
|
||||
+150
-18
@@ -1,6 +1,6 @@
|
||||
---
|
||||
import BaseLayout from "../layouts/BaseLayout.astro";
|
||||
import { featuredMessage, messages, messagesIntro } from "../data/messages";
|
||||
import { featuredMessage, messagesIntro, twikooConfig } from "../data/messages";
|
||||
import { site } from "../data/site";
|
||||
---
|
||||
|
||||
@@ -15,25 +15,157 @@ import { site } from "../data/site";
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="gallery-band">
|
||||
<section class="gallery-band sticky-message-band">
|
||||
<div class="section-inner">
|
||||
<div class="message-wall">
|
||||
<article class="message featured">
|
||||
<p>“{featuredMessage.text}”</p>
|
||||
<cite>{featuredMessage.author}</cite>
|
||||
</article>
|
||||
<div class="small-messages">
|
||||
{
|
||||
messages.map((message) => (
|
||||
<article class="message">
|
||||
<h3>{message.title}</h3>
|
||||
<p>{message.text}</p>
|
||||
</article>
|
||||
))
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<article class="message featured message-preamble">
|
||||
<p>“{featuredMessage.text}”</p>
|
||||
<cite>{featuredMessage.author}</cite>
|
||||
</article>
|
||||
|
||||
{
|
||||
twikooConfig.envId ? (
|
||||
<div
|
||||
id="tcomment"
|
||||
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={twikooConfig.styleSrc} />
|
||||
<style is:inline>
|
||||
#tcomment.twikoo-sticky-wall {
|
||||
--sticky-1: #fff1a8;
|
||||
--sticky-2: #dff1c7;
|
||||
--sticky-3: #d8ebf7;
|
||||
--sticky-4: #f8d7d0;
|
||||
--sticky-5: #eadcf4;
|
||||
--sticky-tape: rgba(255, 255, 255, 0.62);
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-submit {
|
||||
margin-bottom: 2rem !important;
|
||||
padding: 1.25rem !important;
|
||||
border: 1px solid var(--line) !important;
|
||||
border-radius: 8px !important;
|
||||
background: #fffdf7 !important;
|
||||
box-shadow: var(--shadow) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-send {
|
||||
border-color: var(--green) !important;
|
||||
background: var(--green) !important;
|
||||
color: #fffdf7 !important;
|
||||
font-weight: 800 !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-title {
|
||||
margin: 1.5rem 0 0.75rem !important;
|
||||
color: var(--green) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment {
|
||||
position: relative !important;
|
||||
margin-top: 1.35rem !important;
|
||||
padding: 1.25rem !important;
|
||||
border-radius: 3px !important;
|
||||
background: var(--sticky-1) !important;
|
||||
box-shadow:
|
||||
0 16px 30px rgba(39, 55, 52, 0.14),
|
||||
inset 0 -18px 28px rgba(255, 255, 255, 0.18) !important;
|
||||
transform: rotate(-0.7deg) !important;
|
||||
transform-origin: center !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n + 2) {
|
||||
background: var(--sticky-2) !important;
|
||||
transform: translateY(6px) rotate(0.6deg) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n + 3) {
|
||||
background: var(--sticky-3) !important;
|
||||
transform: rotate(-0.3deg) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n + 4) {
|
||||
background: var(--sticky-4) !important;
|
||||
transform: translateY(8px) rotate(0.8deg) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment:nth-of-type(5n) {
|
||||
background: var(--sticky-5) !important;
|
||||
transform: rotate(-0.5deg) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment::before {
|
||||
content: "" !important;
|
||||
position: absolute !important;
|
||||
top: 0.45rem !important;
|
||||
left: 50% !important;
|
||||
width: 3.5rem !important;
|
||||
height: 0.8rem !important;
|
||||
background: var(--sticky-tape) !important;
|
||||
box-shadow: 0 1px 4px rgba(39, 55, 52, 0.13) !important;
|
||||
transform: translateX(-50%) rotate(2deg) !important;
|
||||
pointer-events: none !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-content,
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-content p {
|
||||
color: var(--ink) !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-replies .tk-comment {
|
||||
background: rgba(255, 253, 247, 0.6) !important;
|
||||
border-radius: 6px !important;
|
||||
padding: 0.75rem !important;
|
||||
transform: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment .tk-replies .tk-comment::before {
|
||||
content: none !important;
|
||||
}
|
||||
|
||||
@media (max-width: 560px) {
|
||||
#tcomment.twikoo-sticky-wall .tk-comments-container > .tk-comment {
|
||||
transform: none !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<script is:inline src={twikooConfig.scriptSrc} defer></script>
|
||||
<script is:inline>
|
||||
window.addEventListener("DOMContentLoaded", function () {
|
||||
const container = document.querySelector("#tcomment");
|
||||
|
||||
if (!container || !window.twikoo) {
|
||||
return;
|
||||
}
|
||||
|
||||
window.twikoo.init({
|
||||
envId: container.dataset.envId,
|
||||
el: "#tcomment",
|
||||
path: container.dataset.path || location.pathname,
|
||||
lang: container.dataset.lang || "zh-CN"
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</>
|
||||
)
|
||||
}
|
||||
</BaseLayout>
|
||||
|
||||
@@ -695,6 +695,38 @@ h2 {
|
||||
gap: 18px;
|
||||
}
|
||||
|
||||
.sticky-message-band {
|
||||
background:
|
||||
linear-gradient(0deg, rgba(255, 253, 247, 0.45), rgba(255, 253, 247, 0.45)),
|
||||
var(--soft);
|
||||
}
|
||||
|
||||
.message-preamble {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
|
||||
.twikoo-empty-note {
|
||||
padding: 28px;
|
||||
border: 1px dashed rgba(55, 109, 90, 0.34);
|
||||
border-radius: 8px;
|
||||
background: #fffdf7;
|
||||
}
|
||||
|
||||
.twikoo-empty-note h2 {
|
||||
margin-bottom: 10px;
|
||||
font-size: clamp(24px, 3vw, 34px);
|
||||
}
|
||||
|
||||
.twikoo-empty-note p {
|
||||
margin: 0;
|
||||
color: var(--muted);
|
||||
}
|
||||
|
||||
.twikoo-empty-note code {
|
||||
color: var(--green);
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.ending {
|
||||
text-align: center;
|
||||
background: #1f2b2a;
|
||||
@@ -736,6 +768,9 @@ footer {
|
||||
.stats,
|
||||
.section-title,
|
||||
.message-wall,
|
||||
.twikoo-sticky-wall .tk-comments,
|
||||
.twikoo-sticky-wall .tk-comments-container,
|
||||
.twikoo-sticky-wall .tk-comments-list,
|
||||
.person-hero-inner,
|
||||
.detail-grid {
|
||||
grid-template-columns: 1fr;
|
||||
@@ -808,6 +843,11 @@ footer {
|
||||
grid-column: auto;
|
||||
}
|
||||
|
||||
.twikoo-sticky-wall .tk-submit,
|
||||
.twikoo-sticky-wall .tk-comment {
|
||||
transform: none !important;
|
||||
}
|
||||
|
||||
.scrap-image {
|
||||
min-height: 220px;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user