有没有办法在 Github README.md 中表示目录树?

在我的 Githubs repos 文件中,我想表示如下的目录树结构:

enter image description here

有没有办法做到这一点与 Github 风味的降价,除了只是创造它与阿西艺术?

所以基本上就像 这个问题,但我想知道是否有一个特定于 github 的解决方案。

214091 次浏览

没有直接联系。你必须手工制作,然后自己放进去。假设您在本地使用 * nix 框并使用 utf,那么 将很好地生成它(我相信这就是您在上面使用的示例生成的内容)。

假设您指的是 readme.md作为文档目标,那么我认为唯一可以自动化它的方法是一个运行 tree并将其嵌入到自述文件中的 git pre-commit 挂钩。您需要做一个 diff,以确保只有在输出发生变化时才更新自述文件。

如果通过 github 页面维护单独的文档,那么 可以所做的就是切换到本地使用 jekyll (或另一个生成器)并自己推送静态页面。然后,您可以潜在地实现您想要的更改,或者作为一个插件/shell 脚本 */手动更改(如果它们变化不大的话) ,或者使用与上面相同的方法。

* 如果你把它集成到一个提交钩子中,你可以避免增加任何额外的步骤来改变你的页面。

这样做的最佳方法是在树的周围加上三个反勾以表示代码块。有关更多信息,请参阅降价文档: Http://daringfireball.net/projects/markdown/syntax#code

我制作了一个节点模块来自动完成这个任务: 米迪尔

用法

节点 mddir”. ./relant/path/”

要安装: npm install mddir-g

为工作目录产生降价: mddir

为任何绝对路径生成: mddir/final/path

为相对路径生成: mddir ~/Document/whatever。

Md 文件在你的工作目录中生成。

当前忽略 node _ module 和. git 文件夹。

故障排除

如果您收到错误‘ node r: No such file or directory’,问题是您的操作系统使用不同的行结束符,如果您没有显式地将行结束样式设置为 Unix,mddir 就无法解析它们。这通常会影响到 Windows,但也会影响到某些版本的 Linux。将行尾设置为 Unix 样式必须在 mddir npm 全局 bin 文件夹中执行。

线头修好了

获取 npm bin 文件夹路径:

npm config get prefix

把 CD 放进那个文件夹

安装 dos2unix

Dos2unix lib/node _ module/mddir/src/mddir.js

这会将行结尾转换为 Unix 而不是 Dos

然后正常运行: node mddir“ . ./relant/path/”。

示例生成的标记文件结构“ directorylist.md”

    |-- .bowerrc
|-- .jshintrc
|-- .jshintrc2
|-- Gruntfile.js
|-- README.md
|-- bower.json
|-- karma.conf.js
|-- package.json
|-- app
|-- app.js
|-- db.js
|-- directoryList.md
|-- index.html
|-- mddir.js
|-- routing.js
|-- server.js
|-- _api
|-- api.groups.js
|-- api.posts.js
|-- api.users.js
|-- api.widgets.js
|-- _components
|-- directives
|-- directives.module.js
|-- vendor
|-- directive.draganddrop.js
|-- helpers
|-- helpers.module.js
|-- proprietary
|-- factory.actionDispatcher.js
|-- services
|-- services.cardTemplates.js
|-- services.cards.js
|-- services.groups.js
|-- services.posts.js
|-- services.users.js
|-- services.widgets.js
|-- _mocks
|-- mocks.groups.js
|-- mocks.posts.js
|-- mocks.users.js
|-- mocks.widgets.js

我写了一个小小的剧本:

#!/bin/bash


#File: tree-md


tree=$(tree -tf --noreport -I '*~' --charset ascii $1 |
sed -e 's/| \+/  /g' -e 's/[|`]-\+/ */g' -e 's:\(* \)\(\(.*/\)\([^/]\+\)\):\1[\4](\2):g')


printf "# Project tree\n\n${tree}"

例如:

原始树命令:

$ tree
.
├── dir1
│   ├── file11.ext
│   └── file12.ext
├── dir2
│   ├── file21.ext
│   ├── file22.ext
│   └── file23.ext
├── dir3
├── file_in_root.ext
└── README.md


3 directories, 7 files

降价树命令:

$ ./tree-md .
# Project tree


