Skip to content

撰写你的第一篇 Markdown 博客文章

现在你已经使用 .astro 文件构建了页面，是时候使用 .md 文件制作一些博客文章了！

¥Now that you have built pages using .astro files, it’s time to make some blog posts using .md files!

Get ready to…

  • 创建一个新文件夹并创建一个新帖子

  • 写一些 Markdown 内容

  • 链接到你的博客页面上的博客文章

创建你的第一个 .md 文件

Section titled 创建你的第一个 .md 文件

¥Create your first .md file

  1. Create a new directory at src/pages/posts/.

  2. Add a new (empty) file post-1.md inside your new /posts/ folder.

  3. Look for this page in your browser preview by adding /posts/post-1 to the end of your existing preview URL. (e.g. http://localhost:4321/posts/post-1)

  4. Change the browser preview URL to view /posts/post-2 instead. (This is a page you have not yet created.)

    Note the different output when previewing an “empty” page, and one that doesn’t exist. This will help you troubleshoot in the future.

编写 Markdown 内容

Section titled 编写 Markdown 内容

¥Write Markdown content

  1. Copy or type the following code into post-1.md

    src/pages/posts/post-1.md
    ---
    title: 'My First Blog Post'
    pubDate: 2022-07-01
    description: 'This is the first post of my new Astro blog.'
    author: 'Astro Learner'
    image:
        url: 'https://astro.nodejs.cn/assets/rose.webp'
        alt: 'The Astro logo on a dark background with a pink glow.'
    tags: ["astro", "blogging", "learning in public"]
    ---
    # My First Blog Post
    

    Published on: 2022-07-01
    

    Welcome to my _new blog_ about learning Astro! Here, I will share my learning journey as I build a new website.
    

    ## What I've accomplished
    

    1. **Installing Astro**: First, I created a new Astro project and set up my online accounts.
    

    2. **Making Pages**: I then learned how to make pages by creating new `.astro` files and placing them in the `src/pages/` folder.
    

    3. **Making Blog Posts**: This is my first blog post! I now have Astro pages and Markdown posts!
    

    ## What's next
    

    I will finish the Astro tutorial, and then keep adding more posts. Watch this space for more to come.

  2. Check your browser preview again at http://localhost:4321/posts/post-1. You should now see content on this page. It may not yet be properly formatted, but don’t worry, you will update this later in the tutorial!

  3. Use your browser’s Dev Tools to inspect this page. Notice that although you have not typed any HTML elements, your Markdown has been converted to HTML. You can see elements such as headings, paragraphs, and list items.

链接到你的帖子

Section titled 链接到你的帖子

¥Link to your posts

  1. Link to your first post with an anchor tag in 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. Now, add two more files in src/pages/posts/: post-2.md and post-3.md. Here is some sample code you can copy and paste into your files, or, you can create your own!

    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://astro.nodejs.cn/assets/arc.webp"
        alt: "The Astro logo on a dark background with a purple gradient arc."
    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://astro.nodejs.cn/assets/rays.webp"
        alt: "The Astro logo on a dark background with rainbow 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. Add links to these new posts:

    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. Check your browser preview and make sure that:

    All your links for Post 1, Post 2, and Post 3 lead to a working page on your site. (If you find a mistake, check your links on blog.astro or your Markdown file names.)

测试你的知识

Section titled 测试你的知识

¥Test your knowledge

  1. Markdown (.md) 文件中的内容将转换为：

清单

Section titled 清单

¥Checklist

资源

Section titled 资源

¥Resources

Astro 中文网 - 粤ICP备13048890号