Möchte man bei einem Post auf Instagram einen Link hinzufügen, dann wird man schnell bemerken, dass das nicht möglich ist. Man kann nur einen einzigen Link in der so genannten „Bio“ hinzufügen. Was aber, wenn man mehrere Links seinen Produkten im Shop oder zu Blogartikeln erstellen möchte?
Services wie Linktree oder Liiink.me bieten die Möglichkeit eine kleine Seite zu erstellen, auf der man ein paar Buttons anlegen kann. In der Free-Version sind diese Services leider alle begrenzt. So lässt sich die Optik dieser Seite nur eingeschränkt anpassen und auch die Anzahl der Buttons ist limitiert.
Als Webentwickler wollte ich keinen externen Service dafür hernehmen und so habe ich mir solch einen Linktree-Clon selbst gebaut. Hier das Endergebnis: links.andreas-stricker.at
Dafür habe ich folgenden Tech-Stack verwendet:
VueJS mit Vite
In diesem Projekt habe ich erstmals Vite ausprobiert. Der Development Server startet um ein Vielfaches schneller als vergleichsweise der von vue-cli.
Die Vorteile von Vite:
💡 Instant Server Start
⚡️ Lightning Fast HMR
🛠️ Rich Features
📦 Optimized Build
🔩 Universal Plugins
🔑 Fully Typed APIs
Was ist ein Headless CMS?
Herkömmliche Content-Management-Systeme wie WordPress oder Typo3 bestehen normalerweise aus einem Backend (um die Inhalte zu verwalten) und einem Frontend (um die erstellten Inhalte dem User anzuzeigen).
Ein Headless CMS bietet das reine Backend mit Schnittstellen an, um die Inhalte in ein eigens entwickeltes Frontend zu laden. In meinem Fall habe ich das Frontend mit VueJS erstellt und storyblok als Headless CMS verwendet, um auf deren Benutzeroberfläche die einzelnen Button-Inhalte zu erstellen.
Inhaltsstruktur in storyblok
Da ich meine Links in drei Kategorien unterteilt haben möchte, habe ich in meinem neuen space in storyblock für jede „Kategorie“ einen eigenen Ordner angelegt.
Sämtliche Inhalte dieser Kategorien kann man im query mit starts_with auslesen.
Für die Button-Inhalte habe ich mir einen eigenen Content-Type „Button“ angelegt (Content-Types sind mit Custom-Post-Types von WordPress vergleichbar) .
Das Schema für den Content-Type „Button“ ist mit folgenden Feldern aufgebaut:
- Titel – slug: title
- Beschreibung – slug: description
- Bild – slug: image
- Link – slug: link
Die Teaserbilder für die Buttons können direkt in storyblok hochgeladen werden.
Inhalte von Storyblok Mit GraphQL auslesen
Um die zuvor angelegten Inhalte in VueJS auszulesen, habe ich mich an diese Anleitung gehalten und die Queries ein wenig angepasst, um die Items aus den Ordnern auszulesen.
OWNLINKS auf Github
Das Projekt kann auf Github geclont und mit eigenen Inhalten und Styles verwendet werden. Die Credits muss dafür erhalten bleiben.
