xiangjsoncraft 1.0.5 → 1.1.1

package/README.md

@@ -1,148 +1,291 @@
-
+# XiangJsonCraft
 ![XiangJsonCraft Logo](https://picsum.photos/seed/xiangjsoncraft/200/200)
 
-
-
-# XiangJsonCraft 软件包 官方文档
-
-XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，是由大学生董翔开发，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建。
-
-## 特性
-
-- **简单易用**：只需几行代码即可完成页面渲染
-- **灵活配置**：通过 JSON 文件定义样式和内容
-- **轻量级**：无额外依赖，体积小巧
-
-## 安装
-
+XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，由大学生董翔开发，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建，做到样式、内容与代码的解耦管理。
+
+## 🚀 最新更新 (v1.1.1)
+基于 v1.1.0 核心功能完成**环境适配升级**，新增 CDN/本地双环境兼容能力，发布后可零成本实现本地开发、CDN 在线使用，同时优化渲染容错性，避免空配置、无效选择器导致的渲染异常。
+
+### 核心更新
+- **CDN/本地双环境适配**：自动识别运行环境，无需修改代码即可实现本地开发、CDN 在线调用
+- **渲染容错优化**：过滤空样式、无效选择器，新增样式块创建判空，控制台错误提示更友好
+- **打包格式完善**：提供 UMD/ES/CJS 三种打包格式，适配浏览器、前端框架、Node.js 全环境
+- **使用体验升级**：新增 npm dev 脚本，一键启动开发服务器，快速验证开发效果
+
+## ✨ 核心特性
+- **简单易用**：仅需一行 API 调用，即可完成整个页面的样式和内容渲染
+- **灵活配置**：通过单一 JSON 文件定义所有样式、文本、HTML 内容，支持按需修改
+- **轻量级无依赖**：原生 JavaScript 开发，无任何第三方依赖，体积小巧，加载速度快
+- **全面的 CSS 支持**：兼容所有 CSS 选择器（类、ID、伪类、伪元素、媒体查询等）
+- **响应式设计友好**：直接通过 JSON 配置媒体查询，轻松实现多屏幕尺寸适配
+- **双内容类型支持**：同时支持纯文本、HTML 片段动态注入，满足不同内容渲染需求
+- **多环境适配**：支持本地模块化引入、CDN 全局调用，适配所有现代浏览器
+- **高容错性**：自动过滤无效配置、空样式，避免单一配置错误导致整体渲染失败
+
+## 📦 安装使用
+### 1. npm 安装
 ```bash
-npm install xiangjsoncraft
-```
+# npm
+npm install xiangjsoncraft --save
 
-## 快速开始
+# yarn
+yarn add xiangjsoncraft
 
-### 1. 创建 JSON 配置文件
+# pnpm
+pnpm add xiangjsoncraft
+```
 
-首先，创建一个 JSON 配置文件 `config.json`，定义页面的样式和内容：
+### 2. CDN 在线使用（零安装）
+无需本地安装，一行脚本引入即可全局调用，适合快速原型开发、静态页面使用：
+```html
+<!-- 引入UMD包，自动挂载全局变量 XiangJsonCraft -->
+<script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/dist/xiangjsoncraft.umd.js"></script>
+<!-- 直接调用核心方法，零配置渲染 -->
+<script>
+  XiangJsonCraft.renderJsonStyles();
+</script>
+```
 
+## ⚡ 快速开始
+### 步骤1：创建 JSON 配置文件
+在项目根目录/HTML 同级目录创建 `config.json`，定义页面的样式、文本及 HTML 内容，支持所有 CSS 选择器和媒体查询：
 ```json
 {
-    "styles": {
-        "body": {
-            "margin": "0",
-            "padding": "0",
-            "boxSizing": "border-box"
-        },
-        "header": {
-            "display": "flex",
-            "justifyContent": "center",
-            "alignItems": "center",
-            "padding": "10px",
-            "backgroundColor": "azure"
-        },
-        "headerP": {
-            "color": "black",
-            "fontSize": "16px"
-        }
-    },
-    "content": {
-        "headerText": "Dynamic Header Text"
+  "styles": {
+    "*": {
+      "margin": "0",
+      "padding": "0",
+      "boxSizing": "border-box"
+    },
+    "body": {
+      "fontFamily": "Arial, sans-serif",
+      "lineHeight": "1.6",
+      "color": "#333",
+      "backgroundColor": "#f9f9f9",
+      "padding": "2rem"
+    },
+    ".header": {
+      "backgroundColor": "#2c3e50",
+      "color": "white",
+      "padding": "1.5rem",
+      "textAlign": "center",
+      "borderRadius": "8px",
+      "marginBottom": "2rem"
+    },
+    "nav ul": {
+      "display": "flex",
+      "listStyle": "none",
+      "justifyContent": "center",
+      "gap": "1.5rem",
+      "marginBottom": "2rem"
+    },
+    "nav a": {
+      "color": "#2c3e50",
+      "textDecoration": "none",
+      "fontSize": "1.1rem"
+    },
+    "nav a:hover": {
+      "color": "#f39c12",
+      "textDecoration": "underline"
+    },
+    ".card": {
+      "background": "white",
+      "padding": "2rem",
+      "borderRadius": "8px",
+      "boxShadow": "0 2px 8px rgba(0,0,0,0.1)"
+    },
+    "@media (max-width: 768px)": {
+      "body": {
+        "padding": "1rem"
+      },
+      "nav ul": {
+        "flexDirection": "column",
+        "alignItems": "center",
+        "gap": "1rem"
+      }
     }
+  },
+  "content": {
+    ".header h1": {
+      "value": "XiangJsonCraft 演示页面",
+      "isHtml": false
+    },
+    ".card h2": {
+      "value": "<span style='color:#2c3e50;'>JSON 配置渲染</span> 就是这么简单",
+      "isHtml": true
+    },
+    ".card p": {
+      "value": "通过单个 JSON 文件定义所有样式和内容，一行代码完成页面渲染，实现代码与配置的解耦管理。",
+      "isHtml": false
+    }
+  }
 }
 ```
 
-### 2. 创建 HTML 页面
-
-然后，创建一个 HTML 页面 `index.html`，引入 JavaScript 文件：
-
+### 步骤2：创建 HTML 页面
+创建 `index.html`，引入渲染容器并调用核心 API，无需手写任何 CSS 样式：
 ```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <style id="style-block"></style> 
+    <title>XiangJsonCraft 快速开始</title>
+    <!-- 动态样式块，渲染后的CSS会注入到这里 -->
+    <style id="dynamic-styles"></style>
 </head>
 <body>
-    <header>
-        <p id="header-text"></p>
+    <!-- 页面渲染容器，与config.json中的选择器匹配 -->
+    <header class="header">
+        <h1></h1>
     </header>
-    <!-- 引入外部 JavaScript 文件 -->
+    <nav>
+        <ul>
+            <li><a href="#">首页</a></li>
+            <li><a href="#">文档</a></li>
+            <li><a href="#">示例</a></li>
+        </ul>
+    </nav>
+    <div class="card">
+        <h2></h2>
+        <p></p>
+    </div>
+
+    <!-- 方式1：本地模块化引入（推荐，适合项目开发） -->
     <script type="module">
-        import { renderJson } from './renderJson.js';
-        renderJson();
+        import { renderJsonStyles } from './renderJson.js';
+        // 一行调用，完成所有样式和内容渲染
+        renderJsonStyles();
     </script>
+
+    <!-- 方式2：CDN全局调用（注释方式1，打开此注释即可） -->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/dist/xiangjsoncraft.umd.js"></script>
+    <script>
+        XiangJsonCraft.renderJsonStyles();
+    </script> -->
 </body>
 </html>
 ```
 
-### 3. 编写渲染函数
+### 步骤3：开发运行
+```bash
+# 安装开发依赖（首次使用）
+npm install
 
-在 `renderJson.js` 中编写渲染函数：
+# 打包生成多格式文件（UMD/ES/CJS）
+npm run build
 
-```javascript
-// 定义 replaceCamelCase 方法
-String.prototype.replaceCamelCase = function (separator = '-') {
-    return this.replace(/[A-Z]/g, function (match) {
-        return separator + match.toLowerCase();
-    });
-};
-
-// 封装 JSON 渲染函数
-function renderJson() {
-    // 使用 fetch API 获取 JSON 文件
-    fetch('./config.json')
-        .then(response => {
-            // 检查响应是否成功
-            if (!response.ok) {
-                throw new Error('网络响应失败');
-            }
-            // 将响应转换为 JSON 格式
-            return response.json();
-        })
-        .then(config => {
-            // 动态创建样式表
-            const styleBlock = document.getElementById('style-block');
-            styleBlock.innerHTML = `
-                * { ${Object.entries(config.styles.body).map(([key, value]) => `${key}: ${value};`).join(' ')} }
-                header { ${Object.entries(config.styles.header).map(([key, value]) => `${key.replaceCamelCase()}: ${value};`).join(' ')} }
-                header p { ${Object.entries(config.styles.headerP).map(([key, value]) => `${key}: ${value};`).join(' ')} }
-            `;
-
-            // 动态设置内容
-            document.getElementById('header-text').innerText = config.content.headerText;
-        })
-        .catch(error => {
-            console.error('获取 JSON 文件时出错:', error);
-        });
-}
-
-// 导出渲染函数
-export { renderJson };
+# 启动开发服务器，一键预览效果
+npm run dev
 ```
+在浏览器中访问 `http://localhost:3000`，即可看到由 JSON 配置渲染的完整页面。
 
-### 4. 运行项目
+## 📚 API 文档
+### `renderJsonStyles()`
+**核心渲染方法**，无入参，执行后自动完成以下操作：
+1. 自动识别运行环境（本地/CDN），加载对应路径的 `config.json` 配置文件
+2. 解析配置中的 `styles` 节点，生成标准 CSS 样式并注入到页面头部的 `#dynamic-styles` 样式块
+3. 解析配置中的 `content` 节点，根据 `isHtml` 标识，向匹配的 DOM 节点注入纯文本/HTML 内容
+4. 控制台输出渲染成功提示，若配置异常则输出友好的错误信息
 
-在浏览器中打开 `index.html` 文件，即可看到渲染后的页面。
+#### 调用方式
+```javascript
+// 方式1：ES6模块化引入（本地开发/前端框架）
+import { renderJsonStyles } from 'xiangjsoncraft';
+renderJsonStyles();
 
-## API 文档
+// 方式2：CDN全局调用（静态页面/快速开发）
+XiangJsonCraft.renderJsonStyles();
+```
 
-### `renderJson()`
+## ⚙️ 配置文件说明
+配置文件为标准 JSON 格式，核心包含 `styles` 和 `content` 两个一级节点，所有配置均支持按需扩展、修改。
 
-从 `config.json` 文件中读取样式和内容配置，并将其应用到 HTML 页面中。
+### 1. `styles` 节点
+用于定义页面所有 CSS 样式，**键为任意合法 CSS 选择器**，值为样式属性对象，样式属性支持**驼峰式命名**（会自动转换为 CSS 标准短横线命名）。
+- 支持选择器：类、ID、标签、伪类、伪元素、后代选择器、媒体查询等所有 CSS 合法选择器
+- 样式属性：所有 CSS 原生属性，驼峰式（`fontSize`）会自动转为短横线式（`font-size`）
 
-#### 示例
+### 2. `content` 节点
+用于定义页面文本/HTML 内容，**键为 CSS 选择器**，值为内容配置对象，包含两个必选属性：
+- `value`：字符串类型，要渲染的内容（纯文本/HTML 片段）
+- `isHtml`：布尔类型，`true` 表示内容为 HTML 片段，`false` 表示内容为纯文本（默认）
 
-```javascript
-import { renderJson } from './renderJson.js';
-renderJson();
+### 配置文件规范
+1. 配置文件必须命名为 `config.json`，与 HTML 页面同级目录（CDN 方式无需手动创建，自动加载官方配置）
+2. 选择器必须匹配 HTML 中的实际 DOM 节点，否则会被自动过滤
+3. 样式属性值需符合 CSS 规范（如单位、颜色值、尺寸值）
+4. HTML 片段需保证语法合法，避免 XSS 风险（建议仅在可信环境下使用 HTML 内容）
+
+## 🎨 配置示例
+### 完整配置示例
+```json
+{
+  "styles": {
+    // 通配符选择器
+    "*": {
+      "margin": "0",
+      "padding": "0",
+      "boxSizing": "border-box"
+    },
+    // 标签选择器
+    "body": {
+      "fontFamily": "Microsoft YaHei, sans-serif",
+      "lineHeight": "1.8",
+      "color": "#333",
+      "backgroundColor": "#f5f5f5"
+    },
+    // ID选择器
+    "#app": {
+      "maxWidth": "1200px",
+      "margin": "0 auto",
+      "padding": "2rem"
+    },
+    // 类选择器
+    ".btn": {
+      "padding": "0.8rem 1.5rem",
+      "border": "none",
+      "borderRadius": "4px",
+      "cursor": "pointer",
+      "fontSize": "1rem"
+    },
+    // 伪类选择器
+    ".btn-primary": {
+      "backgroundColor": "#3498db",
+      "color": "white"
+    },
+    ".btn-primary:hover": {
+      "backgroundColor": "#2980b9"
+    },
+    // 媒体查询
+    "@media (max-width: 768px)": {
+      "#app": {
+        "padding": "1rem"
+      },
+      ".btn": {
+        "width": "100%",
+        "marginBottom": "1rem"
+      }
+    }
+  },
+  "content": {
+    // 纯文本内容
+    "#app h1": {
+      "value": "XiangJsonCraft 配置示例",
+      "isHtml": false
+    },
+    // HTML 片段内容
+    ".desc": {
+      "value": "支持 <strong>HTML 片段</strong> 和 <em>纯文本</em> 两种渲染方式",
+      "isHtml": true
+    }
+  }
+}
 ```
 
-## 彩蛋
+## 🥚 彩蛋：工具背后的小插曲
+### “敢改包”的底气来源
 
-```markdown
-# 工具背后的小插曲：“敢改包”的底气来源
 其实XiangJsonCraft的诞生，还藏着一段有趣的小场景——
 
 某天，朋友在Vue项目里用这个包时，遇到了个不符合自己编程习惯的小细节，对着node_modules里的代码犯愁：“老师说这地方不能随便改，容易牵一发而动全身。”
@@ -157,26 +300,30 @@ renderJson();
 
 所以如果你用的时候也有小想法，不用怕“改坏”——工具本身就为“灵活适配”留足了空间，而作为作者，我也始终在背后，为它的稳定和好用托底。
 
+## 🌐 浏览器兼容性
+支持所有现代浏览器，无需额外引入 polyfill：
+- Chrome ≥ 61
+- Firefox ≥ 60
+- Edge ≥ 79
+- Safari ≥ 12.1
+- Opera ≥ 48
+- 移动端所有现代浏览器（微信浏览器、QQ浏览器、Safari 移动端等）
 
-要不要我把这段花絮再调整得更口语化一些？或者补充一些你和朋友当时对话的细节，让整个故事更有画面感？
-
-```
+## 🤝 贡献指南
+XiangJsonCraft 欢迎所有开发者的贡献和建议，如果你有以下想法，欢迎随时交流：
+- 新增功能需求
+- 性能优化建议
+- Bug 修复
+- 文档完善
 
-## 贡献指南
+**贡献方式**：通过邮箱联系作者，提供你的想法、代码或问题描述，作者会第一时间回复。
 
-我们欢迎任何人贡献代码或提出建议。如果你想参与开发，请遵循以下步骤：
-
-1. 克隆仓库：`git clone https://github.com/dxiang-wiki/xiangjsoncraft.git`
-2. 创建新分支：`git checkout -b feature/your-feature`
-3. 提交代码：`git commit -m "Add your feature"`
-4. 推送分支：`git push origin feature/your-feature`
-5. 创建 Pull Request
-
-## 许可证
+## 📄 许可证
+本项目基于 **MIT 开源许可证** 发布，你可以自由使用、修改、分发本项目，无需支付任何费用，只需保留版权声明。
 
+```
 MIT License
-
-Copyright (c) 2025 xiang
+Copyright (c) 2025 董翔
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -195,12 +342,14 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+```
 
-## 联系我们
-
-如果你有任何问题或建议，请通过以下方式联系我们：
+## 📞 联系我们
+如果你有任何问题、建议或合作想法，欢迎通过以下方式联系作者：
+- **Email**：3631247406@qq.com
+- **作者**：董翔
 
-- GitHub Issues: https://github.com/dxiang-wiki/xiangjsoncraft/issues
-- Email: 3631247406@qq.com
+---
 
-感谢使用 XiangJsonCraft！
+**感谢使用 XiangJsonCraft！**  
+愿这个小工具能让你的前端开发更高效、更轻松 🚀

package/config.json

@@ -1,23 +1,218 @@
 {
     "styles": {
-        "body": {
+        "*": {
             "margin": "0",
             "padding": "0",
-            "boxSizing": "border-box"
+            "boxSizing": "border-box",
+            "fontFamily": "'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif"
+        },
+        "body": {
+            "backgroundColor": "#f0f4f8",
+            "color": "#334e68",
+            "lineHeight": "1.6",
+            "transition": "backgroundColor 0.5s ease",
+            "minHeight": "100vh"
+        },
+        ".welcome-container": {
+            "maxWidth": "1200px",
+            "margin": "0 auto",
+            "padding": "20px"
+        },
+        ".welcome-header": {
+            "textAlign": "center",
+            "padding": "60px 20px",
+            "marginBottom": "40px",
+            "borderRadius": "12px",
+            "background": "linear-gradient(135deg, #4299e1, #63b3ed)",
+            "color": "white",
+            "boxShadow": "0 10px 25px -5px rgba(66, 153, 225, 0.3)",
+            "transition": "transform 0.5s ease, boxShadow 0.5s ease"
         },
-        "header": {
+        ".welcome-header:hover": {
+            "transform": "translateY(-5px)",
+            "boxShadow": "0 15px 30px -8px rgba(66, 153, 225, 0.4)"
+        },
+        ".logo-container": {
+            "marginBottom": "30px"
+        },
+        ".logo": {
+            "width": "120px",
+            "height": "120px",
+            "margin": "0 auto",
+            "backgroundColor": "white",
+            "borderRadius": "50%",
             "display": "flex",
+            "alignItems": "center",
             "justifyContent": "center",
+            "fontSize": "48px",
+            "color": "#4299e1",
+            "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.1)"
+        },
+        ".logo::after": {
+            "content": "'J'",
+            "fontWeight": "bold"
+        },
+        ".main-title": {
+            "fontSize": "2.5rem",
+            "marginBottom": "15px",
+            "textShadow": "0 2px 4px rgba(0, 0, 0, 0.1)"
+        },
+        "@media (maxWidth: 768px)": {
+            ".main-title": {
+                "fontSize": "2rem"
+            }
+        },
+        ".subtitle": {
+            "fontSize": "1.1rem",
+            "opacity": "0.9",
+            "maxWidth": "600px",
+            "margin": "0 auto"
+        },
+        ".features-section": {
+            "display": "grid",
+            "gridTemplateColumns": "repeat(auto-fit, minmax(300px, 1fr))",
+            "gap": "30px",
+            "marginBottom": "60px"
+        },
+        ".feature-card": {
+            "backgroundColor": "white",
+            "borderRadius": "12px",
+            "padding": "30px",
+            "boxShadow": "0 4px 12px rgba(0, 0, 0, 0.05)",
+            "transition": "transform 0.3s ease, boxShadow 0.3s ease"
+        },
+        ".feature-card:hover": {
+            "transform": "translateY(-8px)",
+            "boxShadow": "0 12px 20px rgba(0, 0, 0, 0.08)"
+        },
+        ".feature-icon": {
+            "width": "60px",
+            "height": "60px",
+            "borderRadius": "12px",
+            "backgroundColor": "#ebf8ff",
+            "color": "#4299e1",
+            "display": "flex",
             "alignItems": "center",
-            "padding": "10px",
-            "backgroundColor": "azure"
+            "justifyContent": "center",
+            "fontSize": "24px",
+            "marginBottom": "20px"
+        },
+        ".feature-title": {
+            "fontSize": "1.3rem",
+            "marginBottom": "15px",
+            "color": "#2d3748"
         },
-        "headerP": {
-            "color": "black",
-            "fontSize": "16px"
-        }
+        ".feature-description": {
+            "color": "#718096",
+            "lineHeight": "1.7"
+        },
+        ".action-section": {
+            "textAlign": "center",
+            "marginBottom": "80px"
+        },
+        ".primary-button": {
+            "backgroundColor": "#4299e1",
+            "color": "white",
+            "border": "none",
+            "borderRadius": "8px",
+            "padding": "14px 32px",
+            "fontSize": "1rem",
+            "fontWeight": "600",
+            "cursor": "pointer",
+            "transition": "all 0.3s ease",
+            "boxShadow": "0 4px 6px rgba(66, 153, 225, 0.2)"
+        },
+        ".primary-button:hover": {
+            "backgroundColor": "#3182ce",
+            "transform": "translateY(-2px)",
+            "boxShadow": "0 6px 10px rgba(66, 153, 225, 0.3)"
+        },
+        ".additional-info": {
+            "marginTop": "15px",
+            "color": "#718096",
+            "fontSize": "0.95rem"
+        },
+        ".page-footer": {
+            "textAlign": "center",
+            "paddingTop": "30px",
+            "borderTop": "1px solid #e2e8f0",
+            "color": "#718096"
+        },
+        ".copyright": {
+            "marginBottom": "15px",
+            "fontSize": "0.9rem"
+        },
+        ".social-links": {
+            "display": "flex",
+            "justifyContent": "center",
+            "gap": "15px"
+        },
+        ".social-icon": {
+            "color": "#718096",
+            "fontSize": "1.2rem",
+            "transition": "color 0.3s ease"
+        },
+        ".social-icon:hover": {
+            "color": "#4299e1"
+        },
+    
+        "body:not(.loaded) .welcome-header": {
+            "opacity": "0",
+            "transform": "translateY(20px)"
+        },
+        "body.loaded .welcome-header": {
+            "opacity": "1",
+            "transform": "translateY(0)",
+            "transition": "opacity 0.8s ease, transform 0.8s ease"
+        },
+        "body:not(.loaded) .feature-card": {
+            "opacity": "0",
+            "transform": "scale(0.95)"
+        },
+        "body.loaded .feature-card": {
+            "opacity": "1",
+            "transform": "scale(1)",
+            "transition": "opacity 0.6s ease, transform 0.6s ease"
+        },
+        "body.loaded .feature-card:nth-child(1)": { "transitionDelay": "0.2s" },
+        "body.loaded .feature-card:nth-child(2)": { "transitionDelay": "0.4s" },
+        "body.loaded .feature-card:nth-child(3)": { "transitionDelay": "0.6s" }
     },
     "content": {
-        "headerText": "Dynamic Header Text"
+        ".main-title": "Welcome to xiangjsoncraft",
+        ".subtitle": "Create beautiful web pages with simple JSON configuration",
+        ".primary-button": "Get Started",
+        ".additional-info": "Join thousands of developers using our JSON configuration system",
+        ".copyright": "© 2025 Dong Xiang. All rights reserved."
+    },
+    "features": {
+        "selectorPrefix": "#feature",
+        "items": [
+            {
+                "iconClass": "fas fa-code",
+                "title": "Simple Configuration",
+                "description": "Define your entire page style and content with easy-to-understand JSON"
+            },
+            {
+                "iconClass": "fas fa-paint-brush",
+                "title": "Beautiful Designs",
+                "description": "Create stunning interfaces without writing complex CSS code"
+            },
+            {
+                "iconClass": "fas fa-mobile-alt",
+                "title": "Responsive by Default",
+                "description": "Your pages will look great on all devices with built-in responsiveness"
+            }
+        ]
+    },
+    "icons": {
+        "selector": ".social-links",
+        "items": [
+            { "class": "fab fa-github", "url": "#" },
+            { "class": "fab fa-twitter", "url": "#" },
+            { "class": "fab fa-linkedin", "url": "#" },
+            { "class": "fab fa-instagram", "url": "#" }
+        ]
     }
 }
+    

package/dist/xiangjsoncraft.cjs.js

@@ -0,0 +1,97 @@
+'use strict';
+
+var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
+// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
+String.prototype.replaceCamelCase = function (separator = '-') {
+    return this.replace(/[A-Z]/g, function (match) {
+        return separator + match.toLowerCase();
+    });
+};
+
+// 创建样式块并添加到文档头部
+function createStyleBlock() {
+    const style = document.createElement('style');
+    style.id = 'dynamic-styles';
+    document.head.appendChild(style);
+    return style;
+}
+
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+function renderJsonStyles() {
+    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
+    const isCdn = (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.cjs.js', document.baseURI).href)).includes('cdn.jsdelivr.net') || (typeof document === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.cjs.js', document.baseURI).href)).includes('unpkg.com');
+    const configUrl = isCdn
+        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
+        : './config.json';
+
+    // 使用fetch API获取JSON配置文件
+    fetch(configUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+            }
+            return response.json();
+        })
+        .then(config => {
+            // 获取或创建样式块，避免重复创建
+            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
+            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+        })
+        .catch(error => {
+            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+        });
+}
+
+exports.renderJsonStyles = renderJsonStyles;

