[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ffile-trees":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"dateibäume\">Dateibäume\u003C\u002Fh1>\n\u003Cp>Ein Dateibaum zeigt, wie ein Projekt aufgebaut ist. Schreib einen Codeblock in der Sprache \u003Ccode>tree\u003C\u002Fcode> mit einem Namen pro Zeile, eingerückt unter seinem Ordner:\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```tree\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">mein-projekt\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  docs\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">    index.md       # die Startseite\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">    guides\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">      setup.md\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">      img\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">        screen.png\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">    ...\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  clay.yaml        # Einstellungen\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">  package.json\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"file-tree not-prose\">\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">mein-projekt\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">docs\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">index.md\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">die Startseite\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">guides\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">setup.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">img\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-regular fa-file-image\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">screen.png\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry file-tree-more\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Cspan class=\"file-tree-icon\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Cspan class=\"file-tree-name\">...\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-regular fa-file-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">clay.yaml\u003C\u002Fspan>\u003Cspan class=\"file-tree-comment\">Einstellungen\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-regular fa-file-code\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">package.json\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n\u003Ch2 id=\"einen-baum-schreiben\">\u003Ca class=\"heading-anchor\" href=\"#einen-baum-schreiben\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#einen-baum-schreiben\">#\u003C\u002Fa>Einen Baum schreiben\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>\u003Cstrong>Rücke\u003C\u002Fstrong> jeden Eintrag unter seinem Ordner ein. Jede Einrückung funktioniert, solange Einträge desselben Ordners untereinander stehen.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ordner\u003C\u002Fstrong> enden auf \u003Ccode>\u002F\u003C\u002Fcode> oder haben Einträge unter sich.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Kommentare\u003C\u002Fstrong> folgen auf \u003Ccode>#\u003C\u002Fcode> und erscheinen neben dem Namen.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>\u003Ccode>...\u003C\u002Fcode>\u003C\u002Fstrong> in einer eigenen Zeile steht für weitere Einträge.\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Ordner mit Einträgen klappen\u003C\u002Fstrong> mit einem Klick auf ihren Pfeil ein und aus, wie in einem Editor.\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch2 id=\"icons\">\u003Ca class=\"heading-anchor\" href=\"#icons\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#icons\">#\u003C\u002Fa>Icons\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Dateien\u003C\u002Fth>\n\u003Cth>Icon\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>\u003Ccode>.md\u003C\u002Fcode>\u003C\u002Ftd>\n\u003Ctd>Markdown\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Bilder (\u003Ccode>.png\u003C\u002Fcode>, \u003Ccode>.jpg\u003C\u002Fcode>, \u003Ccode>.svg\u003C\u002Fcode>, …)\u003C\u002Ftd>\n\u003Ctd>Bild\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code und Einstellungen (\u003Ccode>.yaml\u003C\u002Fcode>, \u003Ccode>.json\u003C\u002Fcode>, \u003Ccode>.ts\u003C\u002Fcode>, \u003Ccode>.js\u003C\u002Fcode>, \u003Ccode>.vue\u003C\u002Fcode>, \u003Ccode>.css\u003C\u002Fcode>, …)\u003C\u002Ftd>\n\u003Ctd>Code\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>\u003Ccode>.pdf\u003C\u002Fcode>, Archive\u003C\u002Ftd>\n\u003Ctd>PDF, Archiv\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Alles andere\u003C\u002Ftd>\n\u003Ctd>Text\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"aus-dem-befehl-tree\">\u003Ca class=\"heading-anchor\" href=\"#aus-dem-befehl-tree\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#aus-dem-befehl-tree\">#\u003C\u002Fa>Aus dem Befehl \u003Ccode>tree\u003C\u002Fcode>\u003C\u002Fh2>\n\u003Cp>Die Ausgabe des Befehls \u003Ccode>tree\u003C\u002Fcode> funktioniert, wie sie ist: Ihre Linien zählen als Einrückung.\u003C\u002Fp>\n\u003Cdiv class=\"code-block\">\u003Cpre class=\"shiki shiki-themes light-plus dark-plus\" style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4;--shiki-light-bg:#FFFFFF;--shiki-dark-bg:#1E1E1E\" tabindex=\"0\">\u003Ccode>\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```tree\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">docs\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">├── guides\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">│   └── setup.md\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">└── index.md\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">```\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fcode>\u003C\u002Fpre>\u003Cbutton type=\"button\" class=\"copy-code btn btn-sm btn-square btn-ghost\" title=\"Code kopieren\" aria-label=\"Code kopieren\">\u003Ci class=\"fa-solid fa-copy\">\u003C\u002Fi>\u003C\u002Fbutton>\u003C\u002Fdiv>\n\u003Cdiv class=\"file-tree not-prose\">\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">docs\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cdetails open=\"\">\u003Csummary class=\"file-tree-entry file-tree-folder\">\u003Ci class=\"fa-solid fa-chevron-right file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder-open file-tree-open\" aria-hidden=\"true\">\u003C\u002Fi>\u003Ci class=\"fa-solid fa-folder file-tree-closed\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">guides\u003C\u002Fspan>\u003C\u002Fsummary>\u003Cul>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">setup.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003Cli>\u003Cspan class=\"file-tree-entry\">\u003Cspan class=\"file-tree-chevron\" aria-hidden=\"true\">\u003C\u002Fspan>\u003Ci class=\"fa-brands fa-markdown\" aria-hidden=\"true\">\u003C\u002Fi>\u003Cspan class=\"file-tree-name\">index.md\u003C\u002Fspan>\u003C\u002Fspan>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdetails>\u003C\u002Fli>\u003C\u002Ful>\u003C\u002Fdiv>\n",[6,10,13],{"id":7,"text":8,"level":9},"einen-baum-schreiben","Einen Baum schreiben",2,{"id":11,"text":12,"level":9},"icons","Icons",{"id":14,"text":15,"level":9},"aus-dem-befehl-tree","Aus dem Befehl tree","Ordner und Dateien aus einer eingerückten Liste, mit Icons je Dateityp, Kommentaren und einklappbaren Ordnern.",null,false,"\u002F_clay\u002Fsocial\u002F4.x\u002Fde\u002Fwriting\u002Fcomponents\u002Ffile-trees.png",1792666372971]