Grav-image-linking
Grav-画像リンク
この章では、Gravでの画像リンクについて説明します。 Gravを使用すると、あるページから別のページ、さらにはリモートページに画像をリンクできます。 HTMLを使用してファイルをリンクしている場合、Gravでの画像リンクは非常に簡単に理解できます。
この構造を使用して、さまざまなタイプのリンクを使用してページにメディアファイルを表示する方法を確認します。 この構造の下のすべてのフォルダーには画像が含まれ、*/02.green/img01*の下に特別なディレクトリがあります。これはページとして機能しますが、メディアファイルのみが含まれます。
Gravマークダウンベースの画像タグの一般的な要素のいくつかを見てみましょう。
- ！-マークダウンリンクタグの先頭に配置すると、イメージタグを示します。
- [] -画像のオプションの代替テキストを指定します。
- （）-ファイルパスを含む角括弧の直後に配置されます。
- ../ -ディレクトリを上に移動することを示します。
Gravは、以下にリストする5種類の画像リンクを使用します-
- スラッグ相対
- ディレクトリ相対
- 絶対の
- リモート
- 画像のメディアアクション
スラッグ相対
現在のページへの相対画像リンクを設定し、同じディレクトリ内の別のファイルをリンクします。 相対リンクを使用する場合、ソースファイルの場所は宛先の場所と同じくらい重要です。 移動中にファイルのパスを変更すると、リンクが壊れる可能性があります。 このイメージリンク構造を使用する利点は、ファイル構造が一定である限り、ローカル開発サーバーと異なるドメイン名のライブサーバーを切り替えることができることです。
例
ここで、 ../ は、リンクが1つのフォルダーを上に移動し、次に1つのフォルダーを下に移動し、img.jpgが宛先であることを示します。
上記のパスを使用すると、次の出力が表示されます-
Gravは、ページのプライマリマークダウンファイルのヘッダーでスラッグをサポートし、このスラッグは、指定されたページのフォルダー名の代わりになります。
*01.sky* フォルダーに *.md* ファイル（ */pages/01.blue/01.sky/text.md* など）で設定されたスラッグがある場合、ファイルのヘッダーは次のようになります----
title: Sky
slug: test-slug
taxonomy:
category: blog
---上記のコードでは、オプションのスラッグ test-slug を設定しています。 スラッグを設定したら、リンクに*スラッグ相対*または*絶対* URLが設定されているメディアファイルにリンクできます。
ディレクトリ相対
このタイプのリンクでは、現在のページへのディレクトリ相対画像リンクを設定できます。 URLスラッグを使用する代わりに、ディレクトリ相対画像リンク内のフォルダ名を使用してフルパスで参照できます。
例
上記のパスを使用すると、次のように出力が表示されます-
絶対の
絶対リンクは相対リンクと同じですが、唯一の違いは、サイトのルートに相対的であり、 /user/pages/ ディレクトリに存在することです。
あなたは2つの異なる方法で絶対リンクを使用することができます-
- パスにスラッグまたはディレクトリ名を含め、絶対リンクで一般的に使用される*スラッグ相対*スタイルを使用できます。
- A/ でリンクを開く Absolute Link を使用できます。
上記のパスを使用すると、次の出力が表示されます-
リモート
リモート画像リンクを使用すると、URLを介してメディアファイルを直接表示できます。 これらのリンクには、自分のサイトのコンテンツは含まれません。 次の例は、リモートURLを使用して画像を表示する方法を示しています-
下の画像に示されているリンクをクリックすると、指定されたURLの画像が表示されます。
画像上のメディアアクション
ページに関連付けられた画像により、link：/grav/grav_media [Gravのメディアアクション]の利点を活用できます。 Gravでコンテンツを作成するときに、画像、動画、その他のファイルなどの一部のメディアファイルを表示できます。
例
次の形式を使用して画像を読み込むことができます-
上記のパスを使用すると、次のように出力が表示されます-
