astro theme cody
v2.0.0
Ein minimalistisches Blog-Theme, erstellt mit Astro. Ein schneller und einfacher Starter-Build für alle, die ihr eigenes Blog starten möchten.
Demo ansehen · Fehler melden · Funktion anfordern
Motivation
Hauptmerkmale
Demo
Schnellstart
Befehle
Konfigurieren Ihrer Website
Site-Konfiguration, Social-Media-Links und Navbar-Links
Beiträge und Projekte hinzufügen
Mehrsprachige Unterstützung
Einsetzen
Zusätzliche Funktionalität
Kredit
Obwohl es bereits so viele Blog-Themen gibt, wollte ich eines, das den Terminal-/Entwickler-Touch ausstrahlt und ein paar Funktionen bietet, die andere Themen nicht hatten.
Astro v4 Schnell
TailwindCSS-Dienstprogrammklassen
Zugängliches, semantisches HTML-Markup
Reaktionsschnell und SEO-freundlich
Mehrsprachige Unterstützung
Dunkel-/Hellmodus mit Tailwind- und CSS-Variablen
Angepinnte Beiträge und Projekte
Astro Assets-Integration für optimierte Bilder
MD- und MDX-Beiträge
Pagination
Automatischer RSS-Feed
Automatisch generierte Sitemap
Astro Icon SVG-Symbolkomponente
Schaltfläche „Zurück nach oben“.
Schauen Sie sich die Demo hier an.
Erstellen Sie aus dieser Vorlage ein neues Repo.
# npm 7+ npm create astro@latest -- --template kirontoo/astro-theme-cody # pnpm pnpm dlx create-astro --template kirontoo/astro-theme-cody
(zurück nach oben)
Alle Befehle werden im Stammverzeichnis des Projekts von einem Terminal aus ausgeführt:
| Befehl | Aktion |
|---|---|
pnpm install | Installiert Abhängigkeiten |
pnpm run dev | Startet den lokalen Entwicklungsserver bei localhost:4321 |
pnpm run build | Erstellen Sie Ihren Produktionsstandort auf ./dist/ |
pnpm run preview | Sehen Sie sich Ihren Build lokal in der Vorschau an, bevor Sie ihn bereitstellen |
pnpm run astro ... | Führen Sie CLI-Befehle wie astro add oder astro check aus |
pnpm run astro -- --help | Erhalten Sie Hilfe bei der Verwendung der Astro-CLI |
(zurück nach oben)
Ihre Site-Konfiguration, Social-Media-Links und Navbar-Links werden alle in src/consts.ts platziert. Dort können Sie den Standardtitel, die Beschreibung, die Sprache, das Profil, die Links zu sozialen Medien und die sichtbaren Navigationsleistenlinks Ihrer Website konfigurieren.
Dieses Theme nutzt Content Collections zum Organisieren von Markdown- und/oder MDX-Dateien sowie zur Typprüfung von Frontmatter mit einem Schema -> src/content/config.ts .
Beispiele für Blogbeiträge finden Sie in src/content/blog und Beispiele für Projekte in src/content/project .
| Eigenschaft (* = erforderlich) | Beschreibung |
|---|---|
| Titel * | Titel Ihres Beitrags. Begrenzt auf maximal 150 Zeichen |
| Beschreibung * | Kurze Beschreibung Ihres Beitrags, die auch für SEO verwendet wird. Hat eine maximale Länge von 250 Zeichen. |
| Veröffentlichungsdatum * | Veröffentlichungsdatum |
| Aktualisierungsdatum | Optionales Datum, das angibt, wann der Beitrag aktualisiert wurde. Beachten Sie, dass dieses Datum anstelle des Veröffentlichungsdatums verwendet wird, um Beiträge zu bestellen, sofern verfügbar. |
| heroImage | Optionales Titelbild für Ihren Beitrag. Fügen Sie sowohl eine src als auch eine alt -Eigenschaft ein. Ein Beispiel finden Sie unter src/content/blog/first-post.md . |
| ogImage | Optionales Bild für SEO. |
| Tags | Verwenden Sie optionale Tags, um Ihre Beiträge in Kategorien oder Themen zu organisieren. Alle Tags werden in yourdomain.com/tags angezeigt. |
| Serie | Verwenden Sie optionale Serien, um Ihre Beiträge in einer Reihe von Beiträgen zu organisieren. Alle Serien werden unter yourdomain.com/series angezeigt. |
| Entwurf | Optionaler boolescher Wert. Entfernt Beiträge aus der Veröffentlichung. |
| Befehl | Optionaler Zahlenwert von 1 bis 5, um bestimmte Beiträge oben anzuheften. Begrenzt auf nur 5 angepinnte Beiträge |
| verstecken | Optionaler boolescher Wert. Verstecken Sie einen Beitrag auf der Seite /blog . Wird weiterhin in /archive angezeigt |
| Eigenschaft (* = erforderlich) | Beschreibung |
|---|---|
| Titel * | Titel Ihres Projekts. Begrenzt auf maximal 150 Zeichen |
| Beschreibung * | Kurze Beschreibung Ihres Projekts, die auch für SEO verwendet wird. |
| Veröffentlichungsdatum * | Veröffentlichungsdatum |
| heroImage | Optionales Titelbild für Ihr Projekt. Fügen Sie sowohl eine src als auch eine alt -Eigenschaft ein. Ein Beispiel finden Sie unter src/pages/projects/project-1.md . |
| ogImage | Optionales Bild für SEO. |
| Stapel * | Eine Liste der von Ihrem Projekt verwendeten Technologien, die als Symbole gerendert werden. Dieses Thema verwendet die SVG-Logos-Bibliothek. Sie können icones.js.org verwenden, um die benötigten Symbole zu finden. |
| Plattform | Link zur Website oder Demo |
| Webseite | Link zur Website oder Demo |
| Github | Ihr Github-Repo-Link |
| Entwurf | Optionaler boolescher Wert. Entfernt Projekte aus der Veröffentlichung. |
| Befehl | Optionaler Zahlenwert von 1 bis 5, um bestimmte Projekte oben anzuheften. Begrenzt auf nur 5 angepinnte Beiträge |
(zurück nach oben)
Sehen Sie sich das Wiki an, um mehrsprachige Unterstützung für Ihr Blog einzurichten.
Astro bietet eine hervorragende Dokumentation für die Bereitstellung Ihrer Astro-Websites auf verschiedenen Plattformen. Sie können es hier finden.
Schauen Sie sich Astro Recipes an, um weitere Funktionen wie einen RSS-Feed hinzuzufügen.
Dieses Thema basiert auf dem Thema Astro Cactus und Hugo Risotto.
(zurück nach oben)
