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

【问题标题】：Dynamically add and filter images in Jekyll for github pages?在 Jekyll 中为 github 页面动态添加和过滤图像？
【发布时间】：2015-05-28 18:53:05
【问题描述】：

我正在尝试使用 Jekyll 来帮助那些不太懂技术的人维护自己的静态站点。我希望能够在应用程序的根 /images 中有一个图像目录，其中包含遵循命名约定的图像：

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

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

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

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

【问题讨论】：

如何使用while循环通过ajax检索这些图像？

标签： jekyll liquid github-pages

【解决方案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文件，注意代码缩进，四个空格缩进可以转换为代码sn-p。

【讨论】：

谢谢！效果很好！