1

我想将图像用于背景幻灯片(拉斯维加斯),而不将它们明确添加到 yaml 文件中。

我有

/user/pages
   /01.start
   /images/
      bg1.png
      bg2.png

并且需要这样的输出

<script type="text/javascript">
   $("body").vegas({
     timer: false,
     slides: [
        { src: "/user/images/slide/bg1.png" },
        { src: "/user/images/slide/bg2.png" }
    ]
  });
</script>

我可以获得page.media.images,但我不知道如何循环/users/pages/images以及如何处理javascript语句中的“{{}}”输出。

4

1 回答 1

3

If/user/pages/01.start/是一个页面(包含一个 Markdown 文件)并且images只是一个文件夹/user/pages/01.start(文件夹中没有 Markdown 文件background)。您使用for循环图像,Grav 会自动检测页面子文件夹中的图像。

要不打印最后一个逗号,请loop.index与您拥有的图像数量进行比较(对length图像数组使用过滤器)。

如果您想要使用的图像的直接 URL your_image_variable.url,如果您要获取缓存图像的 URL,请使用your_image_variable.cache.url

    $("body").vegas({
        timer: false,
        slides: [
            {% for image in page.media.images %}
            { src: "{{ image.cache.url }}" }{% if loop.index < page.media.images|length %},{% endif %}

            {% endfor %}
     ]
   });

如果您想从特定页面获取图像,例如,/user/pages/images/background您需要在此文件夹中放置一个 Markdown 文件,让 Grav 认为此文件夹是一个页面,并且在您的主题中使用:

{% for image in pages.find('/images/background').media.images %}
    {# Your code here #}
{% endfor %}

您可以设置background页面未发布以禁止直接访问它。

于 2017-06-30T00:06:20.697 回答