From 55dfeed2c2be2505b095ce09b9d2494491310a1e Mon Sep 17 00:00:00 2001 From: ZF sun <34314687@qq.com> Date: Sat, 16 May 2026 09:43:44 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A4=9A=E6=A8=A1=E6=9D=BF=E6=94=AF?= =?UTF-8?q?=E6=8C=81=EF=BC=8CURL=20=E6=9F=A5=E8=AF=A2=E5=8F=82=E6=95=B0=20?= =?UTF-8?q?=3Ft=3D=20=E5=88=87=E6=8D=A2=E4=B8=8D=E5=90=8C=E9=82=80?= =?UTF-8?q?=E8=AF=B7=E5=87=BD=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- js/config.js | 95 ++++++++++++++++++++++++++++++++++------------------ js/script.js | 39 ++++++++++++++++++--- 使用说明.md | 44 ++++++++++++++++++++++++ 3 files changed, 140 insertions(+), 38 deletions(-) diff --git a/js/config.js b/js/config.js index be6b36b..3905a16 100644 --- a/js/config.js +++ b/js/config.js @@ -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; diff --git a/js/script.js b/js/script.js index e5095ec..b694569 100644 --- a/js/script.js +++ b/js/script.js @@ -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; diff --git a/使用说明.md b/使用说明.md index d78b158..4f90ae0 100644 --- a/使用说明.md +++ b/使用说明.md @@ -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：修改文件后页面没变化？**