WeWork/invitation-maker
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 多模板支持，URL 查询参数 ?t= 切换不同邀请函配置

Browse Source
This commit is contained in:
ZF Sun
2026-05-16 09:43:44 +08:00
parent 9e0a7c083d
commit 55dfeed2c2
3 changed files with 140 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

95
js/config.js
View File

@@ -2,40 +2,69 @@
// 邀请函制作工具 - 全局配置文件
// 修改以下数值即可调整外观，无需改动代码
// ============================================
//
// 多模板支持：通过 URL 查询参数 ?t=模板名 切换
// 例如：index.html?t=wedding
// 不传参数时使用 default 模板
// -------- 默认背景图 --------
// 修改为你的图片路径即可替换默认背景
var DEFAULT_BG_IMAGE = './images/default-bg.jpg';
var CONFIG = {
// 默认模板名（URL 未指定或找不到时使用）
defaultTemplate: 'default',
// -------- 三个预设输入框的初始位置与样式 --------
var INPUTS_CONFIG = {
"inputs": [
{
"id": "input1",
"label": "企业",
"left": 100,
"top": 218.4,
"fontWeight": 700,
"placeholder": "请输入",
"isLocked": false // true=锁定位置（不可拖动，仍可编辑）, false=自由拖动
},
{
"id": "input2",
"label": "嘉宾",
"left": 100,
"top": 261.4,
"fontWeight": 700,
"placeholder": "请输入",
"isLocked": false // true=锁定位置（不可拖动，仍可编辑）, false=自由拖动
},
{
"id": "input3",
"label": "编号",
"left": 100,
"top": 308.1,
"fontWeight": 700,
"placeholder": "请输入",
"isLocked": false // true=锁定位置（不可拖动，仍可编辑）, false=自由拖动
// ========== 所有模板 ==========
templates: {
// -------- 默认模板 --------
default: {
title: '通用邀请函',
bgImage: './images/default-bg.jpg',
inputs: [
{
id: "input1",
label: "企业",
left: 100,
top: 218.4,
fontWeight: 700,
placeholder: "请输入",
isLocked: false
},
{
id: "input2",
label: "嘉宾",
left: 100,
top: 261.4,
fontWeight: 700,
placeholder: "请输入",
isLocked: false
},
{
id: "input3",
label: "编号",
left: 100,
top: 308.1,
fontWeight: 700,
placeholder: "请输入",
isLocked: false
}
]
}
]
// -------- 在此下方添加更多模板 --------
// 用法：浏览器打开 index.html?t=wedding
//
,wedding: {
title: '婚礼邀请函',
bgImage: './images/wedding-bg.jpg',
inputs: [
{ id: "input1", label: "新郎", left: 50, top: 200, fontWeight: 700, placeholder: "请输入新郎名" },
{ id: "input2", label: "新娘", left: 50, top: 250, fontWeight: 700, placeholder: "请输入新娘名" },
{ id: "input3", label: "婚期", left: 50, top: 300, fontWeight: 700, placeholder: "请输入日期" }
]
}
}
};
// -------- 兼容旧代码（由 script.js 内部使用） --------
// 以下变量由 script.js 自动从 CONFIG 读取，无需手动修改
var ACTIVE_TEMPLATE = null;

39
js/script.js
View File

@@ -45,7 +45,36 @@
const guideV = document.getElementById('guideV');
const gridLines = document.getElementById('gridLines');
let inputsConfig = null;
var inputsConfig = null;
var defaultBgUrl = './images/default-bg.jpg';
// 解析 URL 查询参数 ?t=模板名，选择对应模板
(function resolveTemplate() {
try {
var params = new URLSearchParams(window.location.search);
var templateName = params.get('t') || (typeof CONFIG !== 'undefined' ? CONFIG.defaultTemplate : 'default');
if (typeof CONFIG !== 'undefined' && CONFIG.templates && CONFIG.templates[templateName]) {
var tmpl = CONFIG.templates[templateName];
ACTIVE_TEMPLATE = tmpl;
inputsConfig = tmpl.inputs || null;
if (tmpl.bgImage) defaultBgUrl = tmpl.bgImage;
} else if (typeof CONFIG !== 'undefined' && CONFIG.templates && CONFIG.templates[CONFIG.defaultTemplate]) {
var tmpl = CONFIG.templates[CONFIG.defaultTemplate];
ACTIVE_TEMPLATE = tmpl;
inputsConfig = tmpl.inputs || null;
if (tmpl.bgImage) defaultBgUrl = tmpl.bgImage;
} else {
// 兼容旧版 INPUTS_CONFIG / DEFAULT_BG_IMAGE
if (typeof INPUTS_CONFIG !== 'undefined') inputsConfig = INPUTS_CONFIG.inputs;
if (typeof DEFAULT_BG_IMAGE !== 'undefined') defaultBgUrl = DEFAULT_BG_IMAGE;
}
} catch (e) {
if (typeof INPUTS_CONFIG !== 'undefined') inputsConfig = INPUTS_CONFIG.inputs;
if (typeof DEFAULT_BG_IMAGE !== 'undefined') defaultBgUrl = DEFAULT_BG_IMAGE;
}
window._inputsConfig = inputsConfig;
})();
let currentImage = null;
let bgImageScale = 1;
let bgImageOpacity = 1;
@@ -266,8 +295,8 @@
updateUndoRedoButtons();
// 从配置文件应用输入框初始参数
if (typeof INPUTS_CONFIG !== 'undefined' && INPUTS_CONFIG && INPUTS_CONFIG.inputs) {
INPUTS_CONFIG.inputs.forEach(function(cfg) {
if (inputsConfig) {
inputsConfig.forEach(function(cfg) {
var el = document.getElementById(cfg.id);
if (el) {
el.style.left = cfg.left + 'px';
@@ -808,9 +837,9 @@
}
}
// 加载默认背景图（路径从 config.js 读取）
// 加载默认背景图（路径从 config.js 根据 ?t= 参数读取）
function loadDefaultBackground() {
const defaultBgUrl = typeof DEFAULT_BG_IMAGE !== 'undefined' ? DEFAULT_BG_IMAGE : './images/default-bg.jpg';
// defaultBgUrl 已在模板解析阶段确定
const img = new Image();
img.onload = () => {
currentImage = img;

44
使用说明.md
View File

@@ -137,6 +137,50 @@ var DEFAULT_BG_IMAGE = './images/my-bg.png';
---
---
## 五、部署多个邀请函模板（通过网址切换）
### 适用场景
部署一个网站，但能做出多个不同样式的邀请函，每个有不同的背景图、输入框位置和提示文字。通过网址后缀来区分。
### 实现原理
在 `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：修改文件后页面没变化？**