Download blog template - download do código-fonte blog template

blog template

Outras categorias

1.0.0

Baixar

Modelo de blog científico baseado em AI Summer

exemplo-casa

O modelo atual pode ser usado para blogs científicos, pois suporta uma ampla variedade de componentes necessários, como:

Renderização de látex
Blocos de código com destaque
Referências e citações
Incorporar gifs e vídeos
Componentes interativos
Índice
Artigos semelhantes

Outras características importantes:

Capacidade de filtrar e exibir postagens por tópico
Páginas de autor personalizáveis
100% responsivo
As páginas podem ser criadas com código React padrão ou usando Markdown
Pesquise com um índice local usando flexsearch
Pronto para SEO
Imagens responsivas e pipeline de pré-processamento de imagens
Google Analytics e gerenciador de tags
geração de robots.txt
Geração de feed XML
Geração de mapa do site

Veja um exemplo ao vivo em nosso site

O modelo é baseado em theaisummer.com, do qual retiramos todo o material desnecessário para fornecer uma estrutura mínima, pronta para uso, mas rica em recursos para blogs científicos.

exemplo-blog-1

Informações importantes

O modelo foi construído com Gatsby v2, portanto, é necessária alguma familiaridade com React. Para quem deseja customizá-lo, recomendamos fortemente conferir a documentação oficial do Gatsby
Typescript e TSX são usados em vez de Javascript
O pré-processador Sass é usado para estilizar
MDX é usado em vez de Markdown para que possamos adicionar componentes React personalizados dentro do markdown. Isso nos permite alta capacidade de personalização, widgets interativos e muito mais.
Latex é renderizado com Katex e remark-math
Blocos de código são renderizados com prism-react-renderer
Seguindo o paradigma Gatsby, GraphQL é usado para consultar o conteúdo do site
O conteúdo também pode ser obtido usando arquivos YAML
Os formulários podem ser criados usando react-hook-form
Animações com suporte de rolagem

exemplo-blog-2

Como executar o modelo

Instale as dependências necessárias

 $ yarn install

Corra Gatsby

 $ yarn start

O que você precisa fazer antes de implantar?

Atualize gatsby-config com as informações do seu site
Faça upload de seus logotipos e ícones em assets/images/
Atualize o componente Seo.tsx
Atualize seus temas em styles/
Atualize os arquivos yaml no site-content

Como implantar

Crie os arquivos estáticos finais

 $ yarn build

Pré-visualizar o site

 $ yarn serve

Transfira a pasta public para a opção de hospedagem de sua preferência. Por exemplo, o AI Summer é implantado na hospedagem Firebase, mas qualquer armazenamento de objetos funcionará perfeitamente.

 $ firebase deploy

exemplo-home-2

Apoiar

Se você realmente gosta deste repositório e o acha útil, considere (★) marcá- lo com uma estrela, para que ele possa atingir um público mais amplo de pessoas com interesses semelhantes. Seria muito apreciado :)!

Contribuindo e relatando bugs

Você é mais que bem-vindo para contribuir com o modelo adicionando mais recursos, corrigindo bugs e muito mais. Lembra que este modelo foi criado por engenheiros de aprendizado de máquina e não por desenvolvedores web, então nossas sinceras desculpas antecipadamente?

Se você encontrar um bug, crie um problema no GitHub ou, melhor ainda, envie uma solicitação pull. Da mesma forma, se você tiver dúvidas, basta publicá-las como problemas do GitHub. Mais informações aqui.