fix bug: Uncaught ReferenceError: process is not defined & add dark mode feature && support mermaid

_config.yml

@@ -131,3 +131,10 @@ copyright:
   license: '本文采用<a rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/">知识共享署名-非商业性使用 4.0 国际许可协议</a>进行许可'
 # Blog page article timeliness days reminder, 0 for no threshold
 outdated_threshold: 0
+
+# mermaid chart
+mermaid: ## mermaid url https://github.com/knsv/mermaid
+  enable: true  # default true
+  version: "7.1.2" # default v7.1.2
+  options:  # find more api options from https://github.com/knsv/mermaid/blob/master/src/mermaidAPI.js
+    #startOnload: true  // default true

layout/_partial/base-footer.ejs

@@ -20,4 +20,13 @@
     <% } %>
     </div>
     <% } %>
+		<!-- mermaid -->
+		<% if (theme.mermaid.enable) { %>
+			<script src='https://unpkg.com/mermaid@<%= theme.mermaid.version %>/dist/mermaid.min.js'></script>
+			<script>
+				if (window.mermaid) {
+					mermaid.initialize({theme: 'forest'});
+				}
+			</script>
+		<% } %>		
 </footer>

src/scss/_variables.scss

@@ -4,6 +4,7 @@ $feature-color: #f75357;
 $code-theme: 'atom-one-dark'; // atom-one-dark or atom-one-light
 // ========== global variables ========== //
 $body-background-color: #fff;
+$body-background-dark-color: #121212; // dark mode color
 $base-font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Arial,
   'PingFang SC', 'Hiragino Sans GB', STHeiti, 'Microsoft YaHei',
   'Microsoft JhengHei', 'Source Han Sans SC', 'Noto Sans CJK SC',
@@ -42,9 +43,11 @@ $header-border-top-color: rgba(0, 0, 0, 0.75);
 $profile-width: 200px;
 // ========== index ========== //
 $index-post-link-color: #1f1f1f;
+$index-post-link-dark-color: #ccc;
 $index-post-tag-color: #aaa;
 // ========== post ========== //
 $post-content-color: #23394d;
+$post-content-dark-color: #dfcbb9;
 // ========== social ========== //
 $social-iconfont-color: #777;
 // ========== code ========== //

src/scss/dark.scss

@@ -0,0 +1,113 @@
+// ========== general style ========== //
+
+@media (prefers-color-scheme: dark) {
+  body {
+    background-color: $body-background-dark-color;
+  }
+
+  .container {
+    background-color: $body-background-dark-color;
+  }
+
+	.profile-name {
+		color: #ddd !important;
+	}
+
+  .wrapper {
+    box-shadow: -3px 0 2px 0 rgba(255, 255, 255, 0.6) !important;
+  }
+
+  .back-top {
+    border: 2px solid #fff !important;
+    background-color: rgba(18, 18, 18, 0.8) !important;
+    color: #fff !important;
+    &:hover {
+      background-color: #fff !important;
+      color: #121212 !important;
+    }
+  }
+
+  .note-warning {
+    background-color: #222 !important;
+  }
+
+  .abstract-title {
+    color: $index-post-link-dark-color !important;
+  }
+
+  .abstract-content,
+  .article-entry {
+    color: $post-content-dark-color !important;
+    code {
+      background: #444 !important;
+    }
+    blockquote {
+      background-color: #464646 !important;
+    }
+  }
+
+  .license-wrapper {
+    color: $post-content-dark-color !important;
+  }
+
+  .header-sidebar-menu-black {
+    color: #fff !important;
+    background-color: #121212 !important;
+    border-color: #fff !important;
+    &:hover {
+      background-color: #fff !important;
+      color: #121212 !important;
+    }
+  }
+
+  .toc-wrapper {
+		.toc-active {
+			color: $feature-color !important;
+		}
+    a {
+      color: #777 !important;
+    }
+		a:hover {
+			color: $feature-color !important;
+		}
+  }
+
+	.footer {
+		background-color: $body-background-dark-color !important;
+	}
+
+	.banner {
+		border-bottom: 1px solid rgba(255, 255, 255, 0.8) !important;
+		background-color: rgba(0, 0, 0, 0.8) !important;
+	}
+
+	.blog-title {
+		a {
+			color: #fff !important;
+			&:hover {
+				color: $feature-color !important;
+			}
+		}
+	}
+
+	.post-title {
+		a {
+			color: rgba(255, 255, 255, 0.8) !important;
+		}
+	}
+
+	.nextSlogan,
+  .prevSlogan {
+    color: #ddd !important;
+  }
+
+	.popup {
+		background: #121212 !important;
+		color: #e1e1e1 !important;
+		box-shadow: 0px 0px 10px rgba(255, 255, 255, 0.5) !important;
+	}
+	.algolia-search {
+		border-bottom: 1px solid #222 !important;
+		background: #121212 !important;
+	}	
+}

src/scss/style.scss

@@ -2,6 +2,7 @@
 @import '_variables';
 @import '_normalize';
 @import '_common';
+@import 'dark';
 @import '_mixin';
 
 // partial

webpack.config.js

@@ -1,30 +1,41 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
-  mode: "development",
+  mode: 'development',
   entry: {
     main: './src/js/main.js',
     share: './src/js/share.js',
-    search: './src/js/search.js'
+    search: './src/js/search.js',
   },
   output: {
     path: path.resolve(__dirname, 'source/scripts'),
-    filename: '[name].js'
+    filename: '[name].js',
   },
   devtool: false,
   module: {
-    rules: [{
-      test: /\.(js)$/,
-      exclude: /node_modules/,
-      use: {
-        loader: 'babel-loader',
-        options: {
-          presets: ['@babel/preset-env'],
-          plugins: ['@babel/plugin-proposal-class-properties',
-            '@babel/plugin-proposal-object-rest-spread']
-        }
+    rules: [
+      {
+        test: /\.(js)$/,
+        exclude: /node_modules/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: ['@babel/preset-env'],
+            plugins: [
+              '@babel/plugin-proposal-class-properties',
+              '@babel/plugin-proposal-object-rest-spread',
+            ],
+          },
+        },
       },
-    }]
-  }
+    ],
+  },
+  plugins: [
+    new webpack.DefinePlugin({
+      'process.env': JSON.stringify({
+        DEBUG: undefined,
+      }),
+    }),
+  ],
 }
-

webpack.prod.js

@@ -1,13 +1,12 @@
-const webpack = require('webpack')
 const { merge } = require('webpack-merge')
-const TerserPlugin = require("terser-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin')
 const config = require('./webpack.config.js')
 
 module.exports = merge(config, {
-  mode: "production",
-  devtool: "source-map",
+  mode: 'production',
+  devtool: 'source-map',
   optimization: {
     minimize: true,
     minimizer: [new TerserPlugin()],
-  }
+  },
 })