Como Escrever Artigos Para o Site

Projeto Site do Labic

autor

Felipe Carvalho Leal | Aug. 16, 2023

Este site foi desenvolvido com o intuito de possibilitar a postagem de artigos pelos membros do laboratório, dessa forma, aumentando a relevância do laboratório no cenário geral. Nessa postagem, aprenderemos como escrever e formatar textos markdown, formato utilizado pelo site para a escrita de posts.

artigo

Como Começar

Para começar a escrever artigos para o site, é necessário entrar na área de administração do site e entrar com sua conta. Após isso, basta escolher o que você quer escrever, artigo ou projeto.

Agora basta criar um artigo ou projeto para iniciar.

Configuração Básica

Agora que você tem uma postagem ou projeto criados, é hora de começar a configurar! A configuração de postagem e projeto são quase iguais, então mostrarei como são criados as postagens e o mesmo se aplica aos projetos.

Cada número na imagem representa um campo, sendo eles:

  1. Capa da postagem, esta será a imagem que será mostrada no preview de cada postagem, recomendo que sejam inseridas imagens no formato 16:9, para não haver cortes na imagem.
  2. O título da postagem.
  3. A descrição geral da postagem, vale lembrar que esse não será o campo onde será escrito o corpo da postagem, apenas uma descrição geral. É a descrição escrita nesse campo que é mostrada no preview do projeto.
  4. O autor deve ser selecionado neste campo, esse campo é conectado com os membros do projeto cadastrados no site, então apenas aparecem os membros que tenham conta no site para selecionar como autor.
  5. O campo de projeto é um campo existente apenas na criação de postagens, ela se refere ao projeto que uma postagem está relacionado, caso seja uma postagem isolada, basta deixar vazio. Caso você selecione um projeto, esta postagem aparecerá na página do projeto, tornando mais fácil localizar postagens com base em seus projetos.
  6. Post status é o campo onde deve ser selecionado se a postagem deve ser mostrada no site ou não, permitindo deixar a postagem a mostra ou privada.

    Na segunda seção, temos apenas dois campos, sendo eles:
  1. Data de criação da postagem, esse campo é preenchido automaticamente quando você cria e salva a postagem.
  2. Esse é o campo onde de fato escreveremos nossa postagem, nele podemos escrever textos em formato markdown para serem formatados e compartilhados no site, abaixo desse campo é mostrado um preview de como o texto está ficando, mas vale lembrar que esse preview não corresponde com exatidão com o que será mostrado no site.

  3. São os campos para salvar o que já foi escrito na postagem.

Escrevendo em Markdown

Sintaxe Básica

Markdown é escrito em um formato simples e intuitivo, sabendo disso, começaremos com os scripts básicos.

Títulos

Os títulos são definidos pelo símbolo “#”, partindo de título 1 com uma “#”, até título 6 com seis “#”, a “#” sempre deve vir com um espaço em branco após e só então o texto do título, para assim ser interpretado pelo compilador.

Títulos “Linkaveis”

