Создайте свою первую страницу в Astro
Теперь, когда вы знаете, что файлы .astro
отвечают за страницы на вашем сайте, самое время создать одну из них!
Приготовьтесь…
- Создать две новые страницы на вашем сайте: О сайте и Блог
- Добавить навигационные ссылки на страницы
- Развернуть обновленную версию вашего сайта в Интернете
Создайте новый файл .astro
Заголовок раздела Создайте новый файл .astro-
В панели файлов вашего редактора кода перейдите в папку
src/pages/
, где вы увидите существующий файлindex.astro
. -
В этой же папке создайте новый файл с названием
about.astro
. -
Скопируйте или перепечатайте содержимое файла
index.astro
в новый файлabout.astro
.Ваш редактор может показать сплошной белый круг на ярлыке вкладки для этого файла. Это означает, что файл еще не сохранен. В меню Файл в VS Code включите “Автоматическое сохранение”, и вам больше не придется сохранять файлы вручную.
-
Добавьте
/about
в конец URL вашего сайта в адресной строке и убедитесь, что страница загружается. (например,http://localhost:4321/about
)
Сейчас ваша страница “О сайте” должна выглядеть точно так же, как и первая, но мы собираемся это изменить!
Отредактируйте свою страницу
Заголовок раздела Отредактируйте свою страницуОтредактируйте HTML-код, чтобы эта страница была о вас.
Чтобы изменить или добавить больше содержимого на страницу “О сайте”, добавьте дополнительные HTML-элементы, содержащие контент. Вы можете скопировать и вставить приведенный ниже HTML-код между существующими тегами <body></body>
, или создать свои.
Теперь снова зайдите на страницу /about
во вкладке браузера, и вы увидите обновленный контент.
Добавьте навигационные ссылки
Заголовок раздела Добавьте навигационные ссылкиЧтобы было проще просматривать все страницы, добавьте HTML-ссылки навигации по страницам перед <h1>
в верхней части обеих страниц (index.astro
и about.astro
):
Убедитесь, что вы можете нажимать эти ссылки и перемещаться между страницами на вашем сайте.
В отличие от многих фреймворков, Astro использует стандартные элементы HTML <a>
для навигации между страницами (также называемыми маршрутами), с традиционным обновлением страницы.
Попробуйте сами — добавьте страницу блога
Заголовок раздела Попробуйте сами — добавьте страницу блогаДобавьте третью страницу blog.astro
на свой сайт, следуя тем же шагам, что и выше.
(Не забудьте добавить третью навигационную ссылку на каждую страницу.)
Покажите мне шаги.
- Создайте новый файл в папке
src/pages/blog.astro
. - Скопируйте все содержимое файла
index.astro
и вставьте его вblog.astro
. - Добавьте третью навигационную ссылку вверху каждой страницы:
Теперь у вас должен быть сайт с тремя страницами, которые ссылаются друг на друга. Пришло время добавить немного контента на страницу “Блог”.
Обновите содержимое страницы blog.astro
, добавив:
Предварительно просмотрите весь сайт, посетив все три страницы в предварительном просмотре браузера, и убедитесь, что:
- Каждая страница правильно ссылается на все три страницы.
- Каждая из ваших двух новых страниц имеет свой собственный описательный заголовок
- Каждая из двух новых страниц имеет свой собственный текст параграфа
Опубликуйте свои изменения в Интернете
Заголовок раздела Опубликуйте свои изменения в ИнтернетеЕсли вы следовали нашим настройкам в Модуле 1, вы можете опубликовать свои изменения на вашем действующем сайте через Netlify.
Когда вы будете довольны тем, как выглядит ваша предварительная версия, зафиксируйте свои изменения в вашем репозитории на GitHub.
-
В VS Code просмотрите файлы, которые изменились с момента вашего последнего зафиксированного коммита на GitHub.
-
Перейдите на вкладку Source Control в левом меню. На ней должна отображаться маленькая цифра “3”.
-
Вы должны увидеть
index.astro
,about.astro
иblog.astro
в списке файлов, которые изменились.
-
-
Введите сообщение о зафиксированном коммите (например, “Добавлены две новые страницы - about и blog”) в текстовом поле и нажмите Ctrl + Enter (в macOS: Cmd ⌘ + Enter), чтобы зафиксировать изменения в вашем текущем рабочем пространстве.
-
Нажмите кнопку Sync Change на GitHub.
-
Подождав несколько минут, зайдите на свой URL-адрес Netlify и убедитесь, что ваши изменения опубликованы в реальном времени.
Выполняйте эти шаги каждый раз, когда приостанавливаете работу! Ваши изменения будут обновлены в вашем репозитории GitHub. Если вы развернули на сайте Netlify, он будет пересобран и опубликован заново.