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

Первый пост в блоге с использованием 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

    src/pages/posts/post-1.md
    ---
    title: 'Моя первая запись в блоге'
    pubDate: 2022-07-01
    description: 'Это первая запись на моем новом блоге Astro.'
    author: 'Ученик Astro'
    image:
        url: 'https://docs.astro.build/assets/full-logo-light.png'
        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. Вы можете увидеть элементы, такие как заголовки, абзацы и пункты списка.

Ссылка на ваши посты

  1. Добавьте ссылку на ваш первый пост с помощью тега якоря в файле src/pages/blog.astro:

    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. Вот небольшой пример кода, который вы можете скопировать и вставить в эти файлы, или написать свой:

    src/pages/posts/post-2.md
    ---
    title: Мой второй пост в блоге
    author: Ученик Astro
    description: "После того, как я изучил немного Astro, я не мог остановиться!"
    image:
        url: "https://docs.astro.build/assets/arc.webp"
        alt: "Привью Astro c радугой-дугой"
    pubDate: 2022-07-08
    tags: ["astro", "блогинг", "обучение", "успех"]
    ---
    После успешной первой недели изучения Astro, я решил попробовать еще. Я создал небольшой компонент из памяти и импортировал его!
    src/pages/posts/post-3.md
    ---
    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. Добавьте ссылки на эти посты:

    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>
          <li><a href="/posts/post-2/">Пост 2</a></li>
          <li><a href="/posts/post-3/">Пост 3</a></li>
        </ul>
      </body>
    </html>

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

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

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

  1. Контент в файле Markdown (.md) преобразуется в:

Чек-лист

Ресурсы