显示Jekyll支持的网站上目录中的所有图像



它不一定是Jekyll使用的东西。

基本上,我正在创建一个画廊,将使用灯箱。我想从目录(_site\images\gallery)中加载所有图像,以便灯箱显示及其缩略图(待确定和创建)。

对此,最好的方法是什么?我已经设置并测试了灯箱(没有缩略图)。

提前谢谢。

Jekyll没有办法"列出文件夹的内容"。

不过,你可以通过使用yaml front来做一件非常近似的事情。

在"图库页面"中,包括一个包含图像文件名的部分:

---
images:
  - a.jpg
  - b.jpg
  - c.jpg
<other properties, like title, etc>
---

然后,当你想列出你的图像时,用一个循环产生链接。我不熟悉lighbox的图像语法,但它可能看起来像这样:

<ul class="something">
{% for image in page.images %}
  <li class="something">
    <a rel="something" class="something" href="/path/to/images/dir/{{ image }}" />
  </li>
{% endfor %}
</ul>

(当我不确定某件事时,我会在每个地方都加上"某件事"。你可能不得不完全删除一些"某件事情"。你必须将/path/to/images/dir/修改为你的图像所在的位置)

一旦html被更改为使用lightbox,添加新图像所需做的唯一事情就是:a)将其放入images目录,b)编辑图库页面,并在列表中引入新图像名称。

它不像"自动生成"列表那样方便,但它非常接近。

在Jekyll中列出当前目录中的jpg文件可以这样做:

{% for file in site.static_files %}
  {% assign pageurl = page.url | replace: 'index.html', '' %}
  {% if file.path contains pageurl %}
    {% if file.extname == '.jpg' or file.extname == '.jpeg' or file.extname == '.JPG' or file.extname == '.JPEG' %}
    <img src="{{ file.path }}" />
    {% endif %}
  {% endif %}
{% endfor %}

有关此解决方案的更多信息,请访问此处:http://jekyllrb.com/docs/static-files/.我为Jekyll创建了一个灯箱扩展,它列在我的页面Jekyll上,没有插件。看看吧!

尝试https://github.com/simoarpe/azores-image-gallery

免责声明:我是作者。

我已经尝试了Github上已经可用的一些项目,但其中大多数已经停止或部分工作,最后,我决定从周围的好地方开始,自己实现一些东西。结果是亚速尔群岛图片库
有关更详细的解释,请查看自述文件。

我喜欢Jekyll插件。

试试其中一个:Jekyll Gallery、Jekyll画廊生成器或文件夹画廊。

检查每个插件的Ruby文件,并修改生成的图像标记以包含lightbox的类。这就行了。不要忘记在默认模板页面中包含lightbox-css文件。

最新更新