Учебники

Grav — Image Linking

В этой главе мы будем понимать связь изображений в Grav. Grav позволяет связывать изображения с одной страницы на другую и даже на удаленные страницы. Если вы связали файлы с помощью HTML, это будет очень легко понять, связывая изображения в Grav.

Grav Image Linking

Используя эту структуру, мы увидим, как отображать мультимедийные файлы на странице, используя различные типы ссылок. Каждая папка в этой структуре содержит изображения, и в /02.green/img01 есть специальный каталог, который действует как страница, но содержит только медиа-файлы.

Давайте рассмотрим некоторые из общих элементов тега изображения Grav на основе уценки.

![Alt Text](../path/image.ext)
  • ! — Он указывает тег изображения, когда вы размещаете его в начале тега ссылки уценки.

  • [] — Определяет необязательный alt-текст для изображения.

  • () — Он помещается непосредственно после квадратной скобки, которая содержит путь к файлу.

  • ../ — Это указывает на перемещение вверх по каталогу.

! — Он указывает тег изображения, когда вы размещаете его в начале тега ссылки уценки.

[] — Определяет необязательный alt-текст для изображения.

() — Он помещается непосредственно после квадратной скобки, которая содержит путь к файлу.

../ — Это указывает на перемещение вверх по каталогу.

Grav использует пять типов ссылок на изображения, как указано ниже —

  • Относительный слизень

  • Справочник Относительный

  • абсолют

  • Дистанционный пульт

  • Действия СМИ над изображениями

Относительный слизень

Справочник Относительный

абсолют

Дистанционный пульт

Действия СМИ над изображениями

Относительный слизень

Он устанавливает относительные ссылки на изображения на текущей странице и связывает другой файл в том же каталоге. При использовании относительных ссылок местоположение исходного файла так же важно, как и место назначения. Если вы измените путь в файле во время перемещения, то ссылка может быть нарушена. Преимущество использования этой структуры связывания изображений заключается в том, что вы можете переключаться между локальным сервером разработки и действующим сервером с другим доменным именем, если структура файла остается постоянной.

пример

![link](../water/img01/img.jpg)

Здесь ../ указывает, что ваша ссылка перемещается вверх на одну папку, а затем вниз на одну папку, и img.jpg является местом назначения.

Когда вы используете вышеуказанный путь, вы получите следующий вывод —

Grav Image Linking

Grav поддерживает слагов в заголовке основного файла разметки страницы, и этот слаг заменяет имя папки для данной страницы.

Если в папке 01.sky установлен slug через ее файл .md , т.е. /pages/01.blue/01.sky/text.md , тогда заголовок файла будет выглядеть так:

---
title: Sky
slug: test-slug
taxonomy:
   category: blog
---

В приведенном выше коде мы установили slug test-slug, который является необязательным. После того, как вы установите slug, вы можете сделать ссылку на медиа-файл, в котором для ссылки будет установлен Slug Relative или Absolute URL.

Справочник Относительный

В этом типе ссылки вы можете установить относительные ссылки на изображения на текущей странице. Вместо использования URL-слагов, вы можете ссылаться по полному пути с именами их папок в каталогах относительно ссылок на изображения.

пример

![My image](../../blue/img01/img.jpg)

Когда вы используете вышеуказанный путь, он будет отображать вывод, как показано ниже —

Grav Image Linking

абсолют

Абсолютные ссылки такие же, как относительные ссылки, но единственное отличие состоит в том, что они относятся к корню сайта и присутствуют в каталоге / user / pages / .

Вы можете использовать абсолютные ссылки двумя разными способами —

  • Вы можете использовать относительный стиль слагов, который включает в себя имена слагов или каталогов в пути и обычно используется в абсолютных ссылках.

  • Вы можете использовать Absolute Link, которая открывает ссылку с / .

Вы можете использовать относительный стиль слагов, который включает в себя имена слагов или каталогов в пути и обычно используется в абсолютных ссылках.

Вы можете использовать Absolute Link, которая открывает ссылку с / .

![My image](/blue/img01/img.jpg)

Когда вы используете вышеуказанный путь, вы получите следующий вывод —

Grav Image Linking

Дистанционный пульт

Удаленные ссылки на изображения позволяют отображать любой медиа-файл напрямую через его URL. Эти ссылки не включают контент вашего собственного сайта. В следующем примере показано, как отобразить изображение с помощью удаленного URL —

![Remote Image 1](http://www.freedomwallpaper.com/nature-wallpaper/spring_nature-wide.jpg)

Когда вы нажимаете на ссылку, как показано на рисунке ниже, она будет отображать изображение с данного URL.

Grav Image Linking

Действия СМИ над изображениями

Изображения, связанные со страницами, позволяют нам использовать преимущества медиа-действий Grav . При создании контента в Grav вы можете отображать некоторые мультимедийные файлы, такие как изображения, видео и другие файлы.

пример

Вы можете загрузить изображение, используя формат, указанный ниже —

![Styling Example](../img01/img.jpg?cropResize = 400, 200)

Когда вы используете вышеуказанный путь, вы получите вывод, как показано ниже —