Я пытаюсь использовать 11ty для создания страниц сайта с обзорами фильмов. Структура моей папки _data следующая.

_data
  movies
    2017
      title1.json
      title2.json
    2018
    2019

Я надеюсь на такой результат.

_site
  movies
    2017
      title-1.html
      title-2.html
    2018

Я бы согласился на такой вывод.

_site
  movies
    title-1.html
    title-2.html

Но я не могу понять, как приблизиться! Есть идеи? Вот мой шаблон nunjucks. TitleWithYear - это свойство в каждом файле .json.

---
pagination:
    data: movies
    size: 1
    alias: movie
    resolve: keys
permalink: "movies/{{ year??? }}/{{ movie.TitleWithYear | slug }}/index.html"
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
  </head>
  <body>
    <h1>{{ movie.TitleWithYear }}</h1>
  </body>
</html>

Изменить: вот репо, показывающее проблему.

https://github.com/edmondbramhall/11ty-test1

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

Изменить: с помощью Люка вот свойство разбиения на страницы, с которым я столкнулся.

  permalink: "movies/{{ movie.ReleaseYear }}/{{ movie.Id }}-{{ movie.Title | slug }}/index.html"

Я также создал глобальный фильтр для slugify, чтобы предоставить пару настроек, создав файл .eleventy.js в корневой папке моего проекта со следующим содержимым.

const slugify = require('slugify');
module.exports = function(eleventyConfig) {
    eleventyConfig.addFilter("slug", function(value) {
        return slugify(value, { strict: true, lower: true });
    });
};
0
centralscru 9 Окт 2020 в 12:00

1 ответ

Лучший ответ

Вы используете data: movies в разбивке на страницы, но способ, которым Eleventy попытается справиться с вашей структурой папок data, состоит в том, чтобы создать список объектов для папки за год, а затем каждый файл json как дочерний JS объект с именем файла в качестве ключа:

> console.log(data.movies)

[
  {
    'An-American-Tail_1986_4978': {
      ...
      TitleWithYear: 'An American Tail (1986)',
      Tagline: 'Meet Fievel. In his search to find his family, he discovered America.',
      ...
    },
    'Barbra-Streisand-One-Voice_1986_31683': {
      ...
      TitleWithYear: 'Barbra Streisand: One Voice (1986)',
      Tagline: 'Barbra sings in her backyard for charity!',
      ...
    }
  },

  {
    'Alien-Predators_1985_52318': {
      ...
      TitleWithYear: 'Alien Predators (1985)',
      ...
    }
  }
]

Чтобы преобразовать данные в такой формат, что eleventy сможет правильно разбить их на страницы, вам нужно преобразовать их в один большой массив объектов. Функциональность обратного вызова before из одиннадцати, безусловно, самый простой способ сделать это (также возможно, изменив структуру файла данных или создав собственную коллекцию в config).

Это действительно требует, чтобы ваш фронтматтер был в формате js, но позволяет вам сопоставить фактические объекты фильма, а затем сгладить результирующий массив.

Ниже приведен полный рабочий пример файла movie.njk из вашего репозитория.

---js
{
  pagination:{
    data: "movies",
    before: (data) => data.map(year => Object.values(year)).flat(),
    size: 1,
    alias: "movie",
},
  permalink: "movies/{{ movie.Id }}/",
}
---
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{ title }}</title>
  </head>
  <body>
    <h1>{{ movie.TitleWithYear }}</h1>
    <p> {{ movie.Tagline}}
  </body>
</html>
0
Luke Storry 10 Окт 2020 в 19:16