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

Создайте свою первую страницу в Astro

Теперь, когда вы знаете, что файлы .astro отвечают за страницы на вашем сайте, самое время создать одну из них!

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

  • Создать две новые страницы на вашем сайте: «О сайте» и «Блог»
  • Добавить навигационные ссылки на страницы
  • Развернуть обновлённую версию вашего сайта в Интернете

Создайте новый файл .astro

  1. В панели файлов вашего редактора кода перейдите в папку src/pages/, где вы увидите существующий файл index.astro.

  2. В этой же папке создайте новый файл с названием about.astro.

  3. Скопируйте или перепечатайте содержимое файла index.astro в новый файл about.astro.

    :::tipВаш редактор может показать сплошной белый круг на ярлыке вкладки для этого файла. Это означает, что файл ещё не сохранен. В меню Файл в VS Code включите «Автосохранение», и вам больше не придется сохранять файлы вручную.:::

  4. Добавьте /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>

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

:::noteВ отличие от многих фреймворков, Astro использует стандартные элементы HTML <a> для навигации между страницами (также называемыми маршрутами), с традиционным обновлением страницы.:::

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

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

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

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

  1. Создайте новый файл в папке src/pages/blog.astro.
  2. Скопируйте все содержимое файла index.astro и вставьте его в blog.astro.
  3. Добавьте третью навигационную ссылку вверху каждой страницы:
<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.

  1. В VS Code просмотрите файлы, которые изменились с момента вашего последнего зафиксированного коммита на GitHub.

    • Перейдите на вкладку Source Control в левом меню. На ней должна отображаться маленькая цифра «3».

    • Вы должны увидеть index.astro, about.astro и blog.astro в списке файлов, которые изменились.

  2. Введите сообщение о зафиксированном коммите (например, «Добавлены две новые страницы - about и blog») в текстовом поле и нажмите Ctrl + Enter (в macOS: Cmd ⌘ + Enter), чтобы зафиксировать изменения в вашем текущем рабочем пространстве.

  3. Нажмите кнопку Sync Change (Синхронизировать изменения) на GitHub.

  4. Подождав несколько минут, зайдите на свой URL-адрес Netlify и убедитесь, что ваши изменения опубликованы в реальном времени.

:::tip[Регулярно фиксируйте и развёртывайте]Следуйте этим шагам каждый раз, когда приостанавливаете работу! Ваши изменения будут обновлены в вашем репозитории GitHub. Если вы развернули сайт на Netlify, он будет пересобран и переопубликован.:::

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

Ресурсы

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