json - 如何添加 nunjucks-date-filter？

Question

我不明白我应该把所有这些代码放在哪里， https://github.com/e-picas/nunjucks-date-filter 我有这个结构 在此处输入图像描述

这是我的模板

<div class="container">
    <div class="row">
        <div class="col-5">
            {% for date, block in block | groupby("date") %}
            <div class="date">{{ date}}</div>
            {% for name, block in block | groupby("name") %}
            <div class="about">{{ name }}</div>
            {% endfor %}
            {% for id, block in block | groupby("id") %}
            <div class="id">{{ id }}</div>
           {% endfor %}
             {% for blocks in block %}
             <img  onError="this.src='/img/no-photo.png'" src="{{blocks.image}}" alt=""> 
            {% endfor %}

            {% endfor %}
        </div>
    </div>
</div>

此时我有一个来自 Json 文件的日期格式，如 dd-mm-yyyy ，想用过滤器将其更改为 D-MMM。

Answer 1

我也有类似的情况。nunjucks-date-filter自述文件建议使用 Nunjucks Environment API 添加过滤器。但我发现这不起作用，因为 env 对象从未应用于 Nunjucks 实例。

假设您使用的是 express，这就是我的解决方法：

// main.js

const app = express();
const nunjucks = require('nunjucks');
const dateFilter = require('nunjucks-date-filter');

function setUpNunjucks(expressApp) {

  let env = nunjucks.configure('views', {
      autoescape: true,
      express: app
  });

  // note that 'date' is the function name you'll use in the template. As shown in nunjucks-date-filter's readme
  env.addFilter('date', dateFilter);

}

setUpNunjucks();

然后在您的模板中定义您想要的日期格式：

{% for date, block in block %}
    <div class="date">{{ date | date("D MMM") }}</div>
{% endfor %}