Изучаем 11ty Часть 3: Коллекции, шорткоды, макросы

До сих пор мы рассматривали основные аспекты Eleventy. Теперь давайте углубимся в более подробные детали Eleventy.

Коллекции

На мой взгляд, коллекции — это краеугольный камень Eleventy. Коллекции позволяют группировать фрагменты контента различными способами. Это делается с помощью тегов.

Теги в Eleventy

Теги в Eleventy работают иначе, чем теги, которые вы могли видеть в других местах. У них одна цель — создавать коллекции. В то время как в других местах, где вы могли их видеть, они используются как иерархия ярлыков для контента.

Если вы помните, я упоминал, что мы собираемся улучшить нашу навигацию. Мы собираемся сделать это с помощью коллекций.

Мы начнем с добавления тегов в YAML-данные наших страниц.

---
layout: base
title: "Home"
tags: page 
---

Сделайте то же самое для файла about.md. Кроме того, мы создадим файл blog.md в папке src на том же уровне, что и другие наши файлы.

---
layout: base
title: Blog
tags: page
---

# Blog Home

• Теперь давайте перейдем в _navigation.njk и изменим его на этот:

<nav>
    {%- for item in collections.page -%}
        <a href="{{ item.url }}">{{ item.data.title }}</a>
    {%- endfor -%}
</nav>

В коде выше:

• Из коллекций, которые мы сделали (На наших страницах), мы перебираем коллекции.
• Затем мы отображаем данные из коллекций в теге якоря:

Листинг записей блога на главной странице блога

Давайте воспользуемся той же концепцией, создадим несколько записей в блоге и выведем их список на главной странице блога.

• Начнем с изменения blog.md на blog.njk — это будет необходимо для того, что мы хотим сделать.
• Затем создайте папку blog в src . В ней создайте несколько постов следующим образом:

---
title: First Post
layout: base
tags: post
---

# First Post

• Теперь измените файл blog.njk, чтобы он выглядел следующим образом:

---
layout: base
title: Blog
tags: page
---

<h1>Blog Home</h1>

<ul>
    {% for post in collections.post %}
        <li>
            <a href="{{ post.url }}">{{ post.data.title }}</a>
        </li>
    {% endfor %}
</ul>

Довольно круто, да?

Это лишь небольшой обзор коллекций, вы можете сделать с ними гораздо больше. И различные способы, которыми вы можете их использовать: Коллекции Docs

Шорткоды

Шорткоды — это способ использовать многократно используемые блоки кода. Например, на вашем сайте есть структура, которая повторяется на вашем сайте, вы можете использовать шорткод, чтобы упростить добавление этого содержимого.

Проще говоря, шорткод — это функция.

Давайте посмотрим и создадим наш первый шорткод. Допустим, нам нужны заголовок и подзаголовок на наших главных страницах, мы можем создать шорткод, как это сделано в .eleventy.js:

/* .eleventy.js */

module.exports = function(eleventyConfig) {
  eleventyConfig.addPassthroughCopy("src/assets/css/style.css");
  eleventyConfig.addPassthroughCopy("src/assets/images");

  // ADD THIS
  eleventyConfig.addShortcode(
    "headers",
    (title, subtitle) =>
      `<h1>${title}</h1>
        <p>${subtitle}</p>`
  );

  return {
    dir: {
      input: "src",
      data: "_data",
      includes: "_includes",
      layouts: "_layouts",
    },
  };
};

Теперь мы изменим index.md на index.njk и изменим его содержимое на следующее:

---
layout: base
title: Home
tags: page 
---

<img src="/assets/images/learn.png" alt="">

<!-- Shortcode in use -->
{% headers "Home", "Learning SSG"%}

<br>

I am a site built with <a href="https://www.11ty.io/">Eleventy</a>

This site is my effort to understand Eleventy. I am doing so by guiding others.

Together, we will Learn Eleventy.

Примечания

• Существует дополнение/расширение шорткодов под названием PairedShortcodes, в котором вы можете делать больше, чем мы сделали здесь. Документы по шорткодам
  • У меня есть их реализация на моем сайте здесь: Джеймс Мидзи
• Всякий раз, когда вы изменяете шорткод, вам необходимо перезапустить сервер разработки, чтобы изменения вступили в силу.

Макросы

Макросы можно использовать так же, как и шорткоды, разница лишь в их реализации. Возьмем, к примеру, шорткод, который мы только что создали, макрос для него будет выглядеть следующим образом

<!-- _includes/macros/headers.njlk -->
{%  macro pageHeading(heading, subheading) %}

<h1>{{heading}}</h1>
<p>{{subheading}}</p>

{% endmacro %}

И он будет использоваться следующим образом:

{% import "macros/headers.njk" as macro %}

{{ macro.pageHeading("Home", "Learn Eleventy")}}

Мой совет

Придерживайтесь шорткодов. Макросы имеют свойство усложняться.

Если вам действительно нужно, используйте пакет общих тегов.

Заключение

Наш сайт развивается хорошо.

• Мы улучшили навигацию
• Мы рассмотрели способ использования многократно используемых данных
• Мы добавили раздел блога на наш сайт

Как всегда:

• Рабочее репо: https://github.com/Psypher1/learneleventy
• Документация: https://www.11ty.dev/docs/
• Дискорд: https://www.11ty.dev/blog/discord/

Увидимся в следующем выпуске 😀

Спасибо, что прочитали, давайте общаться!

Спасибо, что посетили этот мой маленький уголок. Давайте общаться в Twitter, Polywork и LinkedIn