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

Создание подвала со ссылки на соцсети

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

  • Создать компонент Footer
  • Создать и передать пропсы в компонент Social Media

Теперь, когда вы использовали компоненты Astro на странице, давайте используем компонент внутри другого компонента!

  1. Создайте новый файл src/components/Footer.astro.

  2. Скопируйте следующий код в ваш новый файл Footer.astro.

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    ---
    <footer>
    <p>Узнайте больше о моих проектах на <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>
  1. Добавьте следующий импорт в метаданные (frontmatter) каждой из ваших трех страниц Astro (index.astro, about.astro и blog.astro):

    import Footer from '../components/Footer.astro';
  2. Добавьте новый компонент <Footer /> в ваш шаблон Astro на каждой странице, прямо перед закрывающим тегом </body>, чтобы отобразить ваш футер внизу страницы.

    <Footer />
    </body>
    </html>
  3. В предварительном просмотре в браузере проверьте, что вы можете видеть ваш новый текст футера на каждой странице.

Попробуйте сделать это сами — Настройте ваш футер

Заголовок раздела Попробуйте сделать это сами — Настройте ваш футер

Настройте ваш футер, чтобы отображать несколько социальных сетей (например, Instagram, Twitter, LinkedIn) и добавьте ваше имя пользователя для прямой ссылки на ваш профиль.

Если вы последовательно следовали каждому шагу учебника, ваш файл index.astro должен выглядеть так:

src/pages/index.astro
---
import Navigation from '../components/Navigation.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const pageTitle = 'Главная страница';
---
<html lang="ru">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width" />
<meta name="generator" content={Astro.generator} />
<title>{pageTitle}</title>
</head>
<body>
<Navigation />
<h1>{pageTitle}</h1>
<Footer />
</body>
</html>

Создание компонента социальных медиа

Заголовок раздела Создание компонента социальных медиа

Поскольку у вас может быть несколько онлайн-аккаунтов, на которые вы можете ссылаться, вы можете создать один многоразовый компонент и использовать его несколько раз. Вы будете передавать этому компоненту разные свойства (props) для использования: онлайн-платформу и ваше имя пользователя там.

  1. Создайте новый файл src/components/Social.astro.

  2. Скопируйте следующий код в свой новый файл Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>

Импорт и использование Social.astro в вашеме футере

Заголовок раздела Импорт и использование Social.astro в вашеме футере
  1. Измените код в src/components/Footer.astro, чтобы импортировать, а затем использовать этот новый компонент три раза, передавая каждый раз разные атрибуты компонента в качестве свойств:

    src/components/Footer.astro
    ---
    const platform = "github";
    const username = "withastro";
    import Social from './Social.astro';
    ---
    <footer>
    <p>Узнайте больше обо всех моих проектах на <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    <Social platform="twitter" username="astrodotbuild" />
    <Social platform="github" username="withastro" />
    <Social platform="youtube" username="astrodotbuild" />
    </footer>
  2. Проверьте предварительный просмотр в вашем браузере, и вы должны увидеть свой новый футер с ссылками на эти три платформы.

Стилизуйте свой компонент социальных медиа

Заголовок раздела Стилизуйте свой компонент социальных медиа
  1. Измените внешний вид ваших ссылок, добавив <style> тег в src/components/Social.astro.

    src/components/Social.astro
    ---
    const { platform, username } = Astro.props;
    ---
    <a href={`https://www.${platform}.com/${username}`}>{platform}</a>
    <style>
    a {
    padding: 0.5rem 1rem;
    color: white;
    background-color: #4c1d95;
    text-decoration: none;
    }
    </style>
  2. Добавьте <style> тег в src/components/Footer.astro, чтобы улучшить макет его содержимого.

    src/components/Footer.astro
    ---
    import Social from './Social.astro';
    ---
    <style>
    footer {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    }
    </style>
    <footer>
    <Social platform="twitter" username="astrodotbuild" />
    <Social platform="github" username="withastro" />
    <Social platform="youtube" username="astrodotbuild" />
    </footer>
  3. Снова проверьте предварительный просмотр в своем браузере и подтвердите, что каждая страница отображает обновленный футер.

  1. Какую строку кода вам нужно написать в Astro-компоненте для получения значений заголовка, автора и даты в виде пропсов?

  2. Как передать значения в виде пропсов в Astro-компонент?