1.11.x

Translate

Adding a Blog

Configuração inicial

Para configurar o blog do seu site, primeiro crie um diretório blog dentro do diretório website do seu repositório.

Depois, adicione um link de cabeçalho ao seu blog lá no siteConfig.js:

headerLinks: [
    ...
    { blog: true, label: 'Blog' },
    ...
]

Adicionando posts

Para publicar no blog, crie um arquivo dentro do diretório de blog cujo nome esteja no formato AAAA-MM-DD-Título-do-meu-Post.md. Como você já deve ter adivinhado, a data do post é extraída do nome do arquivo.

Por exemplo, em website/blog/2017-08-18-Apresentando-o-Docusaurus.md:

---
author: Frank Li
authorURL: https://twitter.com/foobarbaz
authorFBID: 503283835
title: Introducing Docusaurus
---
Lorem Ipsum...

Opções do cabeçalho

O único campo obrigatório aqui é title. No entanto, também fornecemos opções para adicionar informações sobre o autor do post.

  • author - O nome do autor como ele vai aparecer dentro do post.
  • authorURL - O link associado com o autor. Pode ser um perfil do Twitter, Facebook, GitHub, etc.
  • authorFBID - O ID do perfil do Facebook do autor, usado para se obter a foto de perfil dele.
  • authorImageURL - O link para a imagem do autor. (Nota: Se você usa ambos o authorFBID e authorImageURL, authorFBID vai ter prioridade. Não inclua authorFBID se você quiser que authorImageURL apareça.)
  • title - O título do post.

Definindo um resumo para o post

Use o marcador <!--truncate--> no seu post para demarcar a parte do seu post que será mostrada como resumo ao visualizar todos os posts publicados. Tudo que estiver sobre <!--truncate--> será parte do resumo. Por exemplo:

---
title: Truncation Example
---
All this will be part of the blog post summary.

Isso aqui também.

<!--truncate-->

Mas tudo que estiver daqui pra baixo estará fora do resumo.

Isso aqui não.

Nem isso.

Alterando o número de posts mostrados na barra lateral

Por padrão, são mostrados na barra lateral os 5 posts mais recentes.

Você pode mudar a quantidade de posts mostrada ao adicionar uma configuração blogSidebarCount ao seu siteConfig.js.

As opções disponíveis são um inteiro representando o número de posts desejado ou uma string com o valor 'ALL'.

Exemplo:

blogSidebarCount: 'ALL',

Alterando o título da barra lateral

Você pode definir um título específico para a barra lateral adicionando uma configuração blogSidebarTitle ao seu siteConfig.js.

A opção é um objeto que pode ter as chaves default e all. O valor da chave default será o título padrão da barra lateral. O valor da chave all será o título da barra lateral caso a opção blogSidebarCount tenha sido configurada como 'ALL'.

Exemplo:

blogSidebarTitle: { default: 'Posts recentes', all: 'Todos os posts' },

Feed RSS

Docusaurus provides an RSS feed for your blog posts. Ambos os formatos RSS e Atom são compatíveis. This data is automatically added to your website page's HTML <HEAD> tag.

No feed RSS, é fornecido um resumo do texto do post até o marcador <!--truncate-->. Caso nenhum marcador <!--truncate--> seja encontrado, os primeiros 250 caracteres serão usados.

Botões de redes sociais

Se você quiser adicionar botões para o Facebook e/ou Twitter ao fim de seus posts, defina as opções de configuração do site facebookAppId e/ou twitter lá no siteConfig.js.

Tópicos avançados

Quero que meu site seja somente um blog.

Você pode fazer com que o site Docusaurus mostre o seu blog como página inicial ao invés de uma landing page.

Para isso:

  1. Crie um arquivo index.html em website/static/.
  2. Coloque o conteúdo do modelo abaixo em website/static/index.html
  3. Personalize o <title> de website/static/index.html
  4. Exclua a landing page dinâmica website/pages/en/index.js

Agora, quando o Docusaurus gerar ou construir o seu site, ele vai copiar o conteúdo de static/index.html e colocá-lo no diretório principal do site. O arquivo estático é servido quando um visitante chega em sua página. Quando a página for carregada, ela irá redirecionar o visitante para / blog.

Você pode usar este modelo:

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="refresh" content="0; url=blog/" />
    <script type="text/javascript">
      window.location.href = 'blog/';
    </script>
    <title>Title of Your Blog</title>
  </head>
  <body>
    If you are not redirected automatically, follow this
    <a href="blog/">link</a>.
  </body>
</html>
← DockerCustom Pages →