Zard

灵魂碎片 - 我是怎么做这款酒店恐怖迷宫的

Wed, 22 Jul 2026 00:00:00 GMT

灵魂碎片

先玩再说

又做了一款浏览器里就能开的 3D 游戏：灵魂碎片（副标题 Monkey Business）。

第一人称，酒店走廊迷宫，收集紫色灵魂碎片，躲开 Murder Monkey（血猴），再跑回电梯逃脱。有 3 条命，还有 NodeLoc 登录后的个人速通榜。

http://pacman.zard.loc.cc/

建议桌面端 Chrome / Edge，鼠标锁定视角后手感最完整。敏感者注意：有黑暗走廊、追逐惊吓，以及开局的光敏癫痫提示。

一开始不是酒店

最早的计划其实是「中世纪地牢 + 火把 + 找出口」。文档里还写着 CDN 拉 Three.js、零构建、中文注释——方便自己和非技术朋友直接双击就能看懂。

后来越做越歪，最后对齐的是 Dark Deception 那一套节奏：

乘电梯进入窄走廊
在怪物巡逻下刮图收集
集齐后出口开启，回家路上再加码封锁
跑回电梯才算赢

舞台也就从地牢换成了维多利亚风酒店走廊：米色墙纸、深色木门、铜制房号、暖黄顶灯、黄铜电梯门。敌人定成血猴，名字直接叫 Murder Monkey。

玩法核心

项	数值 / 说明
迷宫	35×35，递归回溯生成，再打通环路 + 挖小广场
碎片	110 颗紫色八面体，InstancedMesh 批量渲染
初始血猴	6 只巡逻
逃脱封锁	电梯开启后再刷 6 只，优先堵回家路线
生命	3 次，被抓会有扑脸特写
宝石	青宝石眩晕、橙宝石小地图显怪 30 秒

操作上：WASD + 鼠标，Shift 冲刺（体力无限，但脚步会暴露位置），V 是短时疾跑技能。空格掏出平板小地图，这点也是故意学 DD 的。

核心手感就一句话：跑得过猴子，但瞎冲会把自己喊死。 血猴追击速度大约 3.6，玩家跑步约 4.6；发现你时还会愣大概半秒咆哮，给你一次转身的窗口。

技术选型：故意零依赖

整站没有打包器，没有 CDN，也没有外部贴图 / 音效 / 模型资源。

模块	方案
渲染	Three.js 放进本地 `vendor/`，ES Module 直接 import
贴图	Canvas 像素画生成，NearestFilter，保留一点复古颗粒感
音效	Web Audio API 振荡器 + 噪声，全程序化
模型	`BoxGeometry` 拼体素（血猴、门、灯具全靠堆方块）
服务	Node ≥18 内置 `http`，零 npm 依赖做静态站 + OAuth + 榜

这样做的好处很现实：分发简单、离线也能跑前端、部署时不用再管一堆静态资源 CDN 挂没挂。坏处也明显——美术上限被自己卡死了，只能靠灯光、雾、心跳和音效硬撑氛围。

本地启动：

npm start   # http://127.0.0.1:8765/ ，会顺带起 OAuth / 速通 API

注意：不能双击 index.html。ES Module 在 file:// 下会跨域；纯 Python 静态服可以玩，但登录和排行榜要走 Node 那套。

几个我觉得值得写的点

1. 迷宫不能是纯死胡同

追逐游戏如果全是 DFS 死胡同，被咬住就只剩一条路等死。所以生成后会再打通一部分墙做环路，并挖几个 3×3 小广场，方便被追时变向、绕圈。

走廊也故意做得窄：格宽大约 2.35、墙高 3.25，逼近那种「酒店走廊贴着你跑」的压迫感，而不是开阔地牢。

2. 血猴 AI：巡逻 → 发现 → 追击 → 搜索

状态机很经典：PATROL → SPOT → HUNT → SEARCH。寻路是网格四邻 BFS，追击时会节流重算路径，避免每帧全图搜。

听觉只吃冲刺脚步，视野大约十几格，还有视线遮挡。被抓时不做瞬间黑屏，而是 startFaceLunge 扑脸停在身前一小段时间——惊吓主要靠这一下。

3. 电梯是叙事，也是关卡边界

