一个将markdown文件归类展示的网站生成工具

作为程序猿来讲，markdown是大家天天用、时时用的工具。可能用来记录日常的心得、工作的TODO，更有可能是针对某个项目书写的使用手册；但是在使用过程中，发现两个不太方便的地方，一是每个文档都作为一个单独的文件存在，不方便按照分类进行归档打包，二是分发阅读需要工具的支持，不方便普通用户的阅读。

基于以上原因，作者实现了Markdown-Website这个小工具，Markdown-Website工具通过目录树的形式对markdown文件进行显示；同时，以静态网页的方式进行发布访问，既解决了分类归档的问题，又提供了随时随地方便访问的能力。
Github源码地址

啥也不说，先看效果：点击打开演示页面

接下来，我们一步一步来说明下怎么搭建自己的markdown静态网站。

一、获得网站模板

开始搭建网站，你首先需要先获取一套项目模板，根据你自己的情况，可以有两种方式供你选择：

如果你是一个有前端开发经验，熟悉vue技术和ant-design-vue组件库，并且想自定义一些样式的话，可以通过复制源码，自己编译的方式进行。
点击打开源码下载页面

如果你并不想自己安装开发环境，自己编译代码，可以直接下载编译好的静态网页压缩包，解压即可。
点击下载静态网页压缩包

静态网页目录结构
├── css                       # 网站样式文件
├── js                         # 网站脚本文件
├── static                   # 网站资源文件
├── favicon.ico          # 网站小图标
└── index.html          # 网站页面

二、收集网站要展示的Markdown文件

将希望在网站展示的所有Markdown文件收集起来，统一复制到static目录里面。
由于static目录里包含演示的数据文档，在复制之前，请将所有后缀名为.md的文件全部删除。

三、编辑Markdown文件展示目录树

现在要展示的Markdown文件内容有了，接下来，我们来对展示的目录树结构进行编辑。
目录树的内容结构在static目录下的config.json文件内进行设置，使用文本编辑器打开config.json文件，可以看到如下内容：

{
    "title": "markdown-website",
    "topicWidth": 250,
    "openLevel": 1,
    "topics": [
    {
      "id": "01",
      "name": "markdown-website是什么？",
      "src": "/static/what.md"
    },
    {
        "id": "02",
        "name": "开始使用",
        "submenus": [
        {
            "id": "0201",
            "name": "搭建markdown网站",
            "src": "/static/how.md"
        },
        {
            "id": "0202",
            "name": "更多网站属性配置",
            "src": "/static/edit.md"
        },
        {
            "id": "0203",
            "name": "部署发布",
            "src": "/static/deploy.md"
        }
      ]
    }
  ]
}

其中，topics数组是目录树结构的内容，首先将topics内的演示数据清空，还原成空数组：

{
    "title": "markdown-website",
    "topicWidth": 250,
    "openLevel": 1,
    "topics": []
}

每一个目录节点是一个对象，对象内都包含如下4个属性：
id：目录节点的唯一标识，不能重复。
name：目录节点的显示名称。
src：目录节点的关联markdown文件路径，即我们前面复制到static目录的markdown文件，如：/static/xxx.md；如果是父节点，可以不设置。
submenus：子目录树节点，如果没有子节点，可以是空数组[]。

实例，增加一个“我的收藏”的父节点：

{
    "title": "markdown-website",
    "topicWidth": 250,
    "openLevel": 1,
    "topics": [
        {
            "id": "01",
            "name": "我的收藏",
            "submenus": []
        }
    ]
}

继续在我的收藏里增加“给长城贴瓷砖方案”和“给珠峰装电梯方案”两个子节点，并关联各自的markdown文件：

{
    "title": "markdown-website",
    "topicWidth": 250,
    "openLevel": 1,
    "topics": [
        {
            "id": "01",
            "name": "我的收藏",
            "submenus": [
                {
                    "id": "0101",
                    "name": "给长城贴瓷砖方案",
                    "src": "/static/给长城贴瓷砖方案.md"
                },
                {
                    "id": "0102",
                    "name": "给珠峰装电梯方案",
                    "src": "/static/给珠峰装电梯方案.md"
                }
            ]
        }
    ]
}

基于以上方式，可以根据自己的实际情况和需要，定义目录树的结构。理论上，支持无限层级，但从实际效果来看，2~3层效果最佳。

黎明

大丈夫生于天地间；得，何足喜；失，何足忧

一个将markdown文件归类展示的网站生成工具

一、获得网站模板

二、收集网站要展示的Markdown文件

三、编辑Markdown文件展示目录树

更多参数配置

公告