Làm cách nào để liệt kê các tệp trong thư mục có Chất lỏng?

Question

Tôi đang cố gắng tìm hiểu cách sử dụng Jekyll cùng với Bootstrap; trong khi nghiên cứu, tôi quyết định rằng tôi muốn có một băng chuyền hình ảnh trên trang chủ của mình.

Vì tôi thực sự lười nên tôi không muốn mã hóa đường dẫn cần thiết để hiển thị mọi hình ảnh bên trong bố cục và tôi không muốn sử dụng mảng để lưu trữ danh sách hình ảnh.

tôi đã tự hỏi nếu có bất kỳ thẻ mà có thể hỏi Jekyll làm hai bước sau:

1. Nhìn bên trong một thư mục cụ thể
2. Đối với mỗi tập tin bạn tìm thấy trong thư mục đó, lặp lại một khối mã

về cơ bản những gì tôi muốn viết là cái gì đó mơ hồ giống như mảnh này (tưởng tượng) mã:

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

Vì vậy, nếu, ví dụ, tôi có một thư mục với ba tập tin có tên image01.jpg, image02.jpg, image03.jpg, tôi muốn Jekyll mà có thể xây dựng mã HTML này cho tôi:

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

Vì vậy, Tôi đã có một cái nhìn tại this reference page nhưng tôi đã không tìm thấy bất cứ điều gì hữu ích cho mục đích của tôi.

Vui lòng, bạn có thể đưa ra cho tôi bất kỳ đề xuất nào và nếu có thể, một đề xuất không liên quan đến việc sử dụng plugin?

Cảm ơn bạn trước.

Answer 1

chỉnh sửa (2015-11-09): Jekyll đã nhận được một số cập nhật, đặc biệt là site.static_pages. Kiểm tra câu trả lời @raphael cho một giải pháp có thể.

Không thể sử dụng plugin. Bạn không có khả năng I/O bên trong Mẫu chất lỏng.

Nếu hình ảnh của bạn có vấn đề phía trước, chúng có thể được xử lý bởi Jekyll và được lưu trữ trong mảng site.pages và do đó có thể truy cập được, nhưng tôi sẽ không đề nghị đặt Mặt trận trên hình ảnh (có thể có ý nghĩa đối với SVG, nhưng không cho bất cứ điều gì khác).

Đặt cược tốt nhất của bạn có thể là viết một kịch bản lệnh nhỏ để quét thư mục của bạn cho hình ảnh và tạo tệp hình ảnh.json. Tệp này sau đó có thể được tải qua Ajax. Bạn chỉ cần tạo lại tệp images.json mỗi khi bạn tải lên một tệp mới (nếu bạn đang sử dụng Git, bạn có thể thực hiện điều đó dưới dạng móc nối trước).

Answer 2

Nó không phải là hoàn toàn không thể không có plugin, nhưng tất nhiên bạn sẽ cần phải sử dụng một số kludges. Ví dụ, bạn có thể đặt các đường dẫn hình ảnh trong tài liệu YAML của bạn và chúng sẽ có sẵn khi Jekyll xử lý trang của bạn.

--- 
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 %} 

Đối với hình ảnh trên toàn trang web, bạn cần có plugin. Nhưng nếu bạn muốn hình ảnh của bạn được đặt trong một trang hoặc bài viết cụ thể, điều này sẽ làm. :)

Hy vọng điều đó sẽ hữu ích!

Answer 3

Bạn có thể sử dụng plugin này.Sao chép và dán mã này vào một tệp bên trong thư mục _plugins tại gốc của dự án Jekyll của bạn.

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

Sau đó, để sử dụng nó chỉ cần thêm dòng dưới đây

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

Answer 4

Plugin Jekyll:DirectoryTag từ SillyLogger

Thẻ này cho phép bạn duyệt qua các tập tin tại một con đường cụ thể. Thẻ thư mục mang lại một đối tượng tệp và một đối tượng forloop. Nếu tệp tuân theo định dạng Jekyll tiêu chuẩn, YYYY-MM-DD-file-title, thì các thuộc tính đó sẽ được điền vào đối tượng tệp đó.

Ví dụ với hình ảnh

<ul> 
    {% directory path: images/vacation exclude: private %} 
    <li> 
     <img src="{{ file.url }}" 
      alt="{{ file.name }}" 
      datetime="{{ file.date | date_to_xmlschema }}" /> 
    </li> 
    {% enddirectory %} 
</ul> 

Answer 5

Sử dụng API Jekyll collections, trong đó, như của 2015/08/07 đi kèm với cảnh báo lớn

Collections hỗ trợ là không ổn định và có thể thay đổi

Xác định bộ sưu tập trong _config.yml và tạo ra _images thư mục trong thư mục gốc của bạn

collections: 
- images 

Mà không cần phải thêm YAML trước vấn đề để hình ảnh của bạn, Jekyll sẽ:

tập tin trong bộ sưu tập mà không có vấn đề phía trước được đối xử như các tập tin tĩnh và đơn giản sao chép vào vị trí đầu ra của họ mà không cần xử lý.

Static files có các thuộc tính sau:

• file.path
• file.extname

Và sau đó mã trên trang web của bạn sẽ là một cái gì đó như (chưa được kiểm tra):

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

Answer 6

Dựa trên câu trả lời @ raphael, bạn có thể sử dụng đoạn mã sau để liệt kê các file jpg:

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

Có thể bạn muốn loại bỏ một số ký tự xuống dòng để có được một danh sách duy nhất trong đầu ra (thay vì danh sách chỉ với một phần tử).

Answer 7

Nếu bạn không muốn sử dụng plugin, cách khác để lấy tên tệp là sửa đổi trực tiếp static_files ruby ​​trong jekyll: Đường dẫn cũ: C: \ Ruby22-x64 \ lib \ ruby ​​\ gems \ xxx \ gems \ jekyll-xxx \ lib \ jekyll

Chỉnh sửa static_files.rb và thay đổi:

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

tới:

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

Bây giờ bạn đã có thể liệt kê mỗi "png" tập tin và nhận được tên của nó trong một thư mục DIR_NAME sử dụng:

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