# xinfeng

**Repository Path**: bs6/xinfeng

## Basic Information

- **Project Name**: xinfeng
- **Description**: 一封很好看的信
- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-09-19
- **Last Updated**: 2026-09-19

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 💌 xinfeng · 电子情书

> 一封会自己打字的信。
> 合着的信封，点一下火漆就打开，文字一个一个浮现，配着背景音乐和飘落的樱花。
>
> 📖 **[图文版说明 → README.html](./README.html)** —— 带项目素材配图，浏览器直接打开。

```
        ┌──────────────────────────────┐
        │   ┌────────────────────┐     │
        │   │                    │     │
        │   │      ✉ 信在这里     │     │
        │   │                    │     │
        │   └────────────────────┘     │
        │                    🔴        │  ← 点这个火漆
        └──────────────────────────────┘
```

---

## ✨ 都有什么效果

| | 效果 | 说明 |
|---|---|---|
| 🔖 | 信封封面 | 邮票 + 收件人名字，信封是合着的 |
| 🔥 | 火漆开启 | 点一下红漆，信封盖翻开 |
| ⌨️ | 打字机 | 正文逐字浮现，还能控制哪里停顿多久 |
| 🌸 | 樱花飘落 | WebGL 实时粒子背景 |
| 🎵 | 背景音乐 | 右下角按钮可开可关，循环播放 |
| 📜 | 信纸质感 | 纸张纹理 + 手写体英文签名 |

---

## 📁 目录结构

```
xf/
├── index.html          页面入口，双击也能开
├── content.json        ⭐ 要改的内容全在这个文件里
├── bgm.mp3             背景音乐
├── README.md           本说明
├── README.html         图文版说明（浏览器打开）
├── css/
│   ├── main.css        全局样式 + Satisfy 手写字体
│   ├── letter.css      信封开合动画（:target 驱动）
│   ├── sakura.css      樱花背景
│   ├── typed.css       打字机光标
│   └── bgm.css         音乐按钮
├── js/
│   ├── jquery.min.js   jQuery（已本地化，不依赖 CDN）
│   ├── main.js         读配置、拼装正文、重置信封状态
│   ├── letter.js       点击火漆后触发打字机
│   ├── typed.js        打字机库
│   └── sakura.js       樱花粒子
├── img/                邮票、火漆、纸纹、音乐图标
└── font/
    └── op.woff2        Satisfy 手写字体（只含英文）
```

---

## ⚙️ content.json 配置详解

### 这个文件是干什么的

**它是全站唯一的配置文件。** 所有文字、称呼、署名、标题、背景音乐都写在这里。

改完保存，**刷新浏览器就能看到效果，不需要碰任何一行代码**。
`index.html` 和 `js/` 里的东西都不用动。

### 字段一览

| 字段 | 类型 | 作用 | 示例 |
|---|---|---|---|
| `salutation` | 文字 | 信件开头的**称呼**，显示在正文第一行 | `"小明"` |
| `signature` | 文字 | 信件末尾的**署名**，右对齐显示 | `"书源"` |
| `title` | 文字 | 浏览器标签页上显示的**标题** | `"给小明的信"` |
| `body` | 数组 | **正文**，一个元素 = 屏幕上一行 | 见下方 |
| `recipient` | 文字 | 信封正面的**收件人**，支持 HTML | `"To  Hiro"` |
| `sender` | 文字 | 信封背面那个 ♥ 位置显示的**名字** | `"书源"` |
| `bgm` | 文字 | 背景音乐**文件名**，文件放在同目录 | `"bgm.mp3"` |
| `indent` | 数字 | 正文每行**段首缩进几格**，默认 7 | `7` |

### 正文怎么写

`body` 是一个**数组**，一个元素等于屏幕上的一行：

```json
"body": [
    "今天天气不错",
    "我去了我们第一次见面的地方",
    "你还记得吗"
]
```

想换行？**新起一个元素**就行。

> ⚠️ **不要自己写 `<br>` 或 `&nbsp;`**
> 换行和段首缩进程序会自动加（缩进几格由 `indent` 控制），你只管写句子。
> 手写了反而会重复。

### 怎么控制打字节奏

在句子里插 `^数字`，数字的单位是**毫秒**：

```json
"今天天气不错^600,我去了老地方"
```

意思是：打到逗号那里**停 0.6 秒**再继续。

| 写法 | 效果 |
|---|---|
| `^200` | 轻微顿一下 |
| `^600` | 明显停顿 |
| `^1000` | 停一秒 |
| `^5000` | 停五秒（适合开头铺垫） |

不想要停顿，把那段 `^数字` 删掉即可。

### 一份完整的示例

```json
{
    "recipient":  "To&nbsp;&nbsp;Hiro",
    "sender":     "书源",
    "salutation": "小明",
    "signature":  "书源",
    "title":      "给小明的信",
    "bgm":        "bgm.mp3",
    "indent":     7,
    "body": [
        "第一句想说的话^600",
        "第二句想说的话",
        "最后一句"
    ]
}
```

### 改的时候容易踩的坑

| 问题 | 原因 |
|---|---|
| 页面一片空白 | JSON 格式写错了，多半是逗号或引号 |
| 用了中文引号 `“”` | JSON 只认英文双引号 `"` |
| 数组最后一行末尾加了逗号 | 最后一个元素后面**不能**有逗号 |
| 段首空格重复 | 手写了 `&nbsp;`，程序还会再加一份 |
| 改完没变化 | 浏览器缓存，按 `Ctrl + F5` 硬刷新 |

### 换音乐

新 mp3 改名成 `bgm.mp3` 覆盖即可。
想换文件名，同步改 `bgm` 字段。

---

## 🚀 怎么部署

**纯静态页面**，没有后端，没有编译步骤。

### 方式一：Tomcat（当前用法）

整个 `xf` 目录放进 `webapps/`，启动 Tomcat。目录名就是访问路径：

```
webapps/xf/  →  http://localhost:8080/xf/
```

### 方式二：任意静态服务器

Nginx、Apache、Python 的 `http.server` 都行，目录丢进去即可。

### 方式三：直接双击

双击 `index.html` 能看，但**背景音乐可能因浏览器策略被拦**，建议起个服务。

### 当前部署位置

| 位置 | 地址 |
|---|---|
| 本地 Tomcat（80 端口） | `http://localhost/xf/` |
| 云端服务器 | `http://www.baosy.xyz:8081/xf/` |

两边是同一套文件。本地改满意后，把改过的文件覆盖到云端。