[{"data":1,"prerenderedAt":20},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fde\u002Fintroduction":3},{"html":4,"toc":5,"description":16,"hero":17,"list":18,"socialImage":19},"\u003Ch1 id=\"einführung\">Einführung\u003C\u002Fh1>\n\u003Cp>Clay macht aus einem Ordner voller Markdown-Dateien eine schnelle, durchsuchbare Dokumentationsseite. Du schreibst Seiten in Markdown, beschreibst deine Seite in einer kleinen Konfigurationsdatei, und Clay baut daraus eine statische Website, die du überall hosten kannst: auf GitHub Pages, Netlify, Cloudflare Pages oder jedem Webserver.\u003C\u002Fp>\n\u003Cp>Diese Website ist selbst eine Clay-Seite. Jede Seite, die du hier liest, ist eine Markdown-Datei im \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fclay-doc\u002Fclay-example-repo\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Beispiel-Repository\u003C\u002Fa>, und das Repository dient gleichzeitig als Vorlage zum Abschauen.\u003C\u002Fp>\n\u003Ch2 id=\"was-du-bekommst\">\u003Ca class=\"heading-anchor\" href=\"#was-du-bekommst\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#was-du-bekommst\">#\u003C\u002Fa>Was du bekommst\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Funktion\u003C\u002Fth>\n\u003Cth>Was sie deinen Lesern bringt\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>Navigation\u003C\u002Ftd>\n\u003Ctd>Eine Seitenleiste aus deinen Ordnern, Brotkrumen und Links zur vorherigen und nächsten Seite\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Suche\u003C\u002Ftd>\n\u003Ctd>Volltextsuche über alle Seiten und Abschnitte, mit Tippfehlertoleranz und markierten Treffern\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Code\u003C\u002Ftd>\n\u003Ctd>Syntaxhervorhebung für über 200 Sprachen, hervorgehobene Zeilen, Diffs und ein Kopier-Button\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Schnelle Seiten\u003C\u002Ftd>\n\u003Ctd>Jede Seite wird vorab als HTML gerendert, lädt sofort und funktioniert ohne JavaScript\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Suchmaschinen\u003C\u002Ftd>\n\u003Ctd>Titel, Beschreibungen, kanonische Links, eine Sitemap und strukturierte Daten, ohne Aufwand\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Hell und dunkel\u003C\u002Ftd>\n\u003Ctd>Folgt der Systemeinstellung der Leser, mit einem Schalter, der sich die Wahl merkt\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Versionen\u003C\u002Ftd>\n\u003Ctd>Die Dokumentation älterer Releases bleibt online, mit einem Versionsumschalter\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Sprachen\u003C\u002Ftd>\n\u003Ctd>Übersetze Seite für Seite; nicht übersetzte Seiten zeigen das Original\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>Smartphones\u003C\u002Ftd>\n\u003Ctd>Ein Layout für kleine Bildschirme, mit einer ausklappbaren Navigation\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Ch2 id=\"so-funktioniert-es\">\u003Ca class=\"heading-anchor\" href=\"#so-funktioniert-es\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#so-funktioniert-es\">#\u003C\u002Fa>So funktioniert es\u003C\u002Fh2>\n\u003Cp>Ein Clay-Projekt ist ein Ordner mit einer Konfigurationsdatei und deiner Dokumentation:\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>mein-projekt\u002F\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>├── clay.yaml        # Titel und Links\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>└── docs\u002F            # deine Markdown-Seiten, Bilder und Dateien\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan>    └── index.md     # optional: die Startseite\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\u003Cp>Du arbeitest mit drei Befehlen:\u003C\u002Fp>\n\u003Cdiv class=\"code-block is-terminal has-bar\">\u003Cdiv class=\"code-terminal\" aria-hidden=\"true\">\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003Cspan>\u003C\u002Fspan>\u003C\u002Fdiv>\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 command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> dev\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">       # Live-Vorschau beim Schreiben\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> build\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">     # die statische Seite nach publish\u002Fpublic bauen\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line command\">\u003Cspan style=\"--shiki-light:#695221;--shiki-dark:#DCDCAA\">npx\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> clay\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\"> preview\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#006400;--shiki-dark:#6A9955\">   # den Build so prüfen, wie ein Webhoster ihn ausliefert\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\u003Cp>Clay ist ein einziges npm-Paket, \u003Ccode>clay-doc\u003C\u002Fcode>. Es baut auf \u003Ca href=\"https:\u002F\u002Fnuxt.com\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Nuxt\u003C\u002Fa> und \u003Ca href=\"https:\u002F\u002Fvuejs.org\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Ci class=\"fa-solid fa-arrow-up-right-from-square clay-external-icon\" aria-hidden=\"true\">\u003C\u002Fi>Vue\u003C\u002Fa> auf, aber mit beidem musst du nie in Berührung kommen: Es gibt kein Theme einzurichten und keinen Code zu schreiben.\u003C\u002Fp>\n\u003Ch2 id=\"wie-es-weitergeht\">\u003Ca class=\"heading-anchor\" href=\"#wie-es-weitergeht\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#wie-es-weitergeht\">#\u003C\u002Fa>Wie es weitergeht\u003C\u002Fh2>\n\u003Cul>\n\u003Cli>Neu bei Clay? Beginne mit der \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F3.x\u002Fde\u002Fgetting-started\u002Finstallation\">Installation\u003C\u002Fa> und dem \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fgetting-started\u002Fquick-start\" data-route=\"\u002F3.x\u002Fde\u002Fgetting-started\u002Fquick-start\">Schnellstart\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Du schreibst Seiten? Sieh dir \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fwriting\u002Fpages\" data-route=\"\u002F3.x\u002Fde\u002Fwriting\u002Fpages\">Seiten\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fwriting\u002Fmarkdown\" data-route=\"\u002F3.x\u002Fde\u002Fwriting\u002Fmarkdown\">Markdown\u003C\u002Fa> und \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002F3.x\u002Fde\u002Fwriting\u002Fcode-blocks\">Codeblöcke\u003C\u002Fa> an.\u003C\u002Fli>\n\u003Cli>Du richtest eine Seite ein? Die \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fconfiguration\u002Fclay-yaml\" data-route=\"\u002F3.x\u002Fde\u002Fconfiguration\u002Fclay-yaml\">clay.yaml-Referenz\u003C\u002Fa> listet jede Einstellung.\u003C\u002Fli>\n\u003Cli>Du willst veröffentlichen? Folge \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fdeployment\u002Fgithub-pages\" data-route=\"\u002F3.x\u002Fde\u002Fdeployment\u002Fgithub-pages\">GitHub Pages\u003C\u002Fa> oder \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fdeployment\u002Fother-hosts\" data-route=\"\u002F3.x\u002Fde\u002Fdeployment\u002Fother-hosts\">anderen Hostern\u003C\u002Fa>.\u003C\u002Fli>\n\u003Cli>Du kommst von Clay 1 und Clay Oven? Lies \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fguides\u002Fmigrating-from-clay-1\" data-route=\"\u002F3.x\u002Fde\u002Fguides\u002Fmigrating-from-clay-1\">Umstieg von Clay 1\u003C\u002Fa>.\u003C\u002Fli>\n\u003C\u002Ful>\n",[6,10,13],{"id":7,"text":8,"level":9},"was-du-bekommst","Was du bekommst",2,{"id":11,"text":12,"level":9},"so-funktioniert-es","So funktioniert es",{"id":14,"text":15,"level":9},"wie-es-weitergeht","Wie es weitergeht","Was Clay ist, was es für dich erledigt und wie eine Clay-Seite entsteht.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fde\u002Fintroduction.png",1792666370902]