Пропустить до содержимого

Стилизация страницы «Обо мне»

Теперь, когда у вас есть страница «Обо мне» с информацией о вас, давайте оформим ее!

Приготовьтесь…

  • Создайть стиль для элементов на странице
  • Использовать CSS-переменные

Оформление отдельной страницы

Заголовок раздела Оформление отдельной страницы

С помощью собственных тегов <style> </style> Astro вы можете оформлять элементы на вашей странице. Добавление атрибутов и директив к этим тегам дает вам еще больше способов оформления.

  1. Скопируйте следующий код и вставьте его в файл src/pages/about.astro:

    src/pages/about.astro
    <html lang="ru">
      <head>
        <meta charset ="utf-8" />
        <meta name="viewport" content="width=device-width" />
        <title>{pageTitle}</title>
        <style>
          h1 {
            color: purple;
            font-size: 4rem;
          }
        </style>
      </head>

    Проверьте все три страницы в предварительном просмотре в браузере.

    • Какой цвет у заголовка страницы:

      • Главной страницы?
      • Страницы «Обо мне»?
      • Страницы блога?

    • На странице с наибольшим размером заголовка текста?

  2. Добавьте класс skill к сгенерированным элементам <li> на странице «Обо мне», чтобы мы могли их оформить. Ваш код должен теперь выглядеть так:

    src/pages/about.astro
    <p>Мои навыки:</p>
    <ul>
      {skills.map((skill) => <li class="skill">{skill}</li>)}
    </ul>

  3. Добавьте следующий код в ваш существующий тег style:

    src/pages/about.astro
    <style>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        font-weight: bold;
      }
    </style>

  4. Посетите страницу About в своем браузере снова и убедитесь, визуально или с помощью инструментов разработчика, что каждый элемент в вашем списке умений теперь зеленый и жирный.

Используйте первую свою CSS-переменную

Заголовок раздела Используйте первую свою CSS-переменную

В Astro-теге <style> вы также можете ссылаться на любые переменные из вашего скрипта frontmatter, используя директиву define:vars={ {...} }. Вы можете определить переменные внутри вашего разделителя кода, а затем использовать их в качестве CSS-переменных в своем теге стиля.

  1. Определите переменную skillColor, добавив ее в скрипт frontmatter в файле src/pages/about.astro, как показано ниже:

    src/pages/about.astro
    ---
    const pageTitle = "Обо мне";
    

    const identity = {
      firstName: "Николай",
      country: "Нидерланды",
      occupation: "Технический автор",
      obbies: ["фотография", "дизайн", "тенис"],
    };
    

    const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Оптимизация SEO"];
    

    const happy = true;
    const finished = false;
    const goal = 3;
    

    const skillColor = "navy";
    ---

  2. Обновите ваш уже существующий тег <style> внизу, чтобы сначала определить, а затем использовать эту переменную skillColor внутри двойных фигурных скобок.

    src/pages/about.astro
    <style define:vars={{skillColor}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: green;
        color: var(--skillColor);
        font-weight: bold;
      }
    </style>

  3. Проверьте вашу страницу «Обо мне» в предпросмотре вашего браузера. Вы должны увидеть, что теперь навыки являются темно-синими, установленными с помощью переменной skillColor, переданной в директиву define: vars.

Попробуйте сами - Определите переменные CSS

Заголовок раздела Попробуйте сами - Определите переменные CSS

  1. Обновите тег <style> на вашей странице «Обо мне», чтобы он соответствовал приведенному ниже.

    src/pages/about.astro
    <style define:vars={{skillColor, fontWeight, textCase}}>
      h1 {
        color: purple;
        font-size: 4rem;
      }
      .skill {
        color: var(--skillColor);
        font-weight: var(--fontWeight);
        text-transform: var(--textCase);
      }
    </style>

  2. Добавьте недостающие определения переменных в свой скрипт frontmatter, чтобы ваш новый тег <style> успешно применял эти стили к вашему списку умений:

    • Цвет текста - темно-синий
    • Текст жирный
    • Элементы списка написаны КАПСОМ (все заглавные буквы)
✅ Показать мне код! ✅
src/pages/about.astro
---
const pageTitle = "Обо мне";


const identity = {
  firstName: "Николай",
  country: "Нидерланды",
  occupation: "Технический автор",
  obbies: ["фотография", "дизайн", "тенис"],
};


const skills = ["HTML", "CSS", "JavaScript", "React", "Astro", "Оптимизация SEO"];


const happy = true;
const finished = false;
const goal = 3;


const skillColor = "navy";
const fontWeight = "bold";
const textCase = "uppercase";
---

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы