Grav - 图像链接

在本章中,我们将了解Grav中的图像链接. Grav允许您将图像从一个页面链接到另一个页面,甚至链接到远程页面.如果您使用HTML链接文件,那么在Grav中很容易理解图像链接.

Grav图像链接

使用此结构,我们将看到如何使用不同类型的链接在页面中显示媒体文件.此结构下的每个文件夹都包含图像,/02.green/img01 下有一个特殊目录,它作为一个页面,但只包含媒体文件.

让我们看看查看基于Grav markdown的图像标记的一些常见元素.

![Alt Text](../path/image.ext)

  • : 当您将其放在降价链接标记的开头时,它会指示图片代码.

  • [] : 它为图像指定了可选的替代文字.

  • () : 它直接放在包含文件路径的方括号之后.

  • ../ : 它表示向上移动目录.

Grav使用下面列出的五种类型的图像链接 :

  • Slug Relative

  • 目录亲戚

  • 绝对

  • 远程

  • 图像上的媒体操作

Slug Relative

它设置当前页面的相对图像链接,并链接同一目录中的另一个文件.使用相对链接时,源文件的位置与目标的位置一样重要.如果在移动时更改文件中的路径,则链接可能会中断.使用此图像链接结构的优点是,只要文件结构保持不变,就可以在本地开发服务器和具有不同域名的实时服务器之间切换.

示例

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

此处 ../表示您的链接向上移动一个文件夹,然后向下移动一个文件夹,img.jpg是目的地.

当您使用在路径上方,您将收到以下输出 :

Grav Image Linking

Grav支持页面主标记文件标题中的slug,这个slug取代了给定页面的文件夹名称.

如果 01.sky 文件夹通过其 .md 文件设置了一个slug,即/pages/01.blue/01.sky/text.md ,然后该文件的标题将为 :

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

在上面的代码中,我们设置了slug test-slug 这是一个可选项.设置了slug后,您就可以链接到媒体文件,该文件将为链接设置 Slug Relative Absolute URL.

目录相对

在这种类型的链接中,您可以设置当前页面的目录相对图像链接.您可以通过完整路径引用目录相对图像链接中的文件夹名称,而不是使用URL slugs.

示例

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

当你使用上述路径,它将显示如下所示的输出 :

Grav Image Linking

绝对

绝对链接与相对链接相同,但唯一的区别是它们相对于网站的根目录并出现在中/user/pages/目录.

你可以用两种不同的方式使用绝对链接 :

  • 您可以使用 Slug Relative 样式,其中包含路径中的slug或目录名称,并且常用于绝对链接.

  • 您可以使用绝对链接打开 a/的链接.

![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

Media对图像的操作

与页面关联的图像使我们能够利用 Grav的媒体操作的优势.在Grav中创建内容时,您可以显示一些媒体文件,如图像,视频和其他文件.

示例

您可以使用以下内容加载图像下面给出的格式 :

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

当您使用上述路径时,您将收到如下所示的输出 :

Grav Image Linking