File Tree Test

Lruihao included in Shortcodes and Tests

2026-01-10 About 800 words 4 minutes

This article tests the File Tree shortcode functionality in the FixIt theme.

Content Modes

Shortcode body

JSON format

src
- index.ts
- app.ts
README.md
.gitignore

YAML format

project-root/
- src/
  - index.ts
  - config.ts
- tests/
  - unit.test.ts
- package.json
- tsconfig.json

TOML format

src
- index.ts
- app.ts
README.md

File data

TOML format

src-toml
- components
  - Header.tsx
  - Footer.tsx
- utils
  - helper.ts
  - validator.ts
- index.ts
public
- images
  - logo.png
- favicon.ico
package.json
README.md
tsconfig.json

TOML with folder slash and level 3:

src-toml/
- components/
  - Header.tsx
  - Footer.tsx
- utils/
  - helper.ts
  - validator.ts
- index.ts
public/
- images/
  - logo.png
- favicon.ico
package.json
README.md
tsconfig.json

JSON format

src-json
- components
  - Header.tsx
  - Footer.tsx
- utils
  - helper.ts
  - validator.ts
- index.ts
public
- images
  - logo.png
- favicon.ico
package.json
README.md
tsconfig.json

JSON with folder slash and level 2:

src-json/
- components/
  - Header.tsx
  - Footer.tsx
- utils/
  - helper.ts
  - validator.ts
- index.ts
public/
- images/
  - logo.png
- favicon.ico
package.json
README.md
tsconfig.json

YAML format

Trying the file not found case (should fallback to next mode):

my-project
- src
  - components
    - Header.tsx
    - Footer.tsx
  - utils
    - helper.ts
    - validator.ts
  - index.ts
- public
  - images
    - logo.png
  - favicon.ico
- package.json
- README.md
- tsconfig.json

Site data

Basic usage

my-project
- src
  - components
    - Header.tsx
    - Footer.tsx
  - utils
    - helper.ts
    - validator.ts
  - index.ts
- public
  - images
    - logo.png
  - favicon.ico
- package.json
- README.md
- tsconfig.json

Fully expanded

my-project
- src
  - components
    - Header.tsx
    - Footer.tsx
  - utils
    - helper.ts
    - validator.ts
  - index.ts
- public
  - images
    - logo.png
  - favicon.ico
- package.json
- README.md
- tsconfig.json

Limited expansion

my-project
- src
  - components
    - Header.tsx
    - Footer.tsx
  - utils
    - helper.ts
    - validator.ts
  - index.ts
- public
  - images
    - logo.png
  - favicon.ico
- package.json
- README.md
- tsconfig.json

With folder slash

my-project/
- src/
  - components/
    - Header.tsx
    - Footer.tsx
  - utils/
    - helper.ts
    - validator.ts
  - index.ts
- public/
  - images/
    - logo.png
  - favicon.ico
- package.json
- README.md
- tsconfig.json

With level and folder slash

my-project/
- src/
  - components/
    - Header.tsx
    - Footer.tsx
  - utils/
    - helper.ts
    - validator.ts
  - index.ts
- public/
  - images/
    - logo.png
  - favicon.ico
- package.json
- README.md
- tsconfig.json

Collapsed with ignore

my-project
- src
  - components
    - Header.tsx
    - Footer.tsx
  - utils
    - helper.ts
    - validator.ts
  - index.ts
- public
  - images
    - logo.png
  - favicon.ico
- package.json
- tsconfig.json

Filesystem Mode

Basic paths

test
- assets
  - filetree
    - example.json
- content
  - posts
    - aplayer-test
      - Wavelength.lrc
      - Wavelength.mp3
      - Wavelength.webp
      - index.md
    - encryption-test
      - index.md
    - file-tree-test
      - data
        example.toml
      - index.md
    - _index.md
    - alert-and-admonition-test.md
    - codeblock-test.md
    - exact-color-match-test.md
    - fontawesome-test.md
    - json-viewer-test.md
    - katex-test.md
    - mathjax-test.md
    - mermaid-diagrams-test.md
    - script-style-test.md
    - tabs-comprehensive-test.md
- data
  - filetree
    - example.yml
- resources
  - _gen
    - assets
      - css
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.content
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.json
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.content
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.json
- .hugo_build.lock
- hugo.toml
- package.json

test
- assets
  - filetree
    - example.json
- content
  - posts
    - aplayer-test
      - Wavelength.lrc
      - Wavelength.mp3
      - Wavelength.webp
      - index.md
    - encryption-test
      - index.md
    - file-tree-test
      - data
        example.toml
      - index.md
    - _index.md
    - alert-and-admonition-test.md
    - codeblock-test.md
    - exact-color-match-test.md
    - fontawesome-test.md
    - json-viewer-test.md
    - katex-test.md
    - mathjax-test.md
    - mermaid-diagrams-test.md
    - script-style-test.md
    - tabs-comprehensive-test.md
- data
  - filetree
    - example.yml
- resources
  - _gen
    - assets
      - css
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.content
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.json
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.content
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.json
- .hugo_build.lock
- hugo.toml
- package.json

