Макеты & дизайн

Мы включили несколько полезных шаблонов, чтобы вы могли начать работу, которые вы можете найти вложенными в src/_includes/layouts папку. По умолчанию eleventy использует язык шаблонов, называемый Nunjucks, с файлами, заканчивающимися на .njk.

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

  • Ваш шаблон по умолчанию - это base.njk–другие шаблоны расширяют это
  • Шаблон home.njk включает в себя вводный раздел, а затем список статей
  • Ваша страница О сайте использует шаблон page.njk–вы можете добавить больше страниц и использовать этот или другой шаблон
  • Каждая отдельная статья использует шаблон post.njk
  • На странице Статьи используется шаблон posts.njk чтобы перечислить все статьи

Ознакомьтесь с кодом в home.njk–в нем перечислены статьи, использующие Eleventy collections объекты, извлекая данные о каждом из них, в том числе некоторые из переднего плана (свойства post.data):


{%- for post in collections.posts -%}
<li{% if page.url == post.url %} aria-current="page"{% endif %}>
{{ post.data.page.date | htmlDateString }} — 
<a href='{{ post.url }}'>{{ post.data.title }}</a></li>
{%- endfor -%}

Это перебирает все ваши статьи и отображает ссылку на каждое. По мере добавления новых статей вы можете оптимизировать это, чтобы включить только ограниченное количество!

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

---
layout: layouts/page.njk
---