blogcontent
Astro是一个专注于内容的写作框架，方便从各个地方拉取内容进行展示。
Astro使用其特有的文件后缀(.astro)来进行多框架支持.

支持框架: React、Preact、Svelte、 Vue、SolidJS、AlpineJS、Lit

开始使用

执行 npm create astro@latest进行新项目创建。
根据命令行提示选择相应模板后项目即搭建成功。
随后运行npm run start或者 npm run dev来启动项目即可。

常见需求

1. 远程加载Markdown内容进行展示

需要使用官方提供的Markdown组件进行展示
npm install @astrojs/markdown-component -D
随后新建astro组件，如 content.astro

---
import Markdown from '@astrojs/markdown-component'
const mdContent = `你的markdown内容`
---

<Markdown content={mdContent} />

动态路由

Astro提供了动态路由的能力，官网有对应介绍。 因为Astro时静态网站生成器，所以我们需要规定其可访问的路由。

1. 新建目标路由组件，blog/[id].astro
2. 编辑 blog/[id].astro组件的头部内容（JS）
   该步骤主要需要实现导出 getStaticPaths方法.
   getStaticPaths方法需要返回一个可接收值数组，如

// id属性名可以改为你需要的名字。
export function getStaticPaths() {
  return [
    { params: { id: '1234' } },
    // ...
  ]
}

3. 访问 blog/123, 123将会作为参数传递给 [id].astro组件
4. 在 [id].astro组件中使用 const { id } = Astro.params获取 id

多参数

Astro也支持多级嵌套使用，比如我们想按月份访问自己博客的文章，那么地址栏的形式为 blog/月份/文章id
那么，我们需要新建对应的文件夹来放置对应的组件

|- src
|--- blog
|----- [month]
|------- [id].astro

也可以适用单个文件来配置多个参数

|- src
|--- blog
|----- [month]-[id].astro

使用上面的形式我们就可以在 astro组件中从 Astro.params中获取到我们配置的参数了。

常见问题

1. 使用shiki进行代码高亮更改主题后不生效

需要重启服务

相关链接

• blog | astro-get-up-and-running
• Astro官网