diff --git a/README.md b/README.md
index b6343408..728169b3 100644
--- a/README.md
+++ b/README.md
@@ -147,6 +147,7 @@ Click the following links to generate a new repository with template:
 - **Diagrams** code fences extended and shortcode supported by [mermaid](https://github.com/knsv/mermaid)
 - **Interactive data visualization** shortcode and code fences extended supported by [ECharts](https://echarts.apache.org/)
 - **Timeline** code fences extended and shortcode supported
+- **File tree** code fences extended and shortcode supported
 - **Mapbox** shortcode supported by [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js)
 - **Music player** shortcode supported by [APlayer](https://github.com/MoePlayer/APlayer) and [MetingJS](https://github.com/metowolf/MetingJS)
 - **Bilibili player** and **Douyin player** shortcode
diff --git a/README.zh-cn.md b/README.zh-cn.md
index dca40eee..272c9e8e 100644
--- a/README.zh-cn.md
+++ b/README.zh-cn.md
@@ -147,6 +147,7 @@ pnpx fixit-cli create my-blog
 - 支持基于 [mermaid](https://github.com/knsv/mermaid) 的**图表** 代码块扩展语法和 shortcode
 - 支持基于 [ECharts](https://echarts.apache.org/) 的**交互式数据可视化** 代码块扩展语法和 shortcode
 - 支持 **Timeline** 的代码块扩展语法和 shortcode
+- 支持 **文件树** 的代码块扩展语法和 shortcode
 - 支持基于 [Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js) 的 **Mapbox** shortcode
 - 支持基于 [APlayer](https://github.com/MoePlayer/APlayer) 和 [MetingJS](https://github.com/metowolf/MetingJS) 的**音乐播放器** shortcode
 - 支持 **Bilibili 视频** 和 **抖音视频** shortcode
diff --git a/apps/test/assets/filetree/example.json b/apps/test/assets/filetree/example.json
new file mode 100644
index 00000000..0324cf25
--- /dev/null
+++ b/apps/test/assets/filetree/example.json
@@ -0,0 +1,72 @@
+[
+  {
+    "name": "src-json",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "components",
+        "type": "dir",
+        "children": [
+          {
+            "name": "Header.tsx",
+            "type": "file"
+          },
+          {
+            "name": "Footer.tsx",
+            "type": "file"
+          }
+        ]
+      },
+      {
+        "name": "utils",
+        "type": "dir",
+        "children": [
+          {
+            "name": "helper.ts",
+            "type": "file"
+          },
+          {
+            "name": "validator.ts",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "public",
+    "type": "dir",
+    "children": [
+      {
+        "name": "favicon.ico",
+        "type": "file"
+      },
+      {
+        "name": "images",
+        "type": "dir",
+        "children": [
+          {
+            "name": "logo.png",
+            "type": "file"
+          }
+        ]
+      }
+    ]
+  },
+  {
+    "name": "package.json",
+    "type": "file"
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": "tsconfig.json",
+    "type": "file"
+  }
+]
diff --git a/apps/test/content/posts/file-tree-test/data/example.toml b/apps/test/content/posts/file-tree-test/data/example.toml
new file mode 100644
index 00000000..8a6aaf90
--- /dev/null
+++ b/apps/test/content/posts/file-tree-test/data/example.toml
@@ -0,0 +1,59 @@
+[[filetree]]
+name = "src-toml"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "components"
+type = "dir"
+
+[[filetree.children.children]]
+name = "Header.tsx"
+type = "file"
+
+[[filetree.children.children]]
+name = "Footer.tsx"
+type = "file"
+
+[[filetree.children]]
+name = "utils"
+type = "dir"
+
+[[filetree.children.children]]
+name = "helper.ts"
+type = "file"
+
+[[filetree.children.children]]
+name = "validator.ts"
+type = "file"
+
+[[filetree]]
+name = "public"
+type = "dir"
+
+[[filetree.children]]
+name = "favicon.ico"
+type = "file"
+
+[[filetree.children]]
+name = "images"
+type = "dir"
+
+[[filetree.children.children]]
+name = "logo.png"
+type = "file"
+
+[[filetree]]
+name = "package.json"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+
+[[filetree]]
+name = "tsconfig.json"
+type = "file"
diff --git a/apps/test/content/posts/file-tree-test/index.md b/apps/test/content/posts/file-tree-test/index.md
new file mode 100644
index 00000000..4f2ce77d
--- /dev/null
+++ b/apps/test/content/posts/file-tree-test/index.md
@@ -0,0 +1,267 @@
+---
+title: File Tree Test
+date: 2026-01-10T03:00:48+08:00
+collections:
+  - Tests
+categories:
+  - Shortcodes
+tags:
+  - file-tree
+---
+
+This article tests the **File Tree** shortcode functionality in the FixIt theme.
+
+<!--more-->
+<!-- markdownlint-disable-file MD007 MD024 MD032 -->
+
+## Content Modes
+
+### Shortcode body
+
+#### JSON format
+
+{{< file-tree >}}
+[
+  {
+    "name": "src",
+    "type": "dir",
+    "children": [
+      {
+        "name": "index.ts",
+        "type": "file"
+      },
+      {
+        "name": "app.ts",
+        "type": "file"
+      }
+    ]
+  },
+  {
+    "name": "README.md",
+    "type": "file"
+  },
+  {
+    "name": ".gitignore",
+    "type": "file"
+  }
+]
+{{< /file-tree >}}
+
+#### YAML format
+
+{{< file-tree folderSlash=true >}}
+- name: project-root
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: config.ts
+          type: file
+    - name: tests
+      type: dir
+      children:
+        - name: unit.test.ts
+          type: file
+    - name: package.json
+      type: file
+    - name: tsconfig.json
+      type: file
+{{< /file-tree >}}
+
+#### TOML format
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree.children]]
+name = "app.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+### File data
+
+#### TOML format
+
+{{< file-tree file="data/example.toml" />}}
+
+TOML with folder slash and level 3:
+
+{{< file-tree file="data/example.toml" level=3 folderSlash=true />}}
+
+#### JSON format
+
+{{< file-tree file="filetree/example.json" />}}
+
+JSON with folder slash and level 2:
+
+{{< file-tree file="filetree/example.json" level=2 folderSlash=true />}}
+
+#### YAML format
+
+Trying the file not found case (should fallback to next mode):
+
+{{< file-tree file="data/nonexistent.yaml" data="example" />}}
+
+### Site data
+
+#### Basic usage
+
+{{< file-tree data="example" />}}
+
+#### Fully expanded
+
+{{< file-tree data="example" level=-1 />}}
+
+#### Limited expansion
+
+{{< file-tree data="example" level=1 />}}
+
+#### With folder slash
+
+{{< file-tree data="example" folderSlash=true />}}
+
+#### With level and folder slash
+
+{{< file-tree data="example" level=2 folderSlash=true />}}
+
+#### Collapsed with ignore
+
+{{< file-tree data="example" level=0 ignoreList="README.md" />}}
+
+## Filesystem Mode
+
+### Basic paths
+
+{{< file-tree />}}
+
+{{< file-tree "." />}}
+
+{{< file-tree "content" />}}
+
+### Named parameters
+
+{{< file-tree path="data" level=2 />}}
+
+### Expansion levels
+
+{{< file-tree "assets" 0 />}}
+
+{{< file-tree path="assets" level=2 folderSlash=true />}}
+
+{{< file-tree "assets" -1 />}}
+
+### With ignore lists
+
+{{< file-tree ignoreList=".hugo_build.lock, public, resources, node_modules" level=2 folderSlash=true />}}
+
+### root not exist
+
+path="nonexistent/path"
+
+{{< file-tree "nonexistent/path" />}}
+
+## Code Block Rendering
+
+### Basic code block
+
+YAML format:
+
+```file-tree
+- 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
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+### With parameters
+
+```file-tree {level=2 folderSlash=true ignoreList="config.local.js"}
+- 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
+
+```file-tree {level=-1 folderSlash=true}
+- 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
+```
diff --git a/apps/test/content/posts/tabs-comprehensive-test.md b/apps/test/content/posts/tabs-comprehensive-test.md
index 6aca7a47..5adbd7e8 100644
--- a/apps/test/content/posts/tabs-comprehensive-test.md
+++ b/apps/test/content/posts/tabs-comprehensive-test.md
@@ -178,3 +178,42 @@ gantt
 
 {{% /tab %}}
 {{< /tabs >}}
+
+### File Tree inside Tabs
+
+{{< tabs >}}
+{{% tab title="File Tree Shortcode" %}}
+
+{{< file-tree >}}
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+{{< /file-tree >}}
+
+{{% /tab %}}
+{{% tab title="File Tree Code Block" %}}
+
+```file-tree
+[[filetree]]
+name = "src"
+type = "dir"
+
+[[filetree.children]]
+name = "index.ts"
+type = "file"
+
+[[filetree]]
+name = "README.md"
+type = "file"
+```
+
+{{% /tab %}}
+{{< /tabs >}}
diff --git a/apps/test/data/filetree/example.yml b/apps/test/data/filetree/example.yml
new file mode 100644
index 00000000..70f5ab87
--- /dev/null
+++ b/apps/test/data/filetree/example.yml
@@ -0,0 +1,38 @@
+- name: my-project
+  type: dir
+  children:
+    - name: src
+      type: dir
+      children:
+        - name: index.ts
+          type: file
+        - name: components
+          type: dir
+          children:
+            - name: Header.tsx
+              type: file
+            - name: Footer.tsx
+              type: file
+        - name: utils
+          type: dir
+          children:
+            - name: helper.ts
+              type: file
+            - name: validator.ts
+              type: file
+    - name: public
+      type: dir
+      children:
+        - name: favicon.ico
+          type: file
+        - name: images
+          type: dir
+          children:
+            - name: logo.png
+              type: file
+    - name: package.json
+      type: file
+    - name: README.md
+      type: file
+    - name: tsconfig.json
+      type: file
diff --git a/apps/test/hugo.toml b/apps/test/hugo.toml
index b8ab35b6..7c0bf6a6 100644
--- a/apps/test/hugo.toml
+++ b/apps/test/hugo.toml
@@ -5,6 +5,7 @@
 
 title = "Hugo FixIt TEST"
 baseURL = "https://demo.fixit.lruihao.cn/test/"
+ignoreLogs = [ "warning-file-tree" ]
 
 [permalinks]
 
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index 4fdf55b9..3bf0c734 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -510,7 +510,8 @@
       margin-top: 0.5rem;
     }
   }
-  
+
+  // TODO Reorganization import
   @import '../_shortcodes';
   @import '../_partials/_single/alert';
   @import '../_partials/_single/code';
diff --git a/assets/css/_shortcodes/_file-tree.scss b/assets/css/_shortcodes/_file-tree.scss
new file mode 100644
index 00000000..182d642d
--- /dev/null
+++ b/assets/css/_shortcodes/_file-tree.scss
@@ -0,0 +1,109 @@
+.file-tree-wrapper {
+  border: 1px solid var(#{$rootPrefix}global-border-color);
+  padding: 0.5rem;
+  font-size: 0.8rem;
+  line-height: 1;
+  margin-block: 0.5rem;
+  @include border-radius($global-border-radius);
+  @include transition(box-shadow 0.2s ease);
+
+  &:hover {
+    @include box-shadow(0 2px 8px rgba(0, 0, 0, 0.1));
+
+    [data-theme='dark'] & {
+      @include box-shadow(0 2px 8px rgba(255, 255, 255, 0.1));
+    }
+  }
+
+  ul.file-tree {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+
+    .file-tree-item {
+      position: relative;
+
+      &.file-tree-folder {
+        > .file-tree-toggle {
+          cursor: pointer;
+          font-weight: bold;
+
+          [data-theme='dark'] & {
+            color: #ddd;
+          }
+
+          &:hover {
+            i,
+            span {
+              opacity: 0.6;
+            }
+          }
+        }
+      }
+
+      .file-tree-label {
+        display: inline-flex;
+        align-items: center;
+        position: relative;
+        gap: 0.25rem;
+        padding: 0.25rem 0.5rem;
+        @include border-radius($global-border-radius);
+        @include transition(all 0.15s ease);
+
+        .file-tree-icon {
+          width: 1rem;
+          text-align: center;
+          flex-shrink: 0;
+        }
+
+        &.is-highlighted {
+          color: var(#{$rootPrefix}global-link-hover-color);
+        }
+      }
+    }
+
+    &:not([data-level='0']) {
+      .file-tree-item {
+        margin: 0.25rem 0;
+        padding-left: 0.25rem;
+
+        .file-tree-label::before {
+          content: "";
+          position: absolute;
+          top: 50%;
+          left: -0.5rem;
+          translate: 0 -50%;
+          width: 0.75rem;
+          height: 1px;
+          background-color: var(#{$rootPrefix}secondary);
+        }
+      }
+    }
+  }
+
+  .file-tree .file-tree {
+    padding-left: 1.25rem;
+    position: relative;
+
+    &::before {
+      content: "";
+      position: absolute;
+      top: -0.25rem;
+      bottom: 0.625rem;
+      left: calc(1rem - 0.5px);
+      width: 1px;
+      background-color: var(#{$rootPrefix}secondary);
+      height: var(#{$rootPrefix}file-tree-line-height);
+    }
+  }
+
+  .file-tree-item.is-collapsed {
+    > .file-tree {
+      display: none;
+    }
+
+    > .file-tree-label .file-tree-icon::before {
+      content: '\f07b';
+    }
+  }
+}
diff --git a/assets/css/_shortcodes/_index.scss b/assets/css/_shortcodes/_index.scss
index 2e5cbf4e..942b03d9 100644
--- a/assets/css/_shortcodes/_index.scss
+++ b/assets/css/_shortcodes/_index.scss
@@ -5,6 +5,7 @@
 @import '_cardlink';
 @import '_center-quote';
 @import '_echarts';
+@import '_file-tree';
 @import '_instagram';
 @import '_mapbox';
 @import '_mermaid';
diff --git a/assets/css/_shortcodes/_tabs.scss b/assets/css/_shortcodes/_tabs.scss
index cf274b5e..576c0b64 100644
--- a/assets/css/_shortcodes/_tabs.scss
+++ b/assets/css/_shortcodes/_tabs.scss
@@ -15,7 +15,7 @@
 tab-container {
   display: flex;
   gap: 0.75rem;
-  margin-block: 0.5rem;
+  margin-block: 0.5rem 1rem;
   position: relative;
 
   // loading before defined
@@ -46,6 +46,9 @@ tab-container {
     &[hidden] {
       display: none;
     }
+    > *:first-child {
+      margin-top: 0;
+    }
   }
 
   &::part(tablist-tab-wrapper) {
diff --git a/assets/css/_shortcodes/_timeline.scss b/assets/css/_shortcodes/_timeline.scss
index b7b5c840..a26f1bc6 100644
--- a/assets/css/_shortcodes/_timeline.scss
+++ b/assets/css/_shortcodes/_timeline.scss
@@ -1,4 +1,4 @@
-.#{$prefix}timeline {
+ul.#{$prefix}timeline {
   list-style: none;
   box-sizing: border-box;
   overflow: auto;
diff --git a/assets/css/_variables.scss b/assets/css/_variables.scss
index ac10ffa7..0ce53cf9 100644
--- a/assets/css/_variables.scss
+++ b/assets/css/_variables.scss
@@ -41,6 +41,8 @@ $global-link-hover-color-dark: #fff !default;
 
 // Color of the border
 // TODO refactor border colors
+// $global-border-color: #e3e3e3 !default;
+// $global-border-color-dark: #434343 !default;
 $global-border-color: #f0f0f0 !default;
 $global-border-color-dark: #363636 !default;
 // ========== Global ========== //
diff --git a/assets/js/lib/file-tree.js b/assets/js/lib/file-tree.js
new file mode 100644
index 00000000..b581372d
--- /dev/null
+++ b/assets/js/lib/file-tree.js
@@ -0,0 +1,50 @@
+/**
+ * FileTree class to handle file tree interactions
+ */
+export default class FileTree {
+  init(target = document) {
+    target.querySelectorAll('.file-tree-toggle:not([data-init])').forEach((label) => {
+      label.addEventListener('click', (e) => {
+        e.stopPropagation()
+        const item = label.closest('.file-tree-folder')
+        const isCollapsed = item.classList.contains('is-collapsed')
+        item && item.classList.toggle('is-collapsed', !isCollapsed)
+
+        const wrapper = label.closest('.file-tree-wrapper')
+        this.updateLineHeight(wrapper)
+      })
+      label.dataset.init = 'true'
+    })
+    this.updateLineHeight(target)
+  }
+
+  updateLineHeight(target = document) {
+    const uls = target.querySelectorAll('.file-tree .file-tree')
+    uls.forEach((ul) => {
+      const parentItem = ul.closest('.file-tree-item.is-collapsed')
+      if (parentItem) {
+        ul.style.removeProperty('--fi-file-tree-line-height')
+        return
+      }
+      const items = Array.from(ul.children).filter((el) => el.classList?.contains('file-tree-item'))
+      if (!items.length) {
+        ul.style.removeProperty('--fi-file-tree-line-height')
+        return
+      }
+
+      const firstLabel = items[0].querySelector('.file-tree-label')
+      const lastLabel = items[items.length - 1].querySelector('.file-tree-label')
+      if (!firstLabel || !lastLabel) return
+
+      const firstRect = firstLabel.getBoundingClientRect()
+      const lastRect = lastLabel.getBoundingClientRect()
+
+      const firstCenterY = firstRect.top + firstRect.height / 2
+      const lastCenterY = lastRect.top + lastRect.height / 2
+      const offsetY = firstRect.height / 2 + 1/2 + 4 
+      const height = Math.max(0, lastCenterY - firstCenterY + offsetY)
+
+      ul.style.setProperty('--fi-file-tree-line-height', `${height}px`)
+    })
+  }
+}
diff --git a/assets/js/theme.js b/assets/js/theme.js
index 9d852fa8..de1bdac3 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -1,11 +1,14 @@
 // TODO use ESLint to check the code style
+// 按需加载主题内部库和功能模块
 import Util from './util';
+import FileTree from './lib/file-tree.js'
 
 class FixIt {
   constructor() {
     this.config = window.config;
     this.isDark = document.documentElement.dataset.theme === 'dark';
     this.util = new Util();
+    this.fileTree = new FileTree();
     this.newScrollTop = this.util.getScrollTop();
     this.oldScrollTop = this.newScrollTop;
     this.scrollEventSet = new Set();
@@ -1122,6 +1125,7 @@ class FixIt {
 
   initTabEvents(target = document) {
     target.addEventListener('tab-container-changed', () => {
+      this.fileTree.updateLineHeight(target);
       window.FixItMermaid?.init?.();
     }, false);
   }
@@ -1150,6 +1154,7 @@ class FixIt {
     this.initMathJax();
     this.initJsonViewer();
     this.initTabEvents(target);
+    this.fileTree.init(target);
     window.FixItMermaid?.init?.();
     window.FixItAPlayer?.init?.();
   }
diff --git a/hugo.toml b/hugo.toml
index 21c5c182..21cef513 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -1160,6 +1160,16 @@ copyable = true
 sort = false
 boxed = true
 
+# FixIt 0.4.2 | NEW File tree config
+# See https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/file-tree/
+[params.filetree]
+# the expand level of the tree (expand all: -1, collapse all: 0)
+level = 1
+# whether to append a trailing "/" to folder names
+folderSlash = false
+# list of file or folder names to ignore
+ignoreList = []
+
 # FixIt 0.3.12 | NEW Custom partials config
 # Custom partials must be stored in the /layouts/_partials/ directory.
 # Depends on open custom blocks https://fixit.lruihao.cn/references/blocks/
@@ -1187,7 +1197,7 @@ postFooterAfter = []
 enable = false
 # Check for updates
 c4u = false
-# # FixIt 0.4.0 | NEW Enable debug mode
+# FixIt 0.4.0 | NEW Enable debug mode
 debug = false
 
 # Page config
diff --git a/layouts/_markup/render-codeblock-file-tree.html b/layouts/_markup/render-codeblock-file-tree.html
new file mode 100644
index 00000000..cc2f844c
--- /dev/null
+++ b/layouts/_markup/render-codeblock-file-tree.html
@@ -0,0 +1,51 @@
+{{- /*
+  Render hook for file-tree code blocks
+  Alternative to file-tree shortcode's inner content rendering.
+  
+  Supported attributes:
+  - level: The expand level of the tree (expand all: -1, collapse all: 0, default: 1)
+  - folderSlash: Whether to append a trailing "/" to folder names (default: false)
+  - ignoreList: List of file or folder names to ignore, separated by commas
+  - highlightList: List of file or folder names to highlight, separated by commas
+  
+  Content format: YAML/JSON/TOML with the following item structure:
+    name: string     - The name of the file or folder
+    type: string     - Type of item, either "dir" (directory) or "file"
+    children?: array - (Optional) Array of child items, only valid for directories
+  
+  Example usage:
+    ```file-tree {level=2 folderSlash=true}
+    - name: my-project
+      type: dir
+      children:
+        - name: src
+          type: dir
+        - name: package.json
+          type: file
+    ```
+*/ -}}
+
+{{- $pageConfig := dict | merge .Page.Params.filetree | merge .Page.Site.Params.filetree -}}
+{{- $config := .Attributes | merge $pageConfig -}}
+{{- $level := cond (isset $config "level") ($config.level | int) 1 -}}
+{{- $folderSlash := $config.folderslash | default false -}}
+{{- $ignoreList := union (apply (split (.Attributes.ignorelist | default "") ",") "trim" "." " ") $pageConfig.ignorelist -}}
+{{- $highlightList := apply (split (.Attributes.highlightlist | default "") ",") "trim" "." " " -}}
+
+{{- $content := strings.TrimSpace .Inner | default "" -}}
+{{- $treeData := slice -}}
+{{- with $content -}}
+  {{- $treeData = . | unmarshal -}}
+  {{- if reflect.IsMap $treeData -}}
+    {{- $treeData = $treeData.filetree -}}
+  {{- end -}}
+{{- end -}}
+
+{{- $options := dict
+  "items" $treeData
+  "level" $level
+  "folderSlash" $folderSlash
+  "ignoreList" $ignoreList
+  "highlightList" $highlightList
+-}}
+{{- partial "plugin/file-tree.html" $options -}}
diff --git a/layouts/_partials/devtools/template-call-stack.html b/layouts/_partials/devtools/template-call-stack.html
index 6976fe0c..57d3bc24 100644
--- a/layouts/_partials/devtools/template-call-stack.html
+++ b/layouts/_partials/devtools/template-call-stack.html
@@ -2,7 +2,9 @@
   Render template call stack for debugging purpose.
   Call the partial from any template: {{- partial "devtools/template-call-stack.html" . -}}
 */ -}}
-{{- if .Site.Params.dev.debug | and hugo.IsServer -}}
+{{- $debug := (site.Store.Get "devOpts").debug -}}
+
+{{- if $debug | and hugo.IsServer -}}
   {{- with templates.Current -}}
     <ul class="template-call-stack">
       {{- range .Ancestors -}}
diff --git a/layouts/_partials/function/get-file-tree.html b/layouts/_partials/function/get-file-tree.html
new file mode 100644
index 00000000..1e0eaa9d
--- /dev/null
+++ b/layouts/_partials/function/get-file-tree.html
@@ -0,0 +1,102 @@
+{{- /*
+  Build structured tree data from filesystem with root path validation
+
+  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.
+
+  NOTE: For performance reasons, the recursion depth is limited to 10 levels by default.
+
+  @param {string} root - The root path to scan (relative to project root or contentDir)
+  @param {string} [path] - The directory path for recursive calls
+  @param {int} [level=10] - Descend only level directories deep
+  @param {int} [deep=0] - Current depth level for recursive calls
+  @param {array} [ignoreList] - List of file or folder names to ignore
+  @param {boolean} [isRecursive=false] - Internal flag for recursive calls
+  @param {boolean} [fullRootName=false] - Whether to use the full root path as the root name
+  @param {string} [lang] - Page language for multilingual sites
+  @param {boolean} [log=true] - Whether to log warnings
+  @return {array} Array of tree items with structure: {name, type, children?}, or empty array if root doesn't exist
+*/ -}}
+
+{{- $result := slice -}}
+{{- $level := .level | default 10 -}}
+{{- $deep := .deep | default 0 -}}
+{{- $isRecursive := .isRecursive | default false -}}
+{{- $_ignoreList := slice ".DS_Store" "Thumbs.db" ".directory" ".git" "node_modules" "public" -}}
+{{- $ignoreList := .ignoreList | default slice | union $_ignoreList -}}
+{{- $fullRootName := .fullRootName | default false -}}
+{{- $_debug := (site.Store.Get "devOpts").debug -}}
+
+{{- if $isRecursive -}}
+  {{- if le $deep $level -}}
+    {{- /* Recursive mode: scan directory and build children */ -}}
+    {{- /* {{- if $_debug -}}{{- warnf "Path%v: %v" $deep .path -}}{{- end -}} */ -}}
+    {{- $path := .path -}}
+    {{- $items := readDir $path -}}
+
+    {{- range $items -}}
+      {{- if in $ignoreList .Name -}}
+        {{- continue -}}
+      {{- end -}}
+      {{- $item := dict "name" .Name "type" (cond .IsDir "dir" "file") -}}
+      {{- if .IsDir -}}
+        {{- $fullPath := path.Clean (path.Join $path .Name) -}}
+        {{- $childOptions := dict "path" $fullPath "deep" (add $deep 1) "ignoreList" $ignoreList "isRecursive" true -}}
+        {{- $children := partial "function/get-file-tree.html" $childOptions -}}
+        {{- $item = merge $item (dict "children" $children) -}}
+      {{- end -}}
+      {{- $result = $result | append $item -}}
+    {{- end -}}
+  {{- end -}}
+{{- else -}}
+  {{- /* Initial call: validate root and build tree with root node */ -}}
+  {{- $root := .root -}}
+  {{- $rootIsExists := false -}}
+
+  {{- if (fileExists $root) -}}
+    {{- with try (readDir $root) -}}
+      {{- if .Err }}
+        {{- /* Attempt to resolve the path relative to the contentDir */ -}}
+        {{- $contentPath := path.Clean (path.Join "content" $root) -}}
+        {{- /* If multilingual site, try language-specific content directory */ -}}
+        {{- if hugo.IsMultilingual -}}
+          {{- $contentPath = path.Clean (path.Join "content" $.lang $root) -}}
+        {{- end -}}
+        {{- with try (readDir $contentPath) -}}
+          {{- if not .Err }}
+            {{- $rootIsExists = true -}}
+            {{- $root = $contentPath -}}
+          {{- end -}}
+        {{- end -}}
+      {{- else -}}
+        {{- $rootIsExists = true -}}
+      {{- end -}}
+    {{- end -}}
+  {{- end -}}
+
+  {{- if $rootIsExists -}}
+    {{- $f := os.Stat $root -}}
+    {{- /* Determine the root name for display */ -}}
+    {{- $rootLabel := $f.Name -}}
+    {{- $rootClean := path.Clean $root -}}
+    {{- if $fullRootName | and (ne $rootClean "/") | and (ne $rootClean ".") -}}
+      {{- $rootLabel = $rootClean -}}
+    {{- end -}}
+
+    {{- /* Build children recursively */ -}}
+    {{- if $_debug -}}{{- warnf "> %v:" $rootLabel -}}{{- end -}}
+    {{- $childOptions := dict "path" $root "deep" (add $deep 1) "level" $level "ignoreList" $ignoreList "isRecursive" true -}}
+    {{- $children := partial "function/get-file-tree.html" $childOptions -}}
+    
+    {{- /* Return root item with children */ -}}
+    {{- $result = slice (dict "name" $rootLabel "type" "dir" "children" $children) -}}
+  {{- else -}}
+    {{- /* Root doesn't exist, emit warning if context provided */ -}}
+    {{- if .log | default true -}}
+      {{- warnidf "warning-file-tree" "[get-file-tree]: The root path does not exist: %s." $root -}}
+    {{- end -}}
+  {{- end -}}
+{{- end -}}
+
+{{- return $result -}}
diff --git a/layouts/_partials/plugin/file-tree.html b/layouts/_partials/plugin/file-tree.html
new file mode 100644
index 00000000..1af9ef8d
--- /dev/null
+++ b/layouts/_partials/plugin/file-tree.html
@@ -0,0 +1,69 @@
+{{- /*
+  Recursive function to render tree from structured data
+  @param {array} items - Array of tree items
+  @param {int} depth - Current depth level
+  @param {int} level - The expand level of the tree (expand all: -1, collapse all: 0)
+  @param {bool} folderSlash - Whether to append a trailing "/" to folder names
+  @param {array} ignoreList - List of file or folder names to ignore
+  @param {array} highlightList - List of file or folder names to highlight
+
+  File tree item structure:
+    name: string     - The name of the file or folder
+    type: string     - Type of item, either "dir" (directory) or "file"
+    children?: array - (Optional) Array of child items, only valid for directories
+*/ -}}
+{{- define "render-file-tree" -}}
+  {{- $items := .items -}}
+  {{- $depth := .depth -}}
+  {{- $level := .level -}}
+  {{- $folderSlash := .folderSlash -}}
+  {{- $ignoreList := .ignoreList | default slice -}}
+  {{- $highlightList := .highlightList -}}
+
+  <ul class="file-tree" data-level="{{ $depth }}">
+    {{- range $items -}}
+      {{- if in $ignoreList .name -}}
+        {{- continue -}}
+      {{- end -}}
+      {{- $isDir := eq .type "dir" -}}
+      {{- $isCollapsed := $isDir | and (ge $depth $level) | and (ge $level 0) -}}
+      {{- $isHighlighted := in $highlightList .name -}}
+      {{- $label := .name -}}
+      {{- if and $isDir $folderSlash -}}
+        {{- $label = printf "%s/" $label -}}
+      {{- end -}}
+      
+      <li class="file-tree-item{{ if $isDir }} file-tree-folder{{ end }}{{ if $isCollapsed }} is-collapsed{{ end }}">
+        <span class="file-tree-label{{ if $isDir }} file-tree-toggle{{ end }}{{ if $isHighlighted }} is-highlighted{{ end }}">
+          {{- $icon := "file-tree-icon fa-regular " -}}
+          {{- if $isDir -}}
+            {{- $icon = add $icon "fa-folder-open" -}}
+          {{- else -}}
+            {{- $icon = add $icon "fa-file-lines" -}}
+          {{- end -}}
+          {{- dict "Class" $icon | partial "plugin/icon.html" -}}
+          <span class="file-tree-label__inner">{{ $label }}</span>
+        </span>
+        
+        {{- if and $isDir .children -}}
+          {{- $options := dict
+            "items" .children
+            "depth" (add $depth 1)
+            "level" $level
+            "folderSlash" $folderSlash
+            "ignoreList" $ignoreList
+            "highlightList" $highlightList
+          -}}
+          {{- template "render-file-tree" $options -}}
+        {{- end -}}
+      </li>
+    {{- end -}}
+  </ul>
+{{- end -}}
+
+{{- if .items -}}
+  <div class="file-tree-wrapper">
+    {{- $options := dict "depth" 0 | merge . -}}
+    {{- template "render-file-tree" $options -}}
+  </div>
+{{- end -}}
diff --git a/layouts/_shortcodes/file-tree.html b/layouts/_shortcodes/file-tree.html
new file mode 100644
index 00000000..4719f58a
--- /dev/null
+++ b/layouts/_shortcodes/file-tree.html
@@ -0,0 +1,122 @@
+{{- /*
+  Renders an interactive file tree structure from inline content, resources, data files, or filesystem
+  See https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/file-tree/
+
+  @param {string} [path="/"] - The path to scan in filesystem (relative to project root or contentDir)
+  @param {int} [level=1] - The expand level of the tree (expand all: -1, collapse all: 0)
+  @param {boolean} [folderSlash=false] - Whether to append a trailing "/" to folder names.
+  @param {string} [file] - The path of a data file in page resources or assets. (JSON/YAML/TOML)
+  @param {string} [data] - The name of the data file in data/filetree/ directory. (JSON/YAML/TOML)
+  @param {string} [ignoreList=""] - List of file or folder names to ignore, separated by commas
+  @param {string} [highlightList=""] - List of file or folder names to highlight, separated by commas
+  @param {boolean} [fullRootName=false] - Whether to use the full root path as the root name when scanning filesystem
+
+  Priority order (highest to lowest):
+  1. Inline content (shortcode body) - Parse tree data from shortcode body
+  2. Resources files (file parameter) - Read data file from page bundle or asset
+  3. Data files (data parameter) - Load data file from data/filetree/ directory
+  4. Actual Filesystem (path parameter) - Scan actual directory structure (default)
+
+  Fallback mechanism: If the current mode fails (e.g., file not found, invalid format), 
+  the shortcode will automatically fall back to the next available mode in the priority order.
+
+  @example
+  {{< file-tree "content" 2 />}}
+  {{< file-tree path="content" level=2 folderSlash=true />}}
+  {{< file-tree file="data/example.yml" />}}
+  {{< file-tree data="example" />}}
+  {{< file-tree >}}
+  - name: my-project
+    type: dir
+    children:
+      - name: src
+        type: dir
+      - name: package.json
+        type: file
+  {{< /file-tree >}}
+
+  Data format note: YAML and JSON support direct array format, while TOML requires a root key 'filetree' due to format limitations.
+  Example TOML structure:
+  ```file-tree
+  [[filetree]]
+  name = "src"
+  type = "dir"
+
+  [[filetree.children]]
+  name = "index.ts"
+  type = "file"
+
+  [[filetree]]
+  name = "README.md"
+  type = "file"
+  ```
+*/ -}}
+
+{{- $config := dict | merge .Page.Params.filetree | merge .Site.Params.filetree -}}
+{{- $root := cond .IsNamedParams (.Get "path") (.Get 0) | default "/" -}}
+{{- $level := cond .IsNamedParams (.Get "level") (.Get 1) -}}
+{{- $config = cond ((eq $level 0) | or $level) (dict "level" $level | merge $config) $config -}}
+{{- $level = cond (isset $config "level") ($config.level | int) 1 -}}
+{{- $folderSlash := cond .IsNamedParams (.Get "folderSlash") (.Get 2) | default $config.folderslash | default false -}}
+{{- $fileName := .Get "file" -}}
+{{- $dataName := .Get "data" -}}
+{{- $supportExts := slice ".yml" ".yaml" ".json" ".toml" -}}
+{{- $ignoreList := union (apply (split (.Get "ignoreList" | default "") ",") "trim" "." " ") $config.ignorelist -}}
+{{- $highlightList := apply (split (.Get "highlightList" | default "") ",") "trim" "." " " -}}
+{{- $fullRootName := .Get "fullRootName" | default false -}}
+
+{{- /* Shortcode body */ -}}
+{{- $content := strings.TrimSpace .Inner | default "" -}}
+{{- /* File Data */ -}}
+{{- if $fileName | and (eq $content "") -}}
+  {{- $ext := path.Ext $fileName | lower -}}
+  {{- if in $supportExts $ext -}}
+    {{- with dict "Path" $fileName "Resources" $.Page.Resources | partial "function/resource.html" }}
+      {{- $content = .Content -}}
+    {{- else -}}
+      {{- warnidf "warning-file-tree" "[%s]: no such data file: %s. See %s" $.Name $fileName $.Position -}}
+    {{- end -}}
+  {{- else -}}
+    {{- warnidf "warning-file-tree" "[%s]: Unsupported file format '%s'. Use %s. See %s" $.Name $ext (delimit $supportExts ", " " or ") $.Position -}}
+  {{- end -}}
+{{- end -}}
+
+{{- /* Parse structured data from content or file */ -}}
+{{- $treeData := slice -}}
+{{- with $content -}}
+  {{- $treeData = . | unmarshal -}}
+  {{- if reflect.IsMap $treeData -}}
+    {{- $treeData = $treeData.filetree -}}
+  {{- end -}}
+{{- end -}}
+
+{{- /* Site Data: load from data/filetree/ */ -}}
+{{- if $dataName | and (not $treeData) -}}
+  {{- with index .Site.Data.filetree (printf "%v.%v" $dataName .Page.Language) | default (index .Site.Data.filetree $dataName) -}}
+    {{- $treeData = . -}}
+  {{- else -}}
+    {{- $exts := delimit (apply $supportExts "trim" "." "\\.") "|" -}}
+    {{- warnidf "warning-file-tree" "[%s]: Data file 'data/filetree/%s.{%s}' not found. See %s" $.Name $dataName $exts $.Position -}}
+  {{- end -}}
+{{- end -}}
+
+{{- /* Filesystem mode: scan directory structure */ -}}
+{{- if not $treeData -}}
+  {{- /* Build structured tree data from filesystem */ -}}
+  {{- $buildOptions := dict "root" $root "ignoreList" $ignoreList "deep" 0 "fullRootName" $fullRootName "lang" .Page.Language "log" false -}}
+  {{- with partial "function/get-file-tree.html" $buildOptions -}}
+    {{- $treeData = . -}}
+  {{- else -}}
+    {{- warnidf "warning-file-tree" "[%s]: The root path does not exist: %s. See %s" .Name $root .Position -}}
+  {{- end -}}
+{{- end -}}
+
+{{- /* Render the file tree */ -}}
+{{- $options := dict
+  "items" $treeData
+  "level" $level
+  "folderSlash" $folderSlash
+  "ignoreList" $ignoreList
+  "highlightList" $highlightList
+-}}
+{{- partial "plugin/file-tree.html" $options -}}
diff --git a/layouts/_shortcodes/tabs.html b/layouts/_shortcodes/tabs.html
index b719b70c..2ee5f184 100644
--- a/layouts/_shortcodes/tabs.html
+++ b/layouts/_shortcodes/tabs.html
@@ -1,3 +1,23 @@
+{{- /*
+  Renders a tabbed interface with multiple tabs and their corresponding content.
+  See https://fixit.lruihao.cn/documentation/content-management/shortcodes/extended/tabs/
+ 
+  @param {int} [defaultTab=0] - The index of the tab to be active by default (0-based)
+  @param {string} [type="underline"] - The style type of the tabs ("underline", "pill", "card", "segment", etc.)
+  @param {string} [placement="top"] - The placement of the tabs ("top", "bottom", "left", "right")
+ 
+  Usage:
+  {{< tabs defaultTab="1" type="card" placement="top" >}}
+    {{% tab title="Tab 1" %}}
+      Content for Tab 1
+    {{% /tab %}}
+    {{% tab title="Tab 2" %}}
+      Content for Tab 2
+    {{% /tab %}}
+  {{< /tabs >}}
+ 
+  Note: Tabs must be defined using the nested "tab" shortcode within the "tabs" shortcode.
+*/ -}}
 {{- $tabs := .Store.Get "tabs" -}}
 {{- if not $tabs -}}
   {{- errorf "No tabs found. Please add at least one tab to the tabs shortcode. See %s %s" .Name .Position -}}