FixIt/apps/test/content/posts/tabs-comprehensive-test.md at 2a5bd268a3c6f2a154305da0ff295b0602d36ee0

mirror of https://github.com/hugo-fixit/FixIt.git synced 2026-08-24 15:28:57 +00:00

Files

T

Cell fdfd772100 feat(File Tree): add file-tree shortcode support (#685 )

* feat(File Tree): add `file-tree` shortcode support

* feat(file-tree): add ignoreList parameter to file-tree shortcode

* feat(file-tree): enhance file-tree shortcode with ignoreList and folderSlash options

* feat(file-tree): enhance file-tree shortcode to support data mode

* feat(file-tree): enhance file-tree shortcode to support file mode

* feat(file-tree): improve content parsing in file-tree shortcode

* feat(file-tree): improve root path validation and error handling in filesystem mode

* test(file-tree): add unit tests for `file-tree` shortcode

* feat(file-tree): add file-tree code block rendering support

* refactor(file-tree): extract filesystem scanning to get-file-tree partial

Move directory traversal and root path validation to a separate partial function,
consolidating all filesystem-related logic in one place. This simplifies the
shortcode implementation and ensures a unified data format for rendering.

* docs(readme): extend code fence and shortcode support for file tree in documentation

* feat(file-tree): add fullRootName parameter for root path display in file tree

* feat(file-tree): add language parameter to get-file-tree function

* feat(file-tree): add highlightList parameter for file-tree shortcode

* perf(file-tree): add level param for get-file-tree function to descend only level directories deep

2026-01-14 16:01:22 +08:00

4.1 KiB

Raw Blame History

title, date, collections, categories, tags

title

date

collections

Types

Underline (Default)

{{< tabs placement="top" >}} {{% tab title="Tab 1" %}}Content for underline style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for underline style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for underline style tab 3{{% /tab %}} {{< /tabs >}}

Pill

{{< tabs type="pill" placement="top" >}} {{% tab title="Tab 1" %}}Content for pill style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for pill style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for pill style tab 3{{% /tab %}} {{< /tabs >}}

Card

{{< tabs type="card" placement="top" >}} {{% tab title="Tab 1" %}}Content for card style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for card style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for card style tab 3{{% /tab %}} {{< /tabs >}}

Segment

{{< tabs type="segment" >}} {{% tab title="Tab 1" %}}Content for segment style tab 1{{% /tab %}} {{% tab title="Tab 2" %}}Content for segment style tab 2{{% /tab %}} {{% tab title="Tab 3" %}}Content for segment style tab 3{{% /tab %}} {{< /tabs >}}

Nested Tabs

{{% tab title="Outer Tab 1" %}} This is the first outer tab with simple content.

Features:

Basic text content
No nested components
Simple layout {{% /tab %}}

{{% tab title="Outer Tab 2" %}} This outer tab contains nested tabs inside:

{{% tab title="Inner A" %}} Nested tab A content with bold text and italic text.

console.log('Hello from nested tab A!')

{{% tab title="Inner B" %}} Nested tab B content with a list:

First item
Second item
Third item

This is a blockquote inside a nested tab. {{% /tab %}}

{{% tab title="Inner C" %}} Nested tab C with a table:

Feature	Status	Notes
Responsive	✅	Works on all devices
Accessible	✅	Screen reader friendly
Fast	✅	Optimized performance

{{% tab title="Outer Tab 3" %}} This tab contains vertical nested tabs:

{{% tab title="Vertical A" %}} Content for vertical nested tab A.

Feature 1
Feature 2
Feature 3 {{% /tab %}}

{{% tab title="Vertical B" %}} Content for vertical nested tab B.

.example {
  color: #333;
  background: #f5f5f5;
  padding: 1rem;
}

Others

Mermaid Diagram inside Tabs

flowchart TD
    A[Start] --> B{Is it?}
    B -->|Yes| C[OK]
    C --> D[Rethink]
    D --> B
    B ---->|No| E[End]

gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2014-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2014-01-12  , 12d
    another task      : 24d

File Tree inside Tabs

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

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

filetree name = "README.md" type = "file" {{< /file-tree >}}

[[filetree]]
name = "src"
type = "dir"

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

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

4.1 KiB Raw Blame History