Создайте свою первую страницу в 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>, или создать свой.

<body>
  <h1>Мой сайт на Astro</h1>
  <h1>Обо мне</h1>
  <h2>... и моем новом сайте на Astro!</h2>

  <p>Я прохожу вводный учебник по Astro. Это вторая страница моего сайта, и это первая страница, которую я создал самостоятельно!</p>

  <p>Сайт будет обновляться по мере прохождения учебника, так что заходите сюда снова и следите за моим прогрессом!</p>
</body>

Теперь снова зайдите на страницу /about во вкладке браузера, и вы увидите обновлённый контент.

Добавьте навигационные ссылки

Чтобы было проще просматривать все страницы, добавьте HTML-ссылки навигации по страницам перед <h1> в верхней части обеих страниц (index.astro и about.astro):

<a href="/">Главная</a>
<a href="/about/">О сайте</a>

<h1>Обо мне</h1>
<h2>... и моем новом сайте на Astro!</h2>

Убедитесь, что вы можете нажимать эти ссылки и перемещаться между страницами на вашем сайте.

Попробуйте сами — добавьте страницу блога

Добавьте третью страницу blog.astro на свой сайт, следуя тем же шагам, что и выше.

(Не забудьте добавить третью навигационную ссылку на каждую страницу.)

Покажите мне шаги.

Создайте новый файл в папке src/pages/blog.astro.
Скопируйте все содержимое файла index.astro и вставьте его в blog.astro.
Добавьте третью навигационную ссылку вверху каждой страницы:

<body>
  <a href="/">Главная</a>
  <a href="/about/">О сайте</a>
  <a href="/blog/">Блог</a>

  <h1>Мой сайт на Astro</h1>
</body>

Теперь у вас должен быть сайт с тремя страницами, которые ссылаются друг на друга. Пришло время добавить немного контента на страницу «Блог».

Обновите содержимое страницы blog.astro, добавив:

<body>
  <a href="/">Главная</a>
  <a href="/about/">О сайте</a>
  <a href="/blog/">Блог</a>

  <h1>Мой сайт на Astro</h1>
  <h1>Мой блог об изучении Astro</h1>
  <p>Здесь я буду публиковать записи о своем пути изучения Astro.</p>
</body>

Предварительно просмотрите весь сайт, посетив все три страницы в предварительном просмотре браузера, и убедитесь, что:

Каждая страница правильно ссылается на все три страницы
Каждая из ваших двух новых страниц имеет свой собственный описательный заголовок
Каждая из двух новых страниц имеет свой собственный текст параграфа

Опубликуйте свои изменения в интернете

Если вы следовали нашим настройкам в Модуле 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.

Ресурсы

Внести свой вклад Сообщество Sponsor