feat: 添加评论功能

.dumi/theme/comment.ts

@@ -0,0 +1,42 @@
+import { IApi } from 'dumi';
+
+export default (api: IApi) => {
+  api.describe({
+    key: 'valine',
+    config: {
+      schema(joi) {
+        return joi.object();
+      },
+    },
+  });
+  const { valine = {} } = api.userConfig;
+  const { appId, appKey, el = '#vcomments' } = valine || {};
+  api.logger.log('insert Valine');
+
+  const valineScript = () => {
+    return `
+    (function(){
+        var script = document.createElement('script');
+        var m = document.getElementsByTagName('script')[0];
+        script.src = '//unpkg.com/valine/dist/Valine.min.js';
+        script.async = 'async';
+
+        script.addEventListener('load', function () {
+          new Valine({
+              el: '${el}',
+              appId: '${appId}',
+              appKey: '${appKey}'
+          })
+        }, false);
+    
+        m.parentNode.insertBefore(script, m)
+    })();
+  `;
+  };
+
+  api.addHTMLScripts(() => [
+    {
+      content: valineScript(),
+    },
+  ]);
+};

.dumi/theme/layout.tsx

@@ -102,18 +102,23 @@ const Layout: React.FC<IRouteComponentProps> = ({ children, location }) => {
       <div className="__dumi-default-layout-content">
         {children}
         {!showHero && !showFeatures && meta.filePath && !meta.gapless && (
-          <div className="__dumi-default-layout-footer-meta">
-            {repoPlatform && (
-              <Link to={`${repoUrl}/edit/${branch}/${meta.filePath}`}>
-                {isCN
-                  ? `在 ${repoPlatform} 上编辑此页`
-                  : `Edit this doc on ${repoPlatform}`}
-              </Link>
-            )}
-            <span data-updated-text={isCN ? '最后更新时间：' : 'Last update: '}>
-              {updatedTime}
-            </span>
-          </div>
+          <>
+            <div className="__dumi-default-layout-footer-meta">
+              {repoPlatform && (
+                <Link to={`${repoUrl}/edit/${branch}/${meta.filePath}`}>
+                  {isCN
+                    ? `在 ${repoPlatform} 上编辑此页`
+                    : `Edit this doc on ${repoPlatform}`}
+                </Link>
+              )}
+              <span
+                data-updated-text={isCN ? '最后更新时间：' : 'Last update: '}
+              >
+                {updatedTime}
+              </span>
+            </div>
+            <div id="vcomments"></div>
+          </>
         )}
         {(showHero || showFeatures) && meta.footer && (
           <div

.dumi/theme/style/layout.less

@@ -316,3 +316,7 @@ body {
     color: #b0b1ba;
   }
 }
+
+#vcomments {
+  margin-top: 20px;
+}

.umirc.ts

@@ -87,6 +87,11 @@ export default defineConfig({
     // mode: 'string',
     // staticMarkup: false,
   },
+  valine: {
+    appId: 'Ke6Uq74Gi6sdTxcDu4nJ6sdw-MdYXbMMI',
+    appKey: 'VtFD26towQ1JQxB9tLHd8odg',
+  },
+  plugins: ['./.dumi/theme/comment.ts'],
   exportStatic: {},
   // more config: https://d.umijs.org/config
 });