在 Astro 博客实现 Live2D 看板娘

1
---
2
interface Props {
3
  config: {
4
    enable: boolean;
5
    model: { path: string; volume?: number; scale?: number; x?: number; y?: number }
6
      | { path: string; volume?: number; scale?: number; x?: number; y?: number }[];
7
    position?: "bottom-left" | "bottom-right";
8
    size?: number | { width: number; height: number };
9
    primaryColor?: string;
10
    transitionDuration?: number;
11
    transitionType?: "slide" | "fade";
12
    menus?: {
13
      items?: { icon?: string; label: string; action: string }[];
14
      extraItems?: { icon?: string; label: string; action: string }[];
15
      align?: "left" | "right";
16
    };
17
    tips?: {
18
      welcomeMessage?: string[];
19
      messages?: string[];
20
      duration?: number;
21
      interval?: number;
22
    };
23
    responsive?: {
24
      hideOnMobile?: boolean;
25
      mobileBreakpoint?: number;
26
    };
27
  };
28
}
29

30
const { config } = Astro.props;
31

32
// 构建模型配置，通过 data 属性传递到客户端
33
const models = Array.isArray(config.model) ? config.model : [config.model];
34
const modelConfigs = models.map((m) => ({
35
  path: m.path,
36
  ...(m.volume !== undefined && { volume: m.volume }),
37
  ...(m.scale !== undefined && { scale: m.scale }),
38
  ...(m.x !== undefined && { x: m.x }),
39
  ...(m.y !== undefined && { y: m.y }),
40
}));
41
---
42

43
<div
44
  id="l2d-widget-container"
45
  style="position: fixed; z-index: 999;"
46
  data-models={JSON.stringify(modelConfigs)}
47
  data-position={config.position || "bottom-left"}
48
  data-size={JSON.stringify(config.size || 300)}
49
  data-primary-color={config.primaryColor || ""}
50
  data-tips={JSON.stringify(config.tips || {})}
51
  data-responsive={JSON.stringify(config.responsive || {})}
52
>
53
</div>

1
import { createWidget } from "l2d-widget";
2

3
// 菜单动作映射 - JSON 无法序列化函数，使用字符串标识符
4
const menuActions = {
5
  home: () => (window.location.href = "/"),
6
  scrollToTop: () => window.scrollTo({ top: 0, behavior: "smooth" }),
7
  sleep: (widget) => widget.sleep(),
8
  github: () => window.open("https://github.com/your-repo", "_blank"),
9
};
10

11
function initWidget() {
12
  const container = document.getElementById("l2d-widget-container");
13
  if (!container) return;
14

15
  const models = JSON.parse(container.dataset.models || "[]");
16
  const position = container.dataset.position || "bottom-left";
17
  const size = JSON.parse(container.dataset.size || "300");
18
  const tips = JSON.parse(container.dataset.tips || "{}");
19

20
  if (models.length === 0) return;
21

22
  const options = {
23
    model: models.length === 1 ? models[0] : models,
24
    position,
25
    size,
26
  };
27

28
  // 配置提示气泡
29
  if (tips.welcomeMessage || tips.messages) {
30
    options.model.tips = {
31
      welcomeMessage: tips.welcomeMessage,
32
      messages: tips.messages,
33
      duration: tips.duration,
34
      interval: tips.interval,
35
    };
36
  }
37

38
  createWidget(options);
39
}
40

41
if (document.readyState === "loading") {
42
  document.addEventListener("DOMContentLoaded", initWidget);
43
} else {
44
  initWidget();
45
}