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

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

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

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

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

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

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

    ---
const platform = "github";
const username = "withastro";
---

<footer>
  <p>Узнайте больше о моих проектах на <a href={`https://www.${platform}.com/${username}`}>{platform}</a>!</p>
</footer>

Импорт и использование 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 должен выглядеть следующим образом:

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

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

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

  1. Измените код в 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.

    ---
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, чтобы улучшить макет его содержимого.

    ---
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?

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

Ресурсы

Внести свой вклад Сообщество Поддержать