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

Question

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

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

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

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

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

Answer 1

假设你有一个 post 文件 _posts/2015-05-28-post_one.md

从这个post里面你有：

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

为了提取post_one when do :

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

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

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

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

遍历我们所有的静态文件（不是页面或 posts 的文件）。

{% for img in site.static_files %}

并打印路径中包含 /images/post_one 的图像，如 /images/post_one-01.jpg或 /images/post_one-不管你-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 %}

注意代码缩进如果您的 post 是 markdown 文件，四个 space 缩进可以转换为代码片段。

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

Dynamically add and filter images in Jekyll for github pages?

jekyll

liquid

github-pages