在Jekyll中为github页面动态添加和过滤图像？

Question

我正在尝试杰基尔帮助那些不是所有技术人员维护他们自己的静态网站的人。我希望能够在应用程序的根/images中包含一个图像目录，其中包含遵循命名约定的图像：

post_one_1.jpg, post_one_2.jpg, post_two_1.jpg, post_two_2.jpg ... etc.

然后我希望用户创建一个帖子（post_one）并从images目录中动态获取与该帖子相关的所有图像。

这个插件（https://gist.github.com/jgatjens/8925165）几乎完全符合我的需要，但与github页面不兼容。

是否有解决方案我可以将网站交给用户，他们只需要按照命名约定将图像添加到图像目录，然后创建帖子并访问图像？

Answer 1

鉴于你有一个帖子文件 _posts / 2015-05-28-post_one.md

从这篇文章里面你有：

• page.id = / 2015/05/29 / post_one
• page.dir = / 2015/05/29

为了提取 post_one ，请执行以下操作：

{% assign imgNameStart = page.id | remove: page.dir | remove: "/" %}

我们现在生成我们搜索的基本路径：

{% assign imgBasePath = imgNameStart | prepend: "/images/" %}

在这种情况下，它将是 imgBasePath =“/ images / post_one”

遍历所有静态文件（非页面或帖子的文件）。

{% for img in site.static_files %}

打印路径中 / images / post_one 的图片，例如 /images/post_one-01.jpg 或 / images / post_one-wathever-you -want.jpg

{% if img.path contains imgBasePath %}
<img src="{{ site.baseurl }}{{ img.path }}">
{% endif %}
{% endfor %}

所有在一起：

{% assign imgNameStart = page.id | remove: page.dir | remove: "/" %}
{% assign imgBasePath = imgNameStart | prepend: "/images/" %}
{% for img in site.static_files %}
{% if img.path contains imgBasePath %}
<img src="{{ site.baseurl }}{{ img.path }}">
{% endif %}
{% endfor %}

如果您的帖子是markdown文件，请注意代码缩进，可以将四个空格缩进转换为代码段。