admin管理员组

文章数量:1029900

用markdown语法制作一个好看的网址导航页面（markdown

之前为了让谷歌浏览器里的书签放到博客 markdown 文件下，写过一个书签和 markdown 互转的小工具 parse-bookmark[1]，当初也是为了能直接在博客中生成一个网址导航的页面，方便随时查找一些常用的网站。

在公司内部文档中也收集整理了很多网址，直接一行一行地记录或者用个表格记录感觉又不好看，然后就一直想着怎么能生成一个有网站icon、网站名、网站描述这些信息的网址导航页面。

在 markdown 文档中写 html

一般笔记或wiki类的文档网站像confluence、语雀、Notion...本身是支持直接写 markdown 的，很多富文本编辑器也支持 markdown 语法。公司的文档平台也支持 markdown 语法，但是样式只能写成内联样式，为了制作出一个导航页面，之前就写了一段如下的 html 代码直接贴到文档中：

代码语言：javascript代码运行次数：0运行复制
#### 推荐博客
---
<div style="display: flex;align-items: center;flex-wrap: wrap;margin-right: 20px;">
    <a href="; target="_blank" style="display: flex;align-items: center;margin: 0 20px 20px 0;padding: 20px;border-radius: 10px;border: 1px solid #EEE;width:250px;">
        <img src=".svg" style="width:30px;height:30px;border-radius:50%;margin-right:8px;" />
        <span style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">cafehaus</span>
    </a>
</div>

按照上面的做法也确实可以生成出一个有模有样的网站导航页面，但是每次想要新加一个网址时都要自己复制一遍 a 标签里的内容来修改，当网址收集多了的时候看着也很乱，每次想新增或者修改一个网址时都要在一堆html标签中寻寻觅觅。

摆脱直接在 markdown 中写 html 代码的困扰

理想的方式应该只用关心网址相关的数据就行了，相同的模板化代码自动生成最好，于是就想到了由网址导航的 json 数据直接给生成需要的网址导航 markdown 内容出来。

但是对于不懂代码的人可能也不知道 json 数据是什么，更不知道要怎么编写修改了。

于是就想到了制作一个可视化的网页工具 markdown-web-nav，让普通用户也可以直接在上面新增编辑网站信息，然后自动生成出来我们需要的 markdown 数据就好了，已实现的功能包括：

  • • 可以在网页上新增、编辑、删除需要的网址数据
  • • 通过导入json文件直接生成页面数据
  • • 实时预览最终的markdown渲染的网址导航效果
  • • 一键自动复制最终的markdown数据
  • • 导出页面数据到markdown文件、json文件
  • • 可记录最近的历史修改记录，方便回滚修改

使用 markdown-web-nav 工具制作网址导航页面步骤

制作出一个网址导航页面总共分为如下6个步骤，操作也很简单：

1、打开 markdown-web-nav 网页工具

在浏览器中打开 markdown-web-nav[2]：

网站内容区左侧为级联网址数据管理区，可以在这里新增、编辑、删除需要的网址数据。右侧为效果预览区，当我们修改了网址数据后，可以在这里实时查看到用markdown渲染出来一样的最终效果。

2、上传json网址数据文件（可选）

对于程序员用户，可能更加习惯编写一份 json 数据，编写好后点击“上传json网址数据文件”按钮可直接上传数据，此时左侧数据和右侧预览效果都会自动边城 json 文件中对应的数据。

注意编写 json 数据时按按照特定的格式，对于导航分类必须设置 title，对于分类下的网站可以通过 name、url、icon、description 分别设置对应的信息，具体格式可参照“下载示例模板”中的 json 文件。

