Grav - Bildverknüpfung
In diesem Kapitel werden wir die Bildverknüpfung in Grav verstehen. Mit Grav können Sie Bilder von einer Seite auf eine andere und sogar auf entfernte Seiten verlinken. Wenn Sie die Dateien mit HTML verknüpft haben, ist die Bildverknüpfung in Grav sehr einfach zu verstehen.
Anhand dieser Struktur erfahren Sie, wie Sie Mediendateien auf der Seite mithilfe verschiedener Arten von Links anzeigen. Jeder Ordner unter dieser Struktur enthält Bilder und unter befindet sich ein spezielles Verzeichnis/02.green/img01 Dies fungiert als Seite, enthält jedoch nur Mediendateien.
Schauen wir uns einige der allgemeinen Elemente des Grav-Markdown-basierten Bild-Tags an.
! - Es zeigt ein Bild-Tag an, wenn Sie es am Anfang des Markdown-Link-Tags platzieren.
[] - Es gibt optionalen Alternativtext für das Bild an.
() - Es wird direkt hinter der eckigen Klammer platziert, die den Dateipfad enthält.
../ - Es zeigt an, dass ein Verzeichnis nach oben verschoben wurde.
Grav verwendet fünf Arten von Bildlinks, wie unten aufgeführt -
Slug Relative
Directory Relative
Absolute
Remote
Media Actions on Images
Slug Relative
Es setzt relative Bildverknüpfungen zur aktuellen Seite und verknüpft eine andere Datei im selben Verzeichnis. Bei Verwendung relativer Links ist der Speicherort der Quelldatei genauso wichtig wie der des Ziels. Wenn Sie den Pfad in der Datei während des Verschiebens ändern, kann die Verknüpfung unterbrochen werden. Der Vorteil dieser Bildverknüpfungsstruktur besteht darin, dass Sie zwischen einem lokalen Entwicklungsserver und einem Live-Server mit einem anderen Domänennamen wechseln können, solange die Dateistruktur konstant bleibt.
Beispiel
Hier ../ zeigt an, dass Ihr Link einen Ordner nach oben und dann einen Ordner nach unten verschiebt und img.jpg das Ziel ist.
Wenn Sie den obigen Pfad verwenden, erhalten Sie die folgende Ausgabe:
Grav unterstützt Slugs in der Kopfzeile der primären Markdown-Datei der Seite. Dieser Slug ersetzt den Ordnernamen für die angegebene Seite.
Wenn 01.sky Ordner hat einen Slug durch seine gesetzt .md Datei, dh /pages/01.blue/01.sky/text.md, dann wäre der Header der Datei wie folgt:
---
title: Sky
slug: test-slug
taxonomy:
category: blog
---Im obigen Code haben wir den Slug gesetzt test-slugDas ist eine Option. Sobald Sie den Slug festgelegt haben, können Sie eine Verknüpfung zu der Mediendatei herstellen, die vorhanden sein wirdSlug Relative oder Absolute URL für den Link festgelegt.
Verzeichnis relativ
Bei dieser Art von Verknüpfung können Sie verzeichnisbezogene Bildverknüpfungen zur aktuellen Seite festlegen. Anstatt die URL-Slugs zu verwenden, können Sie den vollständigen Pfad mit ihren Ordnernamen in verzeichnisbezogenen Bildlinks referenzieren.
Beispiel
Wenn Sie den obigen Pfad verwenden, wird die Ausgabe wie unten gezeigt angezeigt -
Absolut
Absolute Links sind dieselben wie relative Links, aber der einzige Unterschied besteht darin, dass sie relativ zum Stammverzeichnis der Site sind und in der vorhanden sind /user/pages/ Verzeichnis.
Sie können absolute Links auf zwei verschiedene Arten verwenden:
Sie können verwenden Slug Relative Stil, der Slug- oder Verzeichnisnamen im Pfad enthält und häufig bei der absoluten Verknüpfung verwendet wird.
Sie können verwenden Absolute Link das öffnet den Link mit a/.
Wenn Sie den obigen Pfad verwenden, erhalten Sie die folgende Ausgabe:
Fernbedienung
Mit Remote-Image-Links können Mediendateien direkt über ihre URL angezeigt werden. Diese Links enthalten nicht den Inhalt Ihrer eigenen Website. Das folgende Beispiel zeigt, wie ein Bild mithilfe einer Remote-URL angezeigt wird.
Wenn Sie auf den Link klicken, wie im Bild unten gezeigt, wird das Bild von der angegebenen URL angezeigt.
Medienaktionen auf Bildern
Mit Seiten verknüpfte Bilder ermöglichen es uns, den Vorteil der Medienaktionen von Grav zu nutzen . Sie können einige Mediendateien wie Bilder, Videos und andere Dateien anzeigen, wenn Sie Inhalte in Grav erstellen.
Beispiel
Sie können ein Bild mit dem unten angegebenen Format laden -
Wenn Sie den obigen Pfad verwenden, erhalten Sie eine Ausgabe wie unten gezeigt -
