В прошлой статье мы создали основу для нашего сайта. Это голые кости, но это действующий сайт. Теперь мы добавим к нему дополнительные элементы, чтобы сделать его немного красивее.
Партиции
Частичные файлы – это файлы, которые содержат информацию/данные, повторяющиеся на сайте и не меняющиеся часто – навигация, футер.
Теперь пришло время структурировать наш сайт немного лучше. Давайте сначала сделаем навигацию
- В папке
srcсоздайте файлabout.mdи поместите в него вот это
---
layout: base
title: "About"
---
# About Page
- Теперь в папке
_includesсоздайте папку partials, а в ней файл_navigation.njk.
<!-- _includes/partials/_navigation.njk-->
<nav>
<a href="/">Home</a>
<a href="/about">About</a>
</nav>
Позже мы улучшим эту навигацию, но пока она в порядке.
- Далее, мы включим этот файл навигации в наш
base.njk.
<body>
{% include "partials/_navigation.njk" %}
<main>
{{content | safe}}
</main>
</body>
Мы можем повторить те же шаги для файла
_footer.njk.
Давайте запустим наш сервер и посмотрим, что мы имеем на данный момент
npm start
Стилизация
Теперь давайте придадим нашему сайту более приятный вид. Начнем со шрифта. Мы добавим шрифт google:
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?
family=Sora:wght@300;400;500;600&display=swap" rel="stylesheet">
<title>My Eleventy Site - {{title}}</title>
</head>
Файл CSS
Нам также нужно добавить файл CSS для применения изменений стиля. Создадим папку assets, в ней папку css, а в ней файл style.css.
/* src/assets/css/style.css*/
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Sora", sans-serif;
}
Выше приведен общий сброс, который я использую для своего CSS.
Затем мы должны добавить его в тег head.
<link rel="stylesheet" href="{{ '/assets/css/style.css' | url }}">
Проделав все это и проверив наш сайт, вы заметите нечто особенное – наши стили не применяются.
Если мы проверим папку _site, в которую генерируются файлы нашего сайта, то там не окажется ни одного CSS-файла.
Но почему так?
Сквозное копирование
Если вы помните, когда мы начинали, я упоминал, что Eleventy поддерживает несколько языков шаблонов – способов создания сайта. При использовании этих типов файлов Eleventy автоматически конвертирует их в html.
CSS и JavaScript не являются частью этих языков. Для них мы должны указать Eleventy скопировать эти файлы в наш выходной каталог с помощью процесса, называемого сквозным копированием.
Откройте файл .eleventy.js и измените его так, чтобы он выглядел следующим образом:
module.exports = function(eleventyConfig) {
eleventyConfig.addPassthroughCopy("src/assets/css/style.css");
return {
dir: {
input: "src",
data: "_data",
includes: "_includes",
layouts: "_layouts",
},
};
};
ПРИМЕЧАНИЕ: Любые файлы, не являющиеся частью языков шаблона, которые вы хотите, чтобы присутствовали на сайте, должны быть скопированы сквозным копированием – это касается изображений, локальных шрифтов, иконок и т.д.
Теперь, если мы проверим наш сайт, наши стили будут применены.
Теперь мы можем добавить дополнительные стили в нашу таблицу стилей
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
scroll-behavior: smooth;
}
body {
font-family: "Sora", sans-serif;
line-height: 1.5;
}
a {
text-decoration: none;
}
img {
max-width: 100%;
display: block;
}
nav {
display: flex;
justify-content: center;
align-items: center;
height: 3.5rem;
width: 100%;
background-color: black;
color: lightgray;
}
nav > a {
display: block;
padding: 1rem 2rem;
color: lightgray;
}
nav > a:hover {
color: aqua;
}
main {
max-width: 50rem;
margin: 0 auto;
padding: 3rem 2rem;
min-height: 100vh;
}
main > h1 {
margin: 2rem 0 0.5rem;
}
main > img {
border-radius: 5px;
}
footer {
background-color: black;
color: lightgray;
padding: 2rem;
}
Изображения
Давайте добавим изображение на наш сайт, чтобы он не выглядел таким простым.
- Создайте папку images в assets и добавьте туда изображение по вашему выбору
- Добавьте сквозную копию для папки images в
.eleventy.js.
eleventyConfig.addPassthroughCopy("src/assets/images");
- Добавьте изображение в наш
index.md.
---
layout: base
title: Home
---
# My Eleventy Site
I am a site built with [Eleventy](https://www.11ty.io/).
И вот мы здесь:
Подробнее
- Трубка | которую мы использовали в
{{content | safe }}и{{ '/assets/css/style.css' | url }}называется фильтром, и мы используем их, чтобы решить, как мы хотим отобразить определенную информацию. - Как и все в Eleventy, то, как вы решите оформить свой сайт, полностью зависит от вас. Если вы решили написать их вручную, как это сделал я, я рекомендую вам использовать SASS. Сайт whitep4nth3r оформлен таким образом
На этот раз мы проделали большую работу:
- Добавили навигацию и футер
- Добавили стилизации на наш сайт и убедились, что они работают
- Добавили изображение на наш сайт и убедились, что оно тоже работает
На данный момент:
- Вот наше рабочее репо: https://github.com/Psypher1/learneleventy
- Ознакомьтесь с документацией: https://www.11ty.dev/docs/
- Присоединяйтесь к discord: https://www.11ty.dev/blog/discord/
Спасибо, что прочитали, давайте общаться!
Спасибо, что посетили этот мой маленький уголок. Давайте общаться в Twitter, Polywork и LinkedIn.