开场不是直接扔进迷宫，而是走一轮过场：wait → ding → open → hold → walk → done。叮一声、门开、看一眼已点亮的走廊、自动走出、门再关上。

集齐碎片后门变绿、叮一声开启；同时 _spawnEscapeMonkeys 在靠电梯一侧刷封锁猴。出口和起点是同一个点——你要原路逃回去，这比「找到地图另一头的门」更折磨。

4. 点光太贵，所以装假灯

Three.js 的 PointLight 一多就掉帧。走廊里灯具用 InstancedMesh 全量摆着好看，真正发光的点光只保留一个小池子（大约最多 10 盏）跟着玩家走。远景靠指数雾裁掉，抗锯齿也关了，pixelRatio 限到 1，整体偏性能优先的像素风。

墙体、碎片同样走实例化：几百格墙基本就是一次 draw call 的事。

5. 心跳是「距离感」的音画同步

没有怪物 BGM 文件。靠近血猴时，程序化心跳会从大约 1.4 秒一次压到 0.35 秒，同时 HUD 红边强度跟着涨。威胁层还有一层锯齿波脉冲。氛围很大一块是靠这条链路撑起来的，而不是靠贴图精度。

6. NodeLoc 速通榜

成绩只认 NodeLoc 账号，键是 nl:{id}，游客能玩但不上榜。服务端用授权码 OAuth2 + 签名 Cookie，成绩落在本地 profiles.json，只保留个人最佳。

还做了很土但有效的防刷：通关时间短于 30 秒直接当异常拒收。

项目结构（人话版）

js/
  game.js     状态机、主循环、电梯过场、逃脱猴
  maze.js     迷宫生成
  world.js    酒店视觉 + 电梯
  enemy.js    血猴 AI
  shard.js    碎片
  gem.js      技能宝石
  player.js   第一人称与碰撞
  audio.js    全程序化音效
  auth.js     游客 / NodeLoc
  ui.js       菜单、HUD、平板小地图
server/
  oauth-nodeloc.js
  leaderboard.js

没有物理引擎，碰撞就是网格判断；没有资源管线，纹理和声音都是代码里现画现响。整份工程更像「能跑通的游戏原型」，而不是引擎级框架。

写在最后

这款游戏对我来说，更像一次约束条件下的完整闭环练习：从生成关卡、敌人 AI、演出过场，做到登录上榜和部署上线。美术全靠程序化硬撑，手感则一点点对着「窄走廊 + 收集 + 回家封锁」去磨。

如果你愿意试一把：先 NodeLoc 登录，再去刮那 110 颗碎片。跑回电梯的时候记得听脚步——有时候真正要命的不是眼前那只，而是你自己喊来的那几只。

下一篇如果有人催（游戏里第二关提示就是这么写的），可能会单独写血猴行为树怎么调，或者酒店材质/灯光是怎么从「地牢火把」改成现在这样的。

零区冲突 - 浏览器里的 3D 多人在线混战

Mon, 06 Jul 2026 00:00:00 GMT

零区冲突

打开链接就能打

最近把一款 3D 第一人称多人在线混战射击游戏部署上线了，取名 零区冲突（英文名仍保留 ZONE ZERO / NEON ARENA 的味道）。

不用注册，不用下载客户端，浏览器打开就能进同一房间开打：

http://175.178.221.224:3000/

多开几个标签页，或者喊朋友一起点同一个地址，就能体验联机混战。

这游戏玩起来什么样

开局只有拳头，随机地点出生。场地上有武器拾取点、投掷物、医疗包、各种增益道具，还有会被打爆的红色油桶——炸起来会连锁，别站太近。

整体是一张 96×96 的大地图，两处高地平台加外围掩体，可以卡点，也可以用手雷洗地。地图还有 10 分钟一昼夜 循环，深夜时霓虹灯柱会亮起来，左上角有时段指示。

武器与道具

类型	内容
近战	拳头 → 小刀 / 长刀 / 铁锤
枪械	手枪 / 机枪 / 狙击枪（右键开镜）
投掷物	手雷 / 闪光弹 / 烟雾弹（三选一，有冷却）
装备	医疗包、防弹衣、疾风靴（永久叠移速）
状态	疾速、狂暴、暴击、隐身、丧尸模式、弹跳、护盾……

