学习开发Astro博客后台(二)重载之殇

发布时间：2025-05-30 19:12:36

更新时间：2025-05-30 20:13:42

👀 阅读量：

添加md编辑

在前文中,已经实现了非常简陋的功能,下一步准备粗略地写一个md编辑,然后再通过fetch请求将数据发送到后端。

Vditor是一个非常好用的前端Markdown编辑器,它支持实时预览、代码高亮、表格等功能,还内置katex,mermaid等功能,非常适合用来编辑博客文章。于是我使用这个来粗略实现一下编辑器

潦草编辑器

1
---
2
const { options = {},post = {} } = Astro.props;
3
export const prerender = false;
4
---
5
<div class="editor-container">
6
<link rel="stylesheet" href="https://unpkg.com/vditor/dist/index.css" />
7
<div class="save-status" id="save-status">就绪</div>
8
<div id="Editor"></div>
9
<script is:inline define:vars={{options,post}}>
10
  window.editorOptions = options || {};
11
  window.post = post || {};
12
</script>
13

14
<script>
15
  import Vditor from 'vditor'
16
  // Declare editorOptions on window
17
  declare global {
18
    interface Window {
19
      editorOptions: any,
20
      post: any;
21
    }
22
  }
23

24
  <!--省略-->
25

26
  let vditor = new Vditor('Editor', {
27
    ...window.editorOptions,//自定义的配置
28
    after: () => {
29
      //console.log('Vditor 初始化完成');
30
      //afte钩子,实现初始化内容
31
      if (window.editorOptions.value) {
32
        vditor.setValue(window.editorOptions.value);
33
      }
34
      updateSaveStatus('就绪', 'ready');      // 监听自定义 HMR 事件
35
      if (import.meta.hot) {
36
        import.meta.hot.on('locastrol-content-update', (data) => {
37
          //console.log('[Locastrol] 检测到内容文件更新，但已阻止页面重载:', data);
38
          updateSaveStatus('内容已同步', 'synced');
39
          setTimeout(() => {
40
            updateSaveStatus('就绪', 'ready');
41
          }, 2000);
42
        })
43
      }
44
    },
45
    input: ()=>{
46
      // 清除之前的自动保存定时器
47
      if (autoSaveTimeout) {
48
        clearTimeout(autoSaveTimeout);
49
      }
50

51
      if (!isAutoSaving) {
52
        updateSaveStatus('正在编辑...', 'editing');
53
      }
54

55
      // 设置新的自动保存定时器（防抖）
56
      autoSaveTimeout = setTimeout(()=>{
57
        autoSave(vditor.getValue());
58
      }, 1500);
59
    }
60
  });
61

62

63
<!--省略-->

⚠️

特别注意的是,定义<script define:vars><script>会导致import Vditor from 'vditor'失效

因为此时script变成了module类型,阻止了Vditor的正常加载

💡

下面是一个技巧,来变相传参 ,这样参数才能正确写入到Vditor中

1
<script is:inline define:vars={{options,post}}>
2
  window.editorOptions = options || {};
3
  window.post = post || {};
4
</script>
5

6
<script>
7
  import Vditor from 'vditor'
8
  // Declare editorOptions on window
9
  declare global {
10
    interface Window {
11
      editorOptions: any,
12
      post: any;
13
    }
14
  }
15
  ...
16
  </script>

⛔

但同时,vars会裸暴露在前端

所以不要一股脑直接传递一个结构体对象,而是具体精细的传递需要的参数

特别注意不要把私密信息从astro构建时传递到前端运行时

阻止后台页面更新

由于我后台使用了astro:content来加载内容,所以每次内容更新都会导致页面重载,这就导致了后台md编辑器无法正常工作

所以需要阻止页面重载,理论上可以通过import.meta.hot来监听astro:content的更新事件,然后阻止页面重载

但是我问了Copilot,并没有很好地实现,反复折磨下,终于给出了相对可行的方案

前台/后台页面刷新控制机制的技术原理

问题的根源

在开发Astro博客后台时，遇到的核心问题是：前台页面需要正常刷新以显示最新内容，而后台编辑页面绝对不能刷新，否则会丢失用户正在编辑的内容。

这个问题的根源在于Astro的HMR（Hot Module Replacement）机制：

当src/content/posts/目录下的markdown文件发生变化时
Astro会触发astro:content模块的更新
默认情况下，这会导致所有使用该模块的页面重新加载

技术实现原理

1. HMR事件拦截机制

