Wer Bilder auf seinem Blog teilt, möchte es den Lesern so einfach wie möglich machen, diese auf Pinterest zu speichern. Pinterest bietet ein einfaches Skript zur Integration seiner “Pin it” Buttons in Webseiten an. Das funktioniert natürlich auch in Hugo, selbst wenn das Theme es nicht direkt berücksichtigt. Dieses Script verlangsamt nicht nur die Seite, sondern trackt deine Besucher auch schon, bevor sie überhaupt auf den Button klicken.

Wie bekomme ich die Kontrolle über was auf meiner Seite ausgeführt wird und wie bekomme ich das auch noch DSGVO konform?

Statt einfach das Skript direkt einzubinden und sich darauf zu verlassen, dass das schon alles passt, gibt es auch einen “Hugo way” das umzusetzen: Hugo Render Hooks + CSS Das ist schneller, sicherer und komplett ohne externes JavaScript.

Warum der “Hugo Way”?

Anstatt ein externes Script zu laden, das deine Seite nach Bildern durchsucht, lassen wir Hugo die Arbeit beim Erstellen der Seite (Build-Time) erledigen.

Schritt 1: Den Render Hook erstellen

Wir überschreiben die Art und Weise, wie Hugo Bilder in Markdown rendert. Erstelle dazu eine neue Datei unter: layouts/_default/_markup/render-image.html

Füge dort diesen Code ein. Er umschließt jedes Bild mit einem Container und generiert den Pinterest-Link statisch:

<div class="pin-container">
  <img src="{{ .Destination | safeURL }}"
       alt="{{ .Text }}"
       {{ with .Title }} title="{{ . }}" {{ end }}
       loading="lazy" />

  <a class="pin-button"
     target="_blank"
     rel="noopener noreferrer"
     href="https://www.pinterest.com/pin/create/button/?url={{ .Page.Permalink | urlquery }}&media={{ .Destination | absURL | urlquery }}&description={{ .Text | urlquery }}"
     aria-label="Auf Pinterest speichern">
     <svg viewBox="0 0 24 24" width="20" height="20">
       <path d="M12.017 0C5.396 0 .029 5.367.029 11.987c0 5.079 3.158 9.417 7.618 11.162-.105-.949-.199-2.403.041-3.439.219-.937 1.406-5.957 1.406-5.957s-.359-.72-.359-1.781c0-1.663.967-2.911 2.168-2.911 1.024 0 1.518.769 1.518 1.688 0 1.029-.653 2.567-.992 3.992-.285 1.193.6 2.165 1.775 2.165 2.128 0 3.768-2.245 3.768-5.487 0-2.861-2.063-4.869-5.008-4.869-3.41 0-5.409 2.562-5.409 5.199 0 1.033.394 2.143.889 2.741.099.12.112.225.085.345-.09.375-.293 1.199-.334 1.363-.053.225-.172.271-.399.165-1.495-.69-2.433-2.878-2.433-4.646 0-3.776 2.748-7.252 7.951-7.252 4.173 0 7.397 2.967 7.397 6.923 0 4.135-2.607 7.462-6.233 7.462-1.214 0-2.354-.629-2.758-1.379l-.749 2.848c-.269 1.045-1.004 2.352-1.498 3.146 1.123.345 2.306.535 3.55.535 6.607 0 11.985-5.365 11.985-11.987C23.97 5.39 18.592.026 11.985.026L12.017 0z"/>
     </svg>
     Pin it
  </a>
</div>

Schritt 2: Styling (CSS)

Im Nightfall-Theme nutzen wir die custom-head.html, um unser CSS einzufügen. Wir verpassen dem Button ein modernes Design in Cyan (#00FFF7), das beim Hovern über das Bild erscheint.

Falls noch nicht vorhanden, lege ich eine neue Datei layouts/_partials/custom-head.html an.

<style>
.pin-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
}

.pin-container img {
    display: block;
    width: 100%;
    height: auto;
}

.pin-button {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: #BD081C; /* Pinterest Red */
    color: #000; /* Schwarzer Text für besseren Kontrast */
    padding: 8px 15px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;
    opacity: 0;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 10;
}

.pin-button svg {
    fill: #000;
}

/* Zeigt den Button beim Hovern über das Bild an */
.pin-container:hover .pin-button {
    opacity: 1;
}

/* Kleiner Effekt beim Klicken */
.pin-button:hover {
    transform: scale(1.05);
    background-color: #00e6de;
}
</style>

Die Farbe des Buttons kann man über die Hintergrund Farbe ändern, die ist momentan “Pinterest Red”.

Fazit

Das war’s! Jedes Bild, das in Markdown mit ![Beschreibung](bild.jpg) eingefügt wird, erhält nun automatisch einen stylischen “Pin It”-Button. Die Seite bleibt blitzschnell, und die Privatsphäre der Leser bleibt geschützt, da keine Daten ungefragt an Pinterest fließen.

hugo  pinterest  themes