备弹是有限的：手枪 156 发、机枪 360 发、狙击 35 发。打空弹匣会自动换弹，备弹用光后枪还在手里，得自己去武器点补——这点和很多 FPS 不太一样，玩起来会更「抢资源」一点。

四种 BOSS

同场只会刷一只，击杀拿金币、满血和随机增益，助攻也有奖励：

🪨 熔岩魔像 — 近战重击 + 火球
🗡️ 暗影刺客 — 高速突进，会闪到你身后
🤖 钢铁暴君 — 1400 血重装，弹幕 + 三连火箭
💀 虚空巫妖 — 追踪法球 + 脚下延迟紫圈，看到圈赶紧跑

西北角还有 神秘商人，用击杀攒的金币买外观（帽子、披风、武器光效等），悬停就能 3D 试穿，按昵称永久保存。

操作说明

桌面端

按键	功能
WASD / 空格	移动 / 跳跃
鼠标左键	攻击 / 射击
鼠标右键	狙击开镜
1 / 2 / 3 或滚轮	切换近战 / 枪械 / 投掷物
V	第一 / 第三人称
R	换弹
E	商店（靠近商人时）
ESC	设置
回车 / Tab	聊天 / 排行榜

阵亡后可以观战（自由飞行或跟随其他玩家），随时回车重新加入战斗。

🖱️ 小提示：鼠标回报率过高（比如 1000Hz）可能导致视角突然飘逸，建议在驱动或鼠标设置里降到 125–500Hz。

手机端

同一个 URL，手机浏览器也能和 PC 玩家同场竞技：

左下虚拟摇杆移动，屏幕其余区域拖拽视角
右下角开火 / 跳跃 / 狙击镜（持狙击枪时出现）
武器栏点按切换，再点一次枪械格 = 换弹

触屏端有 7° 锥角内的柔性辅助瞄准（最多纠偏 35%），用来补偿手指精度，但服务器判定对两端完全一致，没有后门。视距和雾距离也不会因为手机而缩短——看得多远，两端必须一样。

技术实现（简要）

模块	方案
服务端	Node.js + Express + WebSocket，单房间权威服务器
客户端	Three.js，模型 / 贴图 / 音效全部程序化生成，零外部资源
持久化	排行榜与玩家档案（金币、外观）按昵称保存在服务端
反作弊	移动 / 射速 / 限速 / 瞄准统计，阶梯处置（纠正 → 警告 → 踢出 → 封禁）

伤害、拾取、购买全部在服务端裁决，客户端只发「请求」。命中反馈做了整条链路：视角弹簧回弹、近战前顶、受击后仰、打墙火花、爆头准星动画等，都是客户端表现层，不影响服务端公平性。

本地跑也很简单：

npm install
npm start   # 默认 http://localhost:3000

写在最后

这是我在 game-collection 系列里做得最完整的一款联机对战：打开即玩、跨端同场、有 BOSS 有商店有排行榜。如果你有空，点链接进来打两局，欢迎反馈手感、平衡性或 bug。

下一篇可能会单独写写打击感怎么调、反作弊怎么接，以及移动端适配踩过哪些坑。

怪物猎人世界日记 - 钢龙

Tue, 16 Jun 2026 00:00:00 GMT

怪物猎人世界日记

钢龙，我与你的三个小时

今天晚上本来想轻松打个古龙任务，结果……被钢龙虐了整整三个小时。

第一小时：信心满满

20:00 - 接任务

终于推进到"寻找古龙"任务了！听说钢龙是第一个要面对的古龙，我信心满满地接了任务。防卫队套在手，天下我有！

20:15 - 第一次猫车

场景：古代树森林
过程：
1. 找到钢龙，开始输出
2. 钢龙扇了一下翅膀，我被风吹飞了
3. 还没站起来，钢龙一个龙车冲过来
4. 猫车！

20:30 - 第二次猫车

这次学聪明了，带了闪光弹！结果……

1. 闪光弹扔出去，钢龙被闪下来了
2. 我冲上去一顿输出
3. 钢龙起身，一个风压把我吹飞
4. 接着一个尾扫，猫车！

第二小时：开始怀疑人生

21:00 - 第N次猫车

已经数不清猫了多少次了。每次都是：