Em textos grandes, é útil criar textos linkaveis para adicionar uma maior dinâmica na leitura do texto ou mesmo para citar alguma utilidade antes da mesma aparecer. Para criar textos linkaveis, basta adicionar “{#id-do-link} ” após o título (na mesma linha e separado por um espaço em branco), dessa forma você poderá redirecionar o usuário para esse link colocando esse id no link do texto com link.

Bullet Points

Os bullet points são textos que vem precedidos por uma pequena bolinha, frequentemente usados para criar listas. Para criar um Bullet Point em markdown, basta adicionar um “*” seguido de um espaço e então o texto desejado.

Por algum motivo, o compilador markdown utilizado no site só compila bullet points precedidos de títulos, então caso deseje adicionar um bullet point após um texto comum, basta criar um título vazio utilizando “###### “

Listas Numeradas

Para criar uma lista numerada, basta criar uma lista precedida por “Número. “, colocando os números em ordem crescente.

CheckList

As checklists são muito úteis para acompanhar o progresso de um projeto. Elas podem ser adicionadas utilizando a sintaxe “- [ ]” - O espaço deve ser dado com tab - para uma caixa não marcada e “- [x]” para uma caixa marcada.

Bloco de Citação

Os blocos de citação são extremamente úteis não só para compartilhar uma citação, mas também para destacar ou separar algum texto. Para criar um block de citação, basta escrever um “>” seguido de um espaço em branco e então o texto. Os blocos de citação têm hierarquia, então você pode adicionar vários “>” separados por espaço para criar “sub-blocos”.

Linha de Separação

As linhas de separação podem ser utilizadas em textos com grandes mudanças de tema em seu desenvolvimento. Para adicionar uma linha de separação, basta adicionar três hífens(-) em uma linha vazia.

Notas de Rodapé (Referências)

As notas de rodapé geralmente são utilizadas para explicar termos ou adicionar referências de algum trecho do texto. Para adicionar notas de rodapé, seguimos duas etapas:

Lista de Definição

Caso seja necessário dar várias definições a um termo, podemos utilizar a lista de definição, ela pode ser criada escrevendo um termo em uma linha e adicionando “: ” nas linhas posteriores para cada definição.

Imagens

Para adicionar uma imagem, basta copiar e colar na área de texto ou arrastá-la de alguma pasta até a área de texto.

Formatação de Textos Inline

Formatação de textos inline é aquela formatação que é feita em textos no meio do parágrafo, dessa forma enfatizando algum trecho escrito.

Itálico

Para criar um texto itálico, basta escrever um texto e o rodear com um “*”.

Negrito

Para escrever um texto em negrito, basta escrever um texto e o rodear com dois “*”.

Texto Cortado

Para cirar um texto cortado, basta escrever um texto e o rodear com dois “~”.

Texto Destacado

Para escrever um texto marcado, basta escrever o texto e o rodear com dois “=”.

Texto Subscrito

Este é um tipo de formatação utilizada em números, seja para escrever fórmulas químicas ou equações matemáticas. Para criar um texto subscrito, basta escrever o texto e rodear com um “~”.

Texto Sobrescrito

Este é um tipo de formatação utilizada em números, seja para escrever fórmulas químicas ou equações matemáticas. Para criar um texto sobrescrito, basta escrever o texto e rodear com um “^”.

Para adicionar um texto que, se clicado, redireciona para alguma página web, basta utilizar “[texto]”, seguido de “(link)”, dessa forma associando o texto dentro dos colchetes ao link dentro dos parênteses.

Adicionais

Tabelas

Pode ser útil adicionar tabelas em nosso texto, por isso podemos adicionar tabelas aqui também. Para adicionar tabelas devemos separar as colunas com um | e as linhas com três hífens(-).

Código

Consideramos que estamos em um laboratório de inovação, a função de adicionar blocos de código é extremamente útil. Para adicionar blocks de código em nosso texto, primeiro definimos a linguagem, dando quatro espaços brancos e adicionando “#!nome-da-linguagem”, a partir daí, basta escrever o código abaixo disso, sempre identando com 4 espaços.

Vale lembrar que essa é uma das funções que mais difere em aparência do preview e da visualização no site.

Vídeos

Para adicionar vídeos a sua publicação, é necessário postar o vídeo no youtube e então adicionar um embed no site da seguinte forma:

Extensões

Mesmo as funções descritas suprindo a maioria das necessidades, ainda podem surgir necessidades específicas como escrita de equações complexas ou criação de uma barra de progresso, por isso foram adicionadas diversas extensões ao compilador markdown, dentre elas temos dois pacotes de extensões, a PyMdown Extensions e a Python Markdown. Além disso foi adicionada uma extensão separada que dá suporte a vídeos embed, sendo ela a Markdown Custom Blocks.

Finalização

Sendo assim, agora é possível criar e escrever postagens para o site do labic de forma simples, facilitando a tarefa de divulgar o trabalho dos integrantes de nosso laboratório.

Como o site está em desenvolvimento, algumas das funções do markdown ou das extensões podem ocasionar bugs visuais (não aparecer formatada no site), caso isso ocorra, peço que reportem para que seja resolvido.