support show abbrlink

config.yml

@@ -11,10 +11,11 @@ menu: [
   docs/更新日志.md,
   docs/主题,
   docs/站点发布.md,
-  docs/其它工具.md,
-  docs/书写组件.md,
+  docs/Front-matter.md,
   docs/数学公式.md,
+  docs/书写组件.md,
   docs/高阶用法.md,
+  docs/其它工具.md,
 ]
 ## set init open menu keys
 # menuOpenKeys:

docs/Front-matter.md

@@ -0,0 +1,19 @@
+<!--
+abbrlink: 49g6b239
+-->
+
+## Front-matter
+
+Front-matter 是文件最上方包裹在 `<!--` 与 `-->` 之间的区域，用于指定个别文件的变量，举例来说：
+
+```md
+<!--
+abbrlink: 290a4219
+-->
+```
+
+以下是预先定义的参数，您可在模板中使用这些参数值并加以利用。
+
+| 参数     | 描述                                                            | 默认值 |
+| :------- | :-------------------------------------------------------------- | :----- |
+| abbrlink | 短链。用于指定页面路由展示为指定短链，使用短链有助于 SEO 搜索。 |        |

docs/主题/自定义主题.md

@@ -1,3 +1,9 @@
+<!--
+title: 自定义主题
+abbrlink: 9f41fc98
+date: 2019-05-12 13:23:44
+-->
+
 ## 使用自定义主题
 
 切换主题非常简单, 只需要将根目录文件 `config.yml` 中的 `theme` 更改为您想使用的主题即可。

docs/快速上手.md

@@ -1,3 +1,9 @@
+<!--
+title: 快速上手
+abbrlink: 290a4219
+date: 2019-05-12 13:23:44
+-->
+
 ## 快速上手
 
 **create-react-doc** 非常容易上手。开发者不需要额外安装或配置 webpack 或者 Babel 等工具，它们被内置隐藏在脚手架中，因此开发者可以专心于文档的书写。

docs/更新日志.md