.
* [tree-md](./tree-md)
* [dir2](./dir2)
* [file21.ext](./dir2/file21.ext)
* [file22.ext](./dir2/file22.ext)
* [file23.ext](./dir2/file23.ext)
* [dir1](./dir1)
* [file11.ext](./dir1/file11.ext)
* [file12.ext](./dir1/file12.ext)
* [file_in_root.ext](./file_in_root.ext)
* [README.md](./README.md)
* [dir3](./dir3)

渲染结果:

(链接在 Stackoverflow 不可见...)

项目树
  • Tree-MD
    • File21.ext
    • File22.ext
    • 文件23.ext
    • 文件11.ext
    • 文件12.ext
  • File _ in _ root. ext
  • README.md
  • 第3条

您可以像我在 项目中那样使用 < pre > 标记。

我用这种方法解决了这个问题:

  1. 在 bash 中插入命令 tree

例子

enter image description here

  1. 在 github 存储库中创建一个 README.md 并复制 bash 结果
  2. 在标记代码中插入.md 文件

例子

enter image description here 4. 看到输出,高兴起来 =) enter image description here

您还可以检查这个 延伸的树包。通过使用 node > = 6.x,它可以用作命令行应用程序。

它非常类似于 tree,但也可以选择配置树的最大深度,这是它最可怕的事情之一。也可以使用 .gitignore文件进行过滤。

enter image description here

我只是喜欢生成它与 UTF-8和链接到每个文件和文件夹导航真的很容易。请看一下示例 给你

The denerated markdown file

简单的 tree命令就可以完成这项工作。例如: tree -o readme.md会打印当前工作目录的树状结构并写入到 readme.md。然后在一个文本编辑器中打开 readme.md 文件,如 Sublime,并将其内容包装在一对三重反勾(“’)中。

提示: 如果 OSX 还没有安装,你可能需要在 OSX 中编写安装树。在 Linux 和 Windows 中,它应该可以正常工作。同样在窗口中,你可能需要用斜杠替换连字符。

希望这个能帮上忙。

以上的解决方案都不能完全适用于我的 Mac 电脑。

我发现的最佳解决方案是使用这里创建的实用程序。

Https://github.com/michalbe/md-file-tree

一旦您安装了实用程序 npm install md-file-tree -g,然后您可以简单地运行获取所有文件树

md-file-tree . > README.md

这里有一个有用的 git alias为我工作。

git config --global alias.tree '! git ls-tree --full-name --name-only -t -r HEAD | sed -e "s/[^-][^\/]*\//   |/g" -e "s/|\([^ ]\)/|-- \1/"'

这是 git tree的输出

jonavon@XPS13:~/projects/roman-numerals$ git tree
.gitignore
pom.xml
src
|-- main
|   |-- java
|   |   |-- com
|   |   |   |-- foxguardsolutions
|   |   |   |   |-- jonavon
|   |   |   |   |   |-- AbstractFile.java
|   |   |   |   |   |-- roman
|   |   |   |   |   |   |-- Main.java
|   |   |   |   |   |   |-- Numeral.java
|   |   |   |   |   |   |-- RomanNumberInputFile.java
|   |   |   |   |   |   |-- RomanNumeralToDecimalEvaluator.java
|-- test
|   |-- java
|   |   |-- com
|   |   |   |-- foxguardsolutions
|   |   |   |   |-- jonavon
|   |   |   |   |   |-- roman
|   |   |   |   |   |   |-- InterpretSteps.java
|   |   |   |   |   |   |-- RunCukesTest.java
|   |-- resources
|   |   |-- com
|   |   |   |-- foxguardsolutions
|   |   |   |   |-- jonavon
|   |   |   |   |   |-- roman
|   |   |   |   |   |   |-- Interpret.feature
|   |   |-- sample-input.txt

类似的 tree命令

