astro theme cody

Tema Astro Cody

Un tema de blog minimalista creado con Astro. Una compilación inicial rápida y sencilla para cualquiera que quiera iniciar su propio blog.

Ver demostración · Informar error · Solicitar función

Tabla de contenido

• Motivación

• Características clave

• Manifestación

• Inicio rápido

• Comandos

• Configurando su sitio web

• Configuración del sitio, enlaces a redes sociales y enlaces a la barra de navegación

• Agregar publicaciones y proyectos

• Soporte multilingüe

• Desplegar

• Funcionalidad adicional

• Crédito

Motivación

Aunque ya existen tantos temas de blog, quería uno que emitiera esa sensación de terminal/desarrollador y algunas características que otros temas no tenían.

Características clave:

• Astro v4 rápido

• Clases de utilidad TailwindCSS

• Marcado HTML semántico y accesible

• Responsivo y compatible con SEO

• Soporte multilingüe

• Modo Oscuro/Claro, usando variables Tailwind y CSS

• Publicaciones y proyectos fijados

• Integración de Astro Assets para imágenes optimizadas

• Publicaciones MD y MDX

• Paginación

• Fuente RSS automática

• Mapa del sitio generado automáticamente

• Componente de icono Astro Icon svg

• Botón Volver al inicio

Manifestación

Vea la demostración aquí.

Inicio rápido

Cree un nuevo repositorio a partir de esta plantilla.

# npm 7+
npm create astro@latest -- --template kirontoo/astro-theme-cody

# pnpm
pnpm dlx create-astro --template kirontoo/astro-theme-cody

(volver arriba)

Comandos

Todos los comandos se ejecutan desde la raíz del proyecto, desde una terminal:

Dominio	Acción
pnpm install	Instala dependencias
pnpm run dev	Inicia el servidor de desarrollo local en localhost:4321
pnpm run build	Construya su sitio de producción en ./dist/
pnpm run preview	Obtenga una vista previa de su compilación localmente, antes de implementarla
pnpm run astro ...	Ejecute comandos CLI como astro add , astro check
pnpm run astro -- --help	Obtenga ayuda para usar Astro CLI

(volver arriba)

Configurando su sitio web

Configuración del sitio, enlaces a redes sociales y enlaces a la barra de navegación

La configuración de su sitio, los enlaces de redes sociales y los enlaces de la barra de navegación se encuentran en src/consts.ts . Allí puede configurar el título predeterminado, la descripción, el idioma, el perfil, los enlaces de redes sociales y los enlaces visibles de la barra de navegación de su sitio.

Agregar publicaciones y proyectos

Este tema utiliza colecciones de contenido para organizar archivos Markdown y/o MDX, así como también verificación de tipos con un esquema -> src/content/config.ts .

Puede encontrar ejemplos de publicaciones de blog en src/content/blog y ejemplos de proyectos en src/content/project .

Portada de la publicación del blog

Propiedad (* = requerida)	Descripción
título *	Título de tu publicación. Limitado a un máximo de 150 caracteres.
descripción *	Breve descripción de tu publicación, que también se utilizará para SEO. Tiene una longitud máxima de 250 caracteres.
fecha de publicación *	Fecha de publicación
actualizarFecha	Fecha opcional que representa cuándo se actualizó la publicación. Tenga en cuenta que esta fecha se utilizará en lugar de la fecha de publicación para ordenar publicaciones cuando estén disponibles.
héroeImagen	Imagen de portada opcional para tu publicación. Incluya una propiedad src y alt . Consulte src/content/blog/first-post.md para ver un ejemplo.
ogImagen	Imagen opcional utilizada para SEO.
etiquetas	Utilice etiquetas opcionales para organizar sus publicaciones en categorías o temas. Todas las etiquetas se mostrarán en yourdomain.com/tags .
serie	Utilice series opcionales para organizar sus publicaciones en una serie de publicaciones. Todas las series se mostrarán en yourdomain.com/series .
borrador	Booleano opcional. Elimina las publicaciones para que no se publiquen.
orden	Valor numérico opcional del 1 al 5 para fijar ciertas publicaciones en la parte superior. Limitado a solo 5 publicaciones fijadas
esconder	Booleano opcional. Ocultar una publicación en la página /blog . Seguirá apareciendo en /archive

Front-asunto del proyecto

Propiedad (* = requerida)	Descripción
título *	Título de tu proyecto. Limitado a un máximo de 150 caracteres.
descripción *	Breve descripción de tu proyecto, que también será utilizada para SEO.
fecha de publicación *	Fecha de publicación
héroeImagen	Imagen de portada opcional para su proyecto. Incluya una propiedad src y alt . Consulte src/pages/projects/project-1.md para ver un ejemplo.
ogImagen	Imagen opcional utilizada para SEO.
pila *	Una lista de tecnologías que utilizó su proyecto que se representarán como íconos. Este tema usa la biblioteca SVG Logos, puedes usar icones.js.org para encontrar los íconos que necesitas.
plataforma	Enlace al sitio web o demostración
sitio web	Enlace al sitio web o demostración
github	Su enlace de repositorio de github
borrador	Booleano opcional. Elimina la publicación de proyectos.
orden	Valor numérico opcional del 1 al 5 para fijar ciertos proyectos en la parte superior. Limitado a solo 5 publicaciones fijadas

(volver arriba)

Soporte multilingüe

Consulte la wiki para configurar la compatibilidad con varios idiomas para su blog.

Desplegar

Astro proporciona excelente documentación para implementar sus sitios web de Astro en varias plataformas. Puedes encontrarlo aquí.

Funcionalidad adicional

Consulte Astro Recipes para agregar otras funciones, como una fuente RSS.

Crédito

Este tema está basado en el tema Astro Cactus y Hugo Risotto.

(volver arriba)