我正在努力学习如何使用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 回答
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,则可以将其作为预提交钩子) .
你可以使用这个插件 . 将此代码复制并粘贴到Jekyll项目根目录
_plugins
目录下的文件中 .https://gist.github.com/jgatjens/8925165
然后使用它只需添加下面的行
如果没有插件,这并非完全不可能,但当Jekyll处理您的页面时,您当然可以使用'll need to use some kludges. For example, you can put the image paths in your YAML front matter and they' .
对于网站范围的图片,您需要一个插件 . 但是,如果您希望图像位于特定页面或帖子中,则应该这样做 . :)
希望有所帮助!
使用Jekyll collections API,截至2015-08-07,它带来了重大警告
在
_config.yml
中定义集合,并在根目录中创建_images
文件夹无需在图像中添加YAML前端内容,Jekyll将:
Static files具有以下属性:
file.path
file.extname
然后页面上的代码就像(未经测试):
根据@ raphael的回答,您可以使用以下代码列出jpg文件:
您可能希望删除一些换行符以在输出中获取单个列表(而不是仅包含一个元素的列表) .
来自SillyLogger的Jekyll:DirectoryTag插件
例如图像
如果您不想使用插件,另一种获取文件名的方法是直接修改jekyll中的ruby static_files:路径ex:C:\ Ruby22-x64 \ lib \ ruby \ gems \ xxx \ gems \ jekyll-xxx \ LIB \杰奇
编辑static_files.rb并更改:
至:
您现在可以列出每个“png”文件,并使用以下命令在DIR_NAME目录中获取其名称:
请参阅docs,您可以在_post,_data中列出文件,只要其名称在前面 .
对于图像,我们需要先将它们放在_collection