197 lines
5.1 KiB
Markdown
197 lines
5.1 KiB
Markdown
# 邀请函制作工具 - 使用与配置说明
|
||
|
||
> 以下操作，只需要用记事本打开文件、修改几个数字即可。
|
||
|
||
---
|
||
|
||
## 一、调整三个输入框的位置
|
||
|
||
### 适用场景
|
||
|
||
打开页面后，输入框（企业、嘉宾、编号）的位置不满意，想上下左右调一调。
|
||
|
||
### 操作步骤
|
||
|
||
1. 用 **记事本** 打开 `js/config.js` 文件
|
||
|
||
2. 找到下半部分的 `INPUTS_CONFIG` 配置段：
|
||
|
||
```js
|
||
var INPUTS_CONFIG = {
|
||
"inputs": [
|
||
{
|
||
"id": "input1", // ← 第一个输入框（企业）
|
||
"left": 100, // ← 距离左边多少像素
|
||
"top": 218.4 // ← 距离顶部多少像素
|
||
},
|
||
{
|
||
"id": "input2", // ← 第二个输入框（嘉宾）
|
||
"left": 100,
|
||
"top": 261.4
|
||
},
|
||
{
|
||
"id": "input3", // ← 第三个输入框（编号）
|
||
"left": 100,
|
||
"top": 308.1
|
||
}
|
||
]
|
||
};
|
||
```
|
||
|
||
3. **修改数字即可**：
|
||
|
||
- **`left`**：数字越大，输入框越靠右；数字越小，越靠左
|
||
- **`top`**：数字越大，输入框越靠下；数字越小，越靠上
|
||
|
||
> 小技巧：在页面上选中输入框，会显示它的坐标，复制数字填进来即可。
|
||
|
||
4. **保存文件**，然后刷新页面，效果就会生效。
|
||
|
||
---
|
||
|
||
## 二、更换默认背景图片
|
||
|
||
### 适用场景
|
||
|
||
打开页面时自动显示的那张背景图想换成自己的图片。
|
||
|
||
### 操作步骤
|
||
|
||
**方法一（推荐）—— 替换图片文件：**
|
||
|
||
1. 准备一张你想要的图片（建议用 JPG 格式）
|
||
2. 把图片放到 `images` 文件夹里，重命名为 `default-bg.jpg`
|
||
> 如果原来有一张，会提示"替换文件"，点击确定即可。
|
||
3. 刷新页面，新背景图就会自动加载
|
||
|
||
**方法二—— 修改配置文件路径：**
|
||
|
||
1. 把你的图片放到 `images` 文件夹，比如命名为 `my-bg.png`
|
||
2. 用记事本打开 `js/config.js`
|
||
3. 找到文件开头的这一行：
|
||
|
||
```js
|
||
var DEFAULT_BG_IMAGE = './images/default-bg.jpg';
|
||
```
|
||
|
||
4. 改成你的图片路径：
|
||
|
||
```js
|
||
var DEFAULT_BG_IMAGE = './images/my-bg.png';
|
||
```
|
||
|
||
5. 保存文件，刷新页面
|
||
|
||
---
|
||
|
||
## 三、修改输入框的文字粗细
|
||
|
||
### 适用场景
|
||
|
||
想让输入框的文字更粗或更细。
|
||
|
||
### 操作步骤
|
||
|
||
1. 用记事本打开 `js/config.js`
|
||
|
||
2. 找到 `"fontWeight": 700` 这一行
|
||
|
||
3. 修改数字（范围 400 ~ 900）：
|
||
|
||
| 数值 | 效果 |
|
||
|------|------|
|
||
| 400 | 正常粗细 |
|
||
| 500 | 中等 |
|
||
| 600 | 半粗 |
|
||
| **700** | **加粗（默认）** |
|
||
| 800 | 更粗 |
|
||
| 900 | 最粗 |
|
||
|
||
4. 保存文件，刷新页面
|
||
|
||
---
|
||
|
||
## 四、修改输入框的占位提示文字
|
||
|
||
### 适用场景
|
||
|
||
想把"请输入"改成其他提示语。
|
||
|
||
### 操作步骤
|
||
|
||
1. 用记事本打开 `js/config.js`
|
||
|
||
2. 找到相应的 `"placeholder"` 行，例如：
|
||
|
||
```js
|
||
"placeholder": "请输入"
|
||
```
|
||
|
||
3. 改成你想要的文字，比如：
|
||
|
||
```js
|
||
"placeholder": "在此输入企业名称"
|
||
```
|
||
|
||
4. 保存文件，刷新页面
|
||
|
||
---
|
||
|
||
---
|
||
|
||
## 五、部署多个邀请函模板（通过网址切换）
|
||
|
||
### 适用场景
|
||
|
||
部署一个网站，但能做出多个不同样式的邀请函，每个有不同的背景图、输入框位置和提示文字。通过网址后缀来区分。
|
||
|
||
### 实现原理
|
||
|
||
在 `js/config.js` 中提前定义好多个模板，通过 URL 查询参数 `?t=模板名` 来切换。
|
||
|
||
### 操作步骤
|
||
|
||
1. 用记事本打开 `js/config.js`
|
||
|
||
2. 找到模板定义区域，已经有一个 `default` 模板，在它后面添加新模板（注意去掉注释标记）：
|
||
|
||
```js
|
||
// 在 default 模板的 } 后面加逗号，然后添加：
|
||
,wedding: {
|
||
title: '婚礼邀请函',
|
||
bgImage: './images/wedding-bg.jpg',
|
||
inputs: [
|
||
{ id: "input1", label: "新郎", left: 50, top: 200, fontWeight: 700, placeholder: "请输入新郎名", isLocked: false },
|
||
{ id: "input2", label: "新娘", left: 50, top: 250, fontWeight: 700, placeholder: "请输入新娘名", isLocked: false },
|
||
{ id: "input3", label: "婚期", left: 50, top: 300, fontWeight: 700, placeholder: "请输入日期", isLocked: false }
|
||
]
|
||
}
|
||
```
|
||
|
||
3. 把对应的背景图放到 `images` 文件夹（如 `wedding-bg.jpg`）
|
||
|
||
4. 部署后，用不同网址访问即可得到不同的邀请函：
|
||
|
||
| 网址 | 效果 |
|
||
|------|------|
|
||
| `https://你的域名/index.html` | 默认模板 |
|
||
| `https://你的域名/index.html?t=wedding` | 婚礼邀请函模板 |
|
||
|
||
> 每个模板的输入框位置、提示文字、背景图完全独立，互不干扰。用户制作时修改的内容（文字、样式调整）也不会影响其他模板。
|
||
|
||
---
|
||
|
||
## 常见问题
|
||
|
||
**Q：修改文件后页面没变化？**
|
||
A：先确认文件已保存，然后刷新浏览器页面（按 F5 或点浏览器的刷新按钮）。
|
||
|
||
**Q：改坏了怎么办？**
|
||
A：可以重新下载项目，或者联系开发者恢复。
|
||
|
||
**Q：找不到 `images` 文件夹？**
|
||
A：项目文件夹里如果没看到，自己新建一个名叫 `images` 的文件夹即可。
|
||
|
||
**Q：`config.js` 在哪里？**
|
||
A：在 `js` 文件夹里，打开后一眼就能看到全部配置项。
|