astro theme cactus
v5.0.0
Astro Cactus est un démarreur simple et avisé construit avec le framework Astro. Utilisez-le pour créer un blog ou un site Web facile à utiliser.
Découvrez la démo, hébergée sur Netlify
Créez un nouveau dépôt à partir de ce modèle.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusRemplacez pnpm par votre choix de npm / fil
| Commande | Action |
|---|---|
pnpm install | Installe les dépendances |
pnpm dev | Démarre le serveur de développement local sur localhost:3000 |
pnpm build | Construisez votre site de production sur ./dist/ |
pnpm postbuild | Script Pagefind pour créer la recherche statique de vos articles de blog |
pnpm preview | Prévisualisez votre build localement, avant de le déployer |
pnpm sync | Générez des types en fonction de votre configuration dans src/content/config.ts |
src/site.config.ts pour les métadonnées de base du siteastro.config.ts/public :src/styles/global.css avec vos propres styles clairs et sombres.src/site.config.ts . Vous pouvez trouver plus de thèmes et d’options ici.src/components/SocialList.astro pour ajouter/remplacer votre profil média. Les icônes peuvent être trouvées @ icones.js.org, selon les instructions d'Astro Icon.src/content/post/ & src/content/note/ avec un ou plusieurs fichiers .md/mdx. Voir ci-dessous pour plus de détails.src/pages/og-image/[slug].png.ts dans la fonction de balisage où vous pouvez modifier les classes html/tailwind si nécessaire. . Vous pouvez utiliser ce terrain de jeu pour faciliter votre conception.src/content/post/social-image.md . Plus d’informations sur le sujet peuvent être trouvées icifont-mono , située dans le fichier CSS global src/styles/global.css . Vous pouvez modifier les polices en supprimant la variante font-mono , après quoi TailwindCSS utilisera par défaut la pile de la famille de polices font-sans . Si vous avez créé le modèle, vous pouvez synchroniser le fork avec votre propre projet, en vous rappelant de ne pas cliquer sur Annuler les modifications, car vous perdrez le vôtre.
Si vous disposez d'un référentiel de modèles, vous pouvez ajouter ce modèle en tant que modèle distant, comme indiqué ici.
Ce thème utilise Content Collections pour organiser les fichiers Markdown et MDX locaux, ainsi que la vérification de type avec un schéma -> src/content/config.ts .
Ajouter une publication/note est aussi simple que d'ajouter vos fichiers .md(x) au dossier src/content/post et/ou src/content/note , dont le nom de fichier sera utilisé comme slug/url. Les articles inclus avec ce modèle sont là à titre d'exemple de la façon de structurer votre frontmatter. De plus, la documentation Astro contient une section détaillée sur les pages de démarques.
| Propriété (* obligatoire) | Description |
|---|---|
| titre * | Explicite. Utilisé comme lien texte vers la publication, le h1 sur la page des publications et la propriété de titre de la page. A une longueur maximale de 60 caractères, définie dans src/content/config.ts |
| description * | Semblable à ci-dessus, utilisé comme propriété de description de référencement. A une longueur minimale de 50 et une longueur maximale de 160 caractères, définie dans le schéma de publication. |
| Date de publication * | Encore une fois assez simple. Pour modifier le format/locale de la date, actuellement en-GB , mettez à jour l'option de date dans src/site.config.ts . Notez que vous pouvez également transmettre des options supplémentaires au composant <FormattedDate> si nécessaire. |
| Date mise à jour | Il s'agit d'une date facultative représentant le moment où une publication a été mise à jour, dans le même format que la date de publication. |
| balises | Les balises sont facultatives avec toute publication créée. Toute nouvelle balise sera affichée dans yourdomain.com/posts & yourdomain.com/tags et générera la ou les pages yourdomain.com/tags/[yourTag] |
| Image de couverture | Il s'agit d'un objet facultatif qui ajoutera une image de couverture en haut d'un message. Incluez à la fois un src : " path-to-image " et alt : " image alt ". Vous pouvez voir un exemple dans src/content/post/cover-image.md . |
| ogImage | Il s'agit d'une propriété facultative. Une image OG sera générée automatiquement pour chaque publication pour laquelle cette propriété n'est pas fournie. Si vous souhaitez créer le vôtre pour une publication spécifique, incluez cette propriété et un lien vers votre image, le thème ignorera alors automatiquement sa génération. |
| brouillon | Il s'agit d'une propriété facultative car elle est définie sur false par défaut dans le schéma. En ajoutant true, la publication sera filtrée de la version de production à plusieurs endroits, inc. Appels getAllPosts(), images og, flux RSS et pages générées. Vous pouvez voir un exemple dans src/content/post/draft-post.md |
| Propriété (* obligatoire) | Description |
|---|---|
| titre * | chaîne, longueur maximale 60 caractères. |
| description | à utiliser pour la propriété de méta description head. |
| Date de publication * | Format ISO 8601 avec décalages autorisés. |
Astro Cactus comprend un extrait de code VSCode utile qui crée un « stub » de présentation pour les publications et les notes, trouvé ici -> .vscode/post.code-snippets . Commencez à taper le mot frontmatter sur votre fichier .md(x) nouvellement créé pour le déclencher. Les extraits de code Visual Studio apparaissent dans IntelliSense via (⌃Space) sur Mac, (Ctrl+Espace) sur Windows.
Cette intégration apporte une fonctionnalité de recherche statique pour rechercher des articles de blog et des notes. Dans sa forme actuelle, pagefind ne fonctionne qu'une fois le site construit. Ce thème ajoute un script de post-construction qui doit être exécuté une fois qu'Astro a créé le site. Vous pouvez prévisualiser localement en exécutant à la fois build && postbuild.
Les résultats de recherche incluent uniquement les pages des publications et des notes. Si vous souhaitez inclure d'autres/toutes vos pages, supprimez/déplacez l'attribut data-pagefind-body vers la balise d'article trouvée dans src/layouts/BlogPost.astro et src/components/note/Note.astro .
Il vous permet également de filtrer les articles par balises ajoutées au début des articles de blog. Si vous préférez supprimer cela, supprimez l'attribut de données data-pagefind-filter="tag" du lien dans src/components/blog/Masthead.astro .
Si vous préférez ne pas inclure cette intégration, supprimez simplement le composant src/components/Search.astro et désinstallez @pagefind/default-ui et pagefind de package.json. Vous devrez également supprimer le script de post-construction à partir d'ici.
Vous pouvez réduire la charge utile CSS initiale de votre CSS, comme démontré ici, en chargeant paresseux les styles des composants Web.
Vous souhaiterez peut-être suivre le nombre de visiteurs que vous recevez sur votre blog/site Web afin de comprendre les tendances et les articles/pages populaires que vous avez créés. Il existe un certain nombre de fournisseurs que vous pouvez utiliser, notamment des hébergeurs Web tels que Vercel, Netlify et Cloudflare.
Ce thème/modèle n'inclut pas de solution spécifique en raison de l'existence d'un certain nombre de cas d'utilisation et/ou d'options que certaines personnes peuvent ou non utiliser.
Il vous sera peut-être demandé d'inclure un extrait de code dans la balise HEAD de votre site Web lors de sa configuration, qui peut être trouvé dans src/layouts/Base.astro . Vous pouvez également ajouter l'extrait dans src/components/BaseHead.astro .
Astro Docs contient une excellente section et une description de la façon de déployer votre propre site Astro sur diverses plates-formes et de leurs particularités.
Par défaut, le site sera construit (voir la section Commandes ci-dessus) dans un répertoire /dist .
Ce thème a été inspiré par Hexo Theme Cactus
MIT
