给博客塞了一个小游戏
除了写字，我还想让文章里能玩起来。这篇告诉你「内嵌 HTML / 小游戏」是怎么做到的。
为什么要内嵌小游戏
博客不一定只能读。有时候我想把一篇文章「做成」一个东西——一个棋盘、一个抽签、或者一条贪吃蛇。下面这条蛇，就是用一个自包含的组件塞进这篇文章的。方向键 / WASD，或者在小屏幕上滑动，都能玩：
小游戏 · 贪吃蛇
得分：0
方向键 / WASD 或滑动屏幕来移动 · 吃到红果子得分
怎么做到的
.mdx 和普通 Markdown 几乎一样，但允许我：
- 直接写 HTML：用 JSX 的写法（属性是
className，不是class）。比如一个提醒卡片：
MDX 里写 HTML，就是把标签当作组件用。短小精悍，正好用来做提醒卡片。
- 导入组件：把一段功能做成组件，然后在文章顶部
import，插入想要的位置。
import SnakeGame from '../../components/SnakeGame.astro';
// 然后在本页任何位置：
<SnakeGame />- 放图片：图片丢进
public/images，正文里用 Markdown 图片语法引用即可。
想放自己的游戏？
把任何 canvas、交互或者是别的 HTML 效果，做成一个 .astro 组件放进 src/components，再像上面那样 import 就行。
玩得开心。评论区……没有。但你可以看着这条蛇长大。