32

Bootstrap と一緒に Jekyll を使用する方法を学ぼうとしています。それらを研究しているうちに、ホームページに画像カルーセルを置きたいと思いました。

私は本当に怠け者なので、レイアウト内のすべての画像を表示するために必要なパスをハードコーディングしたくありません。また、配列を使用して画像のリストを保存することも好みません。

次の 2 つの手順を Jekyll に実行させるタグがあるかどうか疑問に思っていました。

  1. 特定のディレクトリ内を調べる
  2. そのディレクトリで見つかったファイルごとに、コードのブロックを繰り返します

基本的に、私が書きたいのは、この (架空の) コードに漠然と似ているものです。

{% for file in directory %}
    <img src="{{ file.url }}" />
{% endfor %}

たとえば、image01.jpg、image02.jpg、image03.jpg という名前の 3 つのファイルを含むフォルダーがある場合、jekyll が次の HTML コードを作成してくれることを望みます。

<img src="folder/image01.jpg" />
<img src="folder/image02.jpg" />
<img src="folder/image03.jpg" />

だから私はこのリファレンスページを見ましたが、私の目的に役立つものは何も見つかりませんでした.

可能であれば、プラグインの使用を伴わない提案を教えてください。

前もって感謝します。

4

9 に答える 9

14

プラグインなしで完全に不可能というわけではありませんが、もちろん、いくつかのクラッジを使用する必要があります. たとえば、画像のパスを YAML フロント マターに配置すると、Jekyll がページを処理するときに使用できるようになります。

---
carousel_images:
  - images/img01.png
  - images/img02.png
  - images/img03.png
---

# Lots of page-related code.

{% for img in page.carousel_images %}
  # Do something.
{% endfor %}

サイト全体の画像の場合は、プラグインが必要です。ただし、画像を特定のページまたは投稿に配置したい場合は、これで十分です。:)

それが役立つことを願っています!

于 2013-07-04T14:25:33.187 に答える
9

@raphael の回答に基づいて、次のコードを使用して jpg ファイルを一覧表示できます。

{% for file in site.static_files %}
  {% if file.extname == ".jpg" -%}
     * [{{ file.path }}]({{ site.baseurl }}{{ file.path }})
  {%- endif %}
{% endfor %}

おそらく、改行文字の一部を削除して、出力に単一のリストを取得することをお勧めします (要素が 1 つだけのリストではなく)。

于 2015-12-01T14:45:34.300 に答える
8

編集 (2015-11-09): Jekyll はその後、特にsite.static_pages. 可能な解決策については、@raphaelの回答を確認してください。

プラグインを使わないと無理です。Liquid テンプレート内には I/O 機能がありません。

画像に前付がある場合、それらは Jekyll によって処理され、site.pages 配列に格納されるため、アクセス可能になる可能性がありますが、前付を画像に配置することはお勧めしません (SVG では意味があるかもしれませんが、それ以外では意味がありません)。 ）。

おそらく最善の策は、フォルダー内の画像をスキャンして images.json ファイルを作成する小さなシェル スクリプトを作成することです。このファイルは、Ajax 経由でロードできます。新しいファイルをアップロードするたびに images.json ファイルを再作成するだけで済みます (Git を使用している場合は、pre-commit フックとしてそれを行うことができます)。

于 2013-07-04T08:27:34.377 に答える
2

SillyLoggerのJekyll:DirectoryTagプラグイン

このタグを使用すると、特定のパスにあるファイルを反復処理できます。directory タグは、ファイル オブジェクトと forloop オブジェクトを生成します。ファイルが標準の Jekyll 形式である YYYY-MM-DD-file-title に準拠している場合、それらの属性はそのファイル オブジェクトに取り込まれます。

例えば画像で

<ul>
  {% directory path: images/vacation exclude: private %}
    <li>
      <img src="{{ file.url }}"
           alt="{{ file.name }}"
           datetime="{{ file.date | date_to_xmlschema }}" />
    </li>
  {% enddirectory %}
</ul>
于 2015-08-05T16:35:32.680 に答える