Link para um cabeçalho dentro de uma postagem ou tópico

[Discourse]

Este guia explica como criar um link direto para um título dentro de uma publicação ou tópico do Discourse, permitindo que os usuários naveguem eficientemente por publicações longas.

Nível de usuário necessário: Todos os usuários

Adicionar títulos dentro de publicações longas pode tornar o conteúdo mais legível e permitir que os usuários criem links diretos para seções específicas. Isso pode ser particularmente útil para navegar em discussões e documentações extensas.

Resumo

Este guia abrange:

• Criação de títulos usando Markdown
• Criação de links diretos para títulos específicos em uma publicação

Criação de títulos usando Markdown

Para criar um título no Markdown, prefixe uma linha de texto com um ou mais caracteres #. O número de caracteres # corresponde ao nível do título. Aqui estão alguns exemplos:

## Este é um título de nível 2
Aqui está um pequeno parágrafo depois.

### Este é um título de nível 3
Aqui está outro parágrafo curto.

Quando renderizado, fica assim:

---

Este é um título de nível 2

Aqui está um pequeno parágrafo depois.

Este é um título de nível 3

Aqui está outro parágrafo curto.

---

Criação de links diretos para um título

Para compartilhar um link direto para um título dentro de uma publicação:

1. Passe o mouse sobre o título para revelar um ícone de link ao lado dele: .
2. Clique no ícone de link para atualizar a URL na barra de endereço do seu navegador com o link direto para aquele título.
3. Copie a URL atualizada da barra de endereço para compartilhá-la com outras pessoas.

O ícone de link só aparece em dispositivos desktop (não touch) ao passar o mouse sobre um título. Em dispositivos touch e móveis, os links âncora existem na página, mas não estão visíveis.

Entendendo as URLs âncora dos títulos

Quando você clica no ícone de link de um título, a URL na barra de endereço é atualizada com um fragmento no formato:

#p-{postId}-{slugified-heading}-{number}

Por exemplo, um título “Getting Started” na publicação 12345 produziria um fragmento de URL como #p-12345-getting-started-1. O número no final é um contador sequencial baseado na posição do título na publicação.

Melhores práticas

• Use títulos descritivos para resumir o conteúdo claramente.
• Estruture sua publicação usando títulos hierárquicos onde for apropriado.
• Garanta que os títulos sejam consistentes e lógicos para melhor legibilidade.
• Esteja ciente de que editar o texto do título ou reordenar os títulos mudará seus URLs âncora, o que pode quebrar links existentes.

Perguntas Frequentes (FAQs)

Posso criar um link para qualquer parte de uma publicação?
Você pode criar um link para qualquer título formatado corretamente em Markdown, desde que não esteja dentro de um bloco de citação ou bloco de citação. Títulos dentro desses blocos não geram links âncora.

Os links para títulos funcionam em publicações diferentes?
Sim! Esses links direcionarão para o título na publicação quando usados em outros tópicos ou compartilhados em outro lugar.

Recursos adicionais

• Formatação Suportada em Publicações (markdown, BBCode e HTML)
• Guia Interativo de Markdown

[one1]

Não estou vendo os ícones de link neste site ou no meu. Nem no FF nem no Chrome.

Aconteceu alguma mudança?

[pfaffman (Jay Pfaffman)]

Você precisa passar o mouse sobre o título para que eles apareçam:

[one1]

Eu passo o mouse e não vejo nada.

Parece haver algo ali, mas nenhum ícone é exibido.

Uma pergunta de acompanhamento…

Estou supondo que, se você alterar o texto do cabeçalho, o link será quebrado.

EDIT PARA ADICIONAR: Não só o âncora muda se o título mudar, mas se você inserir outro cabeçalho antes dos cabeçalhos existentes, o sufixo numérico no cabeçalho muda. Isso parece frágil a ponto de ser inútil.

A única solução segura seria envolver os cabeçalhos em tags a html e dar-lhe um id, correto?

Edição novamente para adicionar: Tentei envolver o texto do cabeçalho em tags a e apenas colocar tags vazias antes do texto do cabeçalho. Nenhum dos IDs funcionou. Eu também tentei spans em vez disso com a mesma falha.

[one1]

Sim, consigo encontrá-lo no DOM como um before:

Estou no Windows 11.
A única maneira que consigo fazer o ícone de link aparecer é copiando o link e, em seguida, abrindo esse link (com o # e o id) em uma nova aba e indo para lá. Então, o ícone de link é exibido o tempo todo (sem pairar o mouse), mas ainda assim, nenhum dos outros ícones de link aparecerá ao pairar o mouse.

[one1]

É permitido dar um “bump” nisso? Estou me perguntando se estou perdendo algo óbvio sobre como inserir links em uma postagem.

[markschmucker (Mark S)]

@one1

Passe o mouse e não vejo nada.

Parece haver algo lá, mas nenhum ícone é exibido.

Eu tenho o mesmo problema. O ícone está lá, mas sua opacidade está definida como zero, então não está visível.

.cooked h1 a.anchor, .cooked h2 a.anchor, .cooked h3 a.anchor, .cooked h4 a.anchor, .cooked h5 a.anchor, .cooked h6 a.anchor, .d-editor-preview h1 a.anchor, .d-editor-preview h2 a.anchor, .d-editor-preview h3 a.anchor, .d-editor-preview h4 a.anchor, .d-editor-preview h5 a.anchor, .d-editor-preview h6 a.anchor

Especificidade: (0,2,2)

{

opacity: 0;

transition: opacity .25s;

}

Eu também não consigo ver os ícones no OP, então isso exclui qualquer estilo personalizado na minha instância.

Estou usando o Chrome.

[markschmucker (Mark S)]

Como um problema separado, acho que o link fornecido pelo ícone (invisível) não funciona a partir do mesmo tópico. Se o ícone me der:

https://forum.example.com/t/testing-anchors/63647#p-311503-heading-1

Eu tenho que criar meu link usando apenas #p-311503-heading-1, e não a URL completa. A URL completa funciona se eu a colar no navegador.