
    
    
    
        
                
    
    
        
                
    
    
        
                
    
    
        
            
{"version":"https:\/\/jsonfeed.org\/version\/1","title":"Hadron","home_page_url":"https:\/\/mail.silent-company.com\/de\/docs\/theme","feed_url":"https:\/\/mail.silent-company.com\/de\/docs\/theme.json","description":"Hadron is a Grav theme and skeleton that serves as a template for beginners to create websites and webshops, but can also be used by professionals as a foundation for complex projects.","author":{"name":"Crabston GmbH"},"items":[{"title":"Einleitung | Hadron Theme","date_published":"2024-10-08T00:00:00-07:00","id":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/einleitung","url":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/einleitung","content_html":"<body><div class=\"notices blue\">\n<p>Diese Seite beinhaltet eine Einf\u00fchrung in das Hadron Theme und beschreibt die wichtigsten Funktionen und M\u00f6glichkeiten.<\/p>\n<\/div>\n\n<h2 id=\"einleitung\"><a href=\"#einleitung\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Einleitung<\/h2>\n<p>Das Hadron Theme ist ein modernes <a href=\"https:\/\/getgrav.org\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Grav<\/a> Theme, welches auf <a href=\"https:\/\/github.com\/getgrav\/grav-theme-quark\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Quark<\/a> basiert. Als Child-Theme von Quark enth\u00e4lt es erweiterte Funktionen als das urspr\u00fcngliche Quark Theme. Zudem bietet es erweiterte Gestaltungsoptionen.<\/p>\n<h2 id=\"hadron\"><a href=\"#hadron\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Hadron<\/h2>\n<p>Hadron gibt es in 2 Varianten: als Theme und als Skeleton. Hierbei beinhaltet das Skeleton das Theme, sowie weitere Funktionen und Konfigurationen. Lerne mehr \u00fcber das <a href=\"\/de\/hadron\/skeleton\/einleitung\">Hadron Skeleton<\/a>.<\/p>\n<h2 id=\"funktionen\"><a href=\"#funktionen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Funktionen<\/h2>\n<p>Das Hadron Theme bietet folgende Funktionen:<\/p>\n<h3 id=\"deutsches-sprachpaket\"><a href=\"#deutsches-sprachpaket\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>deutsches Sprachpaket<\/h3>\n<p>Das Hadron Theme beinhaltet ein deutsches Sprachpaket, welches die Benutzeroberfl\u00e4che und die Konfigurationen ins Deutsche \u00fcbersetzt. Die Englische Sprache ist jedoch weiterhin verf\u00fcgbar.<\/p>\n<h3 id=\"responsive-tabellen\"><a href=\"#responsive-tabellen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>responsive Tabellen<\/h3>\n<p>Tabellen k\u00f6nnen automatisch f\u00fcr mobile Ger\u00e4te optimiert werden. Dies bedeutet, dass Tabellen auf mobilen Ger\u00e4ten anders dargestellt werden, um die Lesbarkeit zu verbessern. Lerne mehr \u00fcber mobilfreundliche Tabellen auf <a href=\"https:\/\/grav.demo.crabston.dev\/komponenten#mobilfreundliche-tabellen\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">grav.demo.crabston.dev\/komponenten<\/a>.<\/p>\n<h3 id=\"navigation-mit-drop-down-\"><a href=\"#navigation-mit-drop-down-\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Navigation mit Drop-down Menu<\/h3>\n<p>Die Navigation kann mit einem Drop-down Menu erweitert werden. Dies erlaubt, dass nicht nur die Hauptseiten, sondern auch die Unterseiten in der Navigation angezeigt werden:\n<img alt=\"Drop-down Menu\" src=\"\/images\/d\/r\/o\/p\/d\/dropdown-navigation-e4be9016.webp\"><\/p>\n<h3 id=\"angepinnte-beitraege-in-b\"><a href=\"#angepinnte-beitraege-in-b\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>angepinnte Beitr\u00e4ge in Blogs<\/h3>\n<p>Beitr\u00e4ge k\u00f6nnen angepinnt werden, um sie hervorzuheben. Dies ist besonders n\u00fctzlich, um wichtige Beitr\u00e4ge oder Ank\u00fcndigungen zu markieren.<\/p>\n<h3 id=\"eingebauter-support-fuer-\"><a href=\"#eingebauter-support-fuer-\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>eingebauter Support f\u00fcr Embed.ly<\/h3>\n<p>Embed.ly ist ein Dienst, der es erm\u00f6glicht, Inhalte von anderen Websites einzubetten. Das Hadron Theme unterst\u00fctzt Embed.ly, um Inhalte von anderen Websites einzubetten.<\/p>\n<h3 id=\"eingebauter-support-fuer--1\"><a href=\"#eingebauter-support-fuer--1\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>eingebauter Support f\u00fcr H5P<\/h3>\n<p>H5P ist ein Framework, um interaktive Inhalte zu erstellen. Das Hadron Theme unterst\u00fctzt H5P, um interaktive Inhalte in Grav einzubetten.<\/p>\n<h3 id=\"erweiterte-theme-optionen\"><a href=\"#erweiterte-theme-optionen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>erweiterte Theme Optionen<\/h3>\n<p>Das Hadron Theme bietet erweiterte Theme Optionen, um das Aussehen und Verhalten der Seite zu konfigurieren.<\/p>\n<h3 id=\"weitere-verbesserungen\"><a href=\"#weitere-verbesserungen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>weitere Verbesserungen<\/h3>\n<p>Das Hadron Theme enth\u00e4lt weitere Verbesserungen, um die Benutzererfahrung zu verbessern und das Theme an die Bed\u00fcrfnisse der Benutzer anzupassen.<\/p>\n<h2 id=\"weitere-schritte\"><a href=\"#weitere-schritte\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>weitere Schritte<\/h2>\n<p>Um das Hadron Theme zu installieren, folge der Anleitung <a href=\"\/de\/hadron\/theme\/installation\">Hadron Theme Installation<\/a>.<\/p><\/body>","tags":["Theme","Einleitung"],"image":"\/user\/pages\/06.docs\/01.theme\/01.einleitung\/dropdown-navigation.webp"},{"title":"Installation | Hadron Theme","date_published":"2024-10-08T00:00:00-07:00","id":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/installation","url":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/installation","content_html":"<body><div class=\"notices blue\">\n<p>Diese Anleitung zeigt die verschiedenen M\u00f6glichkeiten, um das Hadron Theme zu installieren und leitet dich durch die Installation des Hadron Themes auf einer bestehenden Grav Seite.<\/p>\n<\/div>\n\n<h2 id=\"installation\"><a href=\"#installation\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Installation<\/h2>\n<p>Das Hadron Theme kann auf verschiedene Arten installiert werden. Die Installation via den GPM (Grav Package Manager) erm\u00f6glicht eine schnelle und einfache Installation des Themes mit einem einfachen Terminalbefehl, w\u00e4hrend die manuelle Methode die Installation \u00fcber eine Zip-Datei erm\u00f6glicht. Es gibt auch eine M\u00f6glichkeit, das Theme via Git oder \u00fcber das Admin Plugin zu installieren.<\/p>\n<p>Das Theme selber ist n\u00fctzlich, jedoch kann es einfacher sein, eine Website mit dem Hadron Skeleton zu erstellen. Das Hadron Theme ist im <a href=\"https:\/\/github.com\/Crabston\/grav-skeleton-hadron\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Hadron Skeleton<\/a> enthalten, welches eine vollst\u00e4ndige Website beinhaltet. Dieses beinhaltet: Beispiele f\u00fcr Inhalte, Konfigurationen, Themes und Plugins.<\/p>\n<h3 id=\"1-gpm-installation-empfoh\"><a href=\"#1-gpm-installation-empfoh\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>1. GPM Installation (empfohlen)<\/h3>\n<p><em>Diese Methode wird aktuell noch nicht unterst\u00fctzt, da das Theme noch nicht im GPM verf\u00fcgbar ist. Bitte nutze eine andere Methode.<\/em><\/p>\n<p>Der einfachste Weg, dieses Theme zu installieren, ist \u00fcber den <a href=\"http:\/\/learn.getgrav.org\/advanced\/grav-gpm\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Grav Package Manager (GPM)<\/a> in deinem System-Terminal (auch Kommandozeile genannt). Tippe dazu im Root-Verzeichnis deiner Grav Installation folgenden Befehl:<\/p>\n<pre><code class=\"language-shell\">bin\/gpm install hadron<\/code><\/pre>\n<p>Dieser Befehl installiert das Hadron Theme in deinem <code>\/user\/themes<\/code> Verzeichnis innerhalb von Grav. Die Dateien des Themes k\u00f6nnen unter <code>\/deine\/seite\/grav\/user\/themes\/hadron<\/code> gefunden werden.<\/p>\n<p>Der Vorzug dieser Methode ist, dass du das Theme mit einem einfachen Befehl aktualisieren kannst:<\/p>\n<pre><code class=\"language-shell\">bin\/gpm update hadron<\/code><\/pre>\n<h3 id=\"2-git-installation\"><a href=\"#2-git-installation\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>2. Git Installation<\/h3>\n<p>Als Alternative kannst du das Theme auch \u00fcber Git installieren. Gehe dazu in dein <code>\/user\/themes<\/code> Verzeichnis und f\u00fchre folgenden Befehl aus:<\/p>\n<pre><code class=\"language-shell\">git clone https:\/\/github.com\/Crabston\/grav-theme-hadron.git hadron<\/code><\/pre>\n<p>Das Theme sollte nun im Verzeichnis <code>\/deine\/seite\/grav\/user\/themes\/hadron<\/code> zu finden sein.<\/p>\n<p>Um das Theme zu aktualisieren, kannst du einfach in das Theme-Verzeichnis wechseln und <code>git pull<\/code> ausf\u00fchren:<\/p>\n<pre><code class=\"language-shell\">cd \/deine\/seite\/grav\/user\/themes\/hadron\ngit pull<\/code><\/pre>\n<h3 id=\"3-admin-plugin-installati\"><a href=\"#3-admin-plugin-installati\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>3. Admin Plugin Installation<\/h3>\n<p><em>Diese Methode wird aktuell noch nicht unterst\u00fctzt, da das Theme noch nicht im GPM verf\u00fcgbar ist. Bitte nutze eine andere Methode.<\/em><\/p>\n<p>Wenn du das <a href=\"https:\/\/github.com\/getgrav\/grav-plugin-admin\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Admin Plugin<\/a> nutzt, kannst du das Theme direkt \u00fcber das Admin Plugin installieren. Gehe dazu in den Bereich <code>Themes<\/code> und klicke auf <code>Add<\/code> und suche nach <code>hadron<\/code>. W\u00e4hle das Theme aus und klicke auf <code>Install<\/code>.<\/p>\n<p>Das Theme wird nun in deinem <code>\/user\/themes<\/code> Verzeichnis installiert. Zudem kann es \u00fcber das Admin Plugin aktualisiert werden, wenn eine neue Version verf\u00fcgbar ist.<\/p>\n<h3 id=\"4-manuelle-installation-n\"><a href=\"#4-manuelle-installation-n\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>4. manuelle Installation (nicht empfohlen)<\/h3>\n<p>Um das Theme manuell zu installieren, lade einfach die Zip-Version dieses Repositories herunter und entpacke sie unter <code>\/deine\/seite\/grav\/user\/themes<\/code>. Benenne den Ordner dann in <code>hadron<\/code> um. Die Dateien des Themes k\u00f6nnen entweder auf <a href=\"https:\/\/github.com\/Crabston\/grav-theme-hadron\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">GitHub<\/a> oder \u00fcber <a href=\"http:\/\/getgrav.org\/downloads\/themes\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">GetGrav.org<\/a> gefunden werden.<\/p>\n<p>Du solltest nun alle Theme-Dateien unter <code>\/deine\/seite\/grav\/user\/themes\/hadron<\/code> haben.<\/p>\n<h2 id=\"weitere-schritte\"><a href=\"#weitere-schritte\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>weitere Schritte<\/h2>\n<p>Nach der Installation des Themes, kannst du das Theme in der <code>Grav Admin<\/code> Oberfl\u00e4che aktivieren. Gehe dazu in den Bereich <code>Themes<\/code> und w\u00e4hle <code>Hadron<\/code> aus. Klicke auf <code>Activate<\/code> um das Theme zu aktivieren.<\/p>\n<p>Das Theme ist nun aktiviert und sollte auf deiner Seite sichtbar sein. Du kannst nun die Theme-Einstellungen anpassen und die Seite nach deinen W\u00fcnschen gestalten. Lerne mehr \u00fcber die <a href=\"\/de\/hadron\/theme\/optionen\">Theme Optionen<\/a>.<\/p><\/body>","tags":["Theme","Installation"],"image":"\/user\/pages\/06.docs\/01.theme\/02.installation\/hero.webp"},{"title":"Optionen | Hadron Theme","date_published":"2024-10-17T00:00:00-07:00","id":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/optionen","url":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/optionen","content_html":"<div class=\"notices blue\">\n<p>Diese Anleitung zeigt, wie das Hadron Theme beliebig konfiguriert werden kann. Die Konfiguration kann entweder &uuml;ber die Datei oder das Admin Panel erfolgen.<\/p>\n<\/div>\n\n<h2 id=\"theme-optionen\"><a href=\"#theme-optionen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Theme Optionen<\/h2>\n<p>Das Hadron Theme bietet eine Vielzahl von Optionen, um das Theme beliebig anzupassen. Die Optionen enthalten die Standard Quark Einstellungen + einige zus&auml;tzliche Optionen von Hadron.<\/p>\n<h2 id=\"admin-panel\"><a href=\"#admin-panel\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Admin Panel<\/h2>\n<p>Um das Theme zu konfigurieren, navigiere im Admin Panel zu <code>Themes<\/code> und w&auml;hle das <code>Hadron<\/code> Theme aus.\n<a rel=\"lightbox\" href=\"\/images\/a\/d\/m\/i\/n\/admin-6f7f12f4.webp\">\n  <img alt=\"Hadron im Admin Panel\" src=\"\/images\/a\/d\/m\/i\/n\/admin-6f7f12f4.webp\">\n<\/a>\nDort findest du die Theme Optionen, gruppiert nach Hadron &amp; Quark Einstellungen.<\/p>\n<h3 id=\"hadron-einstellungen\"><a href=\"#hadron-einstellungen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Hadron Einstellungen<\/h3>\n<p>Die Hadron Einstellungen enthalten die folgenden Optionen:\n<a rel=\"lightbox\" href=\"\/images\/h\/a\/d\/r\/o\/hadron-settings-6ce6d091.webp\">\n  <img alt=\"Hadron Einstellungen\" src=\"\/images\/h\/a\/d\/r\/o\/hadron-settings-6ce6d091.webp\">\n<\/a><\/p>\n<ul>\n<li>\n<p><strong>H5P Source URL<\/strong>: The URL to the H5P library. This is required to use H5P content.<\/p>\n<\/li>\n<li>\n<p><strong>Show dropdown menu<\/strong>: Show a dropdown menu in the header navigation with subpages.<\/p>\n<\/li>\n<li>\n<p><strong>H5P Quelle URL<\/strong>: Die URL zur H5P Bibliothek. Dies ist erforderlich, um H5P-Inhalte zu verwenden.<\/p>\n<\/li>\n<li>\n<p><strong>Zeige Dropdowns im Men&uuml;<\/strong>: Zeige ein Dropdown-Men&uuml; in der Header-Navigation mit Unterseiten.<\/p>\n<\/li>\n<\/ul>\n<h3 id=\"quark-einstellungen\"><a href=\"#quark-einstellungen\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Quark Einstellungen<\/h3>\n<p>Die Quark Einstellungen enthalten die folgenden Optionen:\n<a rel=\"lightbox\" href=\"\/images\/q\/u\/a\/r\/k\/quark-settings-f331f550.webp\">\n  <img alt=\"Quark Einstellungen\" src=\"\/images\/q\/u\/a\/r\/k\/quark-settings-f331f550.webp\">\n<\/a><\/p>\n<ul>\n<li><strong>Produktionsmodus<\/strong>: Aktivieren oder deaktivieren des Produktionsmodus. Wenn aktiviert, werden minimierte CSS-Dateien verwendet.<\/li>\n<li><strong>Grid Gr&ouml;sse<\/strong>: Die Breite des Themes. Eine gr&ouml;ssere Grid Gr&ouml;sse f&uuml;hrt zu breiteren Layouts.<\/li>\n<li><em>Header Standards<\/em>\n<ul>\n<li><strong>Benutzerdefiniertes Favicon<\/strong>: Lade ein benutzerdefiniertes Favicon f&uuml;r die Website hoch<\/li>\n<li><strong>Benutzerdefiniertes Logo<\/strong>: Lade ein benutzerdefiniertes Logo f&uuml;r die Header-Navigation hoch<\/li>\n<li><strong>Benutzerdefiniertes mobiles Logo<\/strong>: Lade ein benutzerdefiniertes Logo f&uuml;r die mobile Navigation hoch<\/li>\n<li><strong>Fixierter Header<\/strong>: Aktivieren oder deaktivieren eines fixierten (sticky) Headers<\/li>\n<li><strong>Header animieren<\/strong>: Aktivieren oder deaktivieren eines animierten Headers beim Scrollen<\/li>\n<li><strong>Dunkler Header<\/strong>: Aktivieren oder deaktivieren eines dunklen Headers<\/li>\n<li><strong>Transparenter Header<\/strong>: Aktivieren oder deaktivieren eines transparenten Headers<\/li>\n<\/ul><\/li>\n<li><em>Footer Standards<\/em>\n<ul>\n<li><strong>Fixierter Footer<\/strong>: Aktivieren oder deaktivieren eines fixierten Footers (Footer immer zuunterst)<\/li>\n<\/ul><\/li>\n<li><em>Blog Standards<\/em>\n<ul>\n<li><strong>Blog URL<\/strong>: Die URL zur Blog-Seite<\/li>\n<li><strong>Hero Klassen<\/strong>: Die Standard Hero-Klassen f&uuml;r das Hero-Element auf der Blog-Seite<\/li>\n<\/ul><\/li>\n<li><em>Spectre.css Optionen<\/em>\n<ul>\n<li><strong>Experimentelles CSS<\/strong>: Aktivieren oder deaktivieren von experimentellen CSS-Funktionen<\/li>\n<li><strong>Icons CSS<\/strong>: Aktivieren oder deaktivieren des Icons CSS<\/li>\n<\/ul><\/li>\n<\/ul>\n<h2 id=\"configuration-file\"><a href=\"#configuration-file\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Configuration File<\/h2>\n<p>Alle oben genannten Einstellungen k&ouml;nnen auch &uuml;ber die Datei konfiguriert werden. Die Konfigurationsdatei befindet sich in <code>user\/config\/themes\/hadron.yaml<\/code>. Die Datei enth&auml;lt standardm&auml;ssig die folgenden Einstellungen:<\/p>\n<pre><code class=\"language-yaml\">grid-size: grid-lg        # Grid Gr&ouml;sse des Themes: grid-lg, grid-md, grid-sm\nblog-page: \/blog          # URL zur Blog-Seite\ndropdown:\n  enabled: true           # Zeige Dropdown-Men&uuml; in der Header-Navigation\nheader-fixed: true        # Aktiviere fixierten (sticky) Header\nheader-animated: true     # Aktiviere animierten Header beim Scrollen\nheader-dark: false        # Aktiviere dunklen Header\nheader-transparent: false # Aktiviere transparenten Header\nsticky-footer: true       # Aktiviere fixierten Footer (Footer immer zuunterst)\nspectre:\n  exp: false              # Aktiviere experimentelle CSS-Funktionen\n  icons: false            # Aktiviere Icons CSS\nproduction-mode: true     # Aktiviere Produktionsmodus (verwende minimierte CSS-Dateien)\n\n# URL zur H5P Bibliothek\nh5pembedrootpath: 'https:\/\/h5p.org\/h5p\/embed\/'\n\n# Standard Hero-Klassen f&uuml;r das Hero-Element auf der Blog-Seite\nblog_page_hero_classes: 'text-light title-h1h2 overlay-dark-gradient hero-large parallax'\n\n# Benutzerdefiniertes Favicon\nfavicon:\n  # Pfad zum Favicon\n  user\/themes\/hadron\/images\/favicon.svg:\n    name: favicon.svg       # Name der Datei\n    full_path: favicon.svg  # Pfad zur Datei\n    type: image\/svg+xml     # Dateityp\n    size: 4868              # Dateigr&ouml;sse\n    path: user\/themes\/hadron\/images\/favicon.svg\n\n# Benutzerdefiniertes Logo f&uuml;r die Header-Navigation\ncustom_logo:\n  user\/themes\/hadron\/images\/logo\/logo.svg:\n    name: logo.svg\n    full_path: logo.svg\n    type: image\/svg+xml\n    size: 4868\n    path: user\/themes\/hadron\/images\/logo\/logo.svg\n\n#...<\/code><\/pre>","tags":["Theme","Konfiguration"],"image":"\/user\/pages\/06.docs\/01.theme\/03.optionen\/admin.webp"},{"title":"Anpassen | Hadron Theme","date_published":"2024-10-17T00:00:00-07:00","id":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/anpassen","url":"https:\/\/mail.silent-company.com\/de\/docs\/theme\/anpassen","content_html":"<body><div class=\"notices blue\">\n<p>Diese Anleitung beschreibt, wie du das Hadron Theme anpassen kannst. Durch die Anpassung des Themes \u00e4nderst du mehr als nur einige Optionen: Du ver\u00e4nderst das Aussehen deiner Website, indem du den Quellcode des Themes (CSS\/ SCSS, JavaScript, Twig) bearbeitest.<\/p>\n<\/div>\n\n<div class=\"notices yellow\">\n<p>Da du CSS\/ SCSS, JavaScript und Twig Dateien bearbeitest, wird empfohlen, dass du \u00fcber Kenntnisse in diesen Sprachen verf\u00fcgst. Wenn du nicht vertraut mit ihnen bist, kannst du das Theme trotzdem anpassen, indem du die Theme-Optionen im Admin-Panel \u00e4nderst. Siehe die <a href=\"\/de\/hadron\/theme\/optionen\">Hadron Theme-Optionen<\/a> f\u00fcr weitere Informationen.<\/p>\n<\/div>\n<h2 id=\"varianten-zur-anpassung-d\"><a href=\"#varianten-zur-anpassung-d\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Varianten zur Anpassung des Themes<\/h2>\n<p>In Grav gibt es mehrere M\u00f6glichkeiten, ein Theme anzupassen (siehe <a href=\"https:\/\/learn.getgrav.org\/17\/themes\/customization\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Grav Docs<\/a> f\u00fcr weitere Informationen). Grunds\u00e4tzlich gibt es zwei M\u00f6glichkeiten, das Hadron Theme anzupassen:<\/p>\n<ol>\n<li>Bearbeiten des Quellcodes des Themes direkt <em>(nicht empfohlen)<\/em>: Du kannst den gesamten Quellcode eines Themes direkt bearbeiten. Obwohl dies der einfachste Weg ist, ein Theme anzupassen, wird dies nicht empfohlen, da du deine \u00c4nderungen verlierst, wenn du das Theme aktualisierst.<\/li>\n<li>Verwendung eines Child-\/ inherited Themes <em>(empfohlen)<\/em>: Du kannst ein Child Theme erstellen, das vom Hadron Theme erbt. Auf diese Weise kannst du das Theme anpassen, ohne deine \u00c4nderungen zu verlieren, wenn du Hadron aktualisierst. (Hadron selbst ist ein Child-Theme von Quark.)<\/li>\n<\/ol>\n<h2 id=\"hadron-skeleton\"><a href=\"#hadron-skeleton\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Hadron Skeleton<\/h2>\n<p>Der einfachste Weg, das Hadron Theme anzupassen, ist die Verwendung des <a href=\"https:\/\/github.com\/Crabston\/grav-skeleton-hadron\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Hadron Skeletons<\/a>. Der Hadron Skeleton ist ein vorinstalliertes Grav-Paket, das das Hadron Theme und einige Demo-Inhalte enth\u00e4lt.<\/p>\n<p>Das Hadron Skeleton enth\u00e4lt auch ein drittes Theme namens \u00abLocal\u00bb, das im Grunde das ist, was es klingt: ein lokales Theme, direkt im Skeleton, bereit zur Anpassung. Auf diese Weise kannst du das Theme anpassen, ohne deine \u00c4nderungen zu verlieren, wenn du das Theme aktualisierst.<\/p>\n<h2 id=\"andere-moeglichkeiten\"><a href=\"#andere-moeglichkeiten\" class=\"toc-anchor before\" data-anchor-icon=\"#\" aria-label=\"Anchor\"><\/a>Andere M\u00f6glichkeiten<\/h2>\n<p>Wenn du das Hadron Skeleton lieber nicht verwenden m\u00f6chtest, kannst du auch manuell ein Child Theme erstellen. Weitere Informationen findest du in den <a href=\"https:\/\/learn.getgrav.org\/17\/themes\/customization#theme-inheritance\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Grav Docs<\/a>. Dies ist n\u00fctzlich, wenn du bereits eine Grav-Installation hast und das Hadron Theme hinzuf\u00fcgen m\u00f6chtest. Wenn du jedoch eine neue Website mit Grav + Hadron erstellen m\u00f6chtest, ist das Skeleton m\u00f6glicherweise die bessere Wahl.<\/p>\n<p>Dennoch kann es n\u00fctzlich sein, einiges vom Local Theme zu \u00fcbernehmen, um die Anpassungen zu erleichtern. Den Code dazu findest du im <a href=\"https:\/\/github.com\/Crabston\/grav-skeleton-hadron\/tree\/main\/themes\/local\" target=\"_blank\" rel=\"nofollow noopener noreferrer\" class=\"external-link no-image\">Hadron Skeleton auf GitHub unter <code>themes\/local<\/code><\/a>.<\/p><\/body>","tags":["Theme","Konfiguration"],"image":"\/user\/pages\/06.docs\/01.theme\/04.customization\/hero.webp"}]}
