feat: add comment system

.vscode/settings.json

@@ -65,9 +65,11 @@
     "attributify",
     "blurhash",
     "bmoji",
+    "Disqus",
     "Etiquetas",
     "Frontmatter",
     "Fuwriu",
+    "Giscus",
     "GSAP",
     "gtag",
     "hètí",
@@ -92,6 +94,7 @@
     "srcset",
     "STIX",
     "titlebar",
+    "Twikoo",
     "Umami",
     "unocss",
     "unpic",

src/components/Comments/Waline.astro

@@ -35,7 +35,7 @@ function initWaline() {
     el: '#waline',
     path: window.location.pathname.replace(/^\/([a-z]{2}(-[a-z]{2})?)\//, '/'),
     dark: 'auto',
-    requiredMeta: ['nick'],
+    requiredMeta: ['nick', 'mail'],
     highlighter: false,
     texRenderer: false,
     reaction: [],

src/components/Comments/index.astro

@@ -0,0 +1,27 @@
+---
+// import Disqus from '@/components/Comments/Disqus.astro'
+// import Giscus from '@/components/Comments/Giscus.astro'
+// import Twikoo from '@/components/Comments/Twikoo.astro'
+import Waline from '@/components/Comments/Waline.astro'
+import { themeConfig } from '@/config'
+
+// Disqus
+// const disqusShortname = themeConfig.comment?.disqus?.shortname || ''
+// const showDisqus = disqusShortname.trim() !== ''
+
+// Giscus
+// const giscusRepo = themeConfig.comment?.giscus?.repo || ''
+// const showGiscus = giscusRepo.trim() !== ''
+
+// Twikoo
+// const twikooEnvId = themeConfig.comment?.twikoo?.envId || ''
+// const showTwikoo = twikooEnvId.trim() !== ''
+
+// Waline
+const walineURL = themeConfig.comment?.waline?.serverURL || ''
+const showWaline = walineURL.trim() !== ''
+---
+<!-- {showDisqus && <Disqus />} -->
+<!-- {showGiscus && <Giscus />} -->
+<!-- {showTwikoo && <Twikoo />} -->
+{showWaline && <Waline />}

src/config.ts

@@ -32,24 +32,33 @@ export const themeConfig: ThemeConfig = {
 
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   global: {
-    locale: 'zh', // support 'zh', 'zh-tw', 'ja', 'en', 'es', 'ru'. Default language setting
+    // Default language
-    moreLocale: ['zh-tw', 'ja', 'en', 'es', 'ru'], // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']. Not fill in the default locale code again
+    locale: 'zh', // support 'zh', 'zh-tw', 'ja', 'en', 'es', 'ru'
-    fontStyle: 'sans', // sans, serif. Font styles for post content
+    // Not fill in the default locale code again
-    titleSpace: 3, // 1, 2, 3. Space between title and subtitle
+    moreLocale: ['zh-tw', 'ja', 'en', 'es', 'ru'], // ['zh', 'zh-tw', 'ja', 'en', 'es', 'ru']
+    // Font styles for post content
+    fontStyle: 'sans', // sans, serif
+    // Space between title and subtitle
+    titleSpace: 3, // 1, 2, 3
   },
   // GLOBAL SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END
 
   // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> START
   comment: {
     waline: {
-      serverURL: 'https://comment.radishzz.cc', // Waline server URL
+      // Waline server URL
+      serverURL: 'https://comment.radishzz.cc', // https://comment.example.com
+      // Emoji
       emoji: [
         'https://unpkg.com/@waline/emojis@1.2.0/tw-emoji',
         // 'https://unpkg.com/@waline/emojis@1.2.0/bmoji',
         // see more at https://waline.js.org/en/guide/features/emoji.html
       ],
-      search: false, // whether to enable GIF search
+      // Whether to enable GIF search
-      imageUploader: false, // whether to enable image uploader. BUG：
+      search: false, // true, false
+      // Whether to enable image uploader
+      // BUG：unable to disable image uploader
+      imageUploader: false, // true, false
     },
   },
   // COMMENT SETTINGS >>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>> END

src/pages/posts/[slug].astro

@@ -1,5 +1,5 @@
 ---
-import Waline from '@/components/Comments/Waline.astro'
+import Comments from '@/components/Comments/index.astro'
 import Layout from '@/layouts/Layout.astro'
 import { checkSlugDuplication } from '@/utils/content'
 import { generatePostPaths } from '@/utils/i18n'
@@ -66,5 +66,5 @@ const { Content, remarkPluginFrontmatter } = await post.render()
     )}
   </article>
 
-  <Waline />
+  <Comments />
 </Layout>

src/utils/ui.ts

@@ -9,7 +9,7 @@ export const langMap: Record<string, string[]> = {
 }
 
 // Waline Language Map
-// see more at https://waline.js.org/guide/i18n.html
+// See more at https://waline.js.org/guide/i18n.html
 export const walineLocaleMap: Record<string, string> = {
   'zh': 'zh-CN',
   'zh-tw': 'zh-TW',