| type | title | description | i18nReady |
|---|---|---|---|
tutorial |
Напишите свой первый пост в блоге в формате Markdown |
Учебное пособие: Создайте свой первый блог на Astro —
Добавьте страницы в формате Markdown на свой сайт |
true |
import Checklist from '/components/Checklist.astro';
import Blanks from '/components/tutorial/Blanks.astro';
import Box from '/components/tutorial/Box.astro';
import MultipleChoice from '/components/tutorial/MultipleChoice.astro';
import Option from '/components/tutorial/Option.astro'
import PreCheck from '/components/tutorial/PreCheck.astro';
import { Steps } from '@astrojs/starlight/components';
import Badge from "~/components/Badge.astro"
Теперь, когда вы создали страницы с помощью файлов .astro, пришло время сделать несколько записей в блоге с помощью файлов .md!
-
Добавьте новый (пустой) файл
post-1.mdв новую папку/posts/. -
Найдите эту страницу в предварительном просмотре браузера, добавив
/posts/post-1в конец вашего текущего URL-адреса предварительного просмотра. (например,http://localhost:4321/posts/post-1). -
Измените URL-адрес предварительного просмотра в браузере, чтобы вместо него просматривать
/posts/post-2. (Это страница, которую вы еще не создали).
Обратите внимание на разный вывод при предварительном просмотре "пустой" и несуществующей страницы. Это поможет вам устранить проблемы в будущем.
1. Скопируйте или введите следующий код в файл `post-1.md````markdown title="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, а затем продолжу добавлять новые записи. Следите за обновлениями.
```
-
Проверьте предварительный просмотр браузера по адресу
http://localhost:4321/posts/post-1. Теперь вы должны увидеть содержимое этой страницы. Возможно, оно еще не отформатировано должным образом, но не волнуйтесь, вы обновите его позже в учебном пособии ! -
Используйте инструменты разработчика вашего браузера для инспектирования этой страницы. Обратите внимание, что, хотя вы не вводили никаких HTML-элементов, ваш Markdown был преобразован в HTML. Вы можете увидеть такие элементы, как заголовки, параграфы и элементы списка.
:::note Информация в верхней части файла, внутри кодовых заборов, называется frontmatter. Эти данные - включая теги и изображение поста - представляют собой информацию о вашем посте, которую может использовать Astro. Она не появляется на странице автоматически, но вы будете обращаться к ней позже в учебном пособии, чтобы улучшить свой сайт. :::
1. Создайте ссылку на ваш первый пост с помощью элемента ссылки в файле `src/pages/blog.astro`:```astro title="src/pages/blog.astro" ins={16-18}
---
---
<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>
```
-
Теперь добавьте еще два файла в
src/pages/posts/:post-2.mdиpost-3.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!
--- 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!
-
Добавьте ссылки на эти новые посты:
--- --- <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>
-
Проверьте предварительный просмотр в браузере и убедитесь, что:
Все ваши ссылки на Post 1, Post 2 и Post 3 ведут на рабочие страницы на вашем сайте. (Если вы обнаружите ошибку, проверьте ваши ссылки в
blog.astroили имена ваших файлов Markdown.)
- Содержимое в файле Markdown (
.md) преобразуется в: HTML CSS JavaScript