如何打印帖子 11ty 的通用大写字母？

Question

我的第 110 篇博客中有帖子 - 书籍，其名称以某些字母开头。例如，我有 12 本书：4 本首字母为“A”，4 本首字母为“F”，4 本首字母为“Q”。

我有一个打印所有书籍的代码（我在博客布局中使用 njk）：

        <div>
        {% for book in collections.books %}
              <a class="book" href="{{ book.url }}">
                <article>
                    <h3 class="text-link">
                      {{ book.data.name }}
                    </h3>
                    <p>{{ book.data.text }}</p>
                </article>
              </a>
          {% endif %}
        {% endfor %}
        </div>

我需要在所有书前打印字母“A”：

<h2>A</h2>

А之后将有 4 本书带有字母“A”。在这本书之后，将是相同的标题，但带有字母“F”：

<h2>F</h2>

怎么做？在njk中，很难assign/rewrite和操作变量。也许有一些正常的例子？

Answer 1

您可以使用 Nunjucks's set tag 创建和修改跟踪前一个首字母的变量：

<div>
  {% set previousInitial = null %}
  {% for book in collections.books %}
    {% if book.data.name[0] != previousInitial %}
      <h2>{{ book.data.name[0] }}</h2>
    {% endif %}
    {% set previousInitial = book.data.name[0] %}
    <a class="book" href="{{ book.url }}">
      <article>
        <h3 class="text-link">
          {{ book.data.name }}
        </h3>
        <p>{{ book.data.text }}</p>
      </article>
    </a>
  {% endfor %}
</div>

演示：

const data = {
  collections: {
    books: [
      { data: { name: 'ABC Book', text: 'Learn the alphabets!' }, url: '/book/abc-book/' },
      { data: { name: 'Another A book', text: 'A nice book' }, url: '/book/another-a-book/' },
      { data: { name: 'Foo...', text: '...bar and baz' }, url: '/book/foo/' },
    ],
  },
}

const template = `
  <div>
    {% set previousInitial = null %}
    {% for book in collections.books %}
      {% if book.data.name[0] != previousInitial %}
        <h2>{{ book.data.name[0] }}</h2>
      {% endif %}
      {% set previousInitial = book.data.name[0] %}
      <a class="book" href="{{ book.url }}">
        <article>
          <h3 class="text-link">
            {{ book.data.name }}
          </h3>
          <p>{{ book.data.text }}</p>
        </article>
      </a>
    {% endfor %}
  </div>
`

console.log(nunjucks.renderString(template, data))

.as-console-wrapper { max-height: 100% !important; }

<script src="https://unpkg.com/nunjucks@3.2.3/browser/nunjucks.min.js"></script>

如果 collections.books 中的项目尚未按名称排序，您可以使用 Nunjucks's sort filter:

对它们进行排序

{% for book in collections.books|sort(attribute='data.name') %}

另一种方法是 create a new collection。考虑创建一个已经按首字母分类的书籍集合，这样您就可以减少 Nunjucks 模板中的逻辑量。新集合和模板的外观示例：

const data = {
  collections: {
    booksCategorizedByInitialLetters: {
      A: [
        { data: { name: 'ABC Book', text: 'Learn the alphabets!' }, url: '/book/abc-book/' },
        { data: { name: 'Another A book', text: 'A nice book' }, url: '/book/another-a-book/' },
      ],
      F: [
        { data: { name: 'Foo...', text: '...bar and baz' }, url: '/book/foo/' },
      ],
    },
  },
}

const template = `
  <div>
    {% for initialLetter, books in collections.booksCategorizedByInitialLetters %}
      <h2>{{ initialLetter }}</h2>
      {% for book in books %}
        <a class="book" href="{{ book.url }}">
          <article>
            <h3 class="text-link">
              {{ book.data.name }}
            </h3>
            <p>{{ book.data.text }}</p>
          </article>
        </a>
      {% endfor %}
    {% endfor %}
  </div>
`

console.log(nunjucks.renderString(template, data))

.as-console-wrapper { max-height: 100% !important; }

<script src="https://unpkg.com/nunjucks@3.2.3/browser/nunjucks.min.js"></script>

（我不确定是否可以创建类型为对象的集合，但 IIRC 应该可以。）

如何打印帖子 11ty 的通用大写字母？

How to print common capital letter for posts 11ty?

collections

nunjucks

eleventy