Extended Shortcode - File Tree

The file-tree shortcode is used to render interactive file tree structures in FixIt theme. It supports multiple data sources and formats.

Overview

The file-tree shortcode provides a visual representation of directory structures with collapsible folders and file icons. It can read data from (priority order from high to low):

1. Inline content (.Inner) - Parse tree data from shortcode body
2. Resources files (file) - Read data file from page bundle or asset
3. Data files (data) - Load data file from data/filetree/ directory
4. Actual Filesystem (path) - Scan actual directory structure (default)

Usage

Syntax

To use the file-tree shortcode, include it in your content as follows:

1
2
3

{{< file-tree [path] [level] [folder_slash] [file="filename"] [data="datafilename"] [ignore_list="item1,item2"] >}}
<!-- Your tree data here (optional) -->
{{< /file-tree >}}

Parameters

The file-tree shortcode has the following named parameters, and the positional parameters ordered from top to bottom:

Configuration

You can configure default behavior in your site configuration or page front matter:

1
2
3
4
5
6

[params]

[params.filetree]
level = 1
folder_slash = false
ignore_list = []

Inline Content

You can provide the tree structure directly within the shortcode body in JSON, YAML, or TOML format.

For example:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22

{{< file-tree >}}
[
  {
    "name": "src",
    "type": "dir",
    "children": [
      {
        "name": "index.ts",
        "type": "file"
      },
      {
        "name": "app.ts",
        "type": "file"
      }
    ]
  },
  {
    "name": "package.json",
    "type": "file"
  }
]
{{< /file-tree >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

{{< file-tree >}}
- name: src
  type: dir
  children:
    - name: index.ts
      type: file
    - name: app.ts
      type: file
- name: package.json
  type: file
{{< /file-tree >}}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

{{< file-tree >}}
[[filetree]]
name = "src"
type = "dir"

[[filetree.children]]
name = "index.ts"
type = "file"

[[filetree.children]]
name = "app.ts"
type = "file"

[[filetree]]
name = "package.json"
type = "file"
{{< /file-tree >}}

Additionally, you can use code fence syntax with the file-tree language identifier for a more convenient writing experience.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

```file-tree
- name: src
  type: dir
  children:
    - name: index.ts
      type: file
    - name: app.ts
      type: file
- name: package.json
  type: file
```

File Data

Supports getting data from files in Hugo page-resources or assets, and the format supports JSON, YAML or TOML format.

For example, the current page structure is as follows:

You can use the file parameter to get data from the file:

1

{{< file-tree file="data/tree.yml" />}}

The rendered output looks like this:

Hugo Data

Support obtaining data from Hugo site data, with data files defined in the data/filetree directory, and the format supports JSON, YAML, and TOML.

For example, the data structure is as follows:

You can use the data parameter to reference it:

1

{{< file-tree data="example" />}}

The rendered output looks like this:

Filesystem Mode

Filesystem mode scans your actual project directory and generates the tree structure automatically.

It attempts to resolve the path relative to the root of your project directory. If a matching directory is not found, it will attempt to resolve the path relative to the contentDir. A leading path separator (/) is optional.

By default, the path is /:

1

{{< file-tree />}}

The rendered output looks like this:

Use ignore_list parameter to exclude specific files or folders:

1

{{< file-tree level=0 ignore_list=".autocorrectignore,.autocorrectrc,.frontmatter,.vscode" name="{path}" />}}

The rendered output looks like this:

Use path parameter to scan a specific directory, e.g., documentation under the content directory:

1

{{< file-tree path="documentation" level=2 folder_slash=true name="{path}" />}}

The rendered output looks like this: