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

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

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

  • Создать компонент 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>Learn more about my projects on <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
    </footer>

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

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

  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 = 'Home Page';
---


<html lang="en">
  <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>Learn more about my projects on <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. Какую строку кода нужно написать во frontmatter компонента Astro, чтобы получить значения title, author и date в качестве пропсов?

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

Чек-лист

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

Ресурсы

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

Что у вас на уме?

Создать проблему в GitHub

Самый быстрый способ предупредить нашу команду о проблеме.

Сообщество
京ICP备15031610号-99