我输出 → 钢龙起飞 → 我打不到 → 钢龙俯冲/吐息 → 我猫车

21:20 - 查攻略

边打边刷攻略，发现钢龙的弱点是头部和翅膀，风墙是可以用闪光弹打断的。

攻略说："钢龙起飞后，用闪光弹可以让它掉落，这是输出的好时机。"

我说："闪光弹？我扔了啊！为什么它不掉下来？！"

21:40 - 第一次坚持到第二阶段

终于！我坚持到了钢龙的第二阶段！它飞到了地图上方……然后一个龙息把我秒了。

钢龙："你以为到第二阶段就结束了？天真！"
我："……"

第三小时：心态崩了

22:00 - 尝试用陷阱

带了麻痹陷阱！结果钢龙飞在天上根本踩不到……

22:20 - 联机找队友

实在打不过了，联机找队友！结果队友也被猫了……

队友1："这钢龙怎么这么难？"
队友2："我也猫了三次了……"
我："我已经猫了十几次了……"

22:40 - 最接近的一次

这次运气不错，把钢龙打到残血了！

1. 钢龙飞起来，我扔闪光弹，它掉下来了！
2. 我疯狂输出头部，它硬直了！
3. 再扔一个闪光弹，继续输出！
4. 钢龙血量见底，开始逃跑！
5. 追上去……然后它一个龙息把我秒了！
6. 猫车……

23:00 - 放弃

看着屏幕上的"任务失败"，我默默地关掉了游戏。三个小时，还是没过……

钢龙攻略心得（还在研究中）

钢龙攻击模式

风墙: 扇翅膀产生风压，被吹飞后会有硬直
龙车: 冲刺攻击，伤害高
俯冲: 从空中俯冲下来
尾扫: 用尾巴横扫
龙息: 第二阶段的大招，范围广伤害高

应对方法（理论上）

闪光弹: 必备！钢龙起飞后扔闪光弹可以让它掉落
回避: 注意观察钢龙的动作，提前回避
攻击头部: 头部是弱点，伤害最高
利用地形: 可以躲在障碍物后面躲避风压
别贪刀: 钢龙攻击前摇很短，贪刀必猫

我的问题

闪光弹扔不准: 经常扔到钢龙身后
贪刀: 输出太爽忘记看动作
第二阶段不会打: 钢龙飞太高根本打不到

总结

三个小时，被钢龙虐惨了……防卫队套虽然能抗，但面对古龙还是有点吃力。明天继续吧，总有一天我会把你砍翻的！

钢龙，等着我！🐉⚔️

摸鱼日记1

Mon, 15 Jun 2026 00:00:00 GMT

前端实习生摸鱼日记

入职两个月：摸鱼大师养成记

不知不觉已经入职两个月了，从最初的战战兢兢到现在的从容摸鱼，我已经掌握了一套成熟的职场生存法则。

上午：带薪养生时间

9:00 - 咖啡时间

准时到达公司，先去茶水间泡一杯咖啡，顺便和同事闲聊几句。这是一天中最放松的时刻。

9:30 - 假装忙碌

打开 IDE，启动项目，然后开始浏览技术文档。实际上...

// 表面上在看代码
const readDocumentation = (): void => {
  // 实际上在刷掘金/知乎
  console.log('假装学习中...');
};

10:30 - 例会时间

每天的站会是必不可少的，汇报一下昨天做了什么，今天打算做什么。

汇报技巧:

把一个简单的任务拆分成三个来说
提到一些专业术语显得很厉害
结尾一定要说"如果有问题随时找我"

下午：深度摸鱼模式

14:00 - 午休归来

午睡过后精神饱满，开始真正的工作... 才怪！

14:30 - 厕所遁

每隔一小时就去一次厕所，每次至少10分钟。美其名曰"放松眼睛"，实则刷手机。

15:00 - 下午茶时间

和同事一起点奶茶，边喝边讨论周末去哪玩。

// 摸鱼状态检测
const isSlacking = (): boolean => {
  const currentTime = new Date().getHours();
  // 下午3点是摸鱼高峰期
  return currentTime >= 15 && currentTime <= 17;
};

16:30 - 紧急冲刺

临近下班，开始疯狂敲代码，营造一种"我很忙"的假象。

摸鱼技巧总结

初级技巧

