[TUTORIAL] Como adicionar links âncora no seu fórum

por Chanp 30.06.20 17:49

Como adicionar links âncora no fórum

O mundo da programação está em constante mudança e precisamos nos adaptar a ele. Pensando nisso, esse tutorial lhe ensina a adicionar links âncora que direcionam o usuário para um determinado local de uma página.

COMO ADICIONAR LINKS ÂNCORA

TUTORIAIS, DICAS E ASTÚCIAS

Adicionando a ligação

Por padrão, os fóruns Forumeiros já possuem várias âncoras básicas. No entanto, existem algumas que são consideras as mais importantes e podem ser úteis para você também. Confira:

#top para que o usuário seja direcionado para o topo do seu fórum.

#bottom para que o usuário seja direcionado para o final do seu fórum.

#page-body para que o usuário seja direcionado para o conteúdo do seu fórum.

Além destas, cada mensagem do seu fórum possui uma âncora. Vamos usar como exemplo a primeira mensagem do tópico Staff do Fórum dos Fóruns e mudanças internas na equipe. Note que, ao clicar com o botão direito do mouse no título de alguma mensagem do tópico e, em seguida, clicar em "Copiar endereço do link", você poderá colar o URL do tópico seguido de uma âncora no final, como 60118. Portanto, caso queira que um usuário seja imediatamente direcionado para uma determinada mensagem de uma página, basta copiar o URL daquela mensagem realizando o procedimento que acaba de ser ensinado.

Como adicionar uma âncora

Caso você não esteja satisfeito com as âncoras padrões do Forumeiros, aprenda agora como adicionar âncoras no seu fórum.

Uso em uma mensagem com BBCode

Para vincular uma âncora em uma mensagem do seu fórum, será necessário utilizar uma tabela. Dentro do código desta tabela, procure por [td] e substitua por [td id="aqui"]. O valor aqui deverá ser substituído pelo modo como você deseja chamar a sua âncora.

Vínculo em uma página HTML ou template

Se você possui conhecimento acerca da linguagem HTML e deseja fazer isso por meio dos templates ou da gestão de páginas HTML, localize o elemento que você deseja vincular com uma âncora e, ao lado deste, cole:

Código:: id="aqui"

Este atributo deve ser adicionado dentro da etiqueta de abertura. Para facilitar o seu compreendimento, iremos vincular um parágrafo aleatório. Ele ficaria assim:

Código:: <p id="aqui">Lorem ipsum dolor sit amet</p>

O valor aqui pode ser substituído por qualquer termo que você desejar aderir para esta âncora.

Como utilizar

Com a âncora devidamente vinculada a algum elemento, apenas resta utilizar. Para isso, você deverá, primeiramente, pegar o URL do seu fórum, por exemplo, https://ajuda.forumeiros.com.

Em seguida, você deverá adicionar uma barra e o slug da sua página. Em:

Código:: https://ajuda.forumeiros.com/h1-

O slug da página é h1-. Tendo feito isso, adicione agora uma hash. Então, adicione a nomenclatura dada para a sua âncora. Como neste tutorial foi adicionado o aqui, utilizarei esta nomenclatura como exemplo. Desse modo, meu URL ficaria assim:

Código:: https://ajuda.forumeiros.com/h1-#aqui

Caso a sua página não possua um slug, como é o exemplo da página inicial deste fórum (https://ajuda.forumeiros.com), você não precisa adicioná-lo. No entanto, você deverá manter a barra diagonal e escrever a âncora. Por exemplo: se eu quiser ser direcionado para o final da minha página inicial, meu URL ficaria assim:

Código:: https://ajuda.forumeiros.com/#bottom