Como adicionar links âncora às Collections do Webflow

Embora a gente adore o Webflow, uma coisa chata é que, se o seu blog está nele como uma Collection, não dá para adicionar links de seção ou links âncora nos posts. É aquele caso em que você quer clicar em um link no topo, em um índice, e ir direto para a seção correspondente da página.

Já vi algumas soluções alternativas para isso. Uma delas é usar o recurso de embed para inserir código no corpo do post, mas isso é bem manual e chato de fazer. Por isso, temos aqui um pequeno hack: um trecho de Javascript que você adiciona uma única vez ao arquivo de template dos seus posts de blog e que passa a permitir links âncora em todos os posts dessa Collection!

Note: this code will add anchor links into all of your H2 headings on all of your collection pages. It's not a big issue really, it just means all of your H2 headings become links but if you prefer not to do this then you may want to find an alternative method.

Passo 1: adicione o código à página da sua Collection

Sua Collection sempre terá uma página de template. Ela é o template usado por todos os itens da Collection, e qualquer alteração nessa página muda todos os itens. Então, vamos adicionar um pouco de Javascript no cabeçalho dessa página para que ele se aplique a todos os posts do blog, mas apenas às páginas que usam esse template, sem alterar o resto do seu site.

Depois de encontrar essa página, vá até as configurações e role até onde aparece <head>.

Passo 2: adicione o seu código Javascript

Agora é só copiar e colar o código abaixo na caixa. Já já explicamos o que ele faz.

Como funciona

Este código percorre a página em busca de tudo o que estiver marcado como título H2, porque normalmente são esses os títulos para os quais você deve criar links âncora. Claro que você pode modificar o script para funcionar com outros títulos, trocando h2 por h3 etc., ou por qualquer outra coisa.

Depois de reunir todos esses títulos, ele percorre a lista e adiciona um ID que começa com

O trecho seguinte do código cria um elemento de link âncora e o adiciona antes do elemento de título, o que permite criar um link para ele. Ele usa o headingID criado acima como referência do link. Assim, o link âncora da seção 1 seria #section-1, e assim por diante.

Se você não está familiarizado com Javascript, não precisa entender tudo isso, então fique tranquilo! Você sempre pode colar o código no ChatGPT e pedir que ele explique.

Passo 3: publique no domínio de teste e confira os estilos dos H2

O próximo passo é publicar essas alterações no seu domínio de staging ou de teste, que normalmente é aquele com 'webflow' na URL. Recomendamos remover esse domínio do índice do Google para que ele não concorra com o seu domínio principal.

Depois de publicar, confira como ficaram os títulos. Agora que você adicionou um link a eles, eles podem ficar com aparência de link. Nesse caso, talvez você queira adicionar um estilo personalizado à página de template do post, específico para os links dos H2 dessa página. Veja como isso ficaria em código, como um exemplo básico:

Você copiaria esse código novamente para a parte <head> da página de template, mas precisaria colocar as tags <style> </style> em volta dele para funcionar. Depois é só ajustar o estilo para combinar com os seus títulos normais.

Passo 4: adicione as âncoras no topo da página

Feito isso, você já pode adicionar os links âncora no topo da página. Basta aplicar um link ao texto da página e usar #section-1 para a seção um, #section-2 para a seção dois, e assim por diante.

O bom desse script é que não há limite para a quantidade de links que ele cria: desde que o título esteja definido como H2, um link será criado para você usar como âncora.

Achamos isso muito útil no nosso próprio site e esperamos que ajude outras pessoas também! Fale com a gente se algo não ficar claro. Mas, se você copiar o código conforme indicado e talvez ajustar os estilos dos H2, tudo o que precisará fazer é adicionar as âncoras e usar os links de referência certos! Bons links!