web-dev-qa-db-ja.com

Liquidを使用してディレクトリ内のファイルを一覧表示するにはどうすればよいですか？

Bootstrapと一緒にJekyllを使用する方法を学ぼうとしています。勉強しながら、ホームページに画像カルーセルを載せたいと思いました。

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

Jekyllに次の2つの手順を実行するように要求できるタグがあるかどうか疑問に思いました。

  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" />

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

プラグインの使用を伴わない提案、可能であれば提案をお願いします。

前もって感謝します。

jekyllliquid
27
Cesco

edit（2015-11-09）： Jekyllはその後、いくつかの更新、特にsite.static_pagesを取得しました。考えられる解決策については、@ raphaelの回答を確認してください。

プラグインなしでは不可能です。 Liquidテンプレート内にI/O機能がありません。

画像にフロントマターがある場合、それらはJekyllによって処理され、site.pages配列に格納されてアクセスできる可能性がありますが、フロントマターを画像に配置することはお勧めしません（SVGには意味があるかもしれませんが、他には意味がありません） ）。

最善の策は、フォルダーをスキャンして画像を探し、images.jsonファイルを作成する小さなシェルスクリプトを作成することです。このファイルは、Ajaxを介してロードできます。新しいファイルをアップロードするたびに、images.jsonファイルを再作成する必要があります（Gitを使用している場合は、事前コミットフックとしてそれを行うことができます）。

6
Polygnome

このプラグインを使用できます。このコードをコピーして、Jekyllプロジェクトのルートにある_pluginsディレクトリ内のファイルに貼り付けます。

https://Gist.github.com/jgatjens/8925165

次に、それを使用するには、以下の行を追加するだけです

{% loop_directory directory:images iterator:image filter:*.jpg sort:descending %}
   <img src="{{ image }}" />
{% endloop_directory %}
18
jgatjens

Jekyllの使用 collections API、2015年8月7日現在、大きな警告がありました

コレクションのサポートは不安定であり、変更される可能性があります

_config.ymlでコレクションを定義し、ルートディレクトリに_imagesフォルダーを作成します

collections:
- images

画像にYAMLフロントマターを追加する必要なしに、Jekyllは次のことを行います。

フロントマターのないコレクション内のファイルは静的ファイルとして扱われ、処理せずに出力場所にコピーされます。

静的ファイル 次の属性があります。

  • file.path
  • file.extname

そして、あなたのページのコードはlike（未テスト）のようになります：

{% for image in site.images %}
     {% if image.extname == 'jpg' %}
         <img src="{{ file.url }}" />
     {% endif %}
{% endfor %}
14
raphael

プラグインなしでは完全に不可能ではありませんが、もちろん、いくつかの応急修理を使用する必要があります。たとえば、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 %}

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

お役に立てば幸いです。

14
agarie

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

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

（要素が1つしかないリストではなく）出力に単一のリストを取得するために、改行文字の一部を削除することをお勧めします。

7
Gabor Szarnyas

Jekyll：DirectoryTag SillyLoggerのプラグイン

このタグを使用すると、特定のパスにあるファイルを反復処理できます。ディレクトリタグは、ファイルオブジェクトと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>
1
raphael

docs を参照してください _post 、 _data その名前が前書きにある限り。
画像の場合、最初に _collection

{% for file_hash in site.post %}
{% assign file = file_hash[1] %}
{{ file.name }}
{% endfor %}
0
Chetabahana

プラグインを使用したくない場合、ファイル名を取得する別の方法は、Ruby static_files in jekyll：Path ex：C：\ Ruby22-x64\lib\Ruby\gems\xxx\gems\jekyll-xxx\lib\jekyll

Static_files.rbを編集し、以下を変更します。

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path)
  }
end

に：

def to_liquid
  {
    "extname"       => extname,
    "modified_time" => modified_time,
    "path"          => File.join("", relative_path),
    "name"          => @name
  }
end

これで、各「png」ファイルを一覧表示し、次を使用してDIR_NAMEディレクトリでその名前を取得できるようになりました。

{% for file in site.static_files %}
  {% if file.extname == ".png" and file.path contains '/DIR_NAME/' %} 
   {{ file.name }}
  {% endif %}
{% endfor %}
0
gguen