astro theme cactus
v5.0.0
Astro Cactus es un iniciador simple y obstinado construido con el marco Astro. Úselo para crear un blog o sitio web fácil de usar.
Vea la demostración, alojada en Netlify
Cree un nuevo repositorio a partir de esta plantilla.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusReemplace pnpm con su elección de npm/hilado
| Dominio | Acción |
|---|---|
pnpm install | Instala dependencias |
pnpm dev | Inicia el servidor de desarrollo local en localhost:3000 |
pnpm build | Construya su sitio de producción en ./dist/ |
pnpm postbuild | Script de búsqueda de página para crear la búsqueda estática de las publicaciones de tu blog |
pnpm preview | Obtenga una vista previa de su compilación localmente, antes de implementarla |
pnpm sync | Genere tipos basados en su configuración en src/content/config.ts |
src/site.config.ts para obtener metadatos básicos del sitioastro.config.ts/public :src/styles/global.css con sus propios estilos claros y oscuros.src/site.config.ts . Puede encontrar más temas y opciones aquí.src/components/SocialList.astro para agregar/reemplazar su perfil de medios. Los íconos se pueden encontrar en icones.js.org, según las instrucciones de Astro Icon.src/content/post/ & src/content/note/ con archivos .md/mdx. Consulte a continuación para obtener más detalles.src/pages/og-image/[slug].png.ts en la función de marcado donde puede editar las clases html/tailwind según sea necesario . Puede utilizar este parque infantil como ayuda en su diseño.src/content/post/social-image.md . Puede encontrar más información sobre el frontmatter aquí.font-mono , ubicada en el archivo CSS global src/styles/global.css . Puede cambiar las fuentes eliminando la variante font-mono , después de lo cual TailwindCSS utilizará de forma predeterminada la pila de la familia de fuentes font-sans . Si ha bifurcado la plantilla, puede sincronizar la bifurcación con su propio proyecto, recordando no hacer clic en Descartar cambios ya que perderá los suyos.
Si tiene un repositorio de plantillas, puede agregar esta plantilla como remota, como se explica aquí.
Este tema utiliza colecciones de contenido para organizar archivos Markdown y MDX locales, así como también verificación de tipos con un esquema -> src/content/config.ts .
Agregar una publicación/nota es tan simple como agregar sus archivos .md(x) a la carpeta src/content/post y/o src/content/note , cuyo nombre de archivo se usará como slug/url. Las publicaciones incluidas en esta plantilla son un ejemplo de cómo estructurar su tema inicial. Además, Astro docs tiene una sección detallada sobre páginas de rebajas.
| Propiedad (*requerido) | Descripción |
|---|---|
| título * | Se explica por sí mismo. Se utiliza como enlace de texto a la publicación, h1 en la página de las publicaciones y propiedad del título de la página. Tiene una longitud máxima de 60 caracteres, configurada en src/content/config.ts |
| descripción * | Similar a lo anterior, utilizado como propiedad de descripción de SEO. Tiene una longitud mínima de 50 y una longitud máxima de 160 caracteres, establecida en el esquema de publicación. |
| fecha de publicación * | De nuevo, bastante simple. Para cambiar el formato/localización de la fecha, actualmente en-GB , actualice la opción de fecha en src/site.config.ts . Tenga en cuenta que también puede pasar opciones adicionales al componente <FormattedDate> si es necesario. |
| actualizadoFecha | Esta es una fecha opcional que representa cuándo se actualizó una publicación, en el mismo formato que la fecha de publicación. |
| etiquetas | Las etiquetas son opcionales con cualquier publicación creada. Cualquier etiqueta nueva se mostrará en yourdomain.com/posts & yourdomain.com/tags y generará las páginas yourdomain.com/tags/[yourTag] |
| portadaImagen | Este es un objeto opcional que agregará una imagen de portada en la parte superior de una publicación. Incluya tanto un src : " ruta a la imagen " como alt : " imagen alt ". Puede ver un ejemplo en src/content/post/cover-image.md . |
| ogImagen | Esta es una propiedad opcional. Se generará automáticamente una imagen OG para cada publicación en la que no se proporcione esta propiedad. Si desea crear el suyo propio para una publicación específica, incluya esta propiedad y un enlace a su imagen, el tema omitirá generar uno automáticamente. |
| borrador | Esta es una propiedad opcional ya que está configurada como falsa de forma predeterminada en el esquema. Al agregar verdadero, la publicación se filtrará de la compilación de producción en varios lugares, inc. llamadas getAllPosts(), imágenes og, feeds rss y páginas generadas. Puede ver un ejemplo en src/content/post/draft-post.md |
| Propiedad (*requerido) | Descripción |
|---|---|
| título * | cadena, longitud máxima 60 caracteres. |
| descripción | que se utilizará para la propiedad de meta descripción principal. |
| fecha de publicación * | Formato ISO 8601 con compensaciones permitidas. |
Astro Cactus incluye un útil fragmento de VSCode que crea un 'stub' inicial para publicaciones y notas, que se encuentra aquí -> .vscode/post.code-snippets . Comience a escribir la palabra frontmatter en su archivo .md(x) recién creado para activarlo. Los fragmentos de código de Visual Studio aparecen en IntelliSense mediante (⌃Espacio) en Mac, (Ctrl+Espacio) en Windows.
Esta integración trae una función de búsqueda estática para buscar notas y publicaciones de blogs. En su forma actual, pagefind sólo funciona una vez que se ha creado el sitio. Este tema agrega un script posterior a la compilación que debe ejecutarse después de que Astro haya creado el sitio. Puede obtener una vista previa localmente ejecutando build && postbuild.
Los resultados de la búsqueda solo incluyen páginas de publicaciones y notas. Si desea incluir otras o todas sus páginas, elimine o reubique el atributo data-pagefind-body en la etiqueta del artículo que se encuentra en src/layouts/BlogPost.astro y src/components/note/Note.astro .
También le permite filtrar publicaciones por etiquetas agregadas al principio de las publicaciones del blog. Si prefiere eliminar esto, elimine el atributo de datos data-pagefind-filter="tag" del enlace en src/components/blog/Masthead.astro .
Si prefiere no incluir esta integración, simplemente elimine el componente src/components/Search.astro y desinstale @pagefind/default-ui y pagefind de package.json. También deberá eliminar el script posterior a la compilación desde aquí.
Puede reducir la carga útil CSS inicial de su CSS, como se demuestra aquí, cargando de forma diferida los estilos de los componentes web.
Es posible que desee realizar un seguimiento del número de visitantes que recibe en su blog/sitio web para comprender las tendencias y las publicaciones/páginas populares que ha creado. Hay varios proveedores que se pueden utilizar, incluidos servidores web como vercel, netlify y cloudflare.
Este tema/plantilla no incluye una solución específica debido a que hay una serie de casos de uso y/u opciones que algunas personas pueden o no usar.
Es posible que se le solicite que incluya un fragmento dentro de la etiqueta HEAD de su sitio web al configurarlo, que se puede encontrar en src/layouts/Base.astro . Alternativamente, puede agregar el fragmento en src/components/BaseHead.astro .
Astro docs tiene una excelente sección y un desglose de cómo implementar su propio sitio Astro en varias plataformas y sus idiosincrasias.
De forma predeterminada, el sitio se creará (consulte la sección Comandos más arriba) en un directorio /dist .
Este tema fue inspirado en Hexo Theme Cactus.
MIT
