Question

Nunjucks的新手，与here有类似的问题，但我无法让我的代码工作。我试图在14个项目的Nunjucks循环中遍历前5个项目。到目前为止，我发现range function应该能够完成此任务，但无法正确使用语法。我似乎错误地指向了索引。

我获取所有14项的代码是：

    {% for images in index %}
      <div class="spacer col-md-2 col-sm-6">
      </div>
      <div class="yellp-img col-md-2 col-sm-6">
        <img src="/uploads/images/{{ images.image.filename }}" />
      </div>
    {% endfor %}

这将打印索引中的所有14个图像。我还可以使用以下内容打印14张图像：

    {% for images in range(0, index.length) -%}
      <div class="spacer col-md-2 col-sm-6">
      </div>
      <div class="yellp-img col-md-2 col-sm-6">
        <img src="/uploads/images/{{ images.image.filename }}" />
      </div>
    {%- endfor %}

问题是所有图像都被破坏（在src url中没有文件名打印），如下所示：

<img src="/uploads/images/" />

这可能很明显，但我无法弄清楚如何使用文件名中的数据限制打印的图像数量。

更新（回复下面的Aikon评论）：图像数据存储为JSON（使用Keystonejs CMS通过Express / Node加载）。从Express加载的数据的控制台日志如下：

    images={ _id: 59acf4ef822f172bc92ceaf9,
  __v: 0,
  image: 
   { filename: 'b8LMOFEstFE0K8eW.png',
     size: 7070,
     mimetype: 'image/png' } },{ _id: 59acf58d822f172bc92ceafa,
  __v: 0,
  image: 
   { filename: 'SZSJDneW0l3DumOz.png',
     size: 10070,
     mimetype: 'image/png' } },{ _id: 59acf6a4822f172bc92ceafb,
  __v: 0,
  image: 
   { filename: 'CLlGDaqZv6gBDt1B.png',
     size: 9235,
     mimetype: 'image/png' } },{ _id: 59acf751822f172bc92ceafc,
  __v: 0,
  image: 
   { filename: 'x-K9if9xSIaDFD-0.png',
     size: 8670,
     mimetype: 'image/png' } },{ _id: 59acf7ac822f172bc92ceafd,
  __v: 0,
  image: 
   { filename: '4dTpPFWD3nqCKqcr.png',
     size: 11181,
     mimetype: 'image/png' }

这是我的keystone视图中的以下代码从MongoDB通过Express / Node加载图像数据的结果：

    // Load the current post
view.on('init', function(next) {

    var images = keystone.list('ImageUpload').model.find()
        .sort('-createdAt')
        .limit(5)
        .populate('images');

    images.exec(function(err, result) {
        if (result !== null) {
            var images = result;
            console.log('images=' + images);
        } else {
            console.log('404!!!');
            return res.status(404).render('errors/404');
        }
        next(err);
    });

});

// Load All Images
view.query('index', keystone.list('ImageUpload').model.find());

// Render the view
view.render('index');

因此索引是指当前视图，而不是数据库模型。希望这澄清。

Answer 1

您可以使用 loop.index 值 (documentation) 以可移植的方式限制数字：

{% for images in index %}
  {% if (loop.index <= 5) %}
    <div class="spacer col-md-2 col-sm-6">
    </div>
    <div class="yellp-img col-md-2 col-sm-6">
      <img src="/uploads/images/{{ images.image.filename }}" />
    </div>
  {% endif %}
{% endfor %}

Answer 2

$cfg['Servers'][$i]['host'] = 'localhost:3307'

// Nunjucks
{% set length = images.length if images.length < 13 else 13 %} 
{% for i in range(0, length) %}
<img src="/uploads/images/{{images[i].image.filename}}" />
{% endfor %}

Nunjucks：循环前5个项目for循环

2 个答案: