Пропустить до содержимого

Создайте свою первую страницу в 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>My Astro Site</h1>
  <h1>About Me</h1>
  <h2>... and my new Astro site!</h2>


  <p>I am working through Astro's introductory tutorial. This is the second page on my website, and it's the first one I built myself!</p>


  <p>This site will update as I complete more of the tutorial, so keep checking back and see how my journey is going!</p>
</body>

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

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

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

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

src/pages/about.astro
<a href="/">Home</a>
<a href="/about/">About</a>


<h1>About Me</h1>
<h2>... and my new Astro site!</h2>

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

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

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

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

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

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


  <h1>My Astro Site</h1>
</body>

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

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

src/pages/blog.astro
<body>
  <a href="/">Home</a>
  <a href="/about/">About</a>
  <a href="/blog/">Blog</a>


  <h1>My Astro Site</h1>
  <h1>My Astro Learning Blog</h1>
  <p>This is where I will post about my journey learning 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 и убедитесь, что ваши изменения опубликованы в реальном времени.

Чек-лист

Заголовок раздела Чек-лист

Ресурсы

Заголовок раздела Ресурсы