支持 inject 与 injectWithPathname 注入自定义逻辑

README.md

@@ -25,7 +25,7 @@
 
 ## 特性
 
-* 建站理念: 文件即站点 (Files as a site)。
+* 建站理念: 文件即站点 (Files as a Site)。
 * 开箱即用: 一键生成可运行文档站点, 无需关心站点环境配置信息。
 * 性能: 文档支持懒加载提升站点加载速度。
 * 工作流: 集成 Github action, 自动化打包、发布站点。

config.yml

@@ -18,6 +18,8 @@ user: MuYunyun
 repo: create-react-doc
 github-ribbons: true
 
-
 # Available values: en | zh-cn
-language: en
+language: en
+
+# Inject Custom Logic
+inject: injectLogic/index.js

docs/高阶用法.md

@@ -1,3 +1,65 @@
 ## 高阶用法
 
-与 git 文件结构类似, 如果在展示的文件夹中有私有文件不方便展示在文档站点, 可以在 `.gitignore` 文件中设置过滤文件, 这样它们就不会展示在文档站点中了。eg: [.gitignore](https://github.com/MuYunyun/blog/blob/main/.gitignore)
+与 git 文件结构类似, 如果在展示的文件夹中有私有文件不方便展示在文档站点, 可以在 `.gitignore` 文件中设置过滤文件, 这样它们就不会展示在文档站点中了。eg: [.gitignore](https://github.com/MuYunyun/blog/blob/main/.gitignore)
+
+## 数学公式
+
+以 [MathJax](https://github.com/mathjax/MathJax) 为例, 当书写以下数学符号时
+
+```markdown
+<p>
+  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
+  $$x = {-b \pm \sqrt{\texttip{b^2-4ac}{descriminant}} \over 2a}.$$
+</p>
+```
+
+会被转换为:
+
+<p>
+  When $a \ne 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
+  $$x = {-b \pm \sqrt{\texttip{b^2-4ac}{descriminant}} \over 2a}.$$
+</p>
+
+<!-- ![](http://with.muyunyun.cn/7a3edd13acb492afb4a3b1936c35e26d.jpg) -->
+
+### 使用方式
+
+在 `config.yml` 文件中加入 `inject` 字段。
+
+```diff
++ inject: injectLogic/index.js
+```
+
+然后在根目录新建与 `inject` 字段相对应的文件, 声明 `injectWithPathname` 函数, 写入[自定义逻辑](https://github.com/MuYunyun/create-react-doc/injectLogic/index.js), 完成 MathJax 的使用。
+
+```js
+// perf injectWithPathname logic every pathname changes
+const injectWithPathname = (pathname) => {
+  // demo for using mathjax. see https://github.com/MuYunyun/create-react-doc/issues/63
+  if (pathname !== '高阶用法') return;
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+    },
+    svg: {
+      fontCache: 'global',
+    },
+  };
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
+  const tag = 'mathjax';
+  script.id = tag;
+  script.async = true;
+  const scriptNode = document.getElementById(tag);
+  try {
+    if (!scriptNode) {
+      document.head.appendChild(script);
+    } else {
+      scriptNode.remove();
+      document.head.appendChild(script);
+    }
+  } catch (error) {}
+};
+
+module.exports = { injectWithPathname };
+```

injectLogic/index.js

@@ -0,0 +1,33 @@
+/* eslint-disable no-empty */
+// perf inject logic only once
+const inject = () => {};
+
+// perf injectWithPathname logic every pathname changes
+const injectWithPathname = (pathname) => {
+  // demo for using mathjax. see https://github.com/MuYunyun/create-react-doc/issues/63
+  if (pathname !== '高阶用法') return;
+  window.MathJax = {
+    tex: {
+      inlineMath: [['$', '$'], ['\\(', '\\)']],
+    },
+    svg: {
+      fontCache: 'global',
+    },
+  };
+  const script = document.createElement('script');
+  script.src = 'https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js';
+  const tag = 'mathjax';
+  script.id = tag;
+  script.async = true;
+  const scriptNode = document.getElementById(tag);
+  try {
+    if (!scriptNode) {
+      document.head.appendChild(script);
+    } else {
+      scriptNode.remove();
+      document.head.appendChild(script);
+    }
+  } catch (error) {}
+};
+
+module.exports = { inject, injectWithPathname };

packages/scripts/src/conf/webpack.config.js

@@ -3,6 +3,8 @@
 const path = require('path');
 const webpack = require('webpack');
 const webpackbar = require('webpackbar');
+const fs = require('fs');
+const { resolveApp } = require('crd-utils');
 const { getDocsConfig } = require('../utils');
 // const { getDocsConfig, getSearchContent } = require('../utils');
 const paths = require('./path');
@@ -11,6 +13,7 @@ const pkg = require('../../package.json');
 const define = {
   FOOTER: null,
   DOCSCONFIG: null,
+  INJECT: null,
 };
 if (paths.crdConf && paths.crdConf.footer && typeof paths.crdConf.footer === 'string') {
   define.FOOTER = JSON.stringify(paths.crdConf.footer);
@@ -22,6 +25,11 @@ if (paths.docsConfig) {
   define.DOCSCONFIG = JSON.stringify(docsConfig);
   // todo: searchContent affects the performance, so take annotation here templately.
   // define.SEARCHCONTENT = searchContent && searchContent.toString();
+
+  // if there is inject logic in docsConfig
+  if (docsConfig.inject && fs.existsSync(resolveApp(docsConfig.inject))) {
+    define.INJECT = require(resolveApp(docsConfig.inject));
+  }
 }
 
 module.exports = {

packages/theme/internal-theme/crd-seed/layout/index.js

@@ -34,6 +34,16 @@ function BasicLayout({
     scrollToTop();
   }, []);
 
+  useEffect(() => {
+    // eslint-disable-next-line no-undef
+    INJECT?.inject?.();
+  }, []);
+
+  useEffect(() => {
+    // eslint-disable-next-line no-undef
+    INJECT?.injectWithPathname?.(pathname);
+  }, [pathname]);
+
   const scrollToTop = () => {
     document.body.scrollTop = 0;
     document.documentElement.scrollTop = 0;