content
- posts
  - aplayer-test
    - Wavelength.lrc
    - Wavelength.mp3
    - Wavelength.webp
    - index.md
  - encryption-test
    - index.md
  - file-tree-test
    - data
      - example.toml
    - index.md
  - _index.md
  - alert-and-admonition-test.md
  - codeblock-test.md
  - exact-color-match-test.md
  - fontawesome-test.md
  - json-viewer-test.md
  - katex-test.md
  - mathjax-test.md
  - mermaid-diagrams-test.md
  - script-style-test.md
  - tabs-comprehensive-test.md

/
- assets
  - filetree
    - example.json
- content
  - posts
    - aplayer-test
      - Wavelength.lrc
      - Wavelength.mp3
      - Wavelength.webp
      - index.md
    - encryption-test
      - index.md
    - file-tree-test
      - data
        example.toml
      - index.md
    - _index.md
    - alert-and-admonition-test.md
    - codeblock-test.md
    - exact-color-match-test.md
    - fontawesome-test.md
    - json-viewer-test.md
    - katex-test.md
    - mathjax-test.md
    - mermaid-diagrams-test.md
    - script-style-test.md
    - tabs-comprehensive-test.md
- data
  - filetree
    - example.yml
- resources
  - _gen
    - assets
      - css
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.content
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.json
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.content
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.json
- .hugo_build.lock
- hugo.toml
- package.json

FixIt/apps/test
- assets
  - filetree
    - example.json
- content
  - posts
    - aplayer-test
      - Wavelength.lrc
      - Wavelength.mp3
      - Wavelength.webp
      - index.md
    - encryption-test
      - index.md
    - file-tree-test
      - data
        example.toml
      - index.md
    - _index.md
    - alert-and-admonition-test.md
    - codeblock-test.md
    - exact-color-match-test.md
    - fontawesome-test.md
    - json-viewer-test.md
    - katex-test.md
    - mathjax-test.md
    - mermaid-diagrams-test.md
    - script-style-test.md
    - tabs-comprehensive-test.md
- data
  - filetree
    - example.yml
- resources
  - _gen
    - assets
      - css
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.content
        config.template.scss_3432a4991371ae5c6b23cd4e90145273.json
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.content
        style.scss_1a67ae4ed98f18e3ea7da02d2ccd80c9.json
- .hugo_build.lock
- hugo.toml
- package.json

content/posts
- aplayer-test
  - Wavelength.lrc
  - Wavelength.mp3
  - Wavelength.webp
  - index.md
- encryption-test
  - index.md
- file-tree-test
  - data
    - example.toml
  - index.md
- _index.md
- alert-and-admonition-test.md
- codeblock-test.md
- exact-color-match-test.md
- fontawesome-test.md
- json-viewer-test.md
- katex-test.md
- mathjax-test.md
- mermaid-diagrams-test.md
- script-style-test.md
- tabs-comprehensive-test.md

Named parameters

data
- filetree
  - example.yml

Expansion levels

assets
- filetree
  - example.json

assets/
- filetree/
  - example.json

assets
- filetree
  - example.json

With ignore lists

test/
- assets/
  - filetree/
    - example.json
- content/
  - posts/
    - aplayer-test/
      - Wavelength.lrc
      - Wavelength.mp3
      - Wavelength.webp
      - index.md
    - encryption-test/
      - index.md
    - file-tree-test/
      - data/
        example.toml
      - index.md
    - _index.md
    - alert-and-admonition-test.md
    - codeblock-test.md
    - exact-color-match-test.md
    - fontawesome-test.md
    - json-viewer-test.md
    - katex-test.md
    - mathjax-test.md
    - mermaid-diagrams-test.md
    - script-style-test.md
    - tabs-comprehensive-test.md
- data/
  - filetree/
    - example.yml
- hugo.toml
- package.json

root not exist

path=“nonexistent/path”

Code Block Rendering

Basic code block

YAML format:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
- name: my-project
  type: dir
  children:
    - name: src
      type: dir
      children:
        - name: main.js
          type: file
        - name: utils.js
          type: file
    - name: package.json
      type: file
    - name: README.md
      type: file

TOML format

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
[[filetree]]
name = "src"
type = "dir"

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

[[filetree]]
name = "README.md"
type = "file"

With parameters

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
- name: project
  type: dir
  children:
    - name: config
      type: dir
      children:
        - name: config.js
          type: file
        - name: config.local.js
          type: file
    - name: src
      type: dir
      children:
        - name: index.js
          type: file
    - name: .gitignore
      type: file

Fully expanded

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
- name: backend
  type: dir
  children:
    - name: api
      type: dir
      children:
        - name: routes
          type: dir
          children:
            - name: users.js
              type: file
            - name: posts.js
              type: file
        - name: controllers
          type: dir
          children:
            - name: userController.js
              type: file
    - name: database
      type: dir
      children:
        - name: models
          type: dir
        - name: migrations
          type: dir
    - name: app.js
      type: file

Included in Collection・Tests 13

Code Block Test