xiangjsoncraft 1.0.1 → 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 +80 -214
- package/package.json +1 -1
package/Readme.md
CHANGED
|
@@ -1,18 +1,15 @@
|
|
|
1
|
-
### XiangJsonCraft - 轻量级JSON配置与模板渲染工具
|
|
2
1
|
|
|
3
2
|
|
|
4
3
|
|
|
5
|
-
# XiangJsonCraft
|
|
4
|
+
# XiangJsonCraft 官方文档
|
|
6
5
|
|
|
7
|
-
XiangJsonCraft是一个简单而强大的JSON配置与HTML
|
|
6
|
+
XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建。
|
|
8
7
|
|
|
9
8
|
## 特性
|
|
10
9
|
|
|
11
|
-
-
|
|
12
|
-
- **灵活配置**：通过JSON文件定义样式和内容
|
|
10
|
+
- **简单易用**：只需几行代码即可完成页面渲染
|
|
11
|
+
- **灵活配置**：通过 JSON 文件定义样式和内容
|
|
13
12
|
- **轻量级**：无额外依赖，体积小巧
|
|
14
|
-
- **高效渲染**：支持批量处理和动态更新
|
|
15
|
-
- **类型安全**：提供完整的TypeScript类型定义
|
|
16
13
|
|
|
17
14
|
## 安装
|
|
18
15
|
|
|
@@ -22,270 +19,139 @@ npm install xiangjsoncraft
|
|
|
22
19
|
|
|
23
20
|
## 快速开始
|
|
24
21
|
|
|
25
|
-
### 1. 创建JSON配置文件
|
|
22
|
+
### 1. 创建 JSON 配置文件
|
|
26
23
|
|
|
27
|
-
首先，创建一个JSON
|
|
24
|
+
首先，创建一个 JSON 配置文件 `config.json`，定义页面的样式和内容：
|
|
28
25
|
|
|
29
26
|
```json
|
|
30
|
-
// config.json
|
|
31
27
|
{
|
|
32
28
|
"styles": {
|
|
33
29
|
"body": {
|
|
34
30
|
"margin": "0",
|
|
35
31
|
"padding": "0",
|
|
36
|
-
"
|
|
32
|
+
"boxSizing": "border-box"
|
|
37
33
|
},
|
|
38
34
|
"header": {
|
|
39
|
-
"
|
|
40
|
-
"
|
|
41
|
-
"
|
|
42
|
-
"
|
|
35
|
+
"display": "flex",
|
|
36
|
+
"justifyContent": "center",
|
|
37
|
+
"alignItems": "center",
|
|
38
|
+
"padding": "10px",
|
|
39
|
+
"backgroundColor": "azure"
|
|
43
40
|
},
|
|
44
|
-
"
|
|
45
|
-
"
|
|
46
|
-
"
|
|
47
|
-
"padding": "20px"
|
|
41
|
+
"headerP": {
|
|
42
|
+
"color": "black",
|
|
43
|
+
"fontSize": "16px"
|
|
48
44
|
}
|
|
49
45
|
},
|
|
50
46
|
"content": {
|
|
51
|
-
"
|
|
52
|
-
"subtitle": "简单高效的JSON配置与模板渲染工具",
|
|
53
|
-
"paragraph": "XiangJsonCraft让你可以通过JSON配置文件轻松定义页面样式和内容，无需编写复杂的CSS和JavaScript代码。"
|
|
47
|
+
"headerText": "Dynamic Header Text"
|
|
54
48
|
}
|
|
55
49
|
}
|
|
56
50
|
```
|
|
57
51
|
|
|
58
|
-
### 2. 创建HTML
|
|
52
|
+
### 2. 创建 HTML 页面
|
|
59
53
|
|
|
60
|
-
然后，创建一个HTML
|
|
54
|
+
然后，创建一个 HTML 页面 `index.html`，引入 JavaScript 文件：
|
|
61
55
|
|
|
62
56
|
```html
|
|
63
|
-
<!-- template.html -->
|
|
64
57
|
<!DOCTYPE html>
|
|
65
|
-
<html lang="
|
|
58
|
+
<html lang="en">
|
|
66
59
|
<head>
|
|
67
60
|
<meta charset="UTF-8">
|
|
68
61
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
69
|
-
<title>
|
|
70
|
-
<style id="
|
|
62
|
+
<title>Document</title>
|
|
63
|
+
<style id="style-block"></style>
|
|
71
64
|
</head>
|
|
72
65
|
<body>
|
|
73
|
-
<header
|
|
74
|
-
<
|
|
75
|
-
<p>{{subtitle}}</p>
|
|
66
|
+
<header>
|
|
67
|
+
<p id="header-text"></p>
|
|
76
68
|
</header>
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
69
|
+
<!-- 引入外部 JavaScript 文件 -->
|
|
70
|
+
<script type="module">
|
|
71
|
+
import { renderJson } from './renderJson.js';
|
|
72
|
+
renderJson();
|
|
73
|
+
</script>
|
|
80
74
|
</body>
|
|
81
75
|
</html>
|
|
82
76
|
```
|
|
83
77
|
|
|
84
|
-
### 3.
|
|
78
|
+
### 3. 编写渲染函数
|
|
85
79
|
|
|
86
|
-
|
|
80
|
+
在 `renderJson.js` 中编写渲染函数：
|
|
87
81
|
|
|
88
82
|
```javascript
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
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
|
+
}
|
|
102
118
|
|
|
103
|
-
//
|
|
104
|
-
|
|
119
|
+
// 导出渲染函数
|
|
120
|
+
export { renderJson };
|
|
105
121
|
```
|
|
106
122
|
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
### `renderTemplate(template: string, config: Config): string`
|
|
123
|
+
### 4. 运行项目
|
|
110
124
|
|
|
111
|
-
|
|
125
|
+
在浏览器中打开 `index.html` 文件，即可看到渲染后的页面。
|
|
112
126
|
|
|
113
|
-
|
|
127
|
+
## API 文档
|
|
114
128
|
|
|
115
|
-
|
|
116
|
-
- `config`: 对象，包含样式和内容配置
|
|
129
|
+
### `renderJson()`
|
|
117
130
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
- 字符串，渲染后的HTML内容
|
|
131
|
+
从 `config.json` 文件中读取样式和内容配置，并将其应用到 HTML 页面中。
|
|
121
132
|
|
|
122
133
|
#### 示例
|
|
123
134
|
|
|
124
135
|
```javascript
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
container: {
|
|
128
|
-
backgroundColor: 'lightblue',
|
|
129
|
-
padding: '10px'
|
|
130
|
-
}
|
|
131
|
-
},
|
|
132
|
-
content: {
|
|
133
|
-
title: 'Hello, XiangJsonCraft!'
|
|
134
|
-
}
|
|
135
|
-
});
|
|
136
|
-
|
|
137
|
-
console.log(renderedHtml);
|
|
138
|
-
// 输出: <div class="container" style="background-color: lightblue; padding: 10px;">Hello, XiangJsonCraft!</div>
|
|
139
|
-
```
|
|
140
|
-
|
|
141
|
-
### 配置文件格式
|
|
142
|
-
|
|
143
|
-
配置文件是一个JSON对象，包含两个主要属性：
|
|
144
|
-
|
|
145
|
-
#### `styles`
|
|
146
|
-
|
|
147
|
-
定义CSS样式的对象，每个键对应一个HTML元素的类名或ID，值是CSS属性的键值对。
|
|
148
|
-
|
|
149
|
-
```json
|
|
150
|
-
{
|
|
151
|
-
"styles": {
|
|
152
|
-
"myClass": {
|
|
153
|
-
"color": "red",
|
|
154
|
-
"fontSize": "16px"
|
|
155
|
-
},
|
|
156
|
-
"#myId": {
|
|
157
|
-
"backgroundColor": "blue",
|
|
158
|
-
"width": "100px"
|
|
159
|
-
}
|
|
160
|
-
}
|
|
161
|
-
}
|
|
162
|
-
```
|
|
163
|
-
|
|
164
|
-
#### `content`
|
|
165
|
-
|
|
166
|
-
定义动态内容的对象，键对应HTML模板中的占位符（如`{{title}}`），值是要替换的内容。
|
|
167
|
-
|
|
168
|
-
```json
|
|
169
|
-
{
|
|
170
|
-
"content": {
|
|
171
|
-
"title": "页面标题",
|
|
172
|
-
"description": "这是一个描述文本"
|
|
173
|
-
}
|
|
174
|
-
}
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
## 高级用法
|
|
178
|
-
|
|
179
|
-
### 批量处理多个模板
|
|
180
|
-
|
|
181
|
-
你可以使用XiangJsonCraft批量处理多个模板文件：
|
|
182
|
-
|
|
183
|
-
```javascript
|
|
184
|
-
const { renderTemplate } = require('xiangjsoncraft');
|
|
185
|
-
const fs = require('fs');
|
|
186
|
-
const path = require('path');
|
|
187
|
-
|
|
188
|
-
// 读取配置文件
|
|
189
|
-
const config = JSON.parse(fs.readFileSync(path.join(__dirname, 'config.json'), 'utf8'));
|
|
190
|
-
|
|
191
|
-
// 读取模板目录中的所有文件
|
|
192
|
-
const templatesDir = path.join(__dirname, 'templates');
|
|
193
|
-
const outputDir = path.join(__dirname, 'output');
|
|
194
|
-
|
|
195
|
-
// 确保输出目录存在
|
|
196
|
-
if (!fs.existsSync(outputDir)) {
|
|
197
|
-
fs.mkdirSync(outputDir);
|
|
198
|
-
}
|
|
199
|
-
|
|
200
|
-
// 读取所有模板文件并渲染
|
|
201
|
-
fs.readdirSync(templatesDir).forEach(file => {
|
|
202
|
-
if (file.endsWith('.html')) {
|
|
203
|
-
const templatePath = path.join(templatesDir, file);
|
|
204
|
-
const template = fs.readFileSync(templatePath, 'utf8');
|
|
205
|
-
|
|
206
|
-
// 渲染模板
|
|
207
|
-
const renderedHtml = renderTemplate(template, config);
|
|
208
|
-
|
|
209
|
-
// 保存渲染结果
|
|
210
|
-
const outputPath = path.join(outputDir, file);
|
|
211
|
-
fs.writeFileSync(outputPath, renderedHtml);
|
|
212
|
-
|
|
213
|
-
console.log(`已渲染并保存: ${file}`);
|
|
214
|
-
}
|
|
215
|
-
});
|
|
216
|
-
```
|
|
217
|
-
|
|
218
|
-
### 在浏览器中使用
|
|
219
|
-
|
|
220
|
-
XiangJsonCraft也可以在浏览器环境中使用：
|
|
221
|
-
|
|
222
|
-
```html
|
|
223
|
-
<!DOCTYPE html>
|
|
224
|
-
<html lang="zh-CN">
|
|
225
|
-
<head>
|
|
226
|
-
<meta charset="UTF-8">
|
|
227
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
228
|
-
<title>浏览器中使用XiangJsonCraft</title>
|
|
229
|
-
<script src="https://cdn.jsdelivr.net/npm/xiangjsoncraft/dist/xiangjsoncraft.min.js"></script>
|
|
230
|
-
</head>
|
|
231
|
-
<body>
|
|
232
|
-
<div id="app"></div>
|
|
233
|
-
|
|
234
|
-
<script>
|
|
235
|
-
// 定义配置
|
|
236
|
-
const config = {
|
|
237
|
-
styles: {
|
|
238
|
-
app: {
|
|
239
|
-
maxWidth: '600px',
|
|
240
|
-
margin: '0 auto',
|
|
241
|
-
padding: '20px',
|
|
242
|
-
border: '1px solid #ddd',
|
|
243
|
-
borderRadius: '5px'
|
|
244
|
-
},
|
|
245
|
-
title: {
|
|
246
|
-
color: '#3498db',
|
|
247
|
-
textAlign: 'center'
|
|
248
|
-
}
|
|
249
|
-
},
|
|
250
|
-
content: {
|
|
251
|
-
title: '欢迎使用XiangJsonCraft',
|
|
252
|
-
message: '这是在浏览器中使用XiangJsonCraft的示例。'
|
|
253
|
-
}
|
|
254
|
-
};
|
|
255
|
-
|
|
256
|
-
// 定义模板
|
|
257
|
-
const template = `
|
|
258
|
-
<div class="app">
|
|
259
|
-
<h1 class="title">{{title}}</h1>
|
|
260
|
-
<p>{{message}}</p>
|
|
261
|
-
</div>
|
|
262
|
-
`;
|
|
263
|
-
|
|
264
|
-
// 渲染模板
|
|
265
|
-
const renderedHtml = XiangJsonCraft.renderTemplate(template, config);
|
|
266
|
-
|
|
267
|
-
// 将渲染结果插入到DOM中
|
|
268
|
-
document.getElementById('app').innerHTML = renderedHtml;
|
|
269
|
-
</script>
|
|
270
|
-
</body>
|
|
271
|
-
</html>
|
|
136
|
+
import { renderJson } from './renderJson.js';
|
|
137
|
+
renderJson();
|
|
272
138
|
```
|
|
273
139
|
|
|
274
140
|
## 贡献指南
|
|
275
141
|
|
|
276
142
|
我们欢迎任何人贡献代码或提出建议。如果你想参与开发，请遵循以下步骤：
|
|
277
143
|
|
|
278
|
-
1. 克隆仓库：`git clone https://github.com/
|
|
144
|
+
1. 克隆仓库：`git clone https://github.com/dxiang-wiki/xiangjsoncraft.git`
|
|
279
145
|
2. 创建新分支：`git checkout -b feature/your-feature`
|
|
280
146
|
3. 提交代码：`git commit -m "Add your feature"`
|
|
281
147
|
4. 推送分支：`git push origin feature/your-feature`
|
|
282
|
-
5. 创建Pull Request
|
|
148
|
+
5. 创建 Pull Request
|
|
283
149
|
|
|
284
150
|
## 许可证
|
|
285
151
|
|
|
286
152
|
MIT License
|
|
287
153
|
|
|
288
|
-
Copyright (c)
|
|
154
|
+
Copyright (c) 2025 xiang
|
|
289
155
|
|
|
290
156
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
|
291
157
|
of this software and associated documentation files (the "Software"), to deal
|
|
@@ -309,7 +175,7 @@ SOFTWARE.
|
|
|
309
175
|
|
|
310
176
|
如果你有任何问题或建议，请通过以下方式联系我们：
|
|
311
177
|
|
|
312
|
-
- GitHub Issues: https://github.com/
|
|
313
|
-
- Email:
|
|
178
|
+
- GitHub Issues: https://github.com/dxiang-wiki/xiangjsoncraft/issues
|
|
179
|
+
- Email: 3631247406@qq.com
|
|
314
180
|
|
|
315
|
-
感谢使用XiangJsonCraft！
|
|
181
|
+
感谢使用 XiangJsonCraft！
|