@@ -2,6 +2,15 @@
 
 `create-react-doc` 严格遵循 [Semantic Versioning 2.0.0](http://semver.org/lang/zh-CN/) 语义化版本规范。
 
+### 1.4.0
+
+`2021-10-08`
+
+- **Feature**
+
+  - 🚀 支持展示短链以让文章链接持久化。[issue](https://github.com/MuYunyun/create-react-doc/issues/87)、[mr](https://github.com/MuYunyun/create-react-doc/pull/193)
+    - 🚀 支持在 Front-matter 区域中书写个别文件的变量。
+
 ### 1.3.5
 
 `2021-09-24`

packages/crd-seed/layout/index.js

@@ -43,7 +43,7 @@ function BasicLayout({
 
   useEffect(() => {
     const newPathName = location.pathname
-    setSelectedKey(`${newPathName}.md`)
+    setSelectedKey(newPathName)
   }, location)
 
   const scrollToTop = () => {
@@ -56,6 +56,9 @@ function BasicLayout({
     return (
       <>
         {menus.map((item, index) => {
+          const { mdconf, routePath } = item || {}
+          const { abbrlink } = mdconf || {}
+          const path = abbrlink ? `/${abbrlink}` : routePath
           // item.path carrys .md here.
           return item.children && item.children.length > 0 ? (
             <SubMenu key={index} keyValue={item.path} title={item.name} icon={<Icon type="folder" size={16} />}>
@@ -65,7 +68,7 @@ function BasicLayout({
             <Menu.Item
               key={index}
               icon={<Icon type="file" size={16} />}
-              keyValue={item.path}
+              keyValue={abbrlink ? `/${abbrlink}` : item.path}
               title={
                 item &&
                 item.type === "directory" &&
@@ -76,8 +79,8 @@ function BasicLayout({
                   </span>
                 ) : (
                   <Link
-                    to={ifProd ? `/${repo}${item.routePath}` : item.routePath}
-                    replace={pathname.indexOf(item.routePath) > -1}
+                    to={ifProd ? `/${repo}${path}` : path}
+                    replace={pathname.indexOf(path) > -1}
                   >
                     {item && item.mdconf && item.mdconf.title
                       ? item.mdconf.title
@@ -217,13 +220,16 @@ function BasicLayout({
           {/* see https://reacttraining.com/react-router/web/api/Redirect/exact-bool */}
           <Redirect exact from={ifAddPrefix ? `/${repo}` : `/`} to={ifAddPrefix ? `/${repo}/README` : `/README`} />
           {routeData.map((item) => {
+            const { path, mdconf, component } = item
+            const { abbrlink } = mdconf
+            const enhancePath = abbrlink ? `/${abbrlink}` : path
             return (
               <Route
-                key={item.path}
+                key={enhancePath}
                 exact
-                path={ifAddPrefix ? `/${repo}${item.path}` : item.path}
+                path={ifAddPrefix ? `/${repo}${enhancePath}` : enhancePath}
                 render={() => {
-                  const Comp = item.component
+                  const Comp = component
                   return <Comp {...item} />
                 }}
               />
@@ -255,7 +261,7 @@ function BasicLayout({
         <Footer inlineCollapsed={inlineCollapsed} />
       </div>
     </div>
-  );
+  )
 }
 
 export default BasicLayout

packages/scripts/src/conf/getPrerenderRoutes.js

@@ -16,7 +16,6 @@ const getPrerenderRoutes = (cmd) => {
   }))
   const result = getPrerenderRoute(dirTree)
   result.push('/404')
-  // console.log('✅ prerender', result)
   return result
 }
 
@@ -27,16 +26,22 @@ function getPrerenderRoute(data) {
 
 function recursive(data, routePath, arr) {
   data.forEach((item) => {
-    const routePropsCurrent = `${routePath}/${item.name}`.replace(/.md$/, '')
+    const { mdconf } = item || {}
+    const { abbrlink } = mdconf || {}
+    const composeRouteName = `${routePath}/${item.name}`.replace(/.md$/, '')
+
     if (item.type === 'directory') {
       if (item.children && item.children.length > 0) {
         // eslint-disable-next-line no-unused-vars
-        item.children = recursive(item.children, routePropsCurrent, arr)
+        item.children = recursive(item.children, composeRouteName, arr)
       } else {
         item.children = []
       }
     } else if (item.type === 'file') {
-      arr.push(routePropsCurrent)
+      const prerenderRouteName = abbrlink
+        ? `/${abbrlink}`
+        : composeRouteName
+      arr.push(prerenderRouteName)
     }
   })
   return arr

packages/scripts/src/conf/node-directory-tree.js

@@ -75,15 +75,9 @@ function directoryTree({
     if (options && options.mdconf) {
       item.type = constants.FILE
       const contentStr = fs.readFileSync(path).toString()
-      if (contentStr && !options.prerender) {
-        const contentMatch = contentStr.match(/^<!--(\s?[^>]*)-->/)
-        item.relative = item.path.replace(process.cwd(), '')
+      if (contentStr) {
+        const contentMatch = contentStr.match(/^<!--([^>]*)-->/)
         item.mdconf = contentMatch ? YAML.parse(contentMatch[1]) : {}
-        item.isEmpty = contentMatch
-          ? !String.prototype.trim.call(contentStr.replace(contentMatch[0], ''))
-          : true
-        const uglifyContent = contentStr.replace(/\s/g, '')
-        item.content = uglifyContent
         try {
           // see https://stackoverflow.com/questions/2390199/finding-the-date-time-a-file-was-first-added-to-a-git-repository/2390382#2390382
           const result = execSync(`git log --format=%aD ${path} | tail -1`)
@@ -103,6 +97,14 @@ function directoryTree({
         }
         item.size = stats.size // File size in bytes
         item.extension = ext
+        if (!options.prerender) {
+          item.relative = item.path.replace(process.cwd(), '')
+          item.isEmpty = contentMatch
+            ? !String.prototype.trim.call(contentStr.replace(contentMatch[0], ''))
+            : true
+          const uglifyContent = contentStr.replace(/\s/g, '')
+          item.content = uglifyContent
+        }
       }
     }
   } else if (stats.isDirectory()) {

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

@@ -156,8 +156,12 @@ module.exports = function (cmd) {
     new PrerenderSPAPlugin({
       // Required - The path to the webpack-outputted app to prerender.
       staticDir: docsBuildDist,
-      outputDir: docsConfig.repo ? `${docsBuildDist}/${docsConfig.repo}` : docsBuildDist,
-      indexPath: docsConfig.repo ? `${docsBuildDist}/${docsConfig.repo}/index.html` : `${docsBuildDist}/index.html`,
+      outputDir: docsConfig.repo
+        ? `${docsBuildDist}/${docsConfig.repo}`
+        : docsBuildDist,
+      indexPath: docsConfig.repo
+        ? `${docsBuildDist}/${docsConfig.repo}/index.html`
+        : `${docsBuildDist}/index.html`,
       // Required - Routes to render.
       routes,
       successCb: async () => {

packages/scripts/src/web/Router.js

@@ -23,7 +23,6 @@ function routeData(data, arrayRoute = [], routePath = '/', article) {
   return arrayRoute
 }
 
-
 function menuSourceFormat(data, routePath, article) {
   const arr = []
   data.forEach((item) => {