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

Метод 1: случайная сортировка
Один из простых подходов — случайная сортировка массива сообщений каждый раз при создании сайта. Это приведет к разному порядку публикаций в каждой сборке, что фактически создаст фильтр случайных сообщений. Вот пример того, как этого можно добиться в файле конфигурации 11ty:

// .eleventy.js
module.exports = function (eleventyConfig) {
  eleventyConfig.addCollection("randomPosts", function (collectionApi) {
    let posts = collectionApi.getFilteredByTag("post"); // Assuming you have a "post" tag
    // Randomly sort the posts array
    posts.sort(() => Math.random() - 0.5);
    return posts;
  });
};

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

// .eleventy.js
module.exports = function (eleventyConfig) {
  eleventyConfig.addCollection("randomPosts", function (collectionApi) {
    let posts = collectionApi.getFilteredByTag("post"); // Assuming you have a "post" tag
    let numRandomPosts = 5; // Number of random posts to display
    // Shuffle the posts array
    for (let i = posts.length - 1; i > 0; i--) {
      const j = Math.floor(Math.random() * (i + 1));
      [posts[i], posts[j]] = [posts[j], posts[i]];
    }
// Select the first `numRandomPosts` from the shuffled array
    return posts.slice(0, numRandomPosts);
  });
};

Метод 3: Плагин случайных сообщений
Если вы предпочитаете более модульный подход, вы можете создать собственный плагин 11ty специально для обработки случайных сообщений. Вот пример реализации:

// randomPostsPlugin.js
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin("randomPosts", function (collectionApi) {
    eleventyConfig.addCollection("randomPosts", function () {
      let posts = collectionApi.getFilteredByTag("post"); // Assuming you have a "post" tag
      // Randomly sort the posts array
      posts.sort(() => Math.random() - 0.5);
      return posts;
    });
  });
};

Чтобы использовать плагин, вам необходимо зарегистрировать его в файле конфигурации 11ty:

// .eleventy.js
const randomPostsPlugin = require("./randomPostsPlugin");
module.exports = function (eleventyConfig) {
  eleventyConfig.addPlugin(randomPostsPlugin);
};

Реализовать фильтр случайных сообщений в 11ty можно различными способами, включая случайную сортировку, выбор случайного подмножества или создание собственного плагина. Выберите метод, который лучше всего соответствует вашим потребностям, и интегрируйте его в свой проект 11ty. Наслаждайтесь динамичностью и интересом своих читателей!

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