astro theme cactus
v5.0.0
Astro Cactus ist ein einfacher Starter mit eigener Meinung, der mit dem Astro-Framework erstellt wurde. Verwenden Sie es, um einen benutzerfreundlichen Blog oder eine Website zu erstellen.
Schauen Sie sich die Demo an, gehostet auf Netlify
Erstellen Sie aus dieser Vorlage ein neues Repo.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusErsetzen Sie pnpm durch ein npm/Garn Ihrer Wahl
| Befehl | Aktion |
|---|---|
pnpm install | Installiert Abhängigkeiten |
pnpm dev | Startet den lokalen Entwicklungsserver bei localhost:3000 |
pnpm build | Erstellen Sie Ihren Produktionsstandort auf ./dist/ |
pnpm postbuild | Pagefind-Skript zum Erstellen der statischen Suche Ihrer Blog-Beiträge |
pnpm preview | Sehen Sie sich Ihren Build lokal in der Vorschau an, bevor Sie ihn bereitstellen |
pnpm sync | Generieren Sie Typen basierend auf Ihrer Konfiguration in src/content/config.ts |
src/site.config.ts für grundlegende Site-Metadatenastro.config.ts/public :src/styles/global.css mit Ihren eigenen hellen und dunklen Stilen.src/site.config.ts zu finden ist. Weitere Themen und Optionen finden Sie hier.src/components/SocialList.astro um Ihr Medienprofil hinzuzufügen/zu ersetzen. Symbole finden Sie unter icones.js.org gemäß den Anweisungen von Astro Icon.src/content/post/ und src/content/note/ mit .md/mdx-Datei(en). Weitere Einzelheiten finden Sie weiter unten.src/pages/og-image/[slug].png.ts für die Markup-Funktion, wo Sie die HTML/Tailwind-Klassen nach Bedarf bearbeiten können . Sie können diesen Spielplatz als Unterstützung für Ihr Design nutzen.src/content/post/social-image.md . Weitere Informationen zu frontmatter finden Sie hierfont-mono fest, die sich in der globalen CSS-Datei src/styles/global.css befindet. Sie können Schriftarten ändern, indem Sie die Variante font-mono entfernen. Anschließend verwendet TailwindCSS standardmäßig den Schriftartenfamilienstapel font-sans . Wenn Sie die Vorlage geforkt haben, können Sie die Verzweigung mit Ihrem eigenen Projekt synchronisieren. Denken Sie daran , nicht auf „Änderungen verwerfen“ zu klicken, da Sie sonst Ihre eigenen verlieren.
Wenn Sie über ein Vorlagen-Repository verfügen, können Sie diese Vorlage wie hier beschrieben als Remote hinzufügen.
Dieses Theme nutzt Content Collections zum Organisieren lokaler Markdown- und MDX-Dateien sowie zur Typprüfung von Frontmatter mit einem Schema -> src/content/config.ts .
Das Hinzufügen eines Beitrags/einer Notiz ist so einfach wie das Hinzufügen Ihrer .md(x)-Dateien zum Ordner src/content/post und/oder src/content/note , dessen Dateiname als Slug/URL verwendet wird. Die in dieser Vorlage enthaltenen Beiträge dienen als Beispiel für die Strukturierung Ihres Titels. Darüber hinaus gibt es in den Astro-Dokumenten einen detaillierten Abschnitt zu Markdown-Seiten.
| Eigenschaft (* erforderlich) | Beschreibung |
|---|---|
| Titel * | Selbsterklärend. Wird als Textlink zum Beitrag, als h1 auf der Seite des Beitrags und als Titeleigenschaft der Seite verwendet. Hat eine maximale Länge von 60 Zeichen, eingestellt in src/content/config.ts |
| Beschreibung * | Ähnlich wie oben, wird als SEO-Beschreibungseigenschaft verwendet. Hat eine Mindestlänge von 50 und eine Höchstlänge von 160 Zeichen, die im Post-Schema festgelegt ist. |
| Veröffentlichungsdatum * | Wieder ziemlich einfach. Um das Datumsformat/Gebietsschema zu ändern, derzeit en-GB , aktualisieren Sie die Datumsoption in src/site.config.ts . Beachten Sie, dass Sie bei Bedarf auch zusätzliche Optionen an die Komponente <FormattedDate> übergeben können. |
| Aktualisiertes Datum | Dies ist ein optionales Datum, das angibt, wann ein Beitrag aktualisiert wurde, im gleichen Format wie „publishDate“. |
| Tags | Tags sind für jeden erstellten Beitrag optional. Alle neuen Tags werden in yourdomain.com/posts und yourdomain.com/tags angezeigt und generieren die Seite(n) yourdomain.com/tags/[yourTag] |
| coverImage | Dies ist ein optionales Objekt, das oben in einem Beitrag ein Titelbild hinzufügt. Fügen Sie sowohl src : „ path-to-image “ als auch alt : „ image alt “ ein. Sie können ein Beispiel in src/content/post/cover-image.md ansehen. |
| ogImage | Dies ist eine optionale Eigenschaft. Für jeden Beitrag, in dem diese Eigenschaft nicht bereitgestellt wird , wird automatisch ein OG-Bild generiert. Wenn Sie für einen bestimmten Beitrag ein eigenes Bild erstellen möchten, fügen Sie diese Eigenschaft und einen Link zu Ihrem Bild hinzu. Das Thema überspringt dann die automatische Generierung eines Bildes. |
| Entwurf | Dies ist eine optionale Eigenschaft, da sie im Schema standardmäßig auf „false“ gesetzt ist. Durch das Hinzufügen von „true“ wird der Beitrag an mehreren Stellen aus dem Produktions-Build herausgefiltert, u. a. getAllPosts()-Aufrufe, Og-Bilder, RSS-Feeds und generierte Seiten. Ein Beispiel finden Sie unter src/content/post/draft-post.md |
| Eigenschaft (* erforderlich) | Beschreibung |
|---|---|
| Titel * | Zeichenfolge, maximale Länge 60 Zeichen. |
| Beschreibung | zur Verwendung für die Head-Meta-Beschreibungseigenschaft. |
| Veröffentlichungsdatum * | ISO 8601-Format mit zulässigen Offsets. |
Astro Cactus enthält ein hilfreiches VSCode-Snippet, das einen Frontmatter-Stub für Beiträge und Notizen erstellt. Dieses finden Sie hier -> .vscode/post.code-snippets . Beginnen Sie mit der Eingabe des Wortes frontmatter in Ihrer neu erstellten .md(x)-Datei, um es auszulösen. Visual Studio-Codeausschnitte werden in IntelliSense über (⌃Leertaste) auf dem Mac und (Strg+Leertaste) unter Windows angezeigt.
Diese Integration bietet eine statische Suchfunktion zum Durchsuchen von Blogbeiträgen und Notizen. In seiner aktuellen Form funktioniert pagefind erst, wenn die Site erstellt wurde. Dieses Thema fügt ein Postbuild-Skript hinzu, das ausgeführt werden sollte, nachdem Astro die Site erstellt hat. Sie können eine lokale Vorschau anzeigen, indem Sie sowohl Build als auch Postbuild ausführen.
Suchergebnisse umfassen nur Seiten aus Beiträgen und Notizen. Wenn Sie andere/alle Ihre Seiten einschließen möchten, entfernen Sie das Attribut data-pagefind-body bzw. verschieben Sie es neu in das Artikel-Tag in src/layouts/BlogPost.astro und src/components/note/Note.astro .
Außerdem können Sie Beiträge nach Tags filtern, die im Vordergrund von Blogbeiträgen hinzugefügt werden. Wenn Sie dies lieber entfernen möchten, entfernen Sie das Datenattribut data-pagefind-filter="tag" aus dem Link in src/components/blog/Masthead.astro .
Wenn Sie diese Integration lieber nicht einbinden möchten, entfernen Sie einfach die Komponente src/components/Search.astro und deinstallieren Sie sowohl @pagefind/default-ui als auch pagefind aus package.json. Sie müssen hier auch das Postbuild-Skript entfernen.
Sie können die anfängliche CSS-Nutzlast Ihres CSS reduzieren, wie hier gezeigt, indem Sie die Stile der Webkomponenten verzögert laden.
Möglicherweise möchten Sie die Anzahl der Besucher verfolgen, die Sie auf Ihrem Blog/Ihrer Website erhalten, um Trends und beliebte Beiträge/Seiten zu verstehen, die Sie erstellt haben. Es gibt eine Reihe von Anbietern, die man nutzen könnte, darunter Webhoster wie Vercel, Netlify und Cloudflare.
Dieses Thema/diese Vorlage enthält keine spezifische Lösung, da es eine Reihe von Anwendungsfällen und/oder Optionen gibt, die einige Leute möglicherweise verwenden oder nicht.
Möglicherweise werden Sie beim Einrichten Ihrer Website aufgefordert, ein Snippet in das HEAD -Tag einzufügen, das in src/layouts/Base.astro zu finden ist. Alternativ können Sie das Snippet in src/components/BaseHead.astro hinzufügen.
Astro-Dokumente enthalten einen großartigen Abschnitt und eine Aufschlüsselung zur Bereitstellung Ihrer eigenen Astro-Site auf verschiedenen Plattformen und deren Besonderheiten.
Standardmäßig wird die Site in einem /dist -Verzeichnis erstellt (siehe Abschnitt „Befehle“ oben).
Dieses Thema wurde vom Hexo Theme Cactus inspiriert
MIT
