File Tree Test

Lruihao included in Shortcodes and Tests

2026-01-10 About 600 words 3 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

Hugo 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
    - code-tabs-test.md
    - codeblock-test.md
    - color-preview-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
    - task-list-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
    - code-tabs-test.md
    - codeblock-test.md
    - color-preview-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
    - task-list-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
  - code-tabs-test.md
  - codeblock-test.md
  - color-preview-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
  - task-list-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
    - code-tabs-test.md
    - codeblock-test.md
    - color-preview-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
    - task-list-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
    - code-tabs-test.md
    - codeblock-test.md
    - color-preview-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
    - task-list-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
- code-tabs-test.md
- codeblock-test.md
- color-preview-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
- task-list-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
    - code-tabs-test.md
    - codeblock-test.md
    - color-preview-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
    - task-list-test.md
- data/
  - filetree/
    - example.yml
- hugo.toml
- package.json

root not exist

path=“nonexistent/path”

Code Block Rendering

Basic code block

YAML format:

my-project
- src
  - main.js
  - utils.js
- package.json
- README.md

TOML format

src
- index.ts
README.md

With parameters

project/
- config/
  - config.js
- src/
  - index.js
- .gitignore

Fully expanded

backend/
- api/
  - routes/
    - users.js
    - posts.js
  - controllers/
    - userController.js
- database/
  - models/
  - migrations/
- app.js

Included in Collection・Tests 15

Code Block Test Code Tabs Test