:feat: add permalink.

MicroAppJS · Jan 6, 2020 · 0cbfa89 · 0cbfa89
1 parent d410080
commit 0cbfa89
Show file tree

Hide file tree

Showing 6 changed files with 97 additions and 71 deletions.
diff --git a/docs/zh/config/blog/blog-config.md b/docs/zh/config/blog/blog-config.md
@@ -14,6 +14,8 @@ module.exports = {
         tagsPath: "/tags/",
         timelinePath: "/timeline/",
         pageSize: 10,
+        postsDir: 'posts',
+        permalink: '/posts/:year/:month/:day/:slug.html',
     }
 }
 ```
@@ -47,3 +49,29 @@ module.exports = {
 - 默认值: `10`
 
 分页大小，默认为每页 10 条。
+
+### postsDir
+
+- 类型: `string`
+- 默认值: `posts`
+
+博客文章的根目录。
+
+### permalink
+
+- 类型: `string`
+- 默认值: `/posts/:year/:month/:day/:slug.html`
+
+`postsDir` 目录下的文章使用的永久链接格式。
+
+#### 模板变量
+
+| 变量 | 介绍 |
+| --- | --- |
+| :year | 文章发布的年份 (4数字) |
+| :month | 文章发布的月份 (2数字) |
+| :i_month | 文章发布的月份 (前面不带0) |
+| :day | 文章发布的日份 (2数字) |
+| :i_day | 文章发布的日份 (前面不带0) |
+| :slug | 蛞蝓化文件路径 (不带扩展名) |
+| :regular | VuePress默认的生成永久链接的方式 |
diff --git a/docs/zh/guide/README.md b/docs/zh/guide/README.md
@@ -1,9 +1,3 @@
----
-title: 介绍
-tag:
-    - abc
----
-
 # 介绍
 
 `@micro-app/plugin-vuepress` 只是作为 `VuePress` 的增强，用于 `@micro-app` 系列的文档输出插件。

diff --git a/src/config/index.js b/src/config/index.js
@@ -6,33 +6,33 @@ module.exports = {
     serviceWorker: true,
     // TODO custom theme
     theme: path.resolve(__dirname, '../../theme/index.js'),
-    themeConfig: {
-        // logo: '/logo.png',
-        lastUpdated: '上次编辑时间',
-        repoLabel: '查看源码',
-        editLinkText: '在 GitHub 上编辑此页',
-        // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
-        repo: 'MicroAppJS/core',
-        // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
-        // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
-        // repoLabel: '查看源码',
-        // 假如你的文档仓库和项目本身不在一个仓库：
-        // docsRepo: 'MicroAppJS/MicroApp-Core',
-        // 假如文档不是放在仓库的根目录下：
-        docsDir: 'docs',
-        // 假如文档放在一个特定的分支下：
-        docsBranch: 'master',
-        // 默认是 false, 设置为 true 来启用
-        editLinks: true,
-        // 默认为 "Edit this page"
-        // editLinkText: '帮助我们改善此页面！',
-        sidebarDepth: 2,
-        // algolia: {
-        //     indexName: "cli_vuejs",
-        //     apiKey: "f6df220f7d246aff64a56300b7f19f21"
-        // },
-        // search: false,
-        // searchMaxSuggestions: 10,
-        // displayAllHeaders: true // 默认值：false
-    },
+    // themeConfig: {
+    //     // logo: '/logo.png',
+    //     lastUpdated: '上次编辑时间',
+    //     repoLabel: '查看源码',
+    //     editLinkText: '在 GitHub 上编辑此页',
+    //     // 假定是 GitHub. 同时也可以是一个完整的 GitLab URL
+    //     repo: 'MicroAppJS/core',
+    //     // 自定义仓库链接文字。默认从 `themeConfig.repo` 中自动推断为
+    //     // "GitHub"/"GitLab"/"Bitbucket" 其中之一，或是 "Source"。
+    //     // repoLabel: '查看源码',
+    //     // 假如你的文档仓库和项目本身不在一个仓库：
+    //     // docsRepo: 'MicroAppJS/MicroApp-Core',
+    //     // 假如文档不是放在仓库的根目录下：
+    //     docsDir: 'docs',
+    //     // 假如文档放在一个特定的分支下：
+    //     docsBranch: 'master',
+    //     // 默认是 false, 设置为 true 来启用
+    //     editLinks: true,
+    //     // 默认为 "Edit this page"
+    //     // editLinkText: '帮助我们改善此页面！',
+    //     sidebarDepth: 2,
+    //     // algolia: {
+    //     //     indexName: "cli_vuejs",
+    //     //     apiKey: "f6df220f7d246aff64a56300b7f19f21"
+    //     // },
+    //     // search: false,
+    //     // searchMaxSuggestions: 10,
+    //     // displayAllHeaders: true // 默认值：false
+    // },
 };
diff --git a/theme/components/PageEdit.vue b/theme/components/PageEdit.vue
@@ -3,8 +3,10 @@ import ParentLayout from '@default-theme/components/PageEdit.vue';
 export default {
     name: 'PageEdit',
     extends: ParentLayout,
-    lastUpdated() {
-        return this.$page.lastUpdatedFormat;
+    computed: {
+        lastUpdated() {
+            return this.$page.lastUpdatedFormat;
+        },
     },
 };
 </script>
diff --git a/theme/index.js b/theme/index.js
@@ -1,21 +1,27 @@
 const path = require('path');
+const moment = require('moment');
+
+const ensureBothSlash = str => str.replace(/^\/?(.*)\/?$/, '/$1/');
 
 module.exports = (options, ctx) => {
     const defaultTheme = require('@vuepress/theme-default');
     const defaultThemeConfig = defaultTheme(options, ctx);
 
+    const siteConfig = ctx.siteConfig || {};
     const themeConfig = ctx.themeConfig = ctx.themeConfig || {};
+    const type = siteConfig.type || themeConfig.type || 'doc';
 
     const vuepressDir = ctx.vuepressDir;
     const iconsDir = path.resolve(vuepressDir, 'public', 'icons');
     const iconsLibDir = path.resolve(__dirname, 'icons');
     const svgIconsDir = themeConfig.svgIconsDir && path.resolve(vuepressDir, themeConfig.svgIconsDir) || iconsLibDir;
 
+    // blog config
+    const blogConfig = themeConfig.blogConfig = initBlogConfig(themeConfig.blogConfig || {});
+
     const finalConfig = {
         define: {
-            THEME_BLOG_PAGINATION_COMPONENT: themeConfig.paginationComponent
-                ? themeConfig.paginationComponent
-                : 'Pagination',
+            THEME_BUILD_DATE: moment().format(),
         },
         alias() {
             const defaultThemeConfigAlias = defaultThemeConfig.alias();
@@ -86,26 +92,31 @@ module.exports = (options, ctx) => {
         },
         plugins: require('./plugins/register')(ctx),
 
-        // TODO Blog https://github.com/meteorlxy/vuepress-theme-meteorlxy/blob/master/lib/plugins/blog/index.js
-        // extendPageData(pageCtx) {
-        //     const strippedContent = pageCtx._strippedContent;
-        //     if (!strippedContent) {
-        //         return;
-        //     }
-        //     // Generate summary.
-        //     if (themeConfig.summary) {
-        //         const removeMd = require('remove-markdown');
-        //         pageCtx.summary =
-        //                 removeMd(
-        //                     strippedContent
-        //                         .trim()
-        //                         .replace(/^#+\s+(.*)/, '')
-        //                 )
-        //                     .slice(0, themeConfig.summaryLength)
-        //         + ' ...';
-        //     }
-        // },
+        // Blog https://github.com/meteorlxy/vuepress-theme-meteorlxy/blob/master/lib/plugins/blog/index.js
+        extendPageData($page) {
+            // const strippedContent = pageCtx._strippedContent;
+            // if (!strippedContent) {
+            //     return;
+            // }
+            if (type === 'blog') {
+                if ($page.path.startsWith(ensureBothSlash(blogConfig.postsDir))) {
+                    $page.frontmatter.permalink = $page.frontmatter.permalink || blogConfig.permalink;
+                }
+            }
+        },
     };
 
     return finalConfig;
 };
+
+
+function initBlogConfig(blogConfig) {
+    // 初始化默认值
+    blogConfig.categoriesPath = blogConfig.categoriesPath || '/categories/';
+    blogConfig.tagsPath = blogConfig.tagsPath || '/tags/';
+    blogConfig.timelinePath = blogConfig.timelinePath || '/timeline/';
+    blogConfig.pageSize = parseInt(blogConfig.pageSize) || 10;
+    blogConfig.postsDir = blogConfig.postsDir || 'posts';
+    blogConfig.permalink = blogConfig.permalink || '/posts/:year/:month/:day/:slug.html';
+    return blogConfig;
+}
diff --git a/theme/plugins/register.js b/theme/plugins/register.js
@@ -1,6 +1,6 @@
 module.exports = registerPlugins;
 
-const { _, logger } = require('@micro-app/shared-utils');
+const { _ } = require('@micro-app/shared-utils');
 
 function registerPlugins(ctx) {
     const themeConfig = ctx.themeConfig;
@@ -44,8 +44,7 @@ function registerPlugins(ctx) {
     const isLocales = !!siteConfig.locales || !!themeConfig.locales || false;
 
     if (type === 'blog') {
-        const blogConfig = themeConfig.blogConfig = initBlogConfig(themeConfig.blogConfig || {});
-        plugins.push([ '@vuepress/blog', getBlogPluginOptions(blogConfig) ]);
+        plugins.push([ '@vuepress/blog', getBlogPluginOptions(themeConfig.blogConfig) ]);
         // TODO more blog plugins
     }
 
@@ -115,17 +114,9 @@ function registerPlugins(ctx) {
     return plugins;
 }
 
-function initBlogConfig(blogConfig) {
-    // 初始化默认值
-    blogConfig.categoriesPath = blogConfig.categoriesPath || '/categories/';
-    blogConfig.tagsPath = blogConfig.tagsPath || '/tags/';
-    blogConfig.timelinePath = blogConfig.timelinePath || '/timeline/';
-    blogConfig.pageSize = parseInt(blogConfig.pageSize) || 10;
-    return blogConfig;
-}
-
 function getBlogPluginOptions(blogConfig) {
     return {
+        permalink: '/:regular',
         frontmatters: [
             {
                 id: 'categories',