如何在 Eleventy + Nunjucks 中设置[未来、非当前]日期的格式？

Question

我正在为当地乐队建立一个带有 CMS (Netlify) 的网站，他们会将未来的演出日期放在该网站上。到目前为止，日期显示为非常长的非格式化字符串，其中包括时间和时区。我正在尝试弄清楚如何将日期格式设置得更简单（例如日期、日期、时间）。

我尝试过像 nunjucks-date 这样的插件，但我对在这种情况下如何使用插件（和过滤器）有点困惑。

我的仓库：https://github.com/mollycarroll/serapis-eleventy-2

演出条目示例：

---
layout: gig
venue: Cedar Lake Cellars
date: 2022-05-28
time: 6pm
city: Wright City, MO
---

演出模板：

<h2>{{ venue }}</h2>
<h4>{{ city }} {{ date }} {{ time }}</h4>

CMS 的 config.yml：

  - name: 'gigs'
    label: 'Shows'
    folder: 'src/gigs'
    create: true
    slug: '{{month}}-{{day}}-{{venue}}'
    fields:
    - { label: 'Layout', name: 'layout', widget: 'hidden', default: '_includes/gig.njk' }
    - { label: 'Date', name: 'date', widget: 'date', default: '' }
    - { label: 'Time', name: 'time', widget: 'string', default: '' }
    - { label: 'Venue', name: 'venue', widget: 'string', default: '' }
    - { label: 'City', name: 'city', widget: 'string', default: '' }

感谢您的帮助。

Answer 1

首先，您应该创建一个过滤器，假设

src/filters/date.js

包含以下内容：

const { DateTime } = require("luxon");

// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL d, y unless an
// alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens

module.exports = (dateObj, format = 'LLLL d, y') => {
  return DateTime.fromISO(dateObj, { zone: "Europe/Amsterdam", locale: "en" }).toFormat(format);
};

请务必查看 Luxon 文档以了解详细信息。然后在.eleventy.js中添加过滤器：

module.exports = function(eleventyConfig) {
  ...
  eleventyConfig.addFilter("date", require("./src/filters/date.js"));
  ... 
};

现在您可以在 Nunjacks 中使用默认值

{{ date }}

，在本例中为“LLLL d, y”，或者您网站上某个位置所需的任何值

{{ date | date('dd. LLLL yyyy.') }}

。如果您在某个时候只需要月份和年份或仅需要日期和月份，这会非常有用。

您甚至可以创建多个语言过滤器，例如

dateEn.js

和

dateDe.js

，如果您有多语言网站，请将每个过滤器格式化为其自己的语言。

希望这有帮助。

编辑：为了使此过滤器正常工作，

dateObj

应采用 ISO 8601 格式。

Answer 2

虽然 user3488304 很好，但它不能处理传入值是 Date() 对象的情况，这就是您在下面的情况下看到的情况

{%- for post in collections.posts.reverse() %}
<span class="post-meta">{{ post.data.date | date("LLLL dd, yyyy") }}</span>
<!-- etc -->
{%- endfor %}

所以你可能想这样写

./src/filters/date.js

const {
    DateTime
} = require("luxon");

// Add a friendly date filter to nunjucks.
// Defaults to format of LLLL dd, yyyy unless an alternate is passed as a parameter.
// {{ date | friendlyDate('OPTIONAL FORMAT STRING') }}
// List of supported tokens: https://moment.github.io/luxon/docs/manual/formatting.html#table-of-tokens

module.exports = (dateObj, format = 'LLLL dd, yyyy') => {
    if (dateObj instanceof Date) {
        return DateTime.fromJSDate(dateObj, {
            zone: 'utc',
            locale: "en"
        }).toFormat(format);
    } else {
        return DateTime.fromISO(dateObj, {
            zone: "utc",
            locale: "en"
        }).toFormat(format);
    }
};

当然不要忘记在 .eleventy.js 中添加过滤器：

module.exports = function(eleventyConfig) {
  ...
  eleventyConfig.addFilter("date", require("./src/filters/date.js"));
  ... 
};