多开标签页: 代码、文档、聊天窗口各开一个
耳机战术: 戴着耳机不一定在听什么
频繁切换窗口: 显得很忙

进阶技巧

代码注释: 写详细的注释，显得很认真
主动提问: 问一些无关紧要的问题，显得积极
周报美化: 把小成果写成大成就

高级技巧

定时提交: 每隔一小时提交一次代码
制造问题: 故意遇到问题，然后花时间解决
会议达人: 积极参加各种会议

总结

两个月的实习让我明白：

✅ 摸鱼是一门艺术
✅ 效率太高会被安排更多工作
✅ 学会拒绝不合理的需求
✅ 保持适当的神秘感

职场生存法则：做得好不如说得好，说得好不如表现得好。😎

怪物猎人世界游玩笔记 - 防卫队套开荒：寻找古龙之路

Mon, 15 Jun 2026 00:00:00 GMT

怪物猎人世界游玩笔记

防卫队套开荒：寻找古龙之路

作为一个从PS4时代就听说过MHW但一直没入坑的萌新，终于在PC上开始了我的猎人之路。20小时下来，我已经完成了下位大部分任务，现在正站在"寻找古龙"的门前。防卫队套真的是新手福音！

防卫队套：新手的保护罩

如何获得防卫队套

记得刚进游戏不久，就看到直接给全套防卫队装备和武器。当时还不知道这意味着什么，直到穿上之后才发现——这简直是新手保护罩！

防卫队套属性

防御力：约200（初期碾压一切）
技能：
- 体力增强Lv2 → 血量+50
- 防御UPLv1 → 防御力提升
- 精灵加护Lv1 → 概率减伤
- 回复速度Lv1 → 自然回血

防卫队武器

我选的是太刀，防卫队太刀的面板虽然不算顶尖，但胜在属性均衡，自带会心，前期砍什么都顺手。

狩猎历程：防卫队套带我成长

前5小时：猎人初体验

波波/贼龙: 一刀一个小朋友，轻松上手
雌火龙: 第一次面对大型怪物，防卫队套让我能硬抗几下
蛮颚龙: 你吼任你吼，我有防卫队套！

5-10小时：逐渐上手

毒妖鸟: 第一次感受到什么叫毒伤，回复速度帮了大忙
浮空龙: 飞天流真恶心，卡了好几次，防卫队套帮我撑过无数次危险
角龙: 被顶一下居然只掉半血？防卫队套牛逼！

10-15小时：深入探索

土砂龙/泥鱼龙: 沼泽地图真难走，但装备够硬不怕
骨锤龙: 锤子砸下来真疼，但有体力增强就是能抗
爆鳞龙: 第一次遇到会爆炸的怪物，吓了一跳

15-20小时：寻找古龙

现在我正处在"寻找古龙"的关键任务前，听说古龙很强，有点紧张又有点期待！

防卫队套开荒心得

优点

容错率超高: 新手最需要的就是生存能力
获取简单: 一个活动任务就能拿到
过渡平滑: 从新手任务打到古龙任务毫无压力
技能实用: 体力增强和回复速度简直是新手神器

缺点

输出一般: 技能都是防御向，打起来比较慢
外观一般: 不如其他套装帅,有点丑（个人感觉）

我的狩猎高光时刻

第一次单刷角龙

时间：第8小时
武器：防卫队太刀
过程：
1. 开场被顶飞，掉了一半血（换别的装备早猫了）
2. 吃个药继续刚，防卫队的回复速度帮了大忙
3. 磨了15分钟终于击杀，成就感爆棚！

最惨经历

浮空龙: 飞天后根本打不到，卡了半小时才过
爆鳞龙: 被连环爆炸炸懵了

当前配装

装备：防卫队套 α 全套
武器：防卫队太刀（已强化到+5）
护石：体力护石（+3体力增强）

技能总览：
- 体力增强Lv3 → 血量上限+75（配合护石）
- 防御UPLv1
- 精灵加护Lv1
- 回复速度Lv1
- 攻击力UPLv1（武器自带）

接下来的目标

⬜ 完成"寻找古龙"任务
⬜ 初见古龙（炎王龙/钢龙/尸套龙）
⬜ 解锁上位任务
⬜ 做出更强的装备
⬜ 联机和朋友一起打猎

