Eleventy (или 11ty) — генератор статических сайтов Node.js (SSG). SSG выполняют большую часть работы по рендерингу во время сборки для создания набора статических файлов HTML, CSS и JavaScript. Результирующие страницы не должны иметь зависимостей на стороне сервера, таких как среды выполнения или базы данных.
Это приводит к нескольким ключевым преимуществам:
хостинг прост: вы обслуживаете файлы HTML
системы безопасны: взламывать нечего
производительность может быть отличной.
Eleventy становится все более популярным и привлекает внимание знаменитостей в
В большинстве случаев вы будете использовать Eleventy для создания
Вам нужен
Некоторые SSG используют клиентские фреймворки JavaScript, такие как React или Vue.js. Вы можете использовать фреймворк с Eleventy, но это не обязательно.
На мой взгляд, фреймворк JavaScript, вероятно, не нужен, если только вы не создаете сложное приложение. И если вы создаете приложение, SSG — не лучший инструмент! Поклонники Гэтсби могут не согласиться, поэтому, пожалуйста, бросьте мне вызов или высмеивайте меня в Твиттере!
Покажи мне код
Eleventy претендует на то, чтобы быть простым, но может быть пугающим, когда вы выходите за рамки основ. В этом руководстве показано, как создать простой сайт со страницами и публикациями в блогах/статьях — задача, с которой часто справляется WordPress.
Полный код доступен по адресу https://github.com/craigbuckler/11ty-starter. Вы можете загрузить, установить и запустить его в Windows, macOS или Linux, введя следующие команды в своем терминале:
git clone https://github.com/craigbuckler/11ty-starter
cd
npm i
npx eleventy —serve
Затем перейдите на домашнюю страницу по адресу http: //localhost:8080 в браузере.
Шаги ниже описывают, как создать сайт с нуля.
Установить одиннадцать
Как и в любом проекте Node.js, начните с создания каталога и инициализации package.jsonфайла:
mkdir mysite
cd mysite
npm init
Затем установите Eleventy в качестве зависимости разработки:
npm i @11ty/eleventy —
Примечание: этот проект устанавливает модули как зависимости разработки, поскольку их нужно запускать только на машине разработки. Некоторые хосты с автоматизированными процессами сборки могут потребовать от вас использования стандартных зависимостей среды выполнения.
Рендеринг вашей первой страницы
Создайте srcкаталог, в котором будут находиться все исходные файлы, а затем создайте в index.mdнем файл. Добавьте содержимое домашней страницы, например:
Содержимое между ‐‐‐маркерами тире известно как вступительная часть. Он определяет метаданные
Файл конфигурации Eleventy с именем.eleventy.jsдолжен быть создан в корневой папке вашего проекта. Этот простой пример кода возвращает объект, который указывает следующее:
исходный srcкаталог для исходных файлов
каталог, в buildкотором будут создаваться файлы сайта
// 11ty configuration
module.exports = config => {
// 11ty defaults
return {
dir: {
input: ‘src’,
output: ‘build’
}
};
};
Чтобы создать сайт и запустить сервер с перезагрузкой в реальном времени на базе Browsersync, введите следующее:
npx eleventy —serve
Eleventy рендерит все, что находит в srcкаталоге, и выводит полученный контент в build:
$ npx eleventy —serve
Writing build/index.html from. /src/index.md.
Wrote 1 file in 0.12 seconds (v0.11.0)
Watching...
[Browsersync] Access URLs:
---------------------------------------
Local: http: //localhost:8080
External: http: //172.27.204.106:8080
---------------------------------------
UI: http: //localhost:3001
UI External: http: //localhost:3001
---------------------------------------
[Browsersync] Serving files from: build
В этом случае создается один build/index.htmlфайл, доступ к которому можно получить, загрузив
первый рендер 11ти
Примечание: редко требуется останавливать Eleventy во время разработки сайта, потому что новые файлы рендерятся автоматически. Однако в разделах ниже добавлены дополнительные параметры конфигурации, поэтому требуется перезапуск.
Создание шаблонов
Eleventy может использовать практически любой движок шаблонов JavaScript. Nunchucks — хороший вариант, поскольку он всеобъемлющий и используется во всей документации
Измените переднюю часть src/index.mdна это:
‐‐‐
title: 11ty starter site
description: This is a demonstration website generated using the 11ty static site generator.
layout: page.njk
‐‐‐
Это указывает Eleventy использовать page.njkшаблон Nunchucks для макета. По умолчанию Eleventy ищет шаблоны в _includesподкаталоге исходного каталога (src/). Любые файлы, расположенные там, не рендерятся сами по себе, а используются в процессе сборки.
Создайте этот новый шаблон по адресу src/_includes/page.njk:
{% include «partials/htmlhead.njk»%}
{% block content%}
{{ title }}
{{ content | safe }}
{% endblock%}
{% include «partials/htmlfoot.njk»%}
Шаблон помещает titleзаданное в начале страницы в заголовок и заменяет {{ content }}
Два {% include%}определения ссылаются на файлы, включенные в шаблон. Создайте файл заголовка HTML по адресу src/_includes/partials/htmlhead.njk, который также использует страницы titleи description:
Затем создайте нижний колонтитул HTML по адресу src/_includes/partials/htmlfoot.njk:
Примечание. Когда вы просматриваете исходный код в браузере, вы также увидите, что BrowserSync
Этого будет достаточно для большинства сайтов, но вы можете улучшить его. Например:
предоставить возможность отображать меню на определенном уровне — например, верхний уровень только в заголовке и все страницы в нижнем колонтитуле
выделить активную страницу, сделав ее неактивной
установить классы стилей для активных и открытых пунктов меню.
Один из способов добиться этого — создать повторно используемый шорткод, который будет знаком всем, кто использовал WordPress. Шорткод и любые необязательные аргументы запускают функцию, которая возвращает строку HTML, помещенную в шаблон.
Остановите свой сервер Eleventy и обновите src/_includes/page.njkшаблон, чтобы использовать {% navlist%}шорткод в разделах
{% include «partials/htmlhead.njk»%}
{% navlist collections.all | eleventyNavigation, page, 1%}
{% block content%}
{{ title }}
{{ content | safe }}
{% endblock%}
{% navlist collections.all | eleventyNavigation, page, 2%}
{% include «partials/htmlfoot.njk»%}
Шорткоду navlistпередаются три параметра:
Каждая страница фильтруется eleventyNavigation () функцией, которая возвращает иерархический список объектов страницы. Каждая страница определяет childrenмассив подстраниц.
Текущий page.
Необязательный level. Значение 1возвращает HTML только для верхнего уровня. 2возвращает верхний уровень и все непосредственные дочерние страницы.
Шорткод navlistдолжен быть зарегистрирован с помощью.addShortcode () функции.eleventy.jsперед returnоператором. Ему передается имя шорткода и функция для вызова:
/* --- SHORTCODES --- */
// page navigation
config.addShortcode (‘navlist’, require ('. /lib/shortcodes/navlist.js’));
Теперь вы можете экспортировать функцию в формате lib/shortcodes/navlist.js. Приведенный ниже код рекурсивно проверяет все страницы для создания соответствующего
Примечание: файл шорткода был создан вне srcпапки, поскольку он не является частью сайта, но вы также можете определить его в формате src/_includes.
// generates a page navigation list
const
listType = ‘ul’,
elementActive = ‘strong’,
classActive = ‘active’,
classOpen = ‘open’;
// pass in collections.all | eleventyNavigation, (current) page, and maximum depth level
module.exports = (pageNav, page, maxLevel = 999) => {
function navRecurse (entry, level = 1) {
let childPages = '';
if (level < maxLevel) {
for (let child of entry.children) {
childPages += navRecurse (child, level++) ;
}
}
let
active = (entry.url === page.url),
classList = [];
if ( (active && childPages) || childPages.includes (`<${ elementActive }>`)) classList.push (classOpen) ;
if (active) classList.push (classActive) ;
return (
'<li’ +
(classList.length? ` class="${ classList.join(' ') }"`: '') +
'>' +
(active? `<${ elementActive }>`: ``) +
entry.title +
(active? `</${ elementActive }>`: '') +
(childPages? `<${ listType }>${ childPages }</${ listType }>`: '') +
'') ;
}
let nav = '';
for (let entry of pageNav) {
nav += navRecurse (entry) ;
}
return `<${ listType }>${ nav }</${ listType }>`;
};
Повторно запустите npx eleventy —serveи перейдите на страницу «О программе». HTML- код заголовка
- home
- about
HTML -код нижнего колонтитула
Добавление статей/сообщений в блоге
Статьи или сообщения в блогах отличаются от стандартных страниц. Обычно они датированы и показаны на индексной странице в обратном хронологическом порядке.
Создайте новый src/articlesкаталог и добавьте несколько файлов Markdown. В этом примере было создано шесть файлов
Пример содержимого для article/
‐‐‐
title: The first article
description: This is the first article.
date:
tags:
— HTML
— CSS
‐‐‐
This is an article post.
## Subheading
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Каждому посту присваивается дата и один или несколько тегов (здесь используются и) HTML. CSSEleventy автоматически создает коллекцию для каждого тега. Например, HTMLколлекция — это массив всех сообщений, помеченных тегом HTML. Вы можете использовать эту коллекцию для индексации или отображения этих страниц интересными способами.
Самый последний
‐‐‐
title: The sixth article
description: This is the sixth article.
draft: true
date:
tags:
— HTML
— CSS
— JavaScript
‐‐‐
Это указывает на то, что сообщение не должно публиковаться (на активном сайте), пока не истечет указанная дата и draftне будет удалено. Eleventy не реализует эту функцию, поэтому вы должны создать свою собственную коллекцию, в которой отсутствуют черновики сообщений.
Добавьте пару строк вверху,.eleventy.jsчтобы определить режим разработки и вернуть текущую дату и время:
// 11ty configuration
const
dev = global.dev = (process.env.ELEVENTY_ENV === ‘development’),
now = new Date () ;
module.exports = config => {
...
}
Затем определите коллекцию с именем post, вызвав.addCollection () перед returnоператором. Следующий код извлекает все mdфайлы в src/articlesкаталоге, но удаляет все, где draftустановлена дата публикации в будущем (если вы не используете режим разработки):
// post collection (in src/articles)
config.addCollection (‘post’, collection =>
collection
.getFilteredByGlob ('. /src/articles/*.md’)
.filter (p => dev || (! p.data.draft && p.date ≤ now))
) ;
Создайте новый src/_includes/post.njkшаблон для постов. Это основано на page.njkшаблоне, но contentблок также показывает дату статьи, количество слов и ссылки на следующую/предыдущую, извлеченные из этой postколлекции:
{% extends «page.njk»%}
{% block content%}
{{ title }}
{% if date%}
{% endif%}
{{ content | wordcount }} words
{{ content | safe }}
{% set nextPost = collections.post | getNextCollectionItem (page)%}
{% if nextPost%}Next article: {{ nextPost.data.title }}{% endif%}
{% set previousPost = collections.post | getPreviousCollectionItem (page)%}
{% if previousPost%}Previous article: {{ previousPost.data.title }}{% endif%}
{% endblock%}
Наконец, определите src/articles/article.jsonфайл, который будет установлен post.njkв качестве шаблона по умолчанию:
{
«layout»: «post.njk»
}
Запустите npx eleventy —serveи перейдите по адресу http: //localhost:8080/articles/
11ти пост в блоге
Создайте индексную страницу статьи/блога
Хотя вы можете переходить от одного сообщения к другому, было бы полезно создать индексную страницу по адресу http: //localhost:8080/articles/, чтобы отображать все сообщения в обратном хронологическом порядке (сначала самые новые).
Eleventy предоставляет средство разбивки на страницы, с помощью которого можно создать любое количество страниц, перебирая набор данных — например, postsколлекцию, созданную выше.
Создайте новый файл src/articles/index.mdсо следующим содержимым:
‐‐‐
title: Article index
description: A list of articles published on this site.
layout: page.njk
eleventyNavigation:
key: articles
order: 900
pagination:
data: collections.post
alias: pagelist
reverse: true
size: 3
‐‐‐
The following articles are available.
Конфигурация передней материи делает следующее:
Он устанавливает стандартный page.njkшаблон.
Он добавляет страницу в качестве articlesпункта меню.
Он создает список с именем pagelistfrom collections.post, переворачивает его (сначала самые новые сообщения) и позволяет размещать до трех элементов на странице. С шестью статьями Eleventy создаст две страницы с тремя сообщениями на каждой.
Теперь измените contentблок src/_includes/page.njk, чтобы включить новый pagelist.njkпартиал:
{% block content%}
{{ title }}
{{ content | safe }}
{% include «partials/pagelist.njk»%}
{% endblock%}
Создайте этот частичный src/_includes/partials/pagelist.njkкод с кодом, чтобы перебирать pagelistобъект разбивки на страницы и выводить ссылку, заголовок, дату и описание каждого сообщения:
{% if pagelist%}
{%- for post in pagelist -%}
{{ post.data.title }}
{% if post.data.date%}
{% endif%}
{{ post.data.description }}
{%- endfor -%}
{% endif%}
Под этим кодом вы можете добавить следующую и предыдущую ссылки для навигации по индексу с разбивкой на страницы:
{% if pagination.href.previous or pagination.href.next%}
{% if pagination.href.previous%}
{% endif%}
{% if pagination.href.next%}
{% endif%}
{% endif%}
Прежде чем перезапустить процесс сборки, задайте для ELEVENTY_ENVпеременной среды значение, developmentчтобы обеспечить включение в сборку черновиков и постов, датированных будущими датами. В Linux/macOS введите:
ELEVENTY_ENV=development
cmdили в командной строке Windows:
set ELEVENTY_ENV=development
или Windows PowerShell:
$env: ELEVENTY_ENV="development"
Перезапустите npx eleventy —serveи обновите браузер. В меню появится ссылка на новые статьи, которая показывает три самые последние статьи по адресу http: //localhost:8080/articles/:
список из 11 статей
Следующая ссылка ведет на следующую страницу статей по адресу http: //localhost:8080/articles/1/.
Создание пользовательских фильтров
На снимках экрана выше даты показаны как недружественные строки JavaScript. Eleventy предоставляет фильтры, которые могут изменять данные и возвращать строку. Вы уже видели, как это используется, когда контент, созданный с помощью Markdown, проходит через safeфильтр для вывода незакодированного HTML: {{ content | safe }}.
Создайте новый lib/filters/dateformat.jsфайл со следующим кодом. Он экспортирует две функции:
ymd () который преобразует дату в машиночитаемый
friendly () который преобразует дату в удобочитаемый формат, например 1 January, 2020.
// date formatting functions
const toMonth = new Intl.DateTimeFormat (‘en’, { month: ‘long’ }) ;
// format a date to
module.exports.ymd = date => (
date instanceof Date?
`${ date.getUTCFullYear () }-${ String (date.getUTCMonth () + 1).padStart (2, '0') }-${ String (date.getUTCDate ()).padStart (2, '0') }`: ''
) ;
// format a date to DD MMMM, YYYY
module.exports.friendly = date => (
date instanceof Date?
date.getUTCDate () + ' ' + toMonth.format (date) + ', ' + date.getUTCFullYear (): ''
) ;
Вы также можете создать фильтр, который показывает количество слов в сообщении, округленное до ближайших десяти и отформатированное с
// format number of words and reading time
const
roundTo = 10,
readPerMin = 200,
numFormat = new Intl.NumberFormat (‘en’) ;
module.exports = count => {
const
words = Math.ceil (count / roundTo) * roundTo,
mins = Math.ceil (count / readPerMin) ;
return `${ numFormat.format (words) } words, ${ numFormat.format (mins) }-minute read`;
};
Зарегистрируйте фильтры в.eleventy.jsлюбом месте перед returnоператором:
/* --- FILTERS --- */
// format dates
const dateformat = require ('. /lib/filters/dateformat’) ;
config.addFilter (‘datefriendly’, dateformat.friendly) ;
config.addFilter (‘dateymd’, dateformat.ymd) ;
// format word count and reading time
config.addFilter (‘readtime’, require ('. /lib/filters/readtime’));
Затем обновите src/_includes/post.njk, чтобы использовать фильтры dateymd, datefriendlyи: readtime
{% if date%}
{% endif%}
{{ content | wordcount | readtime }}
Затем измените партиал индекса статьи на src/_includes/partials/pagelist.njk, чтобы использовать фильтры dateymdи: datefriendly
{% if post.data.date%}
{% endif%}
Перезапустите сборку npx eleventy —serveи обновите браузер. Загрузите любую статью, чтобы увидеть дружественные даты, отформатированное количество слов и оценку времени чтения:
Полученный HTML:
80 words,
Обработка изображений с помощью шаблонов JavaScript
Eleventy может копировать файлы из любой папки, используя.addPassthroughCopy () функцию в формате.eleventy.js. Например, чтобы скопировать все файлы в src/images/, build/images/вы должны добавить:
config.addPassthroughCopy (‘src/images’) ;
Этого может быть достаточно, если ваши изображения уже оптимизированы, но автоматическая оптимизация во время сборки гарантирует сокращение файлов. На этом этапе разработчики часто обращаются к другой системе, такой как npmскрипты,
JavaScript — это первоклассный шаблонизатор в Eleventy. Любое окончание файла. 11ty.jsбудет обработано во время сборки. Файл должен экспортировать JavaScript classс:
метод data (), который возвращает настройки вступительной части как объект JavaScript
метод render (), который обычно возвращает строку, но также может запускать синхронные или асинхронные процессы и возвращать true.
Чтобы уменьшить размеры изображений, установите imagemin и плагины для файлов JPEG, PNG и SVG:
npm i
Создайте imagesкаталог в src, добавьте несколько изображений, затем создайте новый src/images/images. 11ty.jsфайл со следующим кодом:
// image minification
const
dest = '. /build/images’,
fsp = require (‘fs’).promises,
imagemin = require (‘imagemin’),
plugins = [
require (‘
require (‘
require (‘
];
module.exports = class {
data () {
return {
permalink: false,
eleventyExcludeFromCollections: true
};
}
// process all files
async render () {
// destination already exists?
try {
let dir = await fsp.stat (dest) ;
if (dir.isDirectory ()) return true;
}
catch (e) {}
// process images
console.log (‘optimizing images’) ;
await imagemin ([‘src/images/*', '! src/images/*.js’], {
destination: dest,
plugins
}) ;
return true;
}
};
Повторно запущенные npx eleventy —serveи оптимизированные версии ваших изображений будут скопированы в build/images/папку.
Примечание: приведенный выше код завершается, если build/imagesкаталог найден. Это простое решение, позволяющее отказаться от повторной обработки одних и тех же изображений во время каждой сборки, и гарантирует, что Eleventy останется быстрым. Если вы добавляете дополнительные изображения, build/imagesсначала удалите папку, чтобы убедиться, что они все сгенерированы. Доступны лучшие варианты, но они требуют гораздо больше кода!
Теперь изображения можно добавлять в Markdown или в файлы шаблонов. Например,
11ty starter{% navlist collections.all | eleventyNavigation, page, 1%}
Значение heroможет быть установлено во фронтальной части по мере необходимости — например, в src/articles/articles.json:
{
«layout»: «post.njk»,
«hero»: «phone.jpg»
}
110 изображений
Обработка CSS с помощью преобразований
Вы можете обрабатывать CSS аналогичным образом или использовать любую другую систему сборки. Однако преобразования Eleventy — хороший вариант в этой ситуации. Преобразования — это функции, которым передается текущее отображаемое строковое содержимое и путь к файлу. Затем они возвращают измененную версию этого контента.
Я рассматривал возможность использования Sass для предварительной обработки CSS, но PostCSS с несколькими плагинами может реализовать облегченную альтернативу, которая
npm i
Затем создайте lib/transforms/postcss.jsфайл со следующим кодом. Он проверяет.css, передается ли файл перед обработкой, минимизацией и добавлением исходных карт, когда сборка выполняется в developmentрежиме:
// PostCSS CSS processing
/* global dev */
const
postcss = require (‘postcss’),
postcssPlugins = [
require (‘
require (‘
require (‘cssnano’)
],
postcssOptions = {
from: ‘src/scss/entry.scss’,
syntax: require (‘
map: dev? { inline: true }: false
};
module.exports = async (content, outputPath) => {
if (! String (outputPath).endsWith ('.css’)) return content;
return (
await postcss (postcssPlugins).process (content, postcssOptions)
).css;
};
Преобразование должно быть зарегистрировано с помощью.addTransform () функции.eleventy.jsперед returnоператором. Вызов.addWatchTarget () инициирует полную перестройку сайта всякий раз, когда файл изменяется в src/scss/каталоге:
// CSS processing
config.addTransform (‘postcss’, require ('. /lib/transforms/postcss’));
config.addWatchTarget ('. /src/scss/') ;
Создайте src/scss/main.scssфайл и включите любой код SCSS или CSS, который вам нужен. Пример кода импортирует дополнительные файлы SCSS:
// settings
@import '
@import '
// reset
@import '
// elements
@import '
// etc...
Eleventy не будет обрабатывать файлы CSS или SCSS напрямую, поэтому вы должны создать новый файл шаблона src/scss/main.njkсо следующим кодом:
‐‐‐
permalink: /css/main.css
eleventyExcludeFromCollections: true
‐‐‐
@import ‘main.scss’;
Это импортирует ваш main.scssфайл и отображает его до build/css/main.cssтого, как функция преобразования обработает его соответствующим образом. Аналогичные SCSS/CSS и.njkфайлы могут быть созданы, если вам требуется более одного файла CSS.
Повторно запустите npx eleventy —serveи проверьте содержимое файлов CSS, созданных для build/css/main.css. Исходная карта обеспечивает доступность исходного местоположения файла объявления CSS при проверке стилей в инструментах разработчика вашего браузера.
Минимизация HTML с помощью преобразований
Аналогичное преобразование можно использовать для минимизации HTML с помощью
npm i
Создайте новый lib/transforms/htmlminify.jsфайл со следующим кодом. Он проверяет, что.htmlфайл обрабатывается, и возвращает уменьшенную версию:
// minify HTML
const htmlmin = require (‘
module.exports = (content, outputPath = '.html’) => {
if (! String (outputPath).endsWith ('.html’)) return content;
return htmlmin.minify (content, {
useShortDoctype: true,
removeComments: true,
collapseWhitespace: true
}) ;
};
Как и раньше, зарегистрируйте преобразование.eleventy.
// minify HTML
config.addTransform (‘htmlminify’, require ('. /lib/transforms/htmlminify’));
Примечание: вы можете не уменьшать и даже не украшать HTML во время разработки. Тем не менее, пробелы в HTML могут повлиять на рендеринг в браузере, поэтому обычно лучше создавать код так же, как вы это делаете для производства. Просмотр исходного кода станет более сложным, но инструменты разработчика браузера показывают результирующий DOM.
Встраивание активов с преобразованиями
Часто бывает необходимо встроить другие активы в ваш HTML. SVG являются первыми кандидатами, потому что изображения становятся частью DOM и ими можно манипулировать с помощью CSS. Также может быть практичным уменьшить
Во время сборки преобразование заменит тег импортированным
Обработка JavaScript с помощью шаблонов JavaScript
Клиентский JavaScript можно обрабатывать с помощью преобразования, но именованные шаблоны JavaScript
Пример кода предоставляет сценарии ES6 для реализации простого переключения темной/светлой темы. Rollup.js используется для объединения всех модулей, на которые ссылаются, main.jsв один файл и выполнения древовидной тряски для удаления любых неиспользуемых функций. Затем краткий плагин минимизирует полученный код.
Установите модули Rollup.js со следующим:
npm i
Затем создайте jsкаталог srcи добавьте свои сценарии ES6. src/js/main.jsДолжен быть определен сценарий с одной записью, который импортирует другие. Например:
import * as theme from '. /lib/theme.js’;
Создайте новый src/js/javascript. 11ty.jsфайл со следующим кодом для обработки src/js/main.jsв единый пакет и добавьте исходную карту при сборке в режиме разработки:
// JavaScript processing
/* global dev */
const
jsMain = ‘js/main.js’,
rollup = require (‘rollup’),
terser = require (‘
inputOpts = {
input: '. /src/' + jsMain
},
outputOpts = {
format: ‘es’,
sourcemap: dev,
plugins: [
terser ({
mangle: {
toplevel: true
},
compress: {
drop_console:! dev,
drop_debugger:! dev
},
output: {
quote_style: 1
}
})
]
}
;
module.exports = class {
data () {
return {
permalink: jsMain,
eleventyExcludeFromCollections: true
};
}
// PostCSS processing
async render () {
const
bundle = await rollup.rollup (inputOpts),
{ output } = await bundle.generate (outputOpts),
out = output.length && output[0];
let code = '';
if (out) {
// JS code
code = out.code;
// inline source map
if (out.map) {
let b64 = new Buffer.from (out.map.toString ());
code += '//# sourceMappingURL=data: application/json; base64,' + b64.toString (‘base64') ;
}
}
return code;
}
};
Любые изменения в ваших файлах JavaScript могут вызвать перестроение, добавив следующую строку.eleventy.jsперед return:
config.addWatchTarget ('. /src/js/') ;
Полученный скрипт можно затем включить на свои страницы — например, в src/_includes/partials/htmlfoot.njk:
Примечание: пример кода создает модули ES6, а не транспилирует их в ES5. Скрипт меньше, но совместимость с браузером будет более ограниченной. Тем не менее, это прогрессивное усовершенствование, и сайт работает без JavaScript.
Перезапустите npx eleventy —serve, и ваш
конечный сайт
Создайте производственную площадку
Когда вы довольны своим сайтом, вы можете создать его в рабочем режиме без исходных карт и других вариантов разработки.
Удалите buildпапку и установите ELEVENTY_ENVв productionLinux/macOS:
ELEVENTY_ENV=production
cmdили приглашение Windows:
set ELEVENTY_ENV=production
или Windows PowerShell:
$env: ELEVENTY_ENV="production"
Затем запустите npx eleventy, чтобы построить полный сайт.
Полученные файлы в /buildкаталоге можно загрузить на любой хост. Некоторые службы специалистов по статическим сайтам могут автоматически создавать и публиковать ваш сайт всякий раз, когда новый код помещается в GitHub или аналогичные репозитории.
Ваши следующие шаги с Eleventy
Этот пример проекта демонстрирует основы Eleventy с некоторыми опциями для создания различных типов контента. Тем не менее, Eleventy является гибким, и вы можете использовать любые методы, которые вы предпочитаете. Есть десятки стартовых проектов, и каждый использует немного другой подход.
Предложения по дополнительным функциям сайта:
Создайте индексную страницу для каждого тега со списком связанных статей. Помните, что Eleventy автоматически создает отдельные коллекции для каждого тега.
Создайте feed.xmlфайл RSS со списком всех сообщений.
Создайте sitemap.xmlфайл со списком всех страниц.
Создайте страницу ошибки 404 и сгенерируйте соответствующий код для ее обработки (например,.htaccessфайл для Apache).
Создайте другие корневые файлы, такие как favicon.icoили сервисный работник.
Используйте функцию пагинации Eleventy для создания страниц из данных.
И получайте бонусные баллы за импорт контента WordPress на статические страницы.
Одиннадцать для вас?
Генераторы статических сайтов — идеальное решение для любого
Есть много SSG на выбор, но Eleventy — отличный выбор, если вы:
вы плохо знакомы с SSG или недовольны вашим текущим вариантом
нравится Node.js и хотите использовать JavaScript во время разработки
хочу прыгать на последнюю крутую вещь!
Удачи!
Освойте Jamstack с помощью нашей коллекции Jamstack Foundations, где мы отбираем наши руководства и практические материалы по инструментам Jamstack и Jamstack, таким как Eleventy, чтобы наилучшим образом помочь вам в обучении.
