xiangjsoncraft 1.0.0 → 1.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Readme.md +181 -0
- package/package.json +1 -1
package/Readme.md
ADDED
|
@@ -0,0 +1,181 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
# XiangJsonCraft 官方文档
|
|
5
|
+
|
|
6
|
+
XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建。
|
|
7
|
+
|
|
8
|
+
## 特性
|
|
9
|
+
|
|
10
|
+
- **简单易用**：只需几行代码即可完成页面渲染
|
|
11
|
+
- **灵活配置**：通过 JSON 文件定义样式和内容
|
|
12
|
+
- **轻量级**：无额外依赖，体积小巧
|
|
13
|
+
|
|
14
|
+
## 安装
|
|
15
|
+
|
|
16
|
+
```bash
|
|
17
|
+
npm install xiangjsoncraft
|
|
18
|
+
```
|
|
19
|
+
|
|
20
|
+
## 快速开始
|
|
21
|
+
|
|
22
|
+
### 1. 创建 JSON 配置文件
|
|
23
|
+
|
|
24
|
+
首先，创建一个 JSON 配置文件 `config.json`，定义页面的样式和内容：
|
|
25
|
+
|
|
26
|
+
```json
|
|
27
|
+
{
|
|
28
|
+
"styles": {
|
|
29
|
+
"body": {
|
|
30
|
+
"margin": "0",
|
|
31
|
+
"padding": "0",
|
|
32
|
+
"boxSizing": "border-box"
|
|
33
|
+
},
|
|
34
|
+
"header": {
|
|
35
|
+
"display": "flex",
|
|
36
|
+
"justifyContent": "center",
|
|
37
|
+
"alignItems": "center",
|
|
38
|
+
"padding": "10px",
|
|
39
|
+
"backgroundColor": "azure"
|
|
40
|
+
},
|
|
41
|
+
"headerP": {
|
|
42
|
+
"color": "black",
|
|
43
|
+
"fontSize": "16px"
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
"content": {
|
|
47
|
+
"headerText": "Dynamic Header Text"
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
```
|
|
51
|
+
|
|
52
|
+
### 2. 创建 HTML 页面
|
|
53
|
+
|
|
54
|
+
然后，创建一个 HTML 页面 `index.html`，引入 JavaScript 文件：
|
|
55
|
+
|
|
56
|
+
```html
|
|
57
|
+
<!DOCTYPE html>
|
|
58
|
+
<html lang="en">
|
|
59
|
+
<head>
|
|
60
|
+
<meta charset="UTF-8">
|
|
61
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
62
|
+
<title>Document</title>
|
|
63
|
+
<style id="style-block"></style>
|
|
64
|
+
</head>
|
|
65
|
+
<body>
|
|
66
|
+
<header>
|
|
67
|
+
<p id="header-text"></p>
|
|
68
|
+
</header>
|
|
69
|
+
<!-- 引入外部 JavaScript 文件 -->
|
|
70
|
+
<script type="module">
|
|
71
|
+
import { renderJson } from './renderJson.js';
|
|
72
|
+
renderJson();
|
|
73
|
+
</script>
|
|
74
|
+
</body>
|
|
75
|
+
</html>
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
### 3. 编写渲染函数
|
|
79
|
+
|
|
80
|
+
在 `renderJson.js` 中编写渲染函数：
|
|
81
|
+
|
|
82
|
+
```javascript
|
|
83
|
+
// 定义 replaceCamelCase 方法
|
|
84
|
+
String.prototype.replaceCamelCase = function (separator = '-') {
|
|
85
|
+
return this.replace(/[A-Z]/g, function (match) {
|
|
86
|
+
return separator + match.toLowerCase();
|
|
87
|
+
});
|
|
88
|
+
};
|
|
89
|
+
|
|
90
|
+
// 封装 JSON 渲染函数
|
|
91
|
+
function renderJson() {
|
|
92
|
+
// 使用 fetch API 获取 JSON 文件
|
|
93
|
+
fetch('./config.json')
|
|
94
|
+
.then(response => {
|
|
95
|
+
// 检查响应是否成功
|
|
96
|
+
if (!response.ok) {
|
|
97
|
+
throw new Error('网络响应失败');
|
|
98
|
+
}
|
|
99
|
+
// 将响应转换为 JSON 格式
|
|
100
|
+
return response.json();
|
|
101
|
+
})
|
|
102
|
+
.then(config => {
|
|
103
|
+
// 动态创建样式表
|
|
104
|
+
const styleBlock = document.getElementById('style-block');
|
|
105
|
+
styleBlock.innerHTML = `
|
|
106
|
+
* { ${Object.entries(config.styles.body).map(([key, value]) => `${key}: ${value};`).join(' ')} }
|
|
107
|
+
header { ${Object.entries(config.styles.header).map(([key, value]) => `${key.replaceCamelCase()}: ${value};`).join(' ')} }
|
|
108
|
+
header p { ${Object.entries(config.styles.headerP).map(([key, value]) => `${key}: ${value};`).join(' ')} }
|
|
109
|
+
`;
|
|
110
|
+
|
|
111
|
+
// 动态设置内容
|
|
112
|
+
document.getElementById('header-text').innerText = config.content.headerText;
|
|
113
|
+
})
|
|
114
|
+
.catch(error => {
|
|
115
|
+
console.error('获取 JSON 文件时出错:', error);
|
|
116
|
+
});
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
// 导出渲染函数
|
|
120
|
+
export { renderJson };
|
|
121
|
+
```
|
|
122
|
+
|
|
123
|
+
### 4. 运行项目
|
|
124
|
+
|
|
125
|
+
在浏览器中打开 `index.html` 文件，即可看到渲染后的页面。
|
|
126
|
+
|
|
127
|
+
## API 文档
|
|
128
|
+
|
|
129
|
+
### `renderJson()`
|
|
130
|
+
|
|
131
|
+
从 `config.json` 文件中读取样式和内容配置，并将其应用到 HTML 页面中。
|
|
132
|
+
|
|
133
|
+
#### 示例
|
|
134
|
+
|
|
135
|
+
```javascript
|
|
136
|
+
import { renderJson } from './renderJson.js';
|
|
137
|
+
renderJson();
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
## 贡献指南
|
|
141
|
+
|
|
142
|
+
我们欢迎任何人贡献代码或提出建议。如果你想参与开发，请遵循以下步骤：
|
|
143
|
+
|
|
144
|
+
1. 克隆仓库：`git clone https://github.com/dxiang-wiki/xiangjsoncraft.git`
|
|
145
|
+
2. 创建新分支：`git checkout -b feature/your-feature`
|
|
146
|
+
3. 提交代码：`git commit -m "Add your feature"`
|
|
147
|
+
4. 推送分支：`git push origin feature/your-feature`
|
|
148
|
+
5. 创建 Pull Request
|
|
149
|
+
|
|
150
|
+
## 许可证
|
|
151
|
+
|
|
152
|
+
MIT License
|
|
153
|
+
|
|
154
|
+
Copyright (c) 2025 xiang
|
|
155
|
+
|
|
156
|
+
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
157
|
+
of this software and associated documentation files (the "Software"), to deal
|
|
158
|
+
in the Software without restriction, including without limitation the rights
|
|
159
|
+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
|
160
|
+
copies of the Software, and to permit persons to whom the Software is
|
|
161
|
+
furnished to do so, subject to the following conditions:
|
|
162
|
+
|
|
163
|
+
The above copyright notice and this permission notice shall be included in all
|
|
164
|
+
copies or substantial portions of the Software.
|
|
165
|
+
|
|
166
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
|
167
|
+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
|
168
|
+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
|
169
|
+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
|
170
|
+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
|
171
|
+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
|
172
|
+
SOFTWARE.
|
|
173
|
+
|
|
174
|
+
## 联系我们
|
|
175
|
+
|
|
176
|
+
如果你有任何问题或建议，请通过以下方式联系我们：
|
|
177
|
+
|
|
178
|
+
- GitHub Issues: https://github.com/dxiang-wiki/xiangjsoncraft/issues
|
|
179
|
+
- Email: 3631247406@qq.com
|
|
180
|
+
|
|
181
|
+
感谢使用 XiangJsonCraft！
|