新手建议（防卫队套版）

给刚入坑的猎人

先做防卫队套: 这个真的是新手神器，别错过
别贪刀: 就算防御高，被连续击中还是会死
多带药: 回复速度只是辅助，关键时刻还是要吃药
观察怪物: 每个怪物都有攻击规律，摸清了就好打
利用环境: 地形杀、落石、陷阱都很好用

"防卫队套是新手最好的起点，祝你狩猎愉快！" - 某老猎人

总结

20小时，防卫队套陪我走过了从萌新到合格猎人的第一步。马上就要面对古龙了，有点小紧张，但有防卫队套在，我相信能顺利度过。狩猎之路还很长，期待未来的挑战！

狩猎愉快！🐉⚔️

Markdown 扩展功能

Wed, 01 May 2024 00:00:00 GMT

GitHub 仓库卡片

你可以添加链接到 GitHub 仓库的动态卡片，页面加载时会从 GitHub API 获取仓库信息。

::github{repo="Fabrizz/MMM-OnSpotify"}

使用代码 ::github{repo="<owner>/<repo>"} 创建 GitHub 仓库卡片。

::github{repo="saicaca/fuwari"}

提示框

支持以下类型的提示框：note tip important warning caution

:::note 突出显示用户应该注意的信息，即使在浏览时也应该留意。 :::

:::tip 帮助用户更成功的可选信息。 :::

:::important 用户成功所必需的关键信息。 :::

:::warning 由于潜在风险，需要用户立即关注的重要内容。 :::

:::caution 某个操作可能带来的负面后果。 :::

基本语法

:::note
突出显示用户应该注意的信息，即使在浏览时也应该留意。
:::

:::tip
帮助用户更成功的可选信息。
:::

自定义标题

提示框的标题可以自定义。

:::note[我的自定义标题] 这是一个带有自定义标题的提示框。 :::

:::note[我的自定义标题]
这是一个带有自定义标题的提示框。
:::

GitHub 语法

[!TIP] GitHub 语法也支持。

> [!NOTE]
> GitHub 语法也支持。

> [!TIP]
> GitHub 语法也支持。

剧透功能

你可以在文本中添加剧透。文本也支持 Markdown 语法。

内容 :spoiler[被隐藏了啊哈]！

内容 :spoiler[被隐藏了 **啊哈**]！

Expressive Code 代码展示示例

Wed, 10 Apr 2024 00:00:00 GMT

在这里，我们将探索使用 Expressive Code 的代码块效果。提供的示例基于官方文档，你可以参考官方文档获取更多详细信息。

Expressive Code

语法高亮

常规语法高亮

console.log('这段代码有语法高亮！')

渲染 ANSI 转义序列

