feat: add static comments to post page

6 files changed, 61 insertions, 0 deletions

diff --git a/assets/css/components/_comment.scss b/assets/css/components/_comment.scss
new file mode 100644
index 00000000..996f7e26
--- /dev/null
+++ b/assets/css/components/_comment.scss
@@ -0,0 +1,28 @@
+.post-comments {
+    .static-comments {
+        margin: 2rem 0;
+        .static-comments-heading {
+            color: var(--secondary-text-color)
+        }
+        .static-comments-item {
+            font-size: 1.2rem;
+            border-bottom: 1px solid #ccc;
+            padding: 1rem 0.25rem;
+            .static-comments-item-header {
+                margin-bottom: 1rem;
+                display: flex;
+                justify-content: space-between;
+                .comment-author {
+                    font-weight: bold;
+                }
+                .comment-date {
+                    color: var(--secondary-text-color);
+                }
+            }
+            .static-comments-item-footer {
+                font-size: 1rem;
+                text-align: right
+            }
+        }
+    }
+}
diff --git a/assets/css/index.scss b/assets/css/index.scss
index de0fb97e..6578c70a 100644
--- a/assets/css/index.scss
+++ b/assets/css/index.scss
@@ -5,6 +5,7 @@
 @import 'components/pages';
 @import 'components/post';
 @import 'components/content';
+@import 'components/comment';
 @import 'components/shortcodes';
 @import 'components/footer';
 @import 'components/animation';
diff --git a/content/posts/写在 2024 的开头.md b/content/posts/写在 2024 的开头.md
index 55c2bd0b..3e8101c6 100644
--- a/content/posts/写在 2024 的开头.md
+++ b/content/posts/写在 2024 的开头.md
@@ -8,6 +8,15 @@ tags:
   - 创作
   - 自我
   - 人际交往
+comments:
+  - name: YoungLee-coder
+    date: 2024-01-04
+    content: "和你一样，高三的时候关注你，用过了你的typecho主题，今年我也和你一样走进了高考的考场，不过考得不是很好，希望未来都越来越好"
+    source: isla-giscus
+  - name: Reedo0910
+    date: 2024-01-04
+    content: "其实在RSS收到推送那时我已经读过文章了，但又不好意思第一个评论，于是私底下跟mikusa说，啊自己被@了好开心。没想到引发了个小小的蝴蝶效应www<br/><br/>电波站很少写自己的私事，我觉得主要是因为自己有时的负面情绪还是蛮重的，但于我而言，通过写日记的形式不但无法将这些情绪从身体里释放出去，还会影响到以后回来看这些文字的自己。所以一定程度上我会选择自己消化，而不是将其付诸文字。电波站上发表的文字更多是某段思绪的“结晶”，又或是某个想要记录下来的内心想法，抱着“制作魂器”的愿望而写下的，为的是以后来访的人（或是自己）能够透过这些文字片段复现过去某个时期的“我”wwww  有时我也很羡慕别人能在博客里写下那么多关于自己日常的事情，透过文字能窥见一个真实的人生活的一角，那种感觉很奇妙。当然，博客写作不论是选择什么样的方向，最重要的我觉得还是要自己开心。<br/><br/>关于年龄，我已经在很久之前试着学会不去惊讶自己的友链比自己年轻这件事了。但还是有点惊叹，毕竟自己大一的时候才刚接触编程，而你已经在探索自己的路上走了好远了。但比起羡慕，我更想做的是祝福。“希望在可能性带来的谗言和诱惑之中，你依然能足够相信自己做过的决定。”<br/><br/>祝 创作愉快！<br/><br/>Zeee"
+    source: isla-giscus
 ---
 
 *去年过的实在不算精彩，整个 2023 似乎有一半的时间都完全不在我的掌控内，以至于我在重新阅读我在 2022 年写下的总结时，我几乎找不出太多不同。一个令我有些担忧的想法涌上心头——2023，我留给自己的时间实在太少。*
diff --git a/i18n/en.yml b/i18n/en.yml
index 03b0384f..4cc22fc5 100644
--- a/i18n/en.yml
+++ b/i18n/en.yml
@@ -4,6 +4,7 @@ archivePage:
   postCountAnnual: '{{ . }} TOTAL POSTS'
 postPage:
   commentNotLoaded: if comment is not loaded, please try refreshing
+  staticCommentsSectionHeader: These are static comments that are stored in frontmatter of this page. They used to be in different comment platforms, but now they are integrated into the page's content.
 footer:
   wordCount: '🪦 {{ . }} words are buried here'
   licenseStatement: 'Licensed under {{ . }}'
diff --git a/i18n/zh.yml b/i18n/zh.yml
index 2fd051f5..107b9ed1 100644
--- a/i18n/zh.yml
+++ b/i18n/zh.yml
@@ -4,6 +4,7 @@ archivePage:
   postCountAnnual: '共计 {{ . }} 篇文章'
 postPage:
   commentNotLoaded: 如果评论未加载，请尝试刷新页面
+  staticCommentsSectionHeader: 这些是曾经发布在不同评论平台上的评论，现在它们已经作为静态内容集成到页面中。
 footer:
   wordCount: '🪦 {{ . }} 字在这里死去'
   licenseStatement: '以 {{ . }} 协议授权'
diff --git a/layouts/partials/components/comment.html b/layouts/partials/components/comment.html
index 8f66fbbc..ac39723a 100644
--- a/layouts/partials/components/comment.html
+++ b/layouts/partials/components/comment.html
@@ -1,5 +1,26 @@
 {{ if in .Site.Params.mainSections .Type }}
   <div class="post-comments">
+      {{ with .Params.comments }}
+      <div class="static-comments">
+          <p class="static-comments-heading">{{ T "postPage.staticCommentsSectionHeader" }}</p>
+          {{ range . }}
+              <div class="static-comments-item">
+                  <div class="static-comments-item-header">
+                    <span class="comment-author">{{ .name }}</span>
+                    <span class="comment-date font-mono">{{ .date }}</span>
+                  </div>
+                  <div class="static-comments-item-content">
+                      {{ .content | safeHTML }}
+                  </div>
+                  <div class="static-comments-item-footer">
+                      {{ with .source }}
+                      <p class="font-mono">originally posted on {{ . }}</p>
+                      {{ end }}
+                  </div>
+              </div>
+          {{ end }}
+      </div>
+      {{ end }}
       <div class="giscus">
           <p style="text-align:center">
               {{ T "postPage.commentNotLoaded" }}