Merge branch 'blog-content' of https://github.com/ClovertaTheTrilobita/SanYeCao-blog into blog-content

src/i18n/en.ts

@@ -15,6 +15,10 @@ export default {
         writtenBy: "Written by",
         comments: "Comments",
         publishedOn: "Published on",
+        commentsDesc: [
+            "Feel free to leave your thoughts here. 💭💡",
+            "After signing in, you can click the “Subscribe by Email” button at the bottom right of the text box to receive notifications of new interactions via email."
+        ]
     },
     theme: {
         toggle: "Toggle theme",

src/i18n/zh.ts

@@ -15,6 +15,10 @@ export default {
         writtenBy: "作者",
         comments: "评论",
         publishedOn: "发布于",
+        commentsDesc: [
+            "欢迎在这里留下你的想法。💭💡",
+            "你可以在登录评论区后，点击文本框右下角的「Subscribe by Email」以通过邮件接收最新的互动通知。"
+        ]
     },
     theme: {
         toggle: "切换主题",

src/layouts/MarkdownPostLayout.astro

@@ -87,6 +87,7 @@ const t = getTranslations(lang);
     <PostNav post={post} lang={lang} />
 
     <h2>{comments}</h2>
+    {t.post.commentsDesc.map((line: string) => <p set:html={line} />)}
     <Remark42Embed slug={slug} />
   </article>
 </BaseLayout>

src/styles/global.css

@@ -162,3 +162,71 @@ img {
   height: auto;
   display: block;
 }
+details {
+  margin: 1.5rem 0;
+  overflow: hidden;
+  border-top: 2px solid #1e3a5f;
+  border-radius: 0 0 0.5rem 0.5rem;
+  background: rgba(128, 128, 128, 0.14);
+}
+
+details summary {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.8rem 0.9rem;
+  cursor: pointer;
+  font-weight: 600;
+  user-select: none;
+  list-style: none;
+}
+
+details summary::-webkit-details-marker {
+  display: none;
+}
+
+details summary::before {
+  content: "›";
+  display: inline-block;
+  font-size: 1.25rem;
+  line-height: 1;
+  transition: transform 0.2s ease;
+}
+
+details[open] summary::before {
+  transform: rotate(90deg);
+}
+
+/* 展开内容 */
+details > :not(summary) {
+  box-sizing: border-box;
+  margin-top: 0;
+  margin-bottom: 0;
+  padding-right: 1rem;
+}
+
+/* 为列表序号预留空间 */
+details > ol,
+details > ul {
+  padding: 0.6rem 1rem 1rem 3rem;
+}
+
+details li {
+  margin: 0.8rem 0;
+}
+
+blockquote {
+  margin: 1.25rem 0;
+  padding: 0.75rem 1rem;
+  border-left: 4px solid var(--deep-red);
+  background: rgba(128, 128, 128, 0.1);
+  border-radius: 0 0.4rem 0.4rem 0;
+}
+
+blockquote p {
+  margin: 0;
+}
+
+blockquote p + p {
+  margin-top: 0.75rem;
+}