[{"data":1,"prerenderedAt":29},["ShallowReactive",2],{"clay-page:\u002F3.x\u002Fde\u002Fwriting\u002Flinks-and-images":3},{"html":4,"toc":5,"description":25,"hero":26,"list":27,"socialImage":28},"\u003Ch1 id=\"links--bilder\">Links & Bilder\u003C\u002Fh1>\n\u003Cp>Links funktionieren in Clay wie Links zwischen Dateien auf GitHub: Du verlinkst die Markdown-Datei, relativ zur Seite, an der du schreibst. Dieselben Links funktionieren auf GitHub, in deinem Editor und auf der Seite.\u003C\u002Fp>\n\u003Ch2 id=\"links-zu-seiten\">\u003Ca class=\"heading-anchor\" href=\"#links-zu-seiten\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#links-zu-seiten\">#\u003C\u002Fa>Links zu Seiten\u003C\u002Fh2>\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\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Installation\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">..\u002Fgetting-started\u002Finstallation.md\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Hinweise\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">alerts.md\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Codeblöcke\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">.\u002Fcode-blocks.md\u003C\u002Fspan>\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\u003Cp>\u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fgetting-started\u002Finstallation\" data-route=\"\u002F3.x\u002Fde\u002Fgetting-started\u002Finstallation\">Installation\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fwriting\u002Falerts\" data-route=\"\u002F3.x\u002Fde\u002Fwriting\u002Falerts\">Hinweise\u003C\u002Fa>, \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fwriting\u002Fcode-blocks\" data-route=\"\u002F3.x\u002Fde\u002Fwriting\u002Fcode-blocks\">Codeblöcke\u003C\u002Fa>\u003C\u002Fp>\n\u003Cp>Clay löst den Pfad relativ zur aktuellen Seite auf, lässt das \u003Ccode>.md\u003C\u002Fcode> weg und macht daraus einen Link, der die \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fconfiguration\u002Fclay-yaml\" data-route=\"\u002F3.x\u002Fde\u002Fconfiguration\u002Fclay-yaml\">Basis-URL\u003C\u002Fa> der Seite beibehält. Links zu Ordnern funktionieren auch und führen zur Seite des Ordners: \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fconfiguration\" data-route=\"\u002F3.x\u002Fde\u002Fconfiguration\">der Abschnitt Konfiguration\u003C\u002Fa> oder \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fconfiguration\" data-route=\"\u002F3.x\u002Fde\u002Fconfiguration\">der Abschnitt Konfiguration\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cp>Links, die mit \u003Ccode>\u002F\u003C\u002Fcode> beginnen, starten an der Wurzel der Dokumentation: \u003Ccode>[Seiten](\u002Fwriting\u002Fpages.md)\u003C\u002Fcode> verlinkt von überall auf \u003Ccode>docs\u002Fwriting\u002Fpages.md\u003C\u002Fcode>.\u003C\u002Fp>\n\u003Ch2 id=\"links-zu-abschnitten\">\u003Ca class=\"heading-anchor\" href=\"#links-zu-abschnitten\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#links-zu-abschnitten\">#\u003C\u002Fa>Links zu Abschnitten\u003C\u002Fh2>\n\u003Cp>Hänge den Anker der Überschrift nach \u003Ccode>#\u003C\u002Fcode> an:\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\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Zeilen hervorheben\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">code-blocks.md#zeilen-hervorheben\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Bilder\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">#bilder\u003C\u002Fspan>\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\u003Cp>\u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fwriting\u002Fcode-blocks#zeilen-hervorheben\" data-route=\"\u002F3.x\u002Fde\u002Fwriting\u002Fcode-blocks#zeilen-hervorheben\">Zeilen hervorheben\u003C\u002Fa> und \u003Ca href=\"#bilder\" data-route=\"#bilder\">Bilder\u003C\u002Fa> auf dieser Seite.\u003C\u002Fp>\n\u003Cp>Anker entstehen wie auf GitHub: kleingeschrieben, Leerzeichen werden zu Bindestrichen, Satzzeichen fallen weg. „Links zu Abschnitten“ wird zu \u003Ccode>#links-zu-abschnitten\u003C\u002Fcode>. Im Zweifel kopierst du den Link aus dem Inhaltsverzeichnis der Seite.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Hinweis\u003C\u002Fp>\n\u003Cp>Anker hängen am Text der Überschrift, und der ist in jeder Sprache anders. In einer Übersetzung verlinkst du deshalb die Anker der übersetzten Überschriften.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Ch2 id=\"links-zu-anderen-websites\">\u003Ca class=\"heading-anchor\" href=\"#links-zu-anderen-websites\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#links-zu-anderen-websites\">#\u003C\u002Fa>Links zu anderen Websites\u003C\u002Fh2>\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\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Shiki\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">https:\u002F\u002Fshiki.style\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Schreib uns\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">mailto:docs@example.com\u003C\u002Fspan>\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\u003Cp>Links zu anderen Websites öffnen sich in einem neuen Tab. \u003Ccode>mailto:\u003C\u002Fcode>, \u003Ccode>tel:\u003C\u002Fcode> und ähnliche Links überlässt Clay dem Browser.\u003C\u002Fp>\n\u003Ch2 id=\"bilder\">\u003Ca class=\"heading-anchor\" href=\"#bilder\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#bilder\">#\u003C\u002Fa>Bilder\u003C\u002Fh2>\n\u003Cp>Lege Bilder neben deine Seiten und binde sie relativ zur Seite ein:\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\">![\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Das Clay-Logo\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">..\u002F..\u002Flogo.svg\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">)\u003C\u002Fspan>\u003C\u002Fspan>\n\u003Cspan class=\"line\">\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">![\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Build-Schritte\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">img\u002Fbuild-steps.png\u003C\u002Fspan>\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\u003Cp>Der Text in den eckigen Klammern beschreibt das Bild für Screenreader und Suchmaschinen; schreib immer einen. Clay kopiert jede Datei aus \u003Ccode>docs\u002F\u003C\u002Fcode> in die Seite, \u003Ccode>docs\u002Fwriting\u002Fimg\u002Fbuild-steps.png\u003C\u002Fcode> liegt also neben dieser Seite.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-tip\">\n\u003Cp class=\"markdown-alert-title text-primary\">\u003Ci class=\"fa-solid fa-lightbulb mr-2\">\u003C\u002Fi>Tipp\u003C\u002Fp>\n\u003Cp>Halte Bilder in einem Ordner \u003Ccode>img\u002F\u003C\u002Fcode> neben den Seiten, die sie nutzen. Ordner ohne Markdown-Dateien erscheinen nie in der Navigation.\u003C\u002Fp>\n\u003C\u002Fdiv>\n\u003Cp>Bilder und Dateien teilen sich alle Sprachen: Eine Übersetzung bindet sie mit denselben Pfaden ein wie das Original.\u003C\u002Fp>\n\u003Ch2 id=\"downloads\">\u003Ca class=\"heading-anchor\" href=\"#downloads\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#downloads\">#\u003C\u002Fa>Downloads\u003C\u002Fh2>\n\u003Cp>Verlinke jede andere Datei genauso, und Leser können sie herunterladen:\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\">[\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#A31515;--shiki-dark:#CE9178\">Checkliste herunterladen (PDF)\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-dark:#D4D4D4\">](\u003C\u002Fspan>\u003Cspan style=\"--shiki-light:#000000;--shiki-light-text-decoration:underline;--shiki-dark:#D4D4D4;--shiki-dark-text-decoration:underline\">files\u002Fchecklist.pdf\u003C\u002Fspan>\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\u003Ch2 id=\"bei-jedem-build-geprüft\">\u003Ca class=\"heading-anchor\" href=\"#bei-jedem-build-geprüft\" aria-label=\"Link zu diesem Abschnitt\" data-route=\"#bei-jedem-build-geprüft\">#\u003C\u002Fa>Bei jedem Build geprüft\u003C\u002Fh2>\n\u003Cp>\u003Ccode>clay build\u003C\u002Fcode> prüft jeden Link und jedes Bild deiner Dokumentation. Ein Link auf eine Seite, die es nicht gibt, oder ein fehlendes Bild wird als Warnung gemeldet:\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>▲ Broken link in writing\u002Fpages.md: \"setup.md\" points to a missing page (\u002Fwriting\u002Fsetup)\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>Mit \u003Ccode>--strict\u003C\u002Fcode> lassen Warnungen den Build scheitern, und kaputte Links erreichen deine Leser nie. Siehe \u003Ca href=\"\u002Fclay-example-repo\u002F3.x\u002Fde\u002Fcli\u002Fbuild-checks\" data-route=\"\u002F3.x\u002Fde\u002Fcli\u002Fbuild-checks\">Build-Prüfungen\u003C\u002Fa>.\u003C\u002Fp>\n\u003Cdiv class=\"markdown-alert markdown-alert-note\">\n\u003Cp class=\"markdown-alert-title text-base-content\">\u003Ci class=\"fa-solid fa-sticky-note mr-2\">\u003C\u002Fi>Hinweis\u003C\u002Fp>\n\u003Cp>Links zu anderen Websites und \u003Ccode>#Anker\u003C\u002Fcode> werden nicht geprüft.\u003C\u002Fp>\n\u003C\u002Fdiv>\n",[6,10,13,16,19,22],{"id":7,"text":8,"level":9},"links-zu-seiten","Links zu Seiten",2,{"id":11,"text":12,"level":9},"links-zu-abschnitten","Links zu Abschnitten",{"id":14,"text":15,"level":9},"links-zu-anderen-websites","Links zu anderen Websites",{"id":17,"text":18,"level":9},"bilder","Bilder",{"id":20,"text":21,"level":9},"downloads","Downloads",{"id":23,"text":24,"level":9},"bei-jedem-build-geprüft","Bei jedem Build geprüft","Seiten verlinken wie auf GitHub, auf Abschnitte verlinken, Bilder einbinden und Downloads anbieten.",null,false,"\u002F_clay\u002Fsocial\u002F3.x\u002Fde\u002Fwriting\u002Flinks-and-images.png",1792666371065]