Grav - 图像链接

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

重力图像链接

使用此结构，我们将了解如何使用不同类型的链接在页面中显示媒体文件。此结构下的每个文件夹都包含图像，并且/02.green/img01下有一个特殊目录，它充当页面，但仅包含媒体文件。

让我们看看基于 Grav markdown 的图像标签的一些常见元素。

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

  • ！− 当您将其放置在 Markdown 链接标签的开头时，它表示图像标签。

  • [] - 它指定图像的可选替代文本。

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

  • ../ - 表示向上移动目录。

Grav 使用五种类型的图像链接，如下所示 -

  • 蛞蝓亲戚

  • 目录相关

  • 绝对

  • 偏僻的

  • 媒体对图像的行动

蛞蝓亲戚

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

例子

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

这里../表示您的链接向上移动一个文件夹，然后向下移动一个文件夹，img.jpg 是目标。

当您使用上述路径时，您将收到以下输出 -

重力图像链接

Grav 支持在页面的主 Markdown 文件的标题中使用 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 相对或绝对URL。

目录相关

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

例子

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

当您使用上述路径时，它将显示输出，如下所示 -

重力图像链接

绝对

绝对链接与相对链接相同，但唯一的区别是它们相对于站点的根目录并存在于/user/pages/目录中。

您可以通过两种不同的方式使用绝对链接 -

  • 您可以使用Slug 相对样式，该样式在路径中包含 slug 或目录名称，通常用于绝对链接。

  • 您可以使用绝对链接来打开带有/ 的链接。

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

当您使用上述路径时，您将收到以下输出 -

重力图像链接

偏僻的

远程图像链接允许直接通过其 URL 显示任何媒体文件。这些链接不包含您自己网站的内容。以下示例显示如何使用远程 URL 显示图像 -

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

当您单击下图所示的链接时，它将显示给定 URL 中的图像。

重力图像链接

媒体对图像的行动

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

例子

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

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

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

重力图像链接