Add comment function

README.es.md

@@ -16,7 +16,7 @@ Un tema estático para blogs construido con [Astro](https://astro.build).
 - [x] Modo claro / oscuro
 - [x] Colores del tema y banner personalizables
 - [x] Diseño responsivo
-- [ ] Comentarios
+- [x] Comentarios
 - [x] Buscador
 - [ ] TOC (Tabla de Contenidos)
 

README.ja-JP.md

@@ -16,7 +16,7 @@
 - [x] ライト/ダークテーマ対応
 - [x] カスタマイズ可能なテーマカラーとバナー
 - [x] レスポンシブデザイン
-- [ ] コメント機能
+- [x] コメント機能
 - [x] 検索機能
 - [ ] 目次
 

README.ko.md

@@ -16,7 +16,7 @@
 - [x] 라이트 모드 / 다크 모드
 - [x] 사용자 정의 가능한 테마 색상 및 배너
 - [x] 반응형 디자인
-- [ ] 댓글
+- [x] 댓글
 - [x] 검색
 - [ ] 목차
 ## 🚀 사용하는 방법

README.md

@@ -21,7 +21,7 @@ A static blog template built with [Astro](https://astro.build).
 - [x] Light / dark mode
 - [x] Customizable theme colors & banner
 - [x] Responsive design
-- [ ] Comments
+- [x] Comments
 - [x] Search
 - [ ] TOC
 

README.th.md

@@ -16,7 +16,7 @@
 - [x] รองรับโหมดสว่าง / โหมดมืด
 - [x] ปรับแต่งสีธีมและแบนเนอร์ได้
 - [x] Responsive design (หน้าตาเว็บปรับเปลี่ยนตามขนาดจอ)
-- [ ] การแสดงความคิดเห็น
+- [x] การแสดงความคิดเห็น
 - [x] การค้นหา
 - [ ] TOC (สารบัญ)
 

README.zh-CN.md

@@ -16,7 +16,7 @@
 - [x] 亮色 / 暗色模式
 - [x] 自定义主题色和横幅图片
 - [x] 响应式设计
-- [ ] 评论
+- [x] 评论
 - [x] 搜索
 - [ ] 文内目录
 

src/components/misc/Comment.astro

@@ -0,0 +1,26 @@
+---
+import { commentConfig } from '../../config'
+const twikooConfig = commentConfig.twikoo
+---
+{twikooConfig.enable && (
+  <div id="tcomment"></div>
+  <style>
+    .twikoo svg{
+      display: inline-block!important;
+    }
+  </style>
+   <script is:inline define:vars={{ twikooConfig }}>
+    window.twikooConfig=twikooConfig
+    window.initTwikoo=function initTwikoo() {
+    twikoo.init({
+      envId: window.twikooConfig.envId,
+      el: '#tcomment',
+      lang: window.twikooConfig.lang,
+    });
+  }
+ </script>     
+)}
+{twikooConfig.enable&&(twikooConfig.envId.startsWith('https://') || twikooConfig.envId.startsWith('http://'))&&(<script is:inline src='/js/[email protected]/twikoo.min.js' async onload="initTwikoo()"></script>
+)}
+{twikooConfig.enable&&(!twikooConfig.envId.startsWith('https://') && !twikooConfig.envId.startsWith('http://'))&&(<script is:inline src='/js/[email protected]/twikoo.all.min.js' async onload="initTwikoo()"></script>
+)}

src/pages/posts/[...slug].astro

@@ -2,6 +2,7 @@
 import path from 'node:path'
 import { getCollection } from 'astro:content'
 import License from '@components/misc/License.astro'
+import Comment from '@components/misc/Comment.astro'
 import Markdown from '@components/misc/Markdown.astro'
 import I18nKey from '@i18n/i18nKey'
 import { i18n } from '@i18n/translation'
@@ -11,7 +12,7 @@ import { Icon } from 'astro-icon/components'
 import { licenseConfig } from 'src/config'
 import PostMetadata from '../../components/PostMeta.astro'
 import ImageWrapper from '../../components/misc/ImageWrapper.astro'
-import { profileConfig, siteConfig } from '../../config'
+import { profileConfig, siteConfig,commentConfig } from '../../config'
 import { formatDateToYYYYMMDD } from '../../utils/date-utils'
 
 export async function getStaticPaths() {
@@ -130,5 +131,7 @@ const jsonLd = {
             </div>}
         </a>
     </div>
-
+    {commentConfig.enable && (
+            <div class="card-base z-10 px-6 md:px-9 pt-6 pb-4"><Comment  /></div>
+  )}
 </MainGridLayout>