package/dist/xiangjsoncraft.esm.js

@@ -0,0 +1,94 @@
+// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
+String.prototype.replaceCamelCase = function (separator = '-') {
+    return this.replace(/[A-Z]/g, function (match) {
+        return separator + match.toLowerCase();
+    });
+};
+
+// 创建样式块并添加到文档头部
+function createStyleBlock() {
+    const style = document.createElement('style');
+    style.id = 'dynamic-styles';
+    document.head.appendChild(style);
+    return style;
+}
+
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+function renderJsonStyles() {
+    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
+    const isCdn = import.meta.url.includes('cdn.jsdelivr.net') || import.meta.url.includes('unpkg.com');
+    const configUrl = isCdn
+        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
+        : './config.json';
+
+    // 使用fetch API获取JSON配置文件
+    fetch(configUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+            }
+            return response.json();
+        })
+        .then(config => {
+            // 获取或创建样式块，避免重复创建
+            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
+            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+        })
+        .catch(error => {
+            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+        });
+}
+
+export { renderJsonStyles };

package/dist/xiangjsoncraft.umd.js

@@ -0,0 +1,92 @@
+(function(g,f){typeof exports==='object'&&typeof module!=='undefined'?f(exports):typeof define==='function'&&define.amd?define(['exports'],f):(g=typeof globalThis!=='undefined'?globalThis:g||self,f(g.XiangJsonCraft={}));})(this,(function(exports){'use strict';var _documentCurrentScript=typeof document!=='undefined'?document.currentScript:null;// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
+String.prototype.replaceCamelCase = function (separator = '-') {
+    return this.replace(/[A-Z]/g, function (match) {
+        return separator + match.toLowerCase();
+    });
+};
+
+// 创建样式块并添加到文档头部
+function createStyleBlock() {
+    const style = document.createElement('style');
+    style.id = 'dynamic-styles';
+    document.head.appendChild(style);
+    return style;
+}
+
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+function renderJsonStyles() {
+    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
+    const isCdn = (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.umd.js', document.baseURI).href)).includes('cdn.jsdelivr.net') || (typeof document === 'undefined' && typeof location === 'undefined' ? require('u' + 'rl').pathToFileURL(__filename).href : typeof document === 'undefined' ? location.href : (_documentCurrentScript && _documentCurrentScript.tagName.toUpperCase() === 'SCRIPT' && _documentCurrentScript.src || new URL('xiangjsoncraft.umd.js', document.baseURI).href)).includes('unpkg.com');
+    const configUrl = isCdn
+        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
+        : './config.json';
+
+    // 使用fetch API获取JSON配置文件
+    fetch(configUrl)
+        .then(response => {
+            if (!response.ok) {
+                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
+            }
+            return response.json();
+        })
+        .then(config => {
+            // 获取或创建样式块，避免重复创建
+            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
+            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
+        })
+        .catch(error => {
+            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
+        });
+}exports.renderJsonStyles=renderJsonStyles;}));

package/package.json

@@ -1,16 +1,33 @@
 {
   "name": "xiangjsoncraft",
-  "version": "1.0.5",
-  "description": "",
-  "main": "renderJson.js",
+  "version": "1.1.1",
+  "description": "简单而强大的JSON配置与HTML页面渲染工具，支持任意CSS选择器、响应式设计、HTML内容动态注入，轻量无依赖",
+  "main": "dist/xiangjsoncraft.cjs.js",
+  "module": "dist/xiangjsoncraft.esm.js",
+  "browser": "dist/xiangjsoncraft.umd.js",
+  "files": [
+    "dist",
+    "renderJson.js",
+    "config.json",
+    "README.md",
+    "LICENSE"
+  ],
   "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rollup -c",
+    "dev": "npx serve ."
   },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "type": "commonjs",
-  "__npminstall_done": true,
-  "_from": "xiangjsoncraft@1.0.3",
-  "_resolved": "https://registry.npmmirror.com/xiangjsoncraft/-/xiangjsoncraft-1.0.3.tgz"
-}
+  "devDependencies": {
+    "rollup": "^4.12.0"
+  },
+  "keywords": [
+    "json-render",
+    "dynamic-css",
+    "html-render",
+    "json-config",
+    "frontend-tool",
+    "xiangjsoncraft"
+  ],
+  "author": "董翔 <3631247406@qq.com>",
+  "license": "MIT",
+  "homepage": "https://www.npmjs.com/package/xiangjsoncraft"
+}

package/renderJson.js

@@ -1,38 +1,92 @@
-// 定义 replaceCamelCase 方法
+// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
 String.prototype.replaceCamelCase = function (separator = '-') {
     return this.replace(/[A-Z]/g, function (match) {
         return separator + match.toLowerCase();
     });
 };
 
-// 封装 JSON 渲染函数
-function renderJson() {
-    // 使用 fetch API 获取 JSON 文件
-    fetch('./config.json')
+// 创建样式块并添加到文档头部
+function createStyleBlock() {
+    const style = document.createElement('style');
+    style.id = 'dynamic-styles';
+    document.head.appendChild(style);
+    return style;
+}
+
+// 封装通用JSON样式渲染函数，支持任意CSS选择器、HTML内容、媒体查询（v1.1.0核心功能）
+export function renderJsonStyles() {
+    // 动态适配CDN/本地环境的config.json路径（发布后双环境可用）
+    const isCdn = import.meta.url.includes('cdn.jsdelivr.net') || import.meta.url.includes('unpkg.com');
+    const configUrl = isCdn
+        ? 'https://cdn.jsdelivr.net/npm/xiangjsoncraft@1.1.1/config.json'
+        : './config.json';
+
+    // 使用fetch API获取JSON配置文件
+    fetch(configUrl)
         .then(response => {
-            // 检查响应是否成功
             if (!response.ok) {
-                throw new Error('网络响应失败');
+                throw new Error(`网络响应失败: ${response.status} (无法加载配置文件)`);
             }
-            // 将响应转换为 JSON 格式
             return response.json();
         })
         .then(config => {
-            // 动态创建样式表
-            const styleBlock = document.getElementById('style-block');
-            styleBlock.innerHTML = `
-                * { ${Object.entries(config.styles.body).map(([key, value]) => `${key}: ${value};`).join(' ')} }
-                header { ${Object.entries(config.styles.header).map(([key, value]) => `${key.replaceCamelCase()}: ${value};`).join(' ')} }
-                header p { ${Object.entries(config.styles.headerP).map(([key, value]) => `${key}: ${value};`).join(' ')} }
-            `;
-
-            // 动态设置内容
-            document.getElementById('header-text').innerText = config.content.headerText;
+            // 获取或创建样式块，避免重复创建
+            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
+            if (!styleBlock) return console.error('样式块创建失败，无法渲染样式');
+
+            // 生成CSS规则
+            let cssRules = '';
+
+            // 处理所有选择器样式（支持任意CSS选择器、媒体查询）
+            if (config.styles && typeof config.styles === 'object' && Object.keys(config.styles).length > 0) {
+                // 遍历所有选择器（类、ID、伪类、媒体查询等）
+                Object.entries(config.styles).forEach(([selector, styles]) => {
+                    // 过滤空样式，避免无效CSS
+                    if (!styles || typeof styles !== 'object') return;
+                    // 生成该选择器的所有样式属性
+                    const styleProperties = Object.entries(styles)
+                        .map(([prop, value]) => {
+                            // 过滤空属性，驼峰式属性名转换为CSS标准格式
+                            if (!prop || value === undefined || value === null) return '';
+                            const cssProp = prop.replaceCamelCase();
+                            return `${cssProp}: ${value};`;
+                        })
+                        .filter(Boolean) // 移除空属性
+                        .join('\n    ');
+
+                    // 仅当有样式属性时，添加到CSS规则
+                    if (styleProperties) {
+                        cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
+                    }
+                });
+            }
+
+            // 应用生成的CSS规则到样式块
+            if (cssRules) {
+                styleBlock.innerHTML = cssRules;
+            }
+
+            // 处理内容配置（支持纯文本/HTML内容，通过isHtml标识）
+            if (config.content && typeof config.content === 'object' && Object.keys(config.content).length > 0) {
+                Object.entries(config.content).forEach(([selector, content]) => {
+                    // 过滤无效选择器和内容
+                    if (!selector || !content || !content.hasOwnProperty('value')) return;
+                    const elements = document.querySelectorAll(selector);
+                    elements.forEach(el => {
+                        if (!el) return;
+                        // 支持HTML内容或纯文本，默认纯文本
+                        if (content.isHtml) {
+                            el.innerHTML = content.value;
+                        } else {
+                            el.textContent = content.value;
+                        }
+                    });
+                });
+            }
+
+            console.log('✅ XiangJsonCraft v1.1.0 渲染成功！');
         })
         .catch(error => {
-            console.error('获取 JSON 文件时出错:', error);
+            console.error('❌ XiangJsonCraft 处理样式配置时出错:', error.message);
         });
-}
-
-// 导出渲染函数
-export { renderJson };
+}

package/index.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Document</title>
-    <style id="style-block"></style> 
-</head>
-<body>
-    <header>
-        <p id="header-text"></p>
-    </header>
-    <!-- 引入外部 JavaScript 文件 -->
-    <script type="module">
-        import { renderJson } from './renderJson.js';
-        renderJson();
-    </script>
-</body>
-</html>