jekyll escrevendo novo post

Escrevendo um novo post

Este tutorial irá guiá-lo como escrever um post no Chirpy template, e itilits vale a pena ler, mesmo se você tiver usado Jekyll antes, já que muitos recursos exigem variáveis específicas a serem definidas.

Nomeação e caminho

Criar um novo arquivo chamado YYYY-MM-DD-TITLE.EXTENSION e colocá-lo no _posts do diretório raiz. Por favor, note que o EXTENSION deve ser um dos md e markdown. Se você quiser economizar tempo na criação de arquivos, considere usar o plugin Jekyll-Compose para conseguir isso.

Matéria frontal

Basicamente, você precisa preencher o Matéria Frontal como abaixo no topo do post:

---
title: TITLE
date: YYYY-MM-DD HH:MM:SS +/-TTTT
categories: [TOP_CATEGORIE, SUB_CATEGORIE]
tags: [TAG]     # TAG names should always be lowercase
---

💡 Os posts’ layout foi definido para post por padrão, não há necessidade de adicionar a variável layout no bloco Front Matter.

Fuso horário da Data

Para registrar com precisão a data de lançamento de uma postagem, você não deve apenas configurar o timezone de _config.yml mas também forneça o fuso horário postilits em variável date do seu bloco Front Matter. Formato: +/-TTTT, por exemplo. +0800.

Categorias e Tags

O categories de cada post são projetados para conter até dois elementos, e o número de elementos em tags pode ser zero ao infinito. Por exemplo

---
categories: [Animal, Insect]
tags: [bee]
---

Informações do Autor

As informações do autor do post geralmente não precisam ser preenchidas Matéria Frontal , eles serão obtidos a partir de variáveis social.name e a primeira entrada de social.links do arquivo de configuração por padrão. Mas você também pode substituí-lo da seguinte forma:

Adicionando informações de autor em _data/authors.yml (Se o seu site não tiver este arquivo, não hesite em criar um).

<author_id>:
  name: <full name>
  twitter: <twitter_of_author>
  url: <homepage_of_author>

E então use author para especificar uma única entrada ou authors para especificar várias entradas:

---
author: <author_id>                     # for single entry
# or
authors: [<author1_id>, <author2_id>]   # for multiple entries
---

Dito isto, a chave author também pode identificar várias entradas.

📍 O benefício de ler as informações do autor do arquivo _data/authors.yml é que a página terá a meta tag twitter:creator, é o que enriquece o Cartões Twitter e é bom para SEO.

Índice

Por padrão, o Tcapaz of Contents (TOC) é exibido no painel direito do post. Se você quiser desativá-lo globalmente, vá para _config.yml e definir o valor da variável toc para false. Se você quiser desativar o TOC para uma postagem específica, adicione o seguinte aos postilit Matéria Frontal:

---
toc: false
---

Comentários

A mudança global de comentários é definida por variável comments.active no arquivo _config.yml. Depois de selecionar um sistema de comentários para essa variável, os comentários serão ativados para todas as postagens.

Se você quiser fechar o comentário para uma postagem específica, adicione o seguinte ao Matéria Frontal do post:

---
comments: false
---

Matemática

Por razões de desempenho do site, o recurso matemático será carregado por padrão. Mas pode ser ativado por:

---
math: true
---

Depois de ativar o recurso matemático, você pode adicionar equações matemáticas com a seguinte sintaxe:

• Bloco de matemática deve ser adicionado com $$ math $$ com obrigatório linhas em branco antes e depois $$

• Matemática inline (em linhas) deve ser adicionado com $$ math $$ sem linha em branco antes ou depois $$

• Matemática inline (em listas) deve ser adicionado com \$$ math $$

<!-- Block math, keep all blank lines -->

$$
LaTeX_math_expression
$$

<!-- Inline math in lines, NO blank lines -->

"Lorem ipsum dolor sit amet, $$ LaTeX_math_expression $$ consectetur adipiscing elit."

<!-- Inline math in lists, escape the first `$` -->

1. \$$ LaTeX_math_expression $$
2. \$$ LaTeX_math_expression $$
3. \$$ LaTeX_math_expression $$

Mermaid

Mermaid é uma ótima ferramenta de geração de diagramas. Para ativá-lo em sua postagem, adicione o seguinte ao bloco YAML:

---
mermaid: true
---

Então você pode usá-lo como outras linguagens de marcação: cercar o código do gráfico com mermaid e .

Imagens

Legenda

Adicione itálico à próxima linha de uma imagem, depois ela se tornará a legenda e aparecerá na parte inferior da imagem:

![img-description](/path/to/image)
_Image Caption_

Tamanho

Para evitar que o layout do conteúdo da página mude quando a imagem for carregada, devemos definir a largura e a altura de cada imagem.

![Desktop View](/assets/img/sample/mockup.png){: width="700" height="400" }

📍 Para um SVG, você tem que pelo menos especificar o seu largura, caso contrário, ele será renderizado.

