├── babel.config.js
├── docs
├── favicon.ico
├── static
│ ├── edit.md
│ ├── what.md
│ ├── deploy.md
│ ├── config.json
│ ├── link.md
│ └── how.md
├── index.html
├── css
│ └── app.62adf2c5.css
└── js
│ └── app.98bd0da6.js
├── public
├── favicon.ico
├── static
│ ├── edit.md
│ ├── what.md
│ ├── deploy.md
│ ├── config.json
│ ├── link.md
│ └── how.md
└── index.html
├── src
├── assets
│ └── logo.png
├── main.js
└── App.vue
├── vue.config.js
├── .gitignore
├── README.md
├── LICENSE
└── package.json
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: [
3 | '@vue/app'
4 | ]
5 | }
6 |
--------------------------------------------------------------------------------
/docs/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softwaiter/markdown-website/master/docs/favicon.ico
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softwaiter/markdown-website/master/public/favicon.ico
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/softwaiter/markdown-website/master/src/assets/logo.png
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | runtimeCompiler: true,
3 | publicPath: './',
4 | productionSourceMap: false
5 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules/
3 | dist/
4 | npm-debug.log*
5 | yarn-debug.log*
6 | yarn-error.log*
7 | tests/**/coverage/
8 |
9 | # Editor directories and files
10 | .idea
11 | .vscode
12 | *.suo
13 | *.ntvs*
14 | *.njsproj
15 | *.sln
16 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Antd from 'ant-design-vue';
3 | import 'ant-design-vue/dist/antd.css';
4 | import App from './App.vue'
5 |
6 | Vue.use(Antd);
7 |
8 | Vue.config.productionTip = false
9 |
10 | new Vue({
11 | render: h => h(App),
12 | }).$mount('#app')
13 |
--------------------------------------------------------------------------------
/docs/static/edit.md:
--------------------------------------------------------------------------------
1 | # 更多网站属性配置
2 |
3 | 为了保证网站最终的显示效果以及初次打开时的状态，项目提供了一些配置属性供用户使用，这些属性都可以在static目录下的config.json文件里进行修改，目前提供了3个属性：
4 | title：网站的显示标题，默认是markdown-website。
5 | topicWidth：左侧目录树侧边栏的宽度，默认是250像素。
6 | openLevel：网站初次打开时，目录树展开的层级，默认1级。
7 |
8 | ```json
9 | {
10 | "title": "markdown-website",
11 | "topicWidth": 250,
12 | "openLevel": 1,
13 | "topics": []
14 | }
15 | ```
16 |
--------------------------------------------------------------------------------
/public/static/edit.md:
--------------------------------------------------------------------------------
1 | # 更多网站属性配置
2 |
3 | 为了保证网站最终的显示效果以及初次打开时的状态，项目提供了一些配置属性供用户使用，这些属性都可以在static目录下的config.json文件里进行修改，目前提供了3个属性：
4 | title：网站的显示标题，默认是markdown-website。
5 | topicWidth：左侧目录树侧边栏的宽度，默认是250像素。
6 | openLevel：网站初次打开时，目录树展开的层级，默认1级。
7 |
8 | ```json
9 | {
10 | "title": "markdown-website",
11 | "topicWidth": 250,
12 | "openLevel": 1,
13 | "topics": []
14 | }
15 | ```
16 |
--------------------------------------------------------------------------------
/docs/static/what.md:
--------------------------------------------------------------------------------
1 | # Markdown-Website是什么？
2 |
3 | 作为程序猿来讲，markdown是大家天天用、时时用的工具。可能用来记录日常的学习心得、工作的任务列表，更有可能是针对某个项目编写的使用手册、一套微服务的接口调用说明；但是在使用过程中，发现两个不太方便的地方，一是每个文档都作为一个单独的文件存在，不方便按照分类进行归档打包，二是分发阅读需要工具的支持，不方便普通用户的阅读。
4 |
5 | 基于以上原因，Markdown-Website通过目录树的形式对markdown文件进行显示；同时，以静态网页的方式进行发布访问，既解决了分类归档的问题，又提供了随时随地方便访问的能力。
6 |
7 | ### 主要能力
8 |
9 | ###### - 文档目录树自由配置，不限层级。
10 |
11 | ###### - 通过链接跳转目录中任意文档，方便外部链接跳入。
12 |
13 | ###### - 静态网页形式发布，易部署，无依赖。
14 |
15 |
--------------------------------------------------------------------------------
/public/static/what.md:
--------------------------------------------------------------------------------
1 | # Markdown-Website是什么？
2 |
3 | 作为程序猿来讲，markdown是大家天天用、时时用的工具。可能用来记录日常的学习心得、工作的任务列表，更有可能是针对某个项目编写的使用手册、一套微服务的接口调用说明；但是在使用过程中，发现两个不太方便的地方，一是每个文档都作为一个单独的文件存在，不方便按照分类进行归档打包，二是分发阅读需要工具的支持，不方便普通用户的阅读。
4 |
5 | 基于以上原因，Markdown-Website通过目录树的形式对markdown文件进行显示；同时，以静态网页的方式进行发布访问，既解决了分类归档的问题，又提供了随时随地方便访问的能力。
6 |
7 | ### 主要能力
8 |
9 | ###### - 文档目录树自由配置，不限层级。
10 |
11 | ###### - 通过链接跳转目录中任意文档，方便外部链接跳入。
12 |
13 | ###### - 静态网页形式发布，易部署，无依赖。
14 |
15 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
14 |
15 |
16 |
17 |
18 |
--------------------------------------------------------------------------------
/docs/static/deploy.md:
--------------------------------------------------------------------------------
1 | # 部署发布
2 |
3 | ##### 一、首先在服务器上安装nginx环境，网上有很多指南，可直接在百度搜索。
4 |
5 | ##### 二、将处理好的markdown静态页面整个目录复制到服务器上，具体复制方法请直接在百度搜索。
6 |
7 | ##### 三、打开nginx的配置文件，增加新的配置
8 | ```json
9 | server {
10 | listen 80;
11 | server_name localhost;
12 |
13 | location / {
14 | root 静态网页所在目录;
15 | index index.html index.htm;
16 | try_files $uri $uri/ @router;
17 | index index.html;
18 | }
19 |
20 | location @router {
21 | rewrite ^.*$ /index.html last;
22 | }
23 | }
24 | ```
25 |
26 | ##### 四、重启启动nginx
27 | ```shell
28 | nginx -s reload
29 | ```
30 |
31 |
--------------------------------------------------------------------------------
/public/static/deploy.md:
--------------------------------------------------------------------------------
1 | # 部署发布
2 |
3 | ##### 一、首先在服务器上安装nginx环境，网上有很多指南，可直接在百度搜索。
4 |
5 | ##### 二、将处理好的markdown静态页面整个目录复制到服务器上，具体复制方法请直接在百度搜索。
6 |
7 | ##### 三、打开nginx的配置文件，增加新的配置
8 | ```json
9 | server {
10 | listen 80;
11 | server_name localhost;
12 |
13 | location / {
14 | root 静态网页所在目录;
15 | index index.html index.htm;
16 | try_files $uri $uri/ @router;
17 | index index.html;
18 | }
19 |
20 | location @router {
21 | rewrite ^.*$ /index.html last;
22 | }
23 | }
24 | ```
25 |
26 | ##### 四、重启启动nginx
27 | ```shell
28 | nginx -s reload
29 | ```
30 |
31 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # 一个将markdown文件归类展示的网站生成工具
2 | 作为程序猿来讲，markdown是大家天天用、时时用的工具。可能用来记录日常的心得、工作的TODO，更有可能是针对某个项目书写的使用手册；但是在使用过程中，发现两个不太方便的地方，一是每个文档都作为一个单独的文件存在，不方便按照分类进行归档打包，二是分发阅读需要工具的支持，不方便普通用户的阅读。
3 |
4 | 基于以上原因，Markdown-Website通过目录树的形式对markdown文件进行显示；同时，以静态网页的方式进行发布访问，既解决了分类归档的问题，又提供了随时随地方便访问的能力。
5 |
6 |
7 |
8 |
9 | ## 演示地址
10 | 点击打开演示页面
11 |
12 |
13 |
14 |
15 |
16 | ## Project setup
17 | ```
18 | npm install
19 | ```
20 |
21 | ### Compiles and hot-reloads for development
22 | ```
23 | npm run serve
24 | ```
25 |
26 | ### Compiles and minifies for production
27 | ```
28 | npm run build
29 | ```
30 |
31 | ### Run your tests
32 | ```
33 | npm run test
34 | ```
35 |
36 | ### Lints and fixes files
37 | ```
38 | npm run lint
39 | ```
40 |
--------------------------------------------------------------------------------
/docs/index.html:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/docs/css/app.62adf2c5.css:
--------------------------------------------------------------------------------
1 | #app{font-family:Helvetica Neue,Helvetica,tahoma,Hiragino Sans GB,PingFang SC,STHeitiSC-Light,Microsoft YaHei,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;color:#2c3e50;margin:0;padding:0;height:100vh;overflow-y:hidden}#components-layout-demo-top-side-2{height:100%}.ant-menu-inline .ant-menu-submenu-title{font-size:14px;font-weight:700}.ant-menu-submenu-inline>.ant-menu-submenu-title .ant-menu-submenu-arrow{margin-left:10px;right:inherit!important}.ant-menu-submenu-selected{color:rgba(0,0,0,.65)!important}.ant-menu .ant-menu-item-selected{background:transparent!important}.ant-menu-inline .ant-menu-item-selected:after{opacity:0!important}.markdown-body{height:100%;overflow-y:scroll;-webkit-box-sizing:border-box;box-sizing:border-box;min-width:200px;margin:0 auto;padding:0 45px}@media (max-width:767px){.markdown-body{padding:15px}}
--------------------------------------------------------------------------------
/public/static/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "subPath": "/",
3 | "title": "markdown-website",
4 | "topicWidth": 250,
5 | "openLevel": 1,
6 | "topics": [
7 | {
8 | "id": "01",
9 | "name": "markdown-website是什么？",
10 | "src": "static/what.md"
11 | },
12 | {
13 | "id": "02",
14 | "name": "开始使用",
15 | "submenus": [
16 | {
17 | "id": "0201",
18 | "name": "搭建markdown网站",
19 | "src": "static/how.md"
20 | },
21 | {
22 | "id": "0202",
23 | "name": "更多网站属性配置",
24 | "src": "static/edit.md"
25 | },
26 | {
27 | "id": "0203",
28 | "name": "如何部署发布",
29 | "src": "static/deploy.md"
30 | },
31 | {
32 | "id": "0204",
33 | "name": "链接跳转指定文档",
34 | "src": "static/link.md"
35 | }
36 | ]
37 | }
38 | ]
39 | }
--------------------------------------------------------------------------------
/docs/static/config.json:
--------------------------------------------------------------------------------
1 | {
2 | "subPath": "/markdown-website",
3 | "title": "markdown-website",
4 | "topicWidth": 250,
5 | "openLevel": 1,
6 | "topics": [
7 | {
8 | "id": "01",
9 | "name": "markdown-website是什么？",
10 | "src": "static/what.md"
11 | },
12 | {
13 | "id": "02",
14 | "name": "开始使用",
15 | "submenus": [
16 | {
17 | "id": "0201",
18 | "name": "搭建markdown网站",
19 | "src": "static/how.md"
20 | },
21 | {
22 | "id": "0202",
23 | "name": "更多网站属性配置",
24 | "src": "static/edit.md"
25 | },
26 | {
27 | "id": "0203",
28 | "name": "如何部署发布",
29 | "src": "static/deploy.md"
30 | },
31 | {
32 | "id": "0204",
33 | "name": "链接跳转指定文档",
34 | "src": "static/link.md"
35 | }
36 | ]
37 | }
38 | ]
39 | }
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2021 softwaiter
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "markdown-website",
3 | "version": "0.1.0",
4 | "private": true,
5 | "scripts": {
6 | "serve": "vue-cli-service serve",
7 | "build": "vue-cli-service build",
8 | "lint": "vue-cli-service lint"
9 | },
10 | "dependencies": {
11 | "ant-design-vue": "^1.7.8",
12 | "axios": "^0.24.0",
13 | "core-js": "^2.6.5",
14 | "github-markdown-css": "^5.0.0",
15 | "markdown-loader": "^6.0.0",
16 | "vue": "^2.6.10",
17 | "vue-markdown": "^2.2.4"
18 | },
19 | "devDependencies": {
20 | "@vue/cli-plugin-babel": "^3.0.4",
21 | "@vue/cli-plugin-eslint": "^3.0.4",
22 | "@vue/cli-service": "^3.0.4",
23 | "babel-eslint": "^10.0.1",
24 | "eslint": "^5.16.0",
25 | "eslint-plugin-vue": "^5.0.0",
26 | "vue-template-compiler": "^2.6.10"
27 | },
28 | "eslintConfig": {
29 | "root": true,
30 | "env": {
31 | "node": true
32 | },
33 | "extends": [
34 | "plugin:vue/essential",
35 | "eslint:recommended"
36 | ],
37 | "rules": {},
38 | "parserOptions": {
39 | "parser": "babel-eslint"
40 | }
41 | },
42 | "postcss": {
43 | "plugins": {
44 | "autoprefixer": {}
45 | }
46 | },
47 | "browserslist": [
48 | "> 1%",
49 | "last 2 versions"
50 | ]
51 | }
52 |
--------------------------------------------------------------------------------
/docs/static/link.md:
--------------------------------------------------------------------------------
1 | # 如何从外部链接跳转到目录树指定文档
2 |
3 | 当用户对外提供部署好的文档库网站时，经常会出现从产品介绍或其他任意网站中直接提供链接跳转到对应文档说明的场景，由于本项目并不支持路由设置，因此整个网页部署后只有一个访问地址，也就是用户部署后的域名地址，当我们每次访问该域名时，网页都会默认选中第一个文档节点；为了满足打开域名链接时，能够选中任意文档节点的需求，我们借鉴vue路由的方式，通过在链接后添加“/#/文档节点id”的方式，判断用户希望跳转的文档节点，进行选中并打开。
4 |
5 | #### 案例
6 | 1. 假设目录树配置如下
7 |
8 | ```json
9 | {
10 | "title": "markdown-website",
11 | "topicWidth": 250,
12 | "openLevel": 1,
13 | "topics": [
14 | {
15 | "id": "01",
16 | "name": "markdown-website是什么？",
17 | "src": "static/what.md"
18 | },
19 | {
20 | "id": "02",
21 | "name": "开始使用",
22 | "submenus": [
23 | {
24 | "id": "0201",
25 | "name": "搭建markdown网站",
26 | "src": "static/how.md"
27 | },
28 | {
29 | "id": "0202",
30 | "name": "更多网站属性配置",
31 | "src": "static/edit.md"
32 | },
33 | {
34 | "id": "0203",
35 | "name": "部署发布",
36 | "src": "static/deploy.md"
37 | }
38 | ]
39 | }
40 | ]
41 | }
42 | ```
43 |
44 | 2. 将配置好的网站部署在“www.xxx.com”域名下；此时，访问该域名，会默认选中打开`markdown-website是什么？`文档节点。
45 | 3. 假如我们希望直接通过链接打开网页时选中`搭建markdown网站`文档节点，那么我们需要拼接如下链接“www.xxx.com/#/0201”。
46 | 4. 跳转其他文档节点以此类推，链接拼装公式：部署域名 + “/#/" + 期望选中的文档节点id
47 |
48 |
49 |
50 | ###### 注：期望选中的文档节点必须是叶子节点，不能是包含submenus的目录节点。
--------------------------------------------------------------------------------
/public/static/link.md:
--------------------------------------------------------------------------------
1 | # 如何从外部链接跳转到目录树指定文档
2 |
3 | 当用户对外提供部署好的文档库网站时，经常会出现从产品介绍或其他任意网站中直接提供链接跳转到对应文档说明的场景，由于本项目并不支持路由设置，因此整个网页部署后只有一个访问地址，也就是用户部署后的域名地址，当我们每次访问该域名时，网页都会默认选中第一个文档节点；为了满足打开域名链接时，能够选中任意文档节点的需求，我们借鉴vue路由的方式，通过在链接后添加“/#/文档节点id”的方式，判断用户希望跳转的文档节点，进行选中并打开。
4 |
5 | #### 案例
6 | 1. 假设目录树配置如下
7 |
8 | ```json
9 | {
10 | "title": "markdown-website",
11 | "topicWidth": 250,
12 | "openLevel": 1,
13 | "topics": [
14 | {
15 | "id": "01",
16 | "name": "markdown-website是什么？",
17 | "src": "static/what.md"
18 | },
19 | {
20 | "id": "02",
21 | "name": "开始使用",
22 | "submenus": [
23 | {
24 | "id": "0201",
25 | "name": "搭建markdown网站",
26 | "src": "static/how.md"
27 | },
28 | {
29 | "id": "0202",
30 | "name": "更多网站属性配置",
31 | "src": "static/edit.md"
32 | },
33 | {
34 | "id": "0203",
35 | "name": "部署发布",
36 | "src": "static/deploy.md"
37 | }
38 | ]
39 | }
40 | ]
41 | }
42 | ```
43 |
44 | 2. 将配置好的网站部署在“www.xxx.com”域名下；此时，访问该域名，会默认选中打开`markdown-website是什么？`文档节点。
45 | 3. 假如我们希望直接通过链接打开网页时选中`搭建markdown网站`文档节点，那么我们需要拼接如下链接“www.xxx.com/#/0201”。
46 | 4. 跳转其他文档节点以此类推，链接拼装公式：部署域名 + “/#/" + 期望选中的文档节点id
47 |
48 |
49 |
50 | ###### 注：期望选中的文档节点必须是叶子节点，不能是包含submenus的目录节点。
--------------------------------------------------------------------------------
/docs/static/how.md:
--------------------------------------------------------------------------------
1 | # 如何开始搭建自己的Markdown网站？
2 |
3 | ##### 一、获得网站模板
4 |
5 | 开始搭建网站，你首先需要先获取一套项目模板，根据你自己的情况，可以有两种方式供你选择：
6 |
7 | 如果你是一个有前端开发经验，熟悉vue技术和ant-design-vue组件库，并且想自定义一些样式的话，可以通过复制源码，自己编译的方式进行。
8 | 点击打开源码下载页面
9 |
10 | 如果你并不想自己安装开发环境，自己编译代码，可以直接下载编译好的静态网页压缩包，解压即可。
11 | 点击下载静态网页压缩包
12 |
13 | 静态网页目录结构
14 | ├── css # 网站样式文件
15 | ├── js # 网站脚本文件
16 | ├── static # 网站资源文件
17 | ├── favicon.ico # 网站小图标
18 | └── index.html # 网站页面
19 |
20 | ##### 二、收集网站要展示的Markdown文件
21 | 将希望在网站展示的所有Markdown文件收集起来，统一复制到static目录里面。
22 | 由于static目录里包含演示的数据文档，在复制之前，请将所有后缀名为.md的文件全部删除。
23 |
24 | ##### 三、编辑Markdown文件展示目录树
25 | 现在要展示的Markdown文件内容有了，接下来，我们来对展示的目录树结构进行编辑。
26 | 目录树的内容结构在static目录下的config.json文件内进行设置，使用文本编辑器打开config.json文件，可以看到如下内容：
27 |
28 | ```json
29 | {
30 | "title": "markdown-website",
31 | "topicWidth": 250,
32 | "openLevel": 1,
33 | "topics": [
34 | {
35 | "id": "01",
36 | "name": "markdown-website是什么？",
37 | "src": "static/what.md"
38 | },
39 | {
40 | "id": "02",
41 | "name": "开始使用",
42 | "submenus": [
43 | {
44 | "id": "0201",
45 | "name": "搭建markdown网站",
46 | "src": "static/how.md"
47 | },
48 | {
49 | "id": "0202",
50 | "name": "更多网站属性配置",
51 | "src": "static/edit.md"
52 | },
53 | {
54 | "id": "0203",
55 | "name": "部署发布",
56 | "src": "static/deploy.md"
57 | }
58 | ]
59 | }
60 | ]
61 | }
62 | ```
63 |
64 | 其中，topics数组是目录树结构的内容，首先将topics内的演示数据清空，还原成空数组：
65 | ```json
66 | {
67 | "title": "markdown-website",
68 | "topicWidth": 250,
69 | "openLevel": 1,
70 | "topics": []
71 | }
72 | ```
73 |
74 | 每一个目录节点是一个对象，对象内都包含如下4个属性：
75 | id：目录节点的唯一标识，不能重复。
76 | name：目录节点的显示名称。
77 | src：目录节点的关联markdown文件路径，即我们前面复制到static目录的markdown文件。例如：static/xxx.md；也可以根据实际情况设置成外部链接，如：http://www.xxx.com/docs/readme.md。如果是包含`submenus`的父节点，可以不设置。
78 | submenus：子目录树节点，如果没有子节点，可以是空数组[]。
79 |
80 | 实例，增加一个“我的收藏”的父节点：
81 | ```json
82 | {
83 | "title": "markdown-website",
84 | "topicWidth": 250,
85 | "openLevel": 1,
86 | "topics": [
87 | {
88 | "id": "01",
89 | "name": "我的收藏",
90 | "submenus": []
91 | }
92 | ]
93 | }
94 | ```
95 |
96 | 继续在我的收藏里增加“给长城贴瓷砖方案”和“给珠峰装电梯方案”两个子节点，并关联各自的markdown文件：
97 | ```json
98 | {
99 | "title": "markdown-website",
100 | "topicWidth": 250,
101 | "openLevel": 1,
102 | "topics": [
103 | {
104 | "id": "01",
105 | "name": "我的收藏",
106 | "submenus": [
107 | {
108 | "id": "0101",
109 | "name": "给长城贴瓷砖方案",
110 | "src": "static/给长城贴瓷砖方案.md"
111 | },
112 | {
113 | "id": "0102",
114 | "name": "给珠峰装电梯方案",
115 | "src": "static/给珠峰装电梯方案.md"
116 | }
117 | ]
118 | }
119 | ]
120 | }
121 | ```
122 |
123 | 基于以上方式，可以根据自己的实际情况和需要，定义目录树的结构。理论上，支持无限层级，但从实际效果来看，2~3层效果最佳。
124 |
125 |
126 |
127 | 注：`src`属性在设置事需要特别注意，如果网站最终部署在根目录，如”www.xxx.com“，这时设置绝对路径"/static/what.md"或者相对路径”static/what.md“都没有问题，能够正常访问；如果网站部署在子目录，如”www.xxx.com/markdown-website“，此时，src属性必须设置成相对路径”static/what.md“，否则，将不能正常访问文档内容。
--------------------------------------------------------------------------------
/public/static/how.md:
--------------------------------------------------------------------------------
1 | # 如何开始搭建自己的Markdown网站？
2 |
3 | ##### 一、获得网站模板
4 |
5 | 开始搭建网站，你首先需要先获取一套项目模板，根据你自己的情况，可以有两种方式供你选择：
6 |
7 | 如果你是一个有前端开发经验，熟悉vue技术和ant-design-vue组件库，并且想自定义一些样式的话，可以通过复制源码，自己编译的方式进行。
8 | 点击打开源码下载页面
9 |
10 | 如果你并不想自己安装开发环境，自己编译代码，可以直接下载编译好的静态网页压缩包，解压即可。
11 | 点击下载静态网页压缩包
12 |
13 | 静态网页目录结构
14 | ├── css # 网站样式文件
15 | ├── js # 网站脚本文件
16 | ├── static # 网站资源文件
17 | ├── favicon.ico # 网站小图标
18 | └── index.html # 网站页面
19 |
20 | ##### 二、收集网站要展示的Markdown文件
21 | 将希望在网站展示的所有Markdown文件收集起来，统一复制到static目录里面。
22 | 由于static目录里包含演示的数据文档，在复制之前，请将所有后缀名为.md的文件全部删除。
23 |
24 | ##### 三、编辑Markdown文件展示目录树
25 | 现在要展示的Markdown文件内容有了，接下来，我们来对展示的目录树结构进行编辑。
26 | 目录树的内容结构在static目录下的config.json文件内进行设置，使用文本编辑器打开config.json文件，可以看到如下内容：
27 |
28 | ```json
29 | {
30 | "title": "markdown-website",
31 | "topicWidth": 250,
32 | "openLevel": 1,
33 | "topics": [
34 | {
35 | "id": "01",
36 | "name": "markdown-website是什么？",
37 | "src": "static/what.md"
38 | },
39 | {
40 | "id": "02",
41 | "name": "开始使用",
42 | "submenus": [
43 | {
44 | "id": "0201",
45 | "name": "搭建markdown网站",
46 | "src": "static/how.md"
47 | },
48 | {
49 | "id": "0202",
50 | "name": "更多网站属性配置",
51 | "src": "static/edit.md"
52 | },
53 | {
54 | "id": "0203",
55 | "name": "部署发布",
56 | "src": "static/deploy.md"
57 | }
58 | ]
59 | }
60 | ]
61 | }
62 | ```
63 |
64 | 其中，topics数组是目录树结构的内容，首先将topics内的演示数据清空，还原成空数组：
65 | ```json
66 | {
67 | "title": "markdown-website",
68 | "topicWidth": 250,
69 | "openLevel": 1,
70 | "topics": []
71 | }
72 | ```
73 |
74 | 每一个目录节点是一个对象，对象内都包含如下4个属性：
75 | id：目录节点的唯一标识，不能重复。
76 | name：目录节点的显示名称。
77 | src：目录节点的关联markdown文件路径，即我们前面复制到static目录的markdown文件。例如：static/xxx.md；也可以根据实际情况设置成外部链接，如：http://www.xxx.com/docs/readme.md。如果是包含`submenus`的父节点，可以不设置。
78 | submenus：子目录树节点，如果没有子节点，可以是空数组[]。
79 |
80 | 实例，增加一个“我的收藏”的父节点：
81 | ```json
82 | {
83 | "title": "markdown-website",
84 | "topicWidth": 250,
85 | "openLevel": 1,
86 | "topics": [
87 | {
88 | "id": "01",
89 | "name": "我的收藏",
90 | "submenus": []
91 | }
92 | ]
93 | }
94 | ```
95 |
96 | 继续在我的收藏里增加“给长城贴瓷砖方案”和“给珠峰装电梯方案”两个子节点，并关联各自的markdown文件：
97 | ```json
98 | {
99 | "title": "markdown-website",
100 | "topicWidth": 250,
101 | "openLevel": 1,
102 | "topics": [
103 | {
104 | "id": "01",
105 | "name": "我的收藏",
106 | "submenus": [
107 | {
108 | "id": "0101",
109 | "name": "给长城贴瓷砖方案",
110 | "src": "static/给长城贴瓷砖方案.md"
111 | },
112 | {
113 | "id": "0102",
114 | "name": "给珠峰装电梯方案",
115 | "src": "static/给珠峰装电梯方案.md"
116 | }
117 | ]
118 | }
119 | ]
120 | }
121 | ```
122 |
123 | 基于以上方式，可以根据自己的实际情况和需要，定义目录树的结构。理论上，支持无限层级，但从实际效果来看，2~3层效果最佳。
124 |
125 |
126 |
127 | 注：`src`属性在设置事需要特别注意，如果网站最终部署在根目录，如”www.xxx.com“，这时设置绝对路径"/static/what.md"或者相对路径”static/what.md“都没有问题，能够正常访问；如果网站部署在子目录，如”www.xxx.com/markdown-website“，此时，src属性必须设置成相对路径”static/what.md“，否则，将不能正常访问文档内容。
--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
12 |
13 |
14 | {{item.name}}
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |