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

2026-05-16 09:43:44 +08:00
parent 9e0a7c083d
commit 55dfeed2c2
3 changed files with 140 additions and 38 deletions
--- 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;
--- 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;
--- 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：修改文件后页面没变化？**