Começando de Chirpy v5.0.0, ```height ewidth`` abreviaturas de suporte (height → h, width → w). O exemplo a seguir tem o mesmo efeito que o acima:

![Desktop View](/assets/img/sample/mockup.png){: w="700" h="400" }

Posição

Por padrão, a imagem é centralizada, mas você pode especificar a posição usando uma das classes normal, left, e right.

💡 Uma vez que a posição é especificada, a legenda da imagem não deve ser adicionada.

Posição normal

A imagem será alinhada à esquerda na amostra abaixo:

![Desktop View](/assets/img/sample/mockup.png){: .normal }

Flutuar para a esquerda

![Desktop View](/assets/img/sample/mockup.png){: .left }

Flutuar para a direita

![Desktop View](/assets/img/sample/mockup.png){: .right }

Modo escuro/Luz

Você pode fazer com que as imagens sigam as preferências de tema no modo escuro/claro. Isso requer que você prepare duas imagens, uma para o modo escuro e outra para o modo claro, e depois atribua a elas uma classe específica (dark ou light):

![Light mode only](/path/to/light-mode.png){: .light }
![Dark mode only](/path/to/dark-mode.png){: .dark }

Sombra

As capturas de tela da janela do programa podem ser consideradas para mostrar o efeito de sombra:

![Desktop View](/assets/img/sample/mockup.png){: .shadow }

URL CDN

Se você hospedar as imagens na CDN, poderá economizar o tempo de gravação repetida da URL da CDN atribuindo a variável img_cdn de _config.yml ficheiro:

img_cdn: https://cdn.com

Uma vez img_cdn é atribuído, o URL CDN será adicionado ao caminho de todas as imagens (imagens do avatar do site e posts) começando com /.

Por exemplo, ao usar imagens:

![The flower](/path/to/flower.png)

O resultado da análise adicionará automaticamente o prefixo CDN https://cdn.com antes do caminho da imagem:

<img src="https://cdn.com/path/to/flower.png" alt="The flower">

Caminho da Imagem

Quando um post contém muitas imagens, será uma tarefa demorada definir repetidamente o caminho das imagens. Para resolver isso, podemos definir esse caminho no bloco YAML do post:

---
img_path: /img/path/
---

E então, a fonte de imagem do Markdown pode escrever o nome do arquivo diretamente:

![The flower](flower.png)

A saída será:

<img src="/img/path/flower.png" alt="The flower">

Visualizar Imagem

Se você quiser adicionar uma imagem na parte superior da postagem, forneça uma imagem com uma resolução de 1200 x 630. Observe que, se a proporção da imagem não atender 1.91 : 1, a imagem será dimensionada e cortada.

Conhecendo esses pré-requisitos, você pode começar a definir o atributo imageilits:

---
image:
  path: /path/to/image
  alt: image alternative text
---

Note que o img_path também pode ser passado para a imagem de visualização, ou seja, quando tiver sido definido, o atributo path só precisa do nome do arquivo de imagem.

Para uso simples, você também pode usar image para definir o caminho.

---
image: /path/to/image
---

LQIP

Para visualização de imagens:

---
image:
  lqip: /path/to/lqip-file # or base64 URI
---

Você pode observar o LQIP na imagem de visualização da postagem Texto e tipografia.

Para imagens normais:

![Image description](/path/to/image){: lqip="/path/to/lqip-file" }

Posts Fixados

Você pode fixar uma ou mais postagens na parte superior da página inicial e as postagens fixas são classificadas na ordem inversa de acordo com a data de lançamento. Ativar por:

---
pin: true
---

Prompts

Existem vários tipos de prompts: tip, info, warning, e danger. Eles podem ser gerados adicionando a classe prompt-{type} para a citação. Por exemplo, defina um prompt de tipo info do seguinte modo:

> Example line for prompt.
{: .prompt-info }

Sintaxe

Código Inline

`inline code part`

Filepath Hightlight

`/path/to/a/file.extend`{: .filepath}

Bloco de Código

Símbolos de marcação ``` pode criar facilmente um bloco de código da seguinte maneira:

This is a plaintext code snippet.

### Especificando o Idioma

Usando ```{language}``` você receberá um bloco de código com destaque de sintaxe:

```markdown 
```yaml
key: value

⛔ A etiqueta Jekyll {% highlight %} não é compatível com este tema.

### Número da Linha

Por padrão, todos os idiomas exceto ``plaintext``, ``console``, e ``terminal`` irá exibir números de linha. Quando você quiser ocultar o número de linha de um bloco de código, adicione a classe nolineno para ele:

```markdown 
```shell
echo 'No more line numbers!'

{: .nolineno }

### Especificando o Nome do arquivo

Você deve ter notado que a linguagem de código será exibida na parte superior do bloco de código. Se você quiser substituí-lo pelo nome do arquivo, você pode adicionar o atributo file para conseguir isso:


```markdown 
```shell
# content

{: file="path/to/file" }

### Códigos Líquidos

Se você quiser exibir o Líquido snippet, rode o código líquido com ``{% raw %}`` e ``{% endraw %}``:

```markdown 
{% raw %}
```liquid
{% if product.title contains 'Pack' %}
  This product's title contains the word Pack.
{% endif %}

{% endraw %}

Ou adicionando render_with_liquid: false (Requer Jekyll 4.0 ou superior) para o bloco YAML postilits.

Vídeos

Você pode incorporar um vídeo com a seguinte sintaxe:

{% include embed/{Platform}.html id='{ID}' %}

Onde Platform é a minúscula do nome da plataforma, e ID é o ID do vídeo.

A tabela a seguir mostra como obter os dois parâmetros necessários em um determinado URL de vídeo e você também pode conhecer as plataformas de vídeo atualmente suportadas.

URL do vídeo	Plataforma	ID
https://www.youtube.com / assistir?v =H-B46URT4mg	youtube	H-B46URT4mg
https://www.contração.tv / videos/1634779211	twitch	1634779211

Saiba mais

Para mais conhecimento sobre as postagens de Jekyll, visite o Jekyll Docs: Posts.