markdown如何写出项目目录结构

使用MarkDown写博文时,想对整个项目目录做一个说明,比如这样的:


image.png

使用treer工具


treer是一个目录树生成工具

npm链接:https://www.npmjs.com/package/treer
安装:

npm install treer -g

查看版本:

treer --version

我目前安装的是1.0.4版本。
使用配方:

treer //查看目录树
treer -d <指定路径>//查看指定路径的目录树
treer -e <导出路径>//导出当前目录的目录树到特定路径下文件
treer -i "/^regex$/"//忽略目录或文件

使用案例:
进入目录,执行命令

treer -e ./result.txt -i node_modules
$ treer -e ./result.txt -i node_modules
D:\nodejs
├─.gnvmrc
├─gnvm.exe
├─node.exe
├─nodevars.bat
├─node_etw_provider.man
├─node_perfctr_provider.man
├─npm
├─npm.cmd
├─npx
├─npx.cmd
└result.txt


The result has been saved into ./result.txt

得到当前目录下result.txt文件如下:

D:\nodejs
├─.gnvmrc
├─gnvm.exe
├─node.exe
├─nodevars.bat
├─node_etw_provider.man
├─node_perfctr_provider.man
├─npm
├─npm.cmd
├─npx
├─npx.cmd
└result.txt

缺点:需要额外安装
优点:安装之后使用简单方便

使用tree命令


windows下的CMD命令tree可以很方便的得到文件夹目录树,此处要谢谢


image.png

的提醒,在此对tree命令进行一些学习和总结

环境:windows
功能:以树状图列出目录的内容
使用配方:

tree [drive][path] [/F] [/A]
#/f 显示所有目录及目录下的所有文件,省略时,只显示目录,不显示目录下的文件
#/a 使用ASCII字符,而不使用扩展字符

查看帮助:

C:\Users\Acer>tree /?
以图形显示驱动器或路径的文件夹结构。

TREE [drive:][path] [/F] [/A]

   /F   显示每个文件夹中文件的名称。
   /A   使用 ASCII 字符,而不使用扩展字符。

选用>PRN参数时,则把所列目录及目录中文件名打印输出

使用案例:
1.把D盘nodejs目录下的目录树输出到D盘的result.txt文件

tree D:\nodejs > D:result.txt

D盘下会自动生成一个result.txt文件,里面只是文件目录名:

卷 Data 的文件夹 PATH 列表
卷序列号为 D470-E3AD
D:\NODEJS
└─node_modules
    └─npm
        ├─.github
        ├─bin
        │  └─node-gyp-bin
        ├─changelogs
        ├─doc
        │  ├─cli
        │  ├─files
        │  ├─misc
        │  └─spec
...

2.把D盘nodejs目录下的目录及文件目录树输出到D盘的result.txt文件

tree D:\nodejs /f > D:result.txt

此时打印出来的文件中包括了所有文件名

卷 Data 的文件夹 PATH 列表
卷序列号为 D470-E3AD
D:\NODEJS
│  .gnvmrc
│  gnvm.exe
│  node.exe
│  nodevars.bat
│  node_etw_provider.man
│  node_perfctr_provider.man
│  npm
│  npm.cmd
│  npx
│  npx.cmd
│  
└─node_modules
    └─npm
        │  .mailmap
        │  .npmignore

注意事项:
1、导出符<前后空格可以省略
2、tree命令涉及的文件名不能有空格

优点:windows下啥都不用安装,直接使用
缺点:需要使用cmd进入特定目录或者打出目录

ios下需要额外安装tree命令,此处不提及。

使用mddir命令


使用mddir来生成项目目录的结构(比tree命令麻烦些)
命令:

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文件夹,这是如果觉得有些东西冗余,根据自己的需要裁剪就可以啦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 194,088评论 5 459
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 81,715评论 2 371
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 141,361评论 0 319
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,099评论 1 263
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 60,987评论 4 355
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,063评论 1 272
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,486评论 3 381
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,175评论 0 253
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,440评论 1 290
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,518评论 2 309
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,305评论 1 326
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,190评论 3 312
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,550评论 3 298
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 28,880评论 0 17
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,152评论 1 250
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 41,451评论 2 341
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 40,637评论 2 335

推荐阅读更多精彩内容

  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,792评论 0 5
  • ## 前端开发的工具 ### 编辑器: 1. 轻量级的,依靠插件:sublime;atom(github);vs ...
    浪流儿阅读 3,145评论 0 2
  • NPM NPM 是随同 Node 一起安装的包管理工具,能解决 Node 代码部署上的很多问题,常见的使用场景有以...
    heyi_let阅读 2,562评论 0 2
  • 九月三号上午,孩子们都陆陆续续的来了,本来打算不让他们进班,针对上一学年,表现直接站军姿,定制度,定目标的,但是考...
    优优糖阅读 356评论 1 8
  • 好吧,都说长得漂亮的才是学姐,那像我这样相貌凡凡的姑且就叫大二的吧。 关于学习 学生的主要责任和义务就是念书。...
    我和我的破木吉他阅读 349评论 11 9