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

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

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

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

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

Создание нового файла .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.

  • Перейдите на вкладку Система управления версиями слева в меню. На ней должен быть отображен маленький «3».

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

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

  2. Нажмите кнопку Синхронизировать в GitHub.

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

Чек-лист

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

Ресурсы

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