Question

我想将图片用于背景幻灯片（拉斯维加斯），而不是明确地将它们添加到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语句中处理“{{}}”输出。

Answer 1

如果/user/pages/01.start/是一个页面（包含Markdown文件），images只是/user/pages/01.start内的文件夹（background文件夹中没有Markdown文件）。您使用for循环图像，Grav会自动检测页面子文件夹中的图像。

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

如果您想要图片的直接网址，请使用your_image_variable.url，如果您要获取缓存的图片＆＃39;网址，请使用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页面设置为未发布，以禁止直接访问它。

Grav：在树枝模板中循环/用户/页面/图像

1 个答案: