首页 文章

如何使用Liquid列出目录中的文件?

提问于
浏览
24

我正在努力学习如何使用Jekyll和Bootstrap;在研究它们时,我决定在我的主页上有一个图像轮播 .

因为我真的很懒,所以我不想硬编码显示布局中每个图像所需的路径,我也不想使用数组来存储图像列表 .

我想知道是否有任何标签可以让Jekyll做这两个步骤:

  • 查看特定目录

  • 对于在该目录中找到的每个文件,重复一段代码

基本上我想写的东西模糊地类似于这段(想象的)代码:

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

因此,例如,如果我有一个包含三个文件的文件夹,名为image01.jpg,image02.jpg,image03.jpg,我想jekyll可以为我构建这个HTML代码:

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

所以我看了this reference page但是我找不到任何有用的东西 .

拜托,您能否给我任何建议,如果可能的话,还有一个不涉及使用插件的建议?

先感谢您 .

8 回答

  • 14

    edit (2015-11-09): 杰基尔此后获得了一些更新,尤其是 site.static_pages . 检查@raphael答案以获得可能的解决方案 .

    没有使用插件是不可能的 . 您在Liquid Templates中没有I / O功能 .

    如果您的图像有前端问题,它们可能会被Jekyll处理并存储在site.pages数组中,因此可以访问,但我不建议将Front Matter放在图像上(可能对SVG有意义,但对其他任何内容都没有意义) ) .

    你最好的选择可能是写一个小的shell脚本来扫描你的文件夹中的图像并创建一个images.json文件 . 然后可以通过Ajax加载此文件 . 您每次上传新文件时都必须重新创建images.json文件(如果您使用的是Git,则可以将其作为预提交钩子) .

  • 6

    你可以使用这个插件 . 将此代码复制并粘贴到Jekyll项目根目录 _plugins 目录下的文件中 .

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

    然后使用它只需添加下面的行

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

    如果没有插件,这并非完全不可能,但当Jekyll处理您的页面时,您当然可以使用'll need to use some kludges. For example, you can put the image paths in your YAML front matter and they' .

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

    对于网站范围的图片,您需要一个插件 . 但是,如果您希望图像位于特定页面或帖子中,则应该这样做 . :)

    希望有所帮助!

  • 4

    使用Jekyll collections API,截至2015-08-07,它带来了重大警告

    收藏支持不稳定,可能会发生变化

    _config.yml 中定义集合,并在根目录中创建 _images 文件夹

    collections:
    - images
    

    无需在图像中添加YAML前端内容,Jekyll将:

    没有前端内容的集合中的文件被视为静态文件,只是简单地复制到其输出位置而不进行处理 .

    Static files具有以下属性:

    • file.path

    • file.extname

    然后页面上的代码就像(未经测试):

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

    根据@ raphael的回答,您可以使用以下代码列出jpg文件:

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

    您可能希望删除一些换行符以在输出中获取单个列表(而不是仅包含一个元素的列表) .

  • 1

    来自SillyLogger的Jekyll:DirectoryTag插件

    此标记允许您迭代特定路径上的文件 . 目录标记产生文件对象和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>
    
  • 0

    如果您不想使用插件,另一种获取文件名的方法是直接修改jekyll中的ruby static_files:路径ex:C:\ Ruby22-x64 \ lib \ ruby \ gems \ xxx \ gems \ jekyll-xxx \ LIB \杰奇

    编辑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

    请参阅docs,您可以在_post_data中列出文件,只要其名称在前面 .
    对于图像,我们需要先将它们放在_collection

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

相关问题