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

Posted 2023-03-06

【中文标题】如何打印帖子 11ty 的通用大写字母？

【英文标题】：How to print common capital letter for posts 11ty?

【发布时间】：2021-11-19 12:27:01

【问题描述】：

我在我的 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 中，很难分配/重写和操作变量。也许有一些正常的例子？

【参考方案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 应该可以。）