理论上这么说,但是我客户端基本没实现,问了ai也没正确实现 :(

1
if (import.meta.hot) {
2
  import.meta.hot.on('locastrol-content-update', (data) => {
3
    // 拦截自定义更新事件，阻止页面重载
4
    updateSaveStatus('内容已同步', 'synced');
5
  })
6
}

工作原理：

import.meta.hot是Vite提供的HMR API
通过监听自定义事件locastrol-content-update来接收内容更新通知
这个事件是由外部工具（如locastrol）发送的，而不是Astro原生的重载事件

2. 页面类型差异化处理

这个是容易实现的,但是只是实现了一半,因为astro:content会导致所有.astro页面刷新

前台页面（正常刷新）：

使用标准的astro:content导入
保持Astro默认的HMR行为
内容更新时自动重载页面

后台页面（不能阻止刷新）：

即使通过外部API获取内容数据，而不直接使用astro:content,也没法阻止刷新
使用自定义HMR事件监听机制,我没实现
手动控制内容同步，避免页面重载,呃呃,体验更不好了,还得手动…

3.真正的实现?(完全地copilot,我真不会)

采用WebSocket消息拦截 + HMR更新阻止。

核心技术架构

1. 客户端状态追踪系统

1
// 客户端状态管理
2
const clientStates = new Map<string, ClientState>();
3

4
interface ClientState {
5
  isEditorPage: boolean;
6
  url: string;
7
  lastActivity: number;
8
}

通过x-client-id请求头唯一标识每个客户端
维护全局的客户端状态映射表
实时追踪哪些客户端正在编辑器页面

2. 心跳机制

1
// 心跳API处理
2
if (url === '/api/locastrol/heartbeat' && req.method === 'POST') {
3
  clientStates.set(clientId, {
4
    isEditorPage: Boolean(isEditorPage),
5
    url: clientUrl,
6
    lastActivity: Date.now()
7
  });
8
}

客户端每30秒发送心跳包报告状态
服务器根据心跳更新客户端状态
超过30秒无活动的客户端被视为非活跃

3. WebSocket消息拦截

1
// 完全劫持WebSocket的send方法
2
const originalSend = server.ws.send;
3
server.ws.send = function(payload: any, client?: any) {
4
  // 检查是否有编辑器页面活跃
5
  let hasActiveEditor = false;
6
  for (const [clientId, state] of clientStates) {
7
    if (state.isEditorPage && (Date.now() - state.lastActivity < 30000)) {
8
      hasActiveEditor = true;
9
      break;
10
    }
11
  }
12

13
  // 如果有编辑器页面活跃，完全阻止所有WebSocket刷新消息
14
  if (hasActiveEditor && typeof payload === 'object' && payload !== null) {
15
    if (payload.type === 'full-reload' ||
16
        payload.type === 'update' ||
17
        payload.type === 'connected' ||
18
        payload.type === 'error') {
19
      return; // 完全阻止消息发送
20
    }
21
  }
22

23
  return originalSend.call(this, payload, client);
24
};

直接劫持Vite开发服务器的WebSocket发送方法
根据活跃编辑器状态决定是否发送刷新消息
实现了”有编辑器活跃时全局阻止刷新”的策略

4. HMR更新拦截

1
// HMR更新拦截
2
handleHotUpdate({ file, server }) {
3
  // 检查是否有编辑器页面活跃
4
  let hasActiveEditor = false;
5
  for (const [clientId, state] of clientStates) {
6
    if (state.isEditorPage && (Date.now() - state.lastActivity < 30000)) {
7
      hasActiveEditor = true;
8
      break;
9
    }
10
  }
11

12
  if (hasActiveEditor) {
13
    return []; // 阻止HMR更新
14
  } else {
15
    return undefined; // 允许正常更新
16
  }
17
}

在Vite插件层面拦截热更新
返回空数组阻止更新，返回undefined允许更新
实现了文件级别的更新控制

实际工作流程：

1
1. 用户打开编辑器页面
2
   ↓
3
2. 客户端开始发送心跳包（每30秒）
4
   ↓
5
3. 服务器标记该客户端为"编辑器活跃"
6
   ↓
7
4. 文件系统发生变化
8
   ↓
9
5. Vite尝试触发HMR更新
10
   ↓
11
6. locastrol检测到活跃编辑器
12
   ↓
13
7. 同时拦截HMR事件和WebSocket消息
14
   ↓
15
8. 编辑器页面保持不刷新，前台页面正常刷新

这种实现方案的核心优势在于从根源上阻止了所有可能导致页面刷新的WebSocket消息和HMR事件，而不是依赖客户端的事件监听，确保了编辑器页面的绝对稳定性。

💡

但实际上,前台页面倒是能够正常刷新,但是热重载失效了,算了,勉强先这样吧

下个月又要开始课设了,估计没时间写这个后台插件了,只能暂时搁置咯

已经有好几个搁置了,都推到暑假了…没人催的话,我大概会忘记吧…😀💧