docs: add markdown advance

Author: zyao89

docs/markdown/advance/4-highlight.md

@@ -1,4 +1,4 @@
-# 高亮
+# 代码高亮
 
 ## 代码块中的语法高亮
 
@@ -29,11 +29,14 @@ export default {
 ````
 ``` html
 <ul>
-  <li
-    v-for="todo in todos"
-    :key="todo.id"
-  >
-    {{ todo.text }}
+  <li>
+    a
+  </li>
+  <li>
+    bb
+  </li>
+  <li>
+    ccc
   </li>
 </ul>
 ```
@@ -43,11 +46,14 @@ export default {
 
 ``` html
 <ul>
-  <li
-    v-for="todo in todos"
-    :key="todo.id"
-  >
-    {{ todo.text }}
+  <li>
+    a
+  </li>
+  <li>
+    bb
+  </li>
+  <li>
+    ccc
   </li>
 </ul>
 ```
@@ -139,30 +145,4 @@ module.exports = {
 
 - 示例:
 
-<picture>
-  <source srcset="/line-numbers-desktop.png" media="(min-width: 719px)">
-  <img class="line-numbers-desktop-snap" alt="Image">
-</picture>
-
-<picture>
-  <source srcset="/line-numbers-mobile.gif" media="(max-width: 719px)">
-  <img class="line-numbers-mobile-snap" alt="Image">
-</picture>
-
-<style>
-  @media screen and (min-width:  719px) {
-    .line-numbers-mobile-snap {
-       display: none;
-    }
-  }
-  @media screen and (max-width:  719px) {
-    .line-numbers-desktop-snap {
-       display: none;
-    }
-    .line-numbers-mobile-snap {
-      max-width: none!important;
-      margin: 0 -1.5rem;
-      width: 100vw;
-    }
-  }
-</style>
+![示例](./images/2021-10-26-21-54-27.png)

docs/markdown/advance/5-import.md

@@ -0,0 +1,45 @@
+# 导入代码段
+
+::: tip 注意
+由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，默认基于文档更目录开始。
+:::
+
+
+你可以通过下述的语法导入已经存在的文件中的代码段：
+
+``` md
+<<< ./filepath
+```
+
+它也支持 [行高亮](./4-highlight.md#代码块中的行高亮)：
+
+``` md
+<<< ./filepath{highlightLines}
+```
+
+**输入**
+
+```
+<<< ./markdown/advance/fragments/snippet.js{2}
+```
+
+**输出**
+
+<<< ./markdown/advance/fragments/snippet.js{2}
+
+
+为了只导入对应部分的代码，你也可运用 [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding)。你可以在文件路径后方的 `#` 紧接着提供一个自定义的区域名称（预设为 `snippet` ）
+
+**输入**
+
+``` md
+<<< ./markdown/advance/fragments/snippet-with-region.js#snippet{1}
+```
+
+**代码文件**
+
+<<< ./markdown/advance/fragments/snippet-with-region.js
+
+**输出**
+
+<<< ./markdown/advance/fragments/snippet-with-region.js#snippet{1}

docs/markdown/advance/6-include.md

@@ -0,0 +1,48 @@
+# 导入文本
+
+::: tip 注意
+由于代码段的导入将在 webpack 编译之前执行，因此你无法使用 webpack 中的路径别名，默认基于文档更目录开始。
+:::
+
+::: warning 注意
+由于导入是全局性质的，以下内容中`<<<` 和 `include` 之间的空格，使用时需要删除
+:::
+
+你可以通过下述的语法导入已经存在的文件文本：
+
+``` md
+<<< include(@/filepath)
+```
+
+或者
+
+``` md
+<<< include @/filepath
+```
+
+**输入**
+
+```
+<<< include(./markdown/advance/fragments/snippet.js)
+```
+
+**输出**
+
+<<<include(./markdown/advance/fragments/snippet.js)
+
+
+为了只导入对应部分的代码，你也可运用 [VS Code region](https://code.visualstudio.com/docs/editor/codebasics#_folding)。你可以在文件路径后方的 `#` 紧接着提供一个自定义的区域名称（预设为 `snippet` ）
+
+**输入**
+
+``` md
+<<< include(./markdown/advance/fragments/snippet-with-region.js#snippet)
+```
+
+**代码文件**
+
+<<< ./markdown/advance/fragments/snippet-with-region.js
+
+**输出**
+
+<<<include(./markdown/advance/fragments/snippet-with-region.js#snippet)

docs/markdown/advance/fragments/code-snippet-with-region.md

@@ -0,0 +1,3 @@
+## Fragments
+
+code-snippet-with-region.md

docs/markdown/advance/fragments/snippet-with-region.js

@@ -0,0 +1,32 @@
+// #region snippet
+function foo () {
+    return ({
+      dest: '../../vuepress',
+      locales: {
+        '/': {
+          lang: 'en-US',
+          title: 'VuePress',
+          description: 'Vue-powered Static Site Generator'
+        },
+        '/zh/': {
+          lang: 'zh-CN',
+          title: 'VuePress',
+          description: 'Vue 驱动的静态网站生成器'
+        }
+      },
+      head: [
+        ['link', { rel: 'icon', href: `/logo.png` }],
+        ['link', { rel: 'manifest', href: '/manifest.json' }],
+        ['meta', { name: 'theme-color', content: '#3eaf7c' }],
+        ['meta', { name: 'apple-mobile-web-app-capable', content: 'yes' }],
+        ['meta', { name: 'apple-mobile-web-app-status-bar-style', content: 'black' }],
+        ['link', { rel: 'apple-touch-icon', href: `/icons/apple-touch-icon-152x152.png` }],
+        ['link', { rel: 'mask-icon', href: '/icons/safari-pinned-tab.svg', color: '#3eaf7c' }],
+        ['meta', { name: 'msapplication-TileImage', content: '/icons/msapplication-icon-144x144.png' }],
+        ['meta', { name: 'msapplication-TileColor', content: '#000000' }]
+      ]
+    })
+  }
+  // #endregion snippet
+  
+  export default foo

docs/markdown/advance/fragments/snippet.js

@@ -0,0 +1,3 @@
+export default function () {
+    // ..
+}

docs/markdown/advance/images/2021-10-26-21-54-27.png

@@ -170,6 +170,7 @@ function getMarkdownSidebar() {
             children: [
                 '',
                 ...require('fs-extra').readdirSync(require('path').resolve(__dirname, '../docs/markdown/basic'))
+                    .filter(name => /\.md$/ig.test(name))
                     .sort((a, b) => parseInt(a) - parseInt(b))
                     .map(name => `basic/${name}`),
             ],
@@ -179,6 +180,8 @@ function getMarkdownSidebar() {
             collapsable: false,
             children: [
                 ...require('fs-extra').readdirSync(require('path').resolve(__dirname, '../docs/markdown/advance'))
+                    .filter(name => /\.md$/ig.test(name))
+                    .sort((a, b) => parseInt(a) - parseInt(b))
                     .map(name => `advance/${name}`),
             ],
         },