【问题标题】:Grav: loop over /user/pages/images in twig templateGrav:循环遍历树枝模板中的 /user/pages/images
【发布时间】:2023-04-06 04:44:02
【问题描述】:

我想将图像用于背景幻灯片(拉斯维加斯),而不是将它们显式添加到 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 语句中的“{{}}”输出。

【问题讨论】:

    标签: twig grav


    【解决方案1】:

    如果/user/pages/01.start/ 是一个页面(包含一个 Markdown 文件),而images 只是/user/pages/01.start 中的一个文件夹(background 文件夹中没有 Markdown 文件)。你使用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页面未发布以禁止直接访问。

    【讨论】:

    • 感谢您的宝贵见解!但我不想遍历 page.media.images 但 /user/pages/images/background .... 我该如何解决这些问题?
    • 这行得通,谢谢。但是:当我更改(添加/删除)背景文件夹中的图像时,它们仅在我清理缓存时应用...
    • @JanGalinski 这是由 Grav 的缓存引起的,与您的循环问题无关。根据您配置缓存设置的方式,您可能会在清除缓存并在浏览器上进行硬刷新后看到新内容。
    • 是的,我明白……没问题,不会经常改变。你帮了我很多,让它启动并运行。
    猜你喜欢
    • 1970-01-01
    • 2016-09-02
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-07-27
    相关资源
    最近更新 更多