jonavon@XPS13:~/projects/roman-numerals$ tree -n
.
├── pom.xml
├── src
│   ├── main
│   │   └── java
│   │       └── com
│   │           └── foxguardsolutions
│   │               └── jonavon
│   │                   ├── AbstractFile.java
│   │                   └── roman
│   │                       ├── Main.java
│   │                       ├── Numeral.java
│   │                       ├── RomanNumberInputFile.java
│   │                       └── RomanNumeralToDecimalEvaluator.java
│   └── test
│       ├── java
│       │   └── com
│       │       └── foxguardsolutions
│       │           └── jonavon
│       │               └── roman
│       │                   ├── InterpretSteps.java
│       │                   └── RunCukesTest.java
│       └── resources
│           ├── com
│           │   └── foxguardsolutions
│           │       └── jonavon
│           │           └── roman
│           │               └── Interpret.feature
│           └── sample-input.txt
└── target
├── classes
│   └── com
│       └── foxguardsolutions
│           └── jonavon
│               ├── AbstractFile.class
│               └── roman
│                   ├── Main.class
│                   ├── Numeral.class
│                   ├── RomanNumberInputFile.class
│                   └── RomanNumeralToDecimalEvaluator.class
├── generated-sources
│   └── annotations
└── maven-status
└── maven-compiler-plugin
└── compile
└── default-compile
├── createdFiles.lst
└── inputFiles.lst


30 directories, 17 files

显然,tree 具有更好的输出,但是我喜欢这种方式,因为它只显示相关的源文件,而不显示。Git 目录和已编译的二进制文件。

如果您正在使用 Windows,请在命令提示符下将 tree /f写入到您希望实现的目录中。这应该是你的工作。你可以复制并粘贴标记下的输出包围着我的三重回勾,也就是“{ tree structurehere }”

对于那些想要快速解决问题的人来说:

有一种方法可以将类似于 tree 的输出的输出输入到控制台,方法是在终端中键入以下命令:

ls -R YOURFOLDER | grep ':$' | sed -e 's/:$//' -e 's/[^\/]*\//|  /g' -e 's/|  \([^|]\)/|–– \1/g'

本文档中提到了这种替代方案: https://wiki.ubuntuusers.de/tree/

然后可以将输出复制并封装在。Md 文件,代码块返回抽搐,就像在 Jonathas 公元前的答案中提到的那样。

但请注意,它还会输出节点项目中的所有节点模块文件夹。在树上你可以做类似于

tree -I node_modules

排除节点模块文件夹。

在 bash 中插入命令树。

此外,还有一个 DOS 命令“ tree”。您可以使用以下命令显示每个子目录中的目录路径和文件:

tree /F

Https://web.csulb.edu/~murdock/tree.html

这个 Python 模块(我是作者)根据添加到项目文件中的特定标记动态地生成目录树。

例如,在文件中插入如下注释行:

# [treesource] the file description

将在生成树中为此文件生成一个条目。 默认情况下,树只显示已标记的文件。

生成的树如下所示:

$ python -m treesource
.
├── example_folder\
│   ├── first_subfolder\ (a documented folder)
│   │   ├── sub-sub1\
│   │   │   └── file3.sh (this is file 3)
│   │   ├── sub-sub2\
│   │   │   └── file4.cpp (this is file 4)
│   │   └── random_file.rdm (a documented file)
│   ├── second_subfolder\ (a documented folder with no documented files)
│   ├── a_text_file.txt (a text file)
│   ├── my_javascript.js (this is file 1)
│   └── test.py (a python script)
└── README.md (The main readme)

并可直接以制作格式输出:

.
├── example_folder\
│ ├── first_subfolder\ < em > 文档文件夹
│ │ ├── sub-sub1\
这是文件3
│ │ ├── sub-sub2\
这是文件4
有文件记录的文件
│ ├── second_subfolder\ < em > 文档化的文件夹,没有文档化的文件
一个文本文件
这是文件1
一个 Python 脚本
└── README.md 主要的自述

是的,有一个方法,在你的 readme.md 文件只是复制和粘贴树你已经生成之间的三个反引号,就像你正在写一个代码在标记,它将工作。请参阅以下附件。``` your tree ```

enter image description here

在 Linux 中,可以使用 tree命令列出目录下的所有文件/目录。

如果某人只想列出目录而不是文件,请使用 -d选项:

$ tree -d


data
├── cats_vs_dogs
│   ├── test_cat_dog
│   ├── testing
│   │   ├── cats
│   │   └── dogs
│   └── training
│       ├── cats
│       └── dogs
└── PetImages
├── Cat
└── Dog

复制输出并将其包装到标记文件中的3个反勾 ```中。

在我的 MAC 里就行。


➜  examle-web git:(develop) ✗ tree src -d -L 1
src
├── api
├── assets
├── biz
├── constants
├── hooks
├── layout
├── queries
├── routes
├── store
├── themes
├── types
├── ui-component
├── utils
├── views
└── zustands