feat: 添加并改用 commento 评论。

components/comments/Commento.tsx

@@ -0,0 +1,30 @@
+import React, { useMemo, useState } from 'react'
+
+import siteMetadata from '@/data/siteMetadata'
+import { PostFrontMatter } from 'types/PostFrontMatter'
+import { useTheme } from 'next-themes'
+import ReactCommento from './commento/ReactCommento'
+
+interface Props {
+  frontMatter: PostFrontMatter
+}
+
+const Commento = ({ frontMatter }: Props) => {
+  const { resolvedTheme } = useTheme()
+  const commentsTheme = useMemo(() => {
+    switch (resolvedTheme) {
+      case 'light':
+      case 'dark':
+        return resolvedTheme
+      default:
+        return 'auto'
+    }
+  }, [resolvedTheme])
+  return (
+    <div className="my-2">
+      <ReactCommento url={siteMetadata.comment.commentoConfig.url} pageId={frontMatter.slug} />
+    </div>
+  )
+}
+
+export default Commento

components/comments/commento/ReactCommento.tsx

@@ -0,0 +1,83 @@
+import { createRef } from 'preact'
+import React, { useLayoutEffect, useMemo, useRef } from 'react'
+
+interface DataAttributes {
+  [key: string]: string | boolean | undefined
+}
+
+const insertScript = (
+  src: string,
+  id: string,
+  dataAttributes: DataAttributes,
+  onload = () => {}
+) => {
+  const script = window.document.createElement('script')
+  script.async = true
+  script.src = src
+  script.id = id
+  console.log(document.getElementById(id))
+  if (document.getElementById(id)) {
+    return
+  }
+  script.addEventListener('load', onload, { capture: true, once: true })
+
+  Object.entries(dataAttributes).forEach(([key, value]) => {
+    if (value === undefined) {
+      return
+    }
+    script.setAttribute(`data-${key}`, value.toString())
+  })
+
+  document.body.appendChild(script)
+
+  return () => {
+    script.remove()
+  }
+}
+
+const ReactCommento = ({
+  url,
+  cssOverride,
+  autoInit,
+  noFonts,
+  hideDeleted,
+  pageId,
+}: {
+  url: string
+  cssOverride?: string
+  autoInit?: boolean
+  noFonts?: boolean
+  hideDeleted?: boolean
+  pageId?: string
+}) => {
+  const containerId = useMemo(() => `commento-${Math.random().toString().slice(2, 8)}`, [])
+  const container = createRef<HTMLDivElement>()
+  const initializing = useRef(false)
+
+  useLayoutEffect(() => {
+    if (!window) {
+      return
+    }
+
+    window['commento'] = container.current
+
+    const removeScript = insertScript(
+      url,
+      `${containerId}-script`,
+      {
+        'css-override': cssOverride,
+        'auto-init': autoInit,
+        'no-fonts': noFonts,
+        'hide-deleted': hideDeleted,
+        'page-id': pageId,
+        'id-root': containerId,
+      },
+      () => {
+        removeScript()
+      }
+    )
+  }, [autoInit, cssOverride, hideDeleted, noFonts, pageId, url, containerId, container])
+
+  return <div ref={container} id={containerId} />
+}
+export default ReactCommento

components/comments/index.tsx

@@ -32,6 +32,12 @@ const CusdisComponent = dynamic(
   },
   { ssr: false }
 )
+const CommentoComponent = dynamic(
+  () => {
+    return import('@/components/comments/Commento')
+  },
+  { ssr: false }
+)
 
 const Comments = ({ frontMatter }: Props) => {
   let term
@@ -63,6 +69,9 @@ const Comments = ({ frontMatter }: Props) => {
       {siteMetadata.comment && siteMetadata.comment.provider === 'cusdis' && (
         <CusdisComponent frontMatter={frontMatter} />
       )}
+      {siteMetadata.comment && siteMetadata.comment.provider === 'commento' && (
+        <CommentoComponent frontMatter={frontMatter} />
+      )}
     </div>
   )
 }