编写文章

创建新文章

推荐通过以下命令创建：

npx blog new <文章名字>

如：npx blog new 会员制餐厅

默认会生成一些标准的 frontmatter，生成完成后可以直接开始编写文章

为文章添加分类和标签信息

使用上文 npx 命令会帮助你自动生成 title 与 date 属性

frontmatter 有以下属性可以设置，必填已用加粗字体提醒：

• title: 必填，否则博客会抛出错误，推荐将 markdown 名字设置的与 title 属性相同，否则可能会有错误！
• date：必填，否则博客会抛出错误，推荐格式：YYYY-MM-DD HH:MM:SS
• description：文章的简短描述，会出现在 blog 页面对文章的简介部分
• index_img: 文章的封面，会出现在 blog 页面，路径以 public 文件夹开始查找
• categories: 文章归档，博客根据归档动态生成菜单
• tags：文章标签，按数组形式传入：[标签1,标签2]
• draft: 是否是草稿，如果设置为 true 那么文章不会展示于页面中

具体可以前往 src/content/config.ts 查看

以上为本博客规定占用的关键字，其他均可按照自己的喜好填写

Q&A

我想要设置图片居中该怎么办？

可以这样写：

# 图片居中

<div class="tac">
  <img src="../" />
</div>

我可以通过相对路径引用图片吗

可以，但是只能通过 mdx + import 语句引入

<div class="tac">
  <img src={import('相对图片路径')} />
</div>

mdx 文档：https://docs.astro.build/en/guides/markdown-content/#mdx-only-features

推荐还是将图片放在 public 下进行目录组织

图片引入后在启动开发环境下可以显示，但是生产环境不显示

可以在开发环境注意一下控制台是否有这样的警告：

11:45:14 [dev] Requests for items in your public folder must also include your base.

这个时候意味着你需要在图片路径上加上 base 前缀，比如本博客：

![](/Shiina-Astro-Blog/placeholder-social.jpg)

下一步？

阅读构建发布指南：文档