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

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

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

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

  • Создать новую папку и новый пост
  • Написать несколько постов в формате Markdown
  • Создать ссылки на ваши блог-посты на странице “Блог”
  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. (Это страница, которую вы еще не создали).

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

  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
    Добро пожаловать в мой _новый блог_ об изучении астро! Здесь я буду рассказывать о своем учебном пути, пока я создаю новый сайт.
    ## Чего я добился
    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="en">
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    </head>
    <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
    <li><a href="/posts/post-1/">Post 1</a></li>
    </ul>
    </body>
    </html>
  2. Теперь добавьте еще два файла в src/pages/posts/: post-2.md и post-3.md. Вот небольшой пример кода, который вы можете скопировать и вставить в ваши файлы, или же написать свой!

    src/pages/posts/post-2.md
    ---
    title: My Second Blog Post
    author: Astro Learner
    description: "After learning some Astro, I couldn't stop!"
    image:
    url: "https://docs.astro.build/assets/arc.webp"
    alt: "Thumbnail of Astro arcs."
    pubDate: 2022-07-08
    tags: ["astro", "blogging", "learning in public", "successes"]
    ---
    After a successful first week learning Astro, I decided to try some more. I wrote and imported a small component from memory!
    src/pages/posts/post-3.md
    ---
    title: My Third Blog Post
    author: Astro Learner
    description: "I had some challenges, but asking in the community really helped!"
    image:
    url: "https://docs.astro.build/assets/rays.webp"
    alt: "Thumbnail of Astro rays."
    pubDate: 2022-07-15
    tags: ["astro", "learning in public", "setbacks", "community"]
    ---
    It wasn't always smooth sailing, but I'm enjoying building with Astro. And, the [Discord community](https://astro.build/chat) is really friendly and helpful!
  3. Добавьте ссылки на эти новые посты:

    src/pages/blog.astro
    ---
    ---
    <html lang="en">
    <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
    </head>
    <body>
    <a href="/">Home</a>
    <a href="/about/">About</a>
    <a href="/blog/">Blog</a>
    <h1>My Astro Learning Blog</h1>
    <p>This is where I will post about my journey learning Astro.</p>
    <ul>
    <li><a href="/posts/post-1/">Post 1</a></li>
    <li><a href="/posts/post-2/">Post 2</a></li>
    <li><a href="/posts/post-3/">Post 3</a></li>
    </ul>
    </body>
    </html>
  4. Проверьте предварительный просмотр в браузере и убедитесь, что:

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

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