markdown如何写出项目目录结构
2019-05-11 本文已影响19人
偶余杭
使用MarkDown写博文时，想对整个项目目录做一个说明，比如这样的：
image.png
找了各种方法之后，发现了一种比较方便快捷地方法，就是使用
mddir来生成项目目录的结构命令：
npm install mddir --save
cd node_modules/mddir/src
node mddir "目录"
案例：
进入目录demo下，demo目录结构如下：
image.png
运行命令：
node install mddir --save
cd node_modules/mddir/src
node mddir "../../../"//即根目录
命令完成后，在node_modules/mddir/src下生成了一个文件“directoryList.md”
直接给我们生成了md格式的项目目录
打开可以看到是这样子：
image.png
把它的内容复制出来，放在代码块里面，会保留它的tab，效果如下：
|-- undefined
|-- .gitignore
|-- package-lock.json
|-- package.json
|-- _config.yml
|-- scaffolds
| |-- draft.md
| |-- page.md
| |-- post.md
|-- source
| |-- _posts
| |-- hello-world.md
|-- themes
|-- landscape
|-- .gitignore
|-- Gruntfile.js
|-- LICENSE
|-- package.json
|-- README.md
|-- _config.yml
|-- languages
| |-- de.yml
| |-- default.yml
| |-- es.yml
| |-- fr.yml
| |-- ja.yml
| |-- ko.yml
| |-- nl.yml
| |-- no.yml
| |-- pt.yml
| |-- ru.yml
| |-- zh-CN.yml
| |-- zh-TW.yml
|-- layout
| |-- archive.ejs
| |-- category.ejs
| |-- index.ejs
| |-- layout.ejs
| |-- page.ejs
| |-- post.ejs
| |-- tag.ejs
| |-- _partial
| | |-- after-footer.ejs
| | |-- archive-post.ejs
| | |-- archive.ejs
| | |-- article.ejs
| | |-- footer.ejs
| | |-- gauges-analytics.ejs
| | |-- google-analytics.ejs
| | |-- head.ejs
| | |-- header.ejs
| | |-- mobile-nav.ejs
| | |-- sidebar.ejs
| | |-- post
| | |-- category.ejs
| | |-- date.ejs
| | |-- gallery.ejs
| | |-- nav.ejs
| | |-- tag.ejs
| | |-- title.ejs
| |-- _widget
| |-- archive.ejs
| |-- category.ejs
| |-- recent_posts.ejs
| |-- tag.ejs
| |-- tagcloud.ejs
|-- scripts
| |-- fancybox.js
|-- source
|-- css
| |-- style.styl
| |-- _extend.styl
| |-- _variables.styl
| |-- fonts
| | |-- fontawesome-webfont.eot
| | |-- fontawesome-webfont.svg
| | |-- fontawesome-webfont.ttf
| | |-- fontawesome-webfont.woff
| | |-- FontAwesome.otf
| |-- images
| | |-- banner.jpg
| |-- _partial
| | |-- archive.styl
| | |-- article.styl
| | |-- comment.styl
| | |-- footer.styl
| | |-- header.styl
| | |-- highlight.styl
| | |-- mobile.styl
| | |-- sidebar-aside.styl
| | |-- sidebar-bottom.styl
| | |-- sidebar.styl
| |-- _util
| |-- grid.styl
| |-- mixin.styl
|-- fancybox
| |-- blank.gif
| |-- fancybox_loading.gif
| |-- fancybox_loading@2x.gif
| |-- fancybox_overlay.png
| |-- fancybox_sprite.png
| |-- fancybox_sprite@2x.png
| |-- jquery.fancybox.css
| |-- jquery.fancybox.js
| |-- jquery.fancybox.pack.js
| |-- helpers
| |-- fancybox_buttons.png
| |-- jquery.fancybox-buttons.css
| |-- jquery.fancybox-buttons.js
| |-- jquery.fancybox-media.js
| |-- jquery.fancybox-thumbs.css
| |-- jquery.fancybox-thumbs.js
|-- js
|-- script.js
列出了每一个文件，但是不包括node_modules和.git文件夹，这是如果觉得有些东西冗余，根据自己的需要裁剪就可以啦！
