So fügen Sie Ankerlinks in Webflow Collections ein

Auch wenn wir Webflow lieben, gibt es eine lästige Einschränkung: Wenn Sie Ihren Blog als Collection aufgebaut haben, können Sie in Ihren Blogbeiträgen keine Abschnittslinks oder Anchor-Links einfügen. Gemeint ist ein Link oben im Inhaltsverzeichnis, der beim Klick direkt zum passenden Abschnitt der Seite springt.

Ich habe ein paar Workarounds dafür gesehen. Einer davon nutzt die Embed-Funktion, um Code in den Beitragstext einzufügen. Das ist allerdings ziemlich aufwendig und mühsam. Deshalb haben wir hier einen kleinen Hack für Sie: ein Stück JavaScript, das Sie einmal in die Template-Datei Ihrer Blogbeiträge einfügen. Danach können Sie in jedem einzelnen Beitrag dieser Collection Anchor-Links verwenden!

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.

Schritt 1: Code zur Collection-Seite hinzufügen

Ihre Collection hat immer eine Template-Seite. Sie dient als Vorlage für alle Einträge der Collection, und jede Änderung an dieser Seite wirkt sich auf alle Einträge aus. Wir fügen deshalb ein wenig JavaScript in den Header dieser Seite ein, damit es für alle Blogbeiträge gilt. Es betrifft aber nur Seiten, die dieses Template verwenden, und verändert den Rest Ihrer Website nicht.

Sobald Sie diese Seite gefunden haben, öffnen Sie die Einstellungen und scrollen nach unten bis zum Bereich <head>.

Schritt 2: JavaScript-Code einfügen

Kopieren Sie als Nächstes den folgenden Code und fügen Sie ihn in das Feld ein. Gleich erklären wir, was der Code macht.

So funktioniert es

Der Code durchsucht die Webseite nach allen Elementen, die als H2-Überschrift ausgezeichnet sind. Auf diese Überschriften sollten Sie in der Regel mit Anchor-Links verweisen. Sie können das Skript natürlich anpassen, damit es mit anderen Überschriften arbeitet, indem Sie h2 durch h3 oder etwas ganz anderes ersetzen.

Sobald der Code alle diese Überschriften gefunden hat, geht er die Liste durch und vergibt eine ID, die beginnt mit

Der nächste Teil des Codes erstellt ein Anchor-Link-Element und fügt es vor dem Überschriftenelement ein. So können Sie auf dieses Element verlinken. Als Referenz für den Link dient die oben erzeugte headingID. Der Anchor-Link für Abschnitt 1 lautet also #section-1 und so weiter.

Wenn Sie mit JavaScript nicht vertraut sind, müssen Sie das nicht im Detail verstehen, machen Sie sich also keine Sorgen! Sie können den Code jederzeit in ChatGPT einfügen und sich erklären lassen.

Schritt 3: Auf der Testdomain veröffentlichen & H2-Stile prüfen

Als Nächstes sollten Sie die Änderungen auf Ihrer Staging- oder Testdomain veröffentlichen. Das ist in der Regel die Domain mit 'webflow' in der URL. Wir empfehlen, diese Domain aus dem Google-Index zu entfernen, damit sie nicht mit Ihrer Hauptdomain konkurriert.

Prüfen Sie nach der Veröffentlichung, wie Ihre Überschriften aussehen. Da sie jetzt einen Link enthalten, sehen sie womöglich wie Links aus. In diesem Fall können Sie auf der Template-Seite des Blogbeitrags einen eigenen Stil für Ihre H2-Links hinzufügen, der nur für diese Seite gilt. So könnte das als einfaches Beispiel im Code aussehen:

Sie kopieren diesen Code erneut in den <head>-Bereich Ihrer Template-Seite, müssen ihn aber in <style> </style>-Tags setzen, damit er funktioniert. Anschließend können Sie den Stil so anpassen, dass er zu Ihren normalen Überschriften passt.

Schritt 4: Anker oben auf der Seite hinzufügen

Jetzt können Sie Ihre Anchor-Links oben auf der Seite einfügen. Dazu verlinken Sie einfach den Text auf der Seite und verwenden für Abschnitt eins den Link #section-1, für Abschnitt zwei #section-2 und so weiter.

Das Praktische an diesem Skript: Die Anzahl der erzeugten Links ist nicht begrenzt. Solange die Überschrift als H2 ausgezeichnet ist, wird ein Link erstellt, den Sie als Anker verwenden können.

Für unsere eigene Website hat sich das als sehr hilfreich erwiesen, und wir hoffen, dass es auch anderen weiterhilft! Melden Sie sich gern bei uns, wenn etwas unklar ist. Wenn Sie den Code wie beschrieben kopieren und vielleicht Ihre H2-Stile anpassen, müssen Sie nur noch die Anker einfügen und die richtigen Referenzlinks verwenden. Viel Spaß beim Verlinken!