代码语言：javascript代码运行次数：0运行复制
{
  "root":[
    {
      "title":"✏️ 精选博客",
      "children":[
        {
          "name":"咖啡教室",
          "url":";,
          "description":"就想开间小小咖啡馆，做做咖啡调调酒",
          "icon":".svg"
        }
      ]
    },
    {
      "title":"
用markdown语法制作一个好看的网址导航页面（markdown


之前为了让谷歌浏览器里的书签放到博客 markdown 文件下，写过一个书签和 markdown 互转的小工具 parse-bookmark[1]，当初也是为了能直接在博客中生成一个网址导航的页面，方便随时查找一些常用的网站。
在公司内部文档中也收集整理了很多网址，直接一行一行地记录或者用个表格记录感觉又不好看，然后就一直想着怎么能生成一个有网站icon、网站名、网站描述这些信息的网址导航页面。
在 markdown 文档中写 html
一般笔记或wiki类的文档网站像confluence、语雀、Notion...本身是支持直接写 markdown 的，很多富文本编辑器也支持 markdown 语法。公司的文档平台也支持 markdown 语法，但是样式只能写成内联样式，为了制作出一个导航页面，之前就写了一段如下的 html 代码直接贴到文档中：
代码语言：javascript代码运行次数：0运行复制
#### 推荐博客
---
<div style="display: flex;align-items: center;flex-wrap: wrap;margin-right: 20px;">
    <a href="; target="_blank" style="display: flex;align-items: center;margin: 0 20px 20px 0;padding: 20px;border-radius: 10px;border: 1px solid #EEE;width:250px;">
        <img src=".svg" style="width:30px;height:30px;border-radius:50%;margin-right:8px;" />
        <span style="white-space:nowrap;overflow:hidden;text-overflow: ellipsis;">cafehaus</span>
    </a>
</div>
按照上面的做法也确实可以生成出一个有模有样的网站导航页面，但是每次想要新加一个网址时都要自己复制一遍 a 标签里的内容来修改，当网址收集多了的时候看着也很乱，每次想新增或者修改一个网址时都要在一堆html标签中寻寻觅觅。
摆脱直接在 markdown 中写 html 代码的困扰
理想的方式应该只用关心网址相关的数据就行了，相同的模板化代码自动生成最好，于是就想到了由网址导航的 json 数据直接给生成需要的网址导航 markdown 内容出来。
但是对于不懂代码的人可能也不知道 json 数据是什么，更不知道要怎么编写修改了。
于是就想到了制作一个可视化的网页工具 markdown-web-nav，让普通用户也可以直接在上面新增编辑网站信息，然后自动生成出来我们需要的 markdown 数据就好了，已实现的功能包括：
  • • 可以在网页上新增、编辑、删除需要的网址数据
  • • 通过导入json文件直接生成页面数据
  • • 实时预览最终的markdown渲染的网址导航效果
  • • 一键自动复制最终的markdown数据
  • • 导出页面数据到markdown文件、json文件
  • • 可记录最近的历史修改记录，方便回滚修改
使用 markdown-web-nav 工具制作网址导航页面步骤
制作出一个网址导航页面总共分为如下6个步骤，操作也很简单：
1、打开 markdown-web-nav 网页工具
在浏览器中打开 markdown-web-nav[2]：
网站内容区左侧为级联网址数据管理区，可以在这里新增、编辑、删除需要的网址数据。右侧为效果预览区，当我们修改了网址数据后，可以在这里实时查看到用markdown渲染出来一样的最终效果。
2、上传json网址数据文件（可选）
对于程序员用户，可能更加习惯编写一份 json 数据，编写好后点击“上传json网址数据文件”按钮可直接上传数据，此时左侧数据和右侧预览效果都会自动边城 json 文件中对应的数据。
注意编写 json 数据时按按照特定的格式，对于导航分类必须设置 title，对于分类下的网站可以通过 name、url、icon、description 分别设置对应的信息，具体格式可参照“下载示例模板”中的 json 文件。
代码语言：javascript代码运行次数：0运行复制
{
  "root":[
    {
      "title":"✏️ 精选博客",
      "children":[
        {
          "name":"咖啡教室",
          "url":";,
          "description":"就想开间小小咖啡馆，做做咖啡调调酒",
          "icon":".svg"
        }
      ]
    },
    {
      "title":"

                本文标签：
                用markdown语法制作一个好看的网址导航页面（markdown

                        版权声明：本文标题：用markdown语法制作一个好看的网址导航页面（markdown 内容由热心网友自发贡献，该文观点仅代表作者本人，
                        转载请联系作者并注明出处：http://it.en369.cn/jiaocheng/1747622591a2194713.html，
                        本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。