1.14.6

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

To publish in the blog, create a file within the blog directory with a formatted name of YYYY-MM-DD-my-blog-post-title.md. Como você já deve ter adivinhado, a data do post é extraída do nome do arquivo.

For example, at website/blog/2017-12-14-introducing-docusaurus.md:

---
title: Introducing Docusaurus
author: Joel Marcey
authorURL: http://twitter.com/JoelMarcey
authorFBID: 611217057
authorTwitter: JoelMarcey
---
Lorem Ipsum...

Opções do cabeçalho

The only required field is title; however, we provide options to add author information to your blog post as well along with other options.

  • 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.
  • unlisted - The post will be accessible by directly visiting the URL but will not show up in the sidebar in the final build; during local development, the post will still be listed. Useful in situations where you want to share a WIP post with others for feedback.

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-->. If no <!--truncate--> tag is found, then all text up to 250 characters are used.

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. When the page loads, it will redirect the visitor to /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 →