学习开发astro博客后台(一)钩子文学

发布时间：2025-05-28 19:28:37

更新时间：2025-05-30 20:05:40

👀 阅读量：

前端会点，后端不怎么会，想着 Astro 默认作为 SSG 前端框架，得需要一个伪后台。我看了官方文档，有很多后台，但都不是我想要的那种 dev 开发环境下的后台，所以我准备手搓一个解耦的后台实现，也就是作为 npm 包来分发。

当然回过头来，我还什么都不会，所以从官方文档，从头开始。

很详细啊，难得官方有中文文档，赞👍，虽然我不太懂钩子，但是不懂就学嘛，还是挺有意思的。

创建项目

1
npm init

创建 package.json 文件。

安装必要的依赖

安装前置，相关依赖，配置一下命令，方便编译成 JS：

1
...
2
  "exports": {
3
    ".": {
4
      "import": "./dist/index.js",
5
      "types": "./dist/index.d.ts"
6
    },
7
    "./src/pages/admin.astro": "./src/pages/admin.astro"
8
  },
9
  "files": [
10
    "dist",
11
    "src/pages",
12
    "README.md"
13
  ],
14
  "scripts": {
15
    "build": "tsc",
16
    "dev": "tsc --watch",
17
    "clean": "rimraf dist",
18
    "prebuild": "npm run clean",
19
    "prepublishOnly": "npm run build"
20
  },
21
  "devDependencies": {
22
    "typescript": "^5.8.3"
23
  },
24
  "peerDependencies": {
25
    "astro": "^5.8.0"
26
  },
27
...

基本构建：

1
D:\test\locastrol> bun run build
2
$ bun run clean
3
$ rimraf dist
4
$ tsc

测试

1
import { AstroIntegration } from 'astro';
2

3
interface Options{
4
  collections: String;
5
}
6

7
export function locastrol(config: Options = { collections: '' }): AstroIntegration {
8
  const { collections } = config;
9

10
  return {
11
    name: 'locastrol',
12
    hooks: {
13
      'astro:config:setup': ({ injectRoute,updateConfig,command }) => {
14
        if(command=='dev'){
15
          // 通过 Vite 环境变量传递 collections 参数
16
          updateConfig({
17
            vite: {
18
              define: {
19
                'import.meta.env.LOCASTROL_COLLECTIONS': JSON.stringify(collections)
20
              }
21
            }
22
          });          // 后台首页
23
          // 编辑器路由 - 使用动态路由
24
          injectRoute({
25
            pattern: '/locastrol/editor',
26
            entrypoint: 'locastrol/src/pages/index.astro'
27
          });
28
          injectRoute({
29
            pattern: '/locastrol/editor/[slug]',
30
            entrypoint: 'locastrol/src/pages/[slug].astro'
31
          });
32
            // API 路由
33
          injectRoute({
34
            pattern: '/api/locastrol/posts/[slug]',
35
            entrypoint: 'locastrol/src/api/posts/[slug].ts'
36
          });
37
          injectRoute({
38
            pattern: '/api/locastrol/posts',
39
            entrypoint: 'locastrol/src/api/posts.ts'
40
          });
41
      }
42

43
      },
44
      'astro:server:start': ({ address }) => {
45
        console.log('\x1b[43m\x1b[30m%s\x1b[0m \x1b[36m%s\x1b[0m', '✅Locastrol后台已经启动', `http://localhost:${address.port}/locastrol/editor`);
46
      },
47
    },
48
  };
49
}
50

51
export type { Options };

…

1
cd d:\test\astrotest && New-Item -ItemType SymbolicLink -Path "node_modules\locastrol" -Target "d:\test\locastrol"

把本地依赖软链接上，这样方便随改随测。

软链接截图

奇异搞笑 astro: content 导入

我当时不明白，为什么我不能导入来获取这个方法，问了一下 Copilot：

1
import { getCollection } from "astro:content";