ANSI 颜色:
- 常规: [31m红色[0m [32m绿色[0m [33m黄色[0m [34m蓝色[0m [35m品红色[0m [36m青色[0m
- 粗体:    [1;31m红色[0m [1;32m绿色[0m [1;33m黄色[0m [1;34m蓝色[0m [1;35m品红色[0m [1;36m青色[0m
- 暗淡:  [2;31m红色[0m [2;32m绿色[0m [2;33m黄色[0m [2;34m蓝色[0m [2;35m品红色[0m [2;36m青色[0m

256 色（显示颜色 160-177）:
[38;5;160m160 [38;5;161m161 [38;5;162m162 [38;5;163m163 [38;5;164m164 [38;5;165m165[0m
[38;5;166m166 [38;5;167m167 [38;5;168m168 [38;5;169m169 [38;5;170m170 [38;5;171m171[0m
[38;5;172m172 [38;5;173m173 [38;5;174m174 [38;5;175m175 [38;5;176m176 [38;5;177m177[0m

全 RGB 颜色:
[38;2;34;139;34m森林绿 - RGB(34, 139, 34)[0m

文本格式: [1m粗体[0m [2m暗淡[0m [3m斜体[0m [4m下划线[0m

编辑器和终端框架

代码编辑器框架

console.log('标题属性示例')

<!-- src/content/index.html -->
<div>文件名注释示例</div>

终端框架

echo "这个终端框架没有标题"

Write-Output "这个有标题！"

覆盖框架类型

echo "看呐，没有框架！"

# 如果不覆盖，这将是终端框架
function Watch-Tail { Get-Content -Tail 20 -Wait $args }
New-Alias tail Watch-Tail

文本和行标记

标记整行和行范围

// 第 1 行 - 通过行号定位
// 第 2 行
// 第 3 行
// 第 4 行 - 通过行号定位
// 第 5 行
// 第 6 行
// 第 7 行 - 通过范围 "7-8" 定位
// 第 8 行 - 通过范围 "7-8" 定位

选择行标记类型（mark, ins, del）

function demo() {
  console.log('这行标记为已删除')
  // 这行和下一行标记为已插入
  console.log('这是第二行插入的内容')

  return '这行使用中性默认标记类型'
}

为行标记添加标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}
  value={value}
  className={buttonClassName}
  disabled={disabled}
  active={active}
>
  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

在单独的行上添加长标签

// labeled-line-markers.jsx
<button
  role="button"
  {...props}

  value={value}
  className={buttonClassName}

  disabled={disabled}
  active={active}
>

  {children &&
    !active &&
    (typeof children === 'string' ? <span>{children}</span> : children)}
</button>

使用类似 diff 的语法

+这行将标记为已插入
-这行将标记为已删除
这是普通行

--- a/README.md
+++ b/README.md
@@ -1,3 +1,4 @@
+这是一个实际的 diff 文件
-all contents will remain unmodified
 no whitespace will be removed either

将语法高亮与类似 diff 的语法结合

  function thisIsJavaScript() {
    // 整个块会高亮显示为 JavaScript，
    // 我们仍然可以向其添加 diff 标记！
-   console.log('要删除的旧代码')
+   console.log('新的闪亮代码！')
  }

标记行内的单个文本

function demo() {
  // 标记行内的任何给定文本
  return '支持给定文本的多个匹配项';
}

正则表达式

console.log('yes 和 yep 这两个词会被标记。')

转义斜杠

echo "Test" > /home/test.txt

选择内联标记类型（mark, ins, del）

function demo() {
  console.log('这些是插入和删除标记类型');
  // return 语句使用默认标记类型
  return true;
}

自动换行

按块配置自动换行

// 启用自动换行的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器非常宽，否则很可能无法放入可用空间'
}

// 禁用自动换行的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器非常宽，否则很可能无法放入可用空间'
}

配置换行的缩进

// 启用 preserveIndent 的示例（默认启用）
function getLongString() {
  return '这是一个非常长的字符串，除非容器非常宽，否则很可能无法放入可用空间'
}

// 禁用 preserveIndent 的示例
function getLongString() {
  return '这是一个非常长的字符串，除非容器非常宽，否则很可能无法放入可用空间'
}

可折叠部分

// 所有这些样板设置代码将被折叠
import { someBoilerplateEngine } from '@example/some-boilerplate'
import { evenMoreBoilerplate } from '@example/even-more-boilerplate'

const engine = someBoilerplateEngine(evenMoreBoilerplate())

// 这部分代码默认可见
engine.doSomething(1, 2, 3, calcFn)

function calcFn() {
  // 你可以有多个折叠部分
  const a = 1
  const b = 2
  const c = a + b

  // 这将保持可见
  console.log(`计算结果: ${a} + ${b} = ${c}`)
  return c
}

// 所有这些代码直到块结束将再次折叠
engine.closeConnection()
engine.freeMemory()
engine.shutdown({ reason: '示例样板代码结束' })

行号

按块显示行号

// 此代码块将显示行号
console.log('来自第 2 行的问候！')
console.log('我在第 3 行')

// 此块禁用行号
console.log('你好？')
console.log('对不起，你知道我在哪一行吗？')

更改起始行号

console.log('来自第 5 行的问候！')
console.log('我在第 6 行')

Fuwari 使用指南

Mon, 01 Apr 2024 00:00:00 GMT

封面图片来源: Source

这个博客模板使用 Astro 构建。本指南未提及的内容，你可以在 Astro 文档中找到答案。

文章的 Front-matter

---
title: 我的第一篇博客文章
published: 2023-09-09
description: 这是我新 Astro 博客的第一篇文章。
image: ./cover.jpg
tags: [Foo, Bar]
category: 前端
draft: false
---

属性	说明
`title`	文章标题。
`published`	文章发布日期。
`description`	文章简短描述。显示在首页。
`image`	文章封面图片路径。<br/>1. 以 `http://` 或 `https://` 开头：使用网络图片<br/>2. 以 `/` 开头：使用 `public` 目录中的图片<br/>3. 无前缀：相对于 markdown 文件的路径
`tags`	文章标签。
`category`	文章分类。
`draft`	是否为草稿，草稿文章不会显示。

文章文件放置位置

文章文件应放置在 src/content/posts/ 目录中。你也可以创建子目录来更好地组织文章和资源。

src/content/posts/
├── post-1.md
└── post-2/
    ├── cover.png
    └── index.md

Markdown 语法示例

Sun, 01 Oct 2023 00:00:00 GMT

一级标题

段落之间用空行分隔。

第二段。斜体、粗体和 等宽字体。无序列表如下：

这是第一项
那是第二项
另一项

注意，不考虑星号的情况下，实际文本内容从第4列开始。

块引用是这样写的。

如果你喜欢，它们可以跨多个段落。

使用三个连字符表示破折号。使用两个连字符表示范围（例如，"在第12--14章"）。三个点 ... 会被转换为省略号。支持 Unicode 字符。☺

二级标题

这是一个有序列表：

第一项
第二项
第三项

再次注意，实际文本从第4列开始（距离左侧4个字符）。这是一段代码示例：

# 让我重申一下...
for i in 1 .. 10 { do-something(i) }

你可能猜到了，缩进4个空格。顺便说一下，你可以使用分隔块代替缩进，如果你喜欢的话：

define foobar() {
    print "Welcome to flavor country!";
}

（这样复制粘贴更容易）。你可以选择性地标记分隔块，让 Pandoc 进行语法高亮：

import time
# 快点，数到十！
for i in range(10):
    # （但不要太快）
    time.sleep(0.5)
    print i

三级标题

现在是嵌套列表：

首先，准备这些食材：
- 胡萝卜
- 芹菜
- 扁豆
烧一些水。

把所有东西倒进锅里，按照这个算法操作：

 找到木勺
 揭开锅盖
 搅拌
 盖上锅盖
 将木勺危险地平衡在锅柄上
 等待10分钟
 转到第一步（或完成时关掉火）

不要碰到木勺，否则它会掉下来。

再次注意，文本总是在4空格缩进处对齐（包括上面第3项的最后一行）。

这是一个指向网站的链接，指向本地文档的链接，以及指向当前文档中章节标题的链接。这是一个脚注 ^1。

表格可以这样写：

size material color

9 leather brown 10 hemp canvas natural 11 glass transparent

Table: Shoes, their sizes, and what they're made of

（上面是表格的标题）。Pandoc 也支持多行表格：

keyword text

red Sunsets, apples, and other red or reddish things.

green Leaves, grass, frogs and other things it's not easy being.

下面是一条水平线。

这是一个定义列表：

apples : 适合做苹果酱。 oranges : 柑橘类水果！ tomatoes : 番茄里没有"e"。

同样，文本缩进4个空格。（在每个术语/定义对之间放一个空行，可以使内容更分散。）

这是一个"行块"：

| 第一行 | 第二行 | 第三行

图片可以这样指定：

内联数学方程式这样写：$\omega = d\phi / dt$。显示数学公式应该单独占一行，并放在双美元符号中：

$$I = \int \rho R^{2} dV$$

$$ \begin{equation*} \pi =3.1415926535 ;8979323846;2643383279;5028841971;6939937510;5820974944 ;5923078164;0628620899;8628034825;3421170679;\ldots \end{equation*} $$

请注意，你可以使用反斜杠转义任何你希望按字面显示的标点字符，例如：`foo`, *bar* 等。

在文章中嵌入视频

Tue, 01 Aug 2023 00:00:00 GMT

只需从 YouTube 或其他平台复制嵌入代码，然后粘贴到 markdown 文件中即可。

---
title: 在文章中嵌入视频
published: 2023-10-19
// ...
---

<iframe width="100%" height="468" src="https://www.youtube.com/embed/5gIf0_xpFPI?si=N1WTorLKL0uwLsU_" title="YouTube video player" frameborder="0" allowfullscreen></iframe>

YouTube

Bilibili