Ir para o conteúdo principal
Version: 2.0.0-beta.4

Blog

Configuração inicial#

Para configurar o blog do seu site, comece criando um diretório blog.

Em seguida, adicione um link do item ao seu blog dentro de docusaurus.config.js:

docusaurus.config.js
module.exports = {  themeConfig: {    // ...    navbar: {      items: [        // ...        {to: 'blog', label: 'Blog', position: 'left'}, // ou position: 'right'      ],    },  },};

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. A data da postagem é extraída do nome do arquivo.

Por exemplo, em meu-site/blog/2019-09-05-hello-docusaurus-v2.md:

---title: Bem-vindo ao Docusaurus v2author: Joel Marceyauthor_title: Co-criador do Docusaurus 1author_url: https://github.com/JoelMarceyauthor_image_url: https://graph.facebook.com/611217057/picture/?height=200&width=200tags: [hello, docusaurus-v2]description: Este é eu primeiro post no Docusaurus 2.image: https://i.imgur.com/mErPwqL.pnghide_table_of_contents: false---Bem-vindo a este blog. Esse blog foi criado com [**Docusaurus 2**](https://docusaurus.io/).
<!--truncate-->
Esse é o meu primeiro post no Docusaurus 2.
Um monte de exploração para seguir.

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 assim como outras opções.

  • author: O nome do autor a ser mostrado.
  • author_url: A URL a qual o nome do autor será vinculado. Este pode ser um endereço de perfil do GitHub, Twitter, Facebook, etc.
  • author_image_url: A URL para a foto de perfil do autor.
  • author_title: Uma descrição do autor.
  • title: O título do post.
  • slug: Permite customizar a URL do post (/<routeBasePath>/<slug>). Suporta a vários padrões: slug: my-blog-post, slug: /my/path/to/blog/post, slug: /.
  • date: A data de criação do post. Se não for especificado, pode ser extraído do nome do arquivo, por exemplo, 2021-04-15-post.mdx. Por padrão, é o horário de criação do arquivo Markdown.
  • tags: Uma lista de strings ou objetos de dois campos de string label e permalink para marcar para a sua publicação.
  • draft: Um sinalizador booleano que indica se o post ainda não deve ser publicado pois ainda é um rascunho. No entanto, postagens de rascunho serão exibidas durante o desenvolvimento.
  • description: A descrição do seu post, que se tornará o <meta name="description" content="..."/> e <meta property="og:description" content="..."/> em <head>, usado pelos motores de busca. Se este campo não estiver presente, ele irá para a primeira linha do conteúdo.
  • keywords: Meta tag de Palavras-chave, que se tornará a <meta name="keywords" content="keyword1,keyword2,..."/> no <head>, usadas pelos motores de busca.
  • image: Capa ou imagem em miniatura que será usada ao exibir o link para a sua publicação.
  • hide_table_of_content: Se deseja ocultar a tabela de conteúdos à direita. Por padrão, é false.

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 acima de <!--truncate--> será parte do resumo. Por exemplo:

---title: Truncation Example---Tudo isso fará parte do resumo da postagem do blog.
Até isso.
<!--truncate-->
Mas qualquer coisa daqui pra baixo não será.
Isso não.
Nem isso.

Feed#

Você pode gerar RSS/Atom feed passando feedOptions. Por padrão, os feeds RSS e Atom são gerados. Para desativar a geração de feed, defina feedOptions.type para null.

feedOptions?: {  type?: 'rss' | 'atom' | 'all' | null;  title?: string;  description?: string;  copyright: string;  language?: string; // valores possíveis: http://www.w3.org/TR/REC-html40/struct/dirlang.html#langcodes};

Exemplo de Uso:

docusaurus.config.js
module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        blog: {          feedOptions: {            type: 'all',            copyright: `Copyright © ${new Date().getFullYear()} Facebook, Inc.`,          },        },      },    ],  ],};

Acessando o feed:

O feed para RSS pode ser encontrado em:

https://{your-domain}/blog/rss.xml

e para o Atom:

https://{your-domain}/blog/atom.xml

Tópicos avançados#

Modo somente blog#

Você pode executar o seu site Docusaurus 2 sem uma landing page, em vez disso, ter a página da lista de postagens do seu blog como a página index. Defina o routeBasePath para ser '/' para indicar que é o caminho raiz.

docusaurus.config.js
module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        docs: false,        blog: {          path: './blog',          routeBasePath: '/', // Defina este valor como '/'.        },      },    ],  ],};
caution

Não se esqueça de excluir a página inicial existente em ./src/pages/index.js ou então haverá dois arquivos mapeados para a mesma rota!

Você também pode adicionar descrição meta para a página de lista do blog para melhor SEO:

docusaurus.config.js
module.exports = {  // ...  presets: [    [      '@docusaurus/preset-classic',      {        blog: {          blogTitle: 'Docusaurus blog!',          blogDescription: 'A Docusaurus powered blog!',        },      },    ],  ],};

Vários blogs#

Por padrão, o tema clássico pressupõe apenas um blog por site e, portanto, inclui apenas uma instância do plugin do blog. Se você gostaria de ter vários blogs em um único site, também é possível! Você pode adicionar outro blog, especificando outro plugin no plugin opção para docusaurus.config.js.

Defina o routeBasePath para a rota de URL na qual você deseja que seu segundo blog seja acessado. Observe que o routeBasePath aqui deve ser diferente do primeiro blog ou pode haver uma colisão entre itens! Além disso, defina o caminho para o diretório que contém as entradas do seu segundo blog.

Como documentado para plugins de multi-instância, você precisa atribuir um id exclusivo para os plugins.

docusaurus.config.js
module.exports = {  // ...  plugins: [    [      '@docusaurus/plugin-content-blog',      {        /**         * Obrigatório para qualquer plugin multi-instância         */        id: 'second-blog',        /**         * Rota de URL para a seção do blog do seu site.         * * NÃO * inclua uma barra final.         */        routeBasePath: 'my-second-blog',        /**         * Caminho para os dados no sistema de arquivos relativo ao diretório do site.         */        path: './my-second-blog',      },    ],  ],};

Como exemplo, nós hospedamos um segundo blog aqui.