Copilot 回答说：astro:content 是 Astro 的虚拟模块，只在 Astro 项目运行时可用，于是它推荐了各种疯狂的高超技巧来实现获取内容合集，我照做了，但是总是感觉别扭。问另一个 AI，让我另辟蹊径，直接写 Astro 组件？

欸，果然只问一个 AI，这个 AI 就会犯轴，转不过弯，好多时间浪费在那了…

1
---
2
import { getCollection } from "astro:content";
3
const POSTS = 'blog';
4
const posts = await getCollection(POSTS);
5
---
6

7
<!DOCTYPE html>
8
<html lang="en">
9
<head>
10
    <meta charset="UTF-8">
11
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
12
    <title>Document</title>
13
</head>
14
<body>
15
    <div>hello world</div>
16
    <ul><!-- 列出所有文章,具体类型先any,我喜欢anyscript :) -->
17
        {posts.map((post: { slug: any; data: { title: unknown; }; }) => (
18
            <li>
19
                <a href={`/blog/${post.slug}`}>{post.data.title}</a>
20
            </li>
21
        ))}
22
    </ul>
23
</body>
24
</html>

直接通过组件来实现的内容集合查询

具体讲讲钩子这块

插件得先注入

这块主要是看官方的文档,首先我得配置一下我这个插件的注入方式,

1
import { AstroIntegration } from 'astro';
2

3
interface Options{
4
  collections: String;
5
}
6

7
export function IntergrationName(config: Options = { }): AstroIntegration {...}

这个应该是默认插件导出,导出名就是Intergration,然后在astro.config.mjs中配置一下

1
import { defineConfig } from 'astro/config';
2
import { IntergrationName } from 'locastrol';
3
export default defineConfig({
4
  integrations: [IntergrationName({...})],
5
});

钩子,对事件的响应,或者说回调?

很明显,钩子总是与事件有关 astro:config:setup这个钩子,在配置阶段触发,可以用来修改配置,比如说我想要在开发环境下,注入一些路由,或者是修改一些配置

我就注入了一些路由,比如说/locastrol/editor这个路由,它会指向src/pages/index.astro,也就是我的后台首页

💡

值得注意的是,以locastrol这个包名作为entrypoint的开头是因为我这个是npm包,得包名开头才能被识别为npm包的路径,不会导致astro混淆

而且还要确保包导出了这些文件

1
hooks: {
2
  'astro:config:setup': ({ injectRoute, updateConfig, command }) => {
3
    if (command == 'dev') {
4
      // 通过 Vite 环境变量传递 collections 参数
5
      updateConfig({
6
        vite: {
7
          define: {
8
            'import.meta.env.LOCASTROL_COLLECTIONS': JSON.stringify(collections)
9
          }
10
        }
11
      });
12
      // 后台首页
13
      injectRoute({
14
        pattern: '/locastrol/editor',
15
        entrypoint: 'locastrol/src/pages/index.astro'
16
      });
17
      injectRoute({
18
        pattern: '/locastrol/editor/[slug]',
19
        entrypoint: 'locastrol/src/pages/[slug].astro'
20
      });
21
    }
22
  },
23
}

⚠️

加上if (command == 'dev')条件判断很重要,不然ssg会把后台页面也渲染出来

到时候一些私密内存变量就会不小心暴露出来了

1
'astro:server:start': ({ address }) => {
2
        console.log('\x1b[43m\x1b[30m%s\x1b[0m \x1b[36m%s\x1b[0m', '✅Locastrol后台已经启动', `http://localhost:${address.port}/locastrol/editor`);
3
      },

这个钩子在服务器启动时触发,我在这里打印了一条日志,告诉用户后台已经启动,并给出访问地址,不过我好奇,为什么ai给我这么邪乎的颜色代码,就没有更好的实现吗?

roadmap ^ ^

看了一眼官方文档,暂时先俩这些钩子,先列个表单列出所有文章,后续查询可以使用官方的内容集合来做到查,用nodejs api来做到增删改,也许可以再加个中间件来实现身份验证?

不过那倒是有点背离dev local后台的初心了,而且我还有好多功能没实现呢!