[go: up one dir, main page]
Перейти к содержимому

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

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

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

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

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

Заголовок раздела «Создайте новый файл .astro»

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

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

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

  4. Добавьте /about в конец URL вашего сайта в адресной строке и убедитесь, что страница загружается (например, http://localhost:4321/about)

Сейчас ваша страница «О сайте» должна выглядеть точно так же, как и первая, но мы собираемся это изменить!

Отредактируйте свою страницу

Заголовок раздела «Отредактируйте свою страницу»

Отредактируйте HTML-код, чтобы эта страница была о вашем сайте.

Чтобы изменить или добавить больше содержимого на страницу «О сайте», добавьте дополнительные HTML-элементы, содержащие контент. Вы можете скопировать и вставить приведённый ниже HTML-код между существующими тегами <body></body>, или создать свой.

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


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


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

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

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

Заголовок раздела «Добавьте навигационные ссылки»

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

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


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

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

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

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

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

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

Покажите мне шаги.
  1. Создайте новый файл в папке src/pages/blog.astro.
  2. Скопируйте все содержимое файла index.astro и вставьте его в blog.astro.
  3. Добавьте третью навигационную ссылку вверху каждой страницы:
src/pages/index.astro
<body>
  <a href="/">Главная</a>
  <a href="/about/">О сайте</a>
  <a href="/blog/">Блог</a>


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

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

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

src/pages/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 и убедитесь, что ваши изменения опубликованы в реальном времени.

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

Заголовок раздела «Контрольный список»

Ресурсы

Заголовок раздела «Ресурсы»
Внести свой вклад Сообщество Поддержать