astro theme cactus
v5.0.0
Astro Cactus é um starter simples e opinativo construído com a estrutura Astro. Use-o para criar um blog ou site fácil de usar.
Confira a Demo, hospedada no Netlify
Crie um novo repositório a partir deste modelo.
# npm 7+
npm create astro@latest -- --template chrismwilliams/astro-theme-cactus
# pnpm
pnpm dlx create-astro --template chrismwilliams/astro-theme-cactusSubstitua pnpm pela sua escolha de npm/wire
| Comando | Ação |
|---|---|
pnpm install | Instala dependências |
pnpm dev | Inicia o servidor de desenvolvimento local em localhost:3000 |
pnpm build | Crie seu site de produção para ./dist/ |
pnpm postbuild | Script Pagefind para construir a pesquisa estática das postagens do seu blog |
pnpm preview | Visualize seu build localmente, antes de implantar |
pnpm sync | Gere tipos com base na sua configuração em src/content/config.ts |
src/site.config.ts para metadados básicos do siteastro.config.ts/public :src/styles/global.css com seus próprios estilos claro e escuro.src/site.config.ts . Você pode encontrar mais temas e opções aqui.src/components/SocialList.astro para adicionar/substituir seu perfil de mídia. Os ícones podem ser encontrados em icones.js.org, de acordo com as instruções do Astro Icon.src/content/post/ & src/content/note/ com arquivo(s) .md/mdx. Veja abaixo para mais detalhes.src/pages/og-image/[slug].png.ts para a função de marcação onde você pode editar as classes html/tailwind conforme necessário . Você pode usar este playground para auxiliar em seu design.src/content/post/social-image.md . Mais informações sobre frontmatter podem ser encontradas aquifont-mono , localizada no arquivo css global src/styles/global.css . Você pode alterar as fontes removendo a variante font-mono , após o qual TailwindCSS assumirá como padrão a pilha da família de fontes font-sans . Se você bifurcou o modelo, poderá sincronizar o fork com seu próprio projeto, lembrando-se de não clicar em Descartar alterações, pois você perderá o seu.
Se você tiver um repositório de modelos, poderá adicionar esse modelo como remoto, conforme discutido aqui.
Este tema utiliza coleções de conteúdo para organizar arquivos Markdown e MDX locais, bem como frontmatter de verificação de tipo com um esquema -> src/content/config.ts .
Adicionar uma postagem/nota é tão simples quanto adicionar seus arquivos .md(x) à pasta src/content/post e/ou src/content/note , cujo nome de arquivo será usado como slug/url. As postagens incluídas neste modelo servem como um exemplo de como estruturar seu frontmatter. Além disso, a documentação do Astro tem uma seção detalhada sobre páginas de descontos.
| Propriedade (* obrigatório) | Descrição |
|---|---|
| título * | Autoexplicativo. Usado como link de texto para a postagem, o h1 na página da postagem e a propriedade do título da página. Tem um comprimento máximo de 60 caracteres, definido em src/content/config.ts |
| descrição * | Semelhante ao acima, usado como propriedade de descrição de SEO. Tem um comprimento mínimo de 50 e um comprimento máximo de 160 caracteres, definido no esquema de postagem. |
| data de publicação * | Novamente muito simples. Para alterar o formato/localidade da data, atualmente en-GB , atualize a opção de data em src/site.config.ts . Observe que você também pode passar opções adicionais para o componente <FormattedDate> se necessário. |
| data atualizada | Esta é uma data opcional que representa quando uma postagem foi atualizada, no mesmo formato quepublishDate. |
| etiquetas | As tags são opcionais em qualquer postagem criada. Quaisquer novas tags serão mostradas em yourdomain.com/posts & yourdomain.com/tags e gerarão as páginas yourdomain.com/tags/[yourTag] |
| imagem da capa | Este é um objeto opcional que adicionará uma imagem de capa ao topo de uma postagem. Inclua src : " path-to-image " e alt : " image alt ". Você pode ver um exemplo em src/content/post/cover-image.md . |
| ogImagem | Esta é uma propriedade opcional. Uma imagem OG será gerada automaticamente para cada postagem onde esta propriedade não for fornecida. Se você quiser criar o seu próprio para uma postagem específica, inclua esta propriedade e um link para sua imagem, o tema irá pular a geração automática de uma. |
| rascunho | Esta é uma propriedade opcional, pois é definida como falsa por padrão no esquema. Ao adicionar true, a postagem será filtrada da construção de produção em vários lugares, inc. chamadas getAllPosts(), imagens og, feeds rss e páginas geradas. Você pode ver um exemplo em src/content/post/draft-post.md |
| Propriedade (* obrigatório) | Descrição |
|---|---|
| título * | string, comprimento máximo de 60 caracteres. |
| descrição | a ser usado para a propriedade de meta descrição do cabeçalho. |
| data de publicação * | Formato ISO 8601 com deslocamentos permitidos. |
Astro Cactus inclui um snippet VSCode útil que cria um 'stub' de frontmatter para postagens e notas, encontrado aqui -> .vscode/post.code-snippets . Comece a digitar a palavra frontmatter em seu arquivo .md(x) recém-criado para acioná-lo. Os trechos de código do Visual Studio aparecem no IntelliSense por meio de (⌃Space) no Mac, (Ctrl+Space) no Windows.
Essa integração traz um recurso de pesquisa estática para pesquisar postagens e notas de blog. Em sua forma atual, o pagefind só funciona depois que o site é construído. Este tema adiciona um script pós-construção que deve ser executado após o Astro construir o site. Você pode visualizar localmente executando build && postbuild.
Os resultados da pesquisa incluem apenas páginas de postagens e notas. Se você quiser incluir outras/todas as suas páginas, remova/realoque o atributo data-pagefind-body para a tag do artigo encontrada em src/layouts/BlogPost.astro e src/components/note/Note.astro .
Ele também permite filtrar postagens por tags adicionadas no cabeçalho das postagens do blog. Se você preferir remover isso, remova o atributo de dados data-pagefind-filter="tag" do link em src/components/blog/Masthead.astro .
Se você preferir não incluir essa integração, simplesmente remova o componente src/components/Search.astro e desinstale @pagefind/default-ui e pagefind de package.json. Você também precisará remover o script pós-construção daqui.
Você pode reduzir a carga útil inicial do seu CSS, conforme demonstrado aqui, carregando lentamente os estilos dos componentes da web.
Você pode acompanhar o número de visitantes que recebe em seu blog/site para entender as tendências e as postagens/páginas populares que você criou. Existem vários provedores que você pode usar, incluindo hosts da web como vercel, netlify e cloudflare.
Este tema/modelo não inclui uma solução específica devido à existência de vários casos de uso e/ou opções que algumas pessoas podem ou não usar.
Pode ser solicitado que você inclua um snippet dentro da tag HEAD do seu site ao configurá-lo, que pode ser encontrado em src/layouts/Base.astro . Alternativamente, você pode adicionar o snippet em src/components/BaseHead.astro .
Astro docs tem uma ótima seção e detalhes de como implantar seu próprio site Astro em várias plataformas e suas idiossincrasias.
Por padrão, o site será construído (veja a seção Comandos acima) em um diretório /dist .
Este tema foi inspirado no Hexo Theme Cactus
MIT
