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

Напишите свой первый пост в блоге в формате Markdown

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

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

  • Создать новую папку и новый пост
  • Написать несколько постов в формате Markdown
  • Создать ссылки на ваши посты на странице «Блог»

Создайте свой первый файл .md.

  1. Создайте новую директорию по адресу src/pages/posts/.

  2. Добавьте новый (пустой) файл post-1.md в новую папку /posts/.

  3. Найдите эту страницу в предварительном просмотре браузера, добавив /posts/post-1 в конец вашего текущего URL-адреса предварительного просмотра (например, http://localhost:4321/posts/post-1).

  4. Измените URL-адрес предварительного просмотра в браузере, чтобы вместо него просматривать /posts/post-2. (Это страница, которую вы ещё не создали).

    Обратите внимание на разный вывод при предварительном просмотре «пустой» и несуществующей страницы. Это поможет вам устранить проблемы в будущем.

Напишите содержимое в формате Markdown.

  1. Скопируйте или введите следующий код в файл post-1.md

    ---
title: 'Моя первая запись в блоге'
pubDate: 2022-07-01
description: 'Это первый пост моего нового Astro блога.'
author: 'Ученик Astro'
image:
    url: 'https://docs.astro.build/assets/rose.webp'
    alt: 'Логотип Astro на тёмном фоне с розовым свечением.'
tags: ["astro", "ведение блога", "обучение в открытом доступе"]
---
# Моя первая запись в блоге

Опубликовано: 01.07.2022

Добро пожаловать в мой _новый блог_ об изучении Astro! Здесь я буду рассказывать о своем учебном пути, пока я создаю новый сайт.

## Чего я добился

1. **Установка Astro**: Сначала я создал новый проект Astro и настроил свои учётные записи в интернете.

2. **Создание страниц**: Затем я научился создавать страницы, создавая новые файлы `.astro` и помещая их в папку `src/pages/`.

3. **Создание записей в блоге**: Это моя первая запись в блоге! Теперь у меня есть страницы Astro и посты в формате Markdown!

## Что дальше

Я завершу учебное пособие по Astro, а затем продолжу добавлять новые записи. Следите за обновлениями.

  2. Проверьте предварительный просмотр браузера по адресу http://localhost:4321/posts/post-1. Теперь вы должны увидеть содержимое этой страницы. Возможно, оно ещё не отформатировано должным образом, но не волнуйтесь, вы исправите это позже в процессе обучения!

  3. Используйте инструменты разработчика вашего браузера для инспектирования этой страницы. Обратите внимание, что, хотя вы не вводили никаких HTML-элементов, ваш Markdown был преобразован в HTML. Вы можете увидеть такие элементы, как заголовки, параграфы и элементы списка.

:::noteИнформация в верхней части файла, внутри разделителей кода (---), называется метаданными (frontmatter). Эти данные — включая теги и изображение поста — представляют собой информацию о вашем посте, которую Astro может использовать. Она не отображается на странице автоматически, но позже в руководстве вы будете использовать её для улучшения вашего сайта.:::

Создайте ссылки на ваши посты

  1. Создайте ссылку на ваш первый пост с помощью элемента ссылки в файле src/pages/blog.astro:

    ---
---
<html lang="ru">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Главная</a>
    <a href="/about/">О сайте</a>
    <a href="/blog/">Блог</a>

    <h1>Мой блог об изучении Astro</h1>
    <p>Здесь я буду публиковать записи о своем пути изучения Astro.</p>
    <ul>
      <li><a href="/posts/post-1/">Пост 1</a></li>
    </ul>
  </body>
</html>

  2. Теперь добавьте ещё два файла в src/pages/posts/: post-2.md и post-3.md. Вот небольшой пример кода, который вы можете скопировать и вставить в ваши файлы, или же написать свой!

    ---
title: Моя вторая запись в блоге
author: Ученик Astro
description: "После изучения Astro я не смог остановиться!"
image:
    url: "https://docs.astro.build/assets/arc.webp"
    alt: "Миниатюра с дугами Astro."
pubDate: 2022-07-08
tags: ["astro", "ведение блога", "обучение в открытом доступе", "успехи"]
---
После успешной первой недели изучения Astro я решил попробовать что-то ещё. Я написал и импортировал небольшой компонент по памяти!
    ---
title: Моя третья запись в блоге
author: Ученик Astro
description: "У меня были некоторые трудности, но обращение к сообществу за помощью действительно помогло!"
image:
    url: "https://docs.astro.build/assets/rays.webp"
    alt: "Миниатюра с лучами Astro."
pubDate: 2022-07-15
tags: ["astro", "обучение в открытом доступе", "неудачи", "сообщество"]
---
Не всё всегда шло гладко, но мне нравится создавать проекты с Astro. И [сообщество в Discord](https://astro.build/chat) очень дружелюбное и полезное.

  3. Добавьте ссылки на эти новые посты:

    ---
---
<html lang="ru">
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    <a href="/">Главная</a>
    <a href="/about/">О сайте</a>
    <a href="/blog/">Блог</a>

    <h1>Мой блог об изучении Astro</h1>
    <p>Здесь я буду публиковать записи о своем пути изучения Astro.</p>
    <ul>
      <li><a href="/posts/post-1/">Пост 1</a></li>
      <li><a href="/posts/post-2/">Пост 2</a></li>
      <li><a href="/posts/post-3/">Пост 3</a></li>
    </ul>
  </body>
</html>

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

    Все ваши ссылки на Пост 1, Пост 2 и Пост 3 ведут на рабочие страницы на вашем сайте. (Если вы обнаружите ошибку, проверьте ваши ссылки в blog.astro или имена ваших файлов Markdown.)

Проверьте свои знания

  1. Содержимое в файле Markdown (.md) преобразуется в:

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

Ресурсы

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