Учимся 11ty Часть 2: Части, стилизация и изображения

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

Партиции

Частичные файлы — это файлы, которые содержат информацию/данные, повторяющиеся на сайте и не меняющиеся часто — навигация, футер.

Теперь пришло время структурировать наш сайт немного лучше. Давайте сначала сделаем навигацию

  • В папке 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
---

![hero image](assets/images/learn.png)

# 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.

Оцените статью
Procodings.ru
Добавить комментарий