Перейти к содержимому

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

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

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

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

Заголовок раздела Создание компонента Footer

  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>

Импорт и использование Footer.astro

Заголовок раздела Импорт и использование Footer.astro

  1. Добавьте следующий оператор импорта в метаданные каждой из трех ваших страниц 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, чтобы получить значения title, author и date в качестве пропсов?

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

Контрольный список

Заголовок раздела Контрольный список

Ресурсы

Заголовок раздела Ресурсы
Внести свой вклад Сообщество Sponsor