Создание подвала для социальных сетей
Приготовьтесь…
- Создать компонент Footer
- Создать и передать пропсы компоненту Social Media
Теперь, когда вы использовали компоненты Astro на странице, пришло время использовать компонент внутри другого компонента!
Создание компонента Footer
Заголовок раздела Создание компонента Footer-
Создайте новый файл
src/components/Footer.astro
. -
Скопируйте следующий код в ваш новый файл
Footer.astro
.
Импорт и использование Footer.astro
Заголовок раздела Импорт и использование Footer.astro-
Добавьте следующий оператор импорта во frontmatter каждой из трех страниц Astro (
index.astro
,about.astro
иblog.astro
): : -
Добавьте новый компонент
<Footer />
в ваш шаблон Astro на каждой странице, непосредственно перед закрывающим тегом</body>
, чтобы отобразить подвал в нижней части страницы. -
В предварительном просмотре браузера проверьте, что на каждой странице виден новый текст подвала.
Попробуйте сделать это сами — Настройте ваш подвал
Заголовок раздела Попробуйте сделать это сами — Настройте ваш подвалНастройте подвал для отображения нескольких социальных сетей (например, Instagram, Twitter, LinkedIn) и укажите свое имя пользователя для прямой ссылки на ваш профиль.
Проверка кода
Заголовок раздела Проверка кодаЕсли вы следовали каждому шагу в руководстве, ваш файл index.astro
должен выглядеть следующим образом:
Создание компонента социальных сетей
Заголовок раздела Создание компонента социальных сетейПоскольку у вас может быть несколько онлайн-аккаунтов, на которые вы можете ссылаться, вы можете создать один многоразовый компонент и использовать его несколько раз. Каждый раз вы будете передавать ему различные свойства (props
) для использования: онлайн-платформу и ваше имя пользователя там.
-
Создайте новый файл
src/components/Social.astro
. -
Скопируйте следующий код в ваш новый файл
Social.astro
.
Импорт и использование Social.astro
в вашем подвале
Заголовок раздела Импорт и использование Social.astro в вашем подвале-
Измените код в
src/components/Footer.astro
, чтобы импортировать, а затем использовать этот новый компонент три раза, каждый раз передавая различные атрибуты компонента в качестве свойств: -
Проверьте предварительный просмотр в браузере, и вы должны увидеть, что ваш новый подвал отображает ссылки на эти три платформы на каждой странице.
Стилизация вашего компонента социальных сетей
Заголовок раздела Стилизация вашего компонента социальных сетей-
Настройте внешний вид ваших ссылок, добавив тег
<style>
вsrc/components/Social.astro
. -
Добавьте тег
<style>
в `src/components/Footer.astro, чтобы улучшить макет его содержимого. -
Снова проверьте предварительный просмотр в браузере и убедитесь, что на каждой странице отображается обновленный подвал.
Проверьте себя
Заголовок раздела Проверьте себя-
Какую строку кода нужно написать во frontmatter компонента Astro, чтобы получить значения
title
,author
иdate
в качестве пропсов? -
Как передать значения в виде пропсов компоненту Astro?