astro theme cody
v2.0.0
Um tema de blog minimalista criado com Astro. Uma construção inicial rápida e fácil para quem deseja começar seu próprio blog.
Ver demonstração · Reportar bug · Solicitar recurso
Motivação
Principais recursos
Demonstração
Início rápido
Comandos
Configurando seu site
Configuração do site, links de mídia social e links da barra de navegação
Adicionando postagens e projetos
Suporte multilíngue
Implantar
Funcionalidade Extra
Crédito
Embora já existam tantos temas de blog por aí, eu queria um que transmitisse aquela vibração de terminal/dev e alguns recursos que outros temas não tivessem.
Astro v4 rápido
Classes de utilitário TailwindCSS
Marcação HTML semântica e acessível
Responsivo e otimizado para SEO
Suporte multilíngue
Modo escuro/claro, usando variáveis Tailwind e CSS
Postagens e projetos fixados
Integração Astro Assets para imagens otimizadas
Postagens MD e MDX
Paginação
Feed RSS automático
Mapa do site gerado automaticamente
Componente de ícone svg do Astro Icon
Botão Voltar ao início
Confira a demonstração aqui.
Crie um novo repositório a partir deste modelo.
# npm 7+ npm create astro@latest -- --template kirontoo/astro-theme-cody # pnpm pnpm dlx create-astro --template kirontoo/astro-theme-cody
(voltar ao topo)
Todos os comandos são executados na raiz do projeto, em um terminal:
| Comando | Ação |
|---|---|
pnpm install | Instala dependências |
pnpm run dev | Inicia o servidor de desenvolvimento local em localhost:4321 |
pnpm run build | Crie seu site de produção para ./dist/ |
pnpm run preview | Visualize seu build localmente, antes de implantar |
pnpm run astro ... | Execute comandos CLI como astro add , astro check |
pnpm run astro -- --help | Obtenha ajuda usando o Astro CLI |
(voltar ao topo)
A configuração do seu site, links de mídia social e links da barra de navegação são todos colocados em src/consts.ts . Lá você pode configurar o título padrão do seu site, descrição, idioma, perfil, links de mídia social e links visíveis da barra de navegação.
Este tema utiliza coleções de conteúdo para organizar arquivos Markdown e/ou MDX, bem como frontmatter de verificação de tipo com um esquema -> src/content/config.ts .
Você pode encontrar exemplos de postagens de blog em src/content/blog e exemplos de projetos em src/content/project .
| Propriedade (* = obrigatório) | Descrição |
|---|---|
| título * | Título da sua postagem. Limitado a um máximo de 150 caracteres |
| descrição * | Breve descrição do seu post, que também será usada para SEO. Tem um comprimento máximo de 250 caracteres. |
| data de publicação * | Data de publicação |
| data de atualização | Data opcional que representa quando a postagem foi atualizada. Observe que esta data será usada em vez da data de publicação para ordenar as postagens, quando disponível. |
| heróiImagem | Imagem de capa opcional para sua postagem. Inclua uma src e uma propriedade alt . Verifique src/content/blog/first-post.md para ver um exemplo. |
| ogImagem | Imagem opcional usada para SEO. |
| etiquetas | Use tags opcionais para organizar suas postagens em categorias ou tópicos. Todas as tags serão mostradas em yourdomain.com/tags . |
| série | Use séries opcionais para organizar suas postagens em uma série de postagens. Todas as séries serão mostradas em yourdomain.com/series . |
| rascunho | Booleano opcional. Remove postagens de serem publicadas. |
| ordem | Valor numérico opcional de 1 a 5 para fixar determinadas postagens no topo. Limitado a apenas 5 postagens fixadas |
| esconder | Booleano opcional. Ocultar uma postagem na página /blog . Ainda aparecerá em /archive |
| Propriedade (* = obrigatório) | Descrição |
|---|---|
| título * | Título do seu projeto. Limitado a um máximo de 150 caracteres |
| descrição * | Breve descrição do seu projeto, que também será utilizado para SEO. |
| data de publicação * | Data de publicação |
| heróiImagem | Imagem de capa opcional para seu projeto. Inclua uma src e uma propriedade alt . Verifique src/pages/projects/project-1.md para obter um exemplo. |
| ogImagem | Imagem opcional usada para SEO. |
| pilha * | Uma lista de tecnologias utilizadas pelo seu projeto que serão renderizadas como ícones. Este tema usa a biblioteca SVG Logos, você pode usar icones.js.org para encontrar os ícones que precisa. |
| plataforma | Link para site ou demonstração |
| site | Link para site ou demonstração |
| GitHub | Link do seu repositório do github |
| rascunho | Booleano opcional. Remove projetos da publicação. |
| ordem | Valor numérico opcional de 1 a 5 para fixar determinados projetos no topo. Limitado a apenas 5 postagens fixadas |
(voltar ao topo)
Consulte o wiki para configurar o suporte multilíngue para o seu blog.
Astro fornece excelente documentação para implantar seus sites Astro em várias plataformas. Você pode encontrá-lo aqui.
Confira Astro Recipes para adicionar outras funcionalidades, como um feed RSS.
Este tema é baseado no tema Astro Cactus e Hugo Risotto.
(voltar ao topo)
