xiangjsoncraft 2.0.2 → 2.0.4
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 +1 -1
- package/package.json +19 -10
- package/bin/create.js +0 -223
- package/rollup.config.js +0 -17
- package/template/config.json +0 -234
- package/template/index.html +0 -53
package/README.md
CHANGED
package/package.json
CHANGED
|
@@ -1,17 +1,26 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "xiangjsoncraft",
|
|
3
|
-
"version": "2.0.
|
|
4
|
-
"description": "XiangJsonCraft 2.0
|
|
3
|
+
"version": "2.0.4",
|
|
4
|
+
"description": "XiangJsonCraft 2.0 - 纯JSON驱动的轻量级前端框架",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"scripts": {
|
|
7
|
-
"
|
|
8
|
-
"test": "echo \"XiangJsonCraft
|
|
9
|
-
},
|
|
10
|
-
"dependencies": {
|
|
11
|
-
"xiangjsoncraft": "^2.0.2"
|
|
7
|
+
"build": "rollup -c rollup.config.js",
|
|
8
|
+
"test": "echo \"XiangJsonCraft 框架测试成功！\""
|
|
12
9
|
},
|
|
10
|
+
"files": [
|
|
11
|
+
"dist",
|
|
12
|
+
"src",
|
|
13
|
+
"LICENSE",
|
|
14
|
+
"README.md",
|
|
15
|
+
"package.json"
|
|
16
|
+
],
|
|
17
|
+
"dependencies": {},
|
|
13
18
|
"devDependencies": {
|
|
14
|
-
"
|
|
19
|
+
"rollup": "^4.57.1"
|
|
15
20
|
},
|
|
16
|
-
"license": "MIT"
|
|
17
|
-
|
|
21
|
+
"license": "MIT",
|
|
22
|
+
"repository": {
|
|
23
|
+
"type": "git",
|
|
24
|
+
"url": "https://github.com/你的账号/xiangjsoncraft.git"
|
|
25
|
+
}
|
|
26
|
+
}
|
package/bin/create.js
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
#!/usr/bin/env node
|
|
2
|
-
import fs from 'fs-extra';
|
|
3
|
-
import path from 'path';
|
|
4
|
-
import { fileURLToPath } from 'url';
|
|
5
|
-
import inquirer from 'inquirer';
|
|
6
|
-
import chalk from 'chalk';
|
|
7
|
-
import ora from 'ora';
|
|
8
|
-
|
|
9
|
-
// 解决 ESModule __dirname 问题
|
|
10
|
-
const __filename = fileURLToPath(import.meta.url);
|
|
11
|
-
const __dirname = path.dirname(__filename);
|
|
12
|
-
|
|
13
|
-
// 框架根目录
|
|
14
|
-
const frameworkRoot = path.resolve(__dirname, '..');
|
|
15
|
-
// 模板目录
|
|
16
|
-
const templateDir = path.join(frameworkRoot, 'template');
|
|
17
|
-
|
|
18
|
-
// 欢迎信息
|
|
19
|
-
console.log(chalk.blue(`
|
|
20
|
-
┌─────────────────────────────────┐
|
|
21
|
-
│ XiangJsonCraft 2.0.1 │
|
|
22
|
-
│ Write JSON, Get a Website │
|
|
23
|
-
└─────────────────────────────────┘
|
|
24
|
-
`));
|
|
25
|
-
|
|
26
|
-
// 第一步：获取项目名称（从命令行参数）
|
|
27
|
-
const args = process.argv.slice(2);
|
|
28
|
-
let projectName = args[0] || 'xiangjsoncraft-app';
|
|
29
|
-
|
|
30
|
-
// 第二步：确认创建项目
|
|
31
|
-
const confirmAnswers = await inquirer.prompt([
|
|
32
|
-
{
|
|
33
|
-
type: 'confirm',
|
|
34
|
-
name: 'confirmCreate',
|
|
35
|
-
message: `是否要创建项目「${projectName}」？`,
|
|
36
|
-
default: true
|
|
37
|
-
}
|
|
38
|
-
]);
|
|
39
|
-
|
|
40
|
-
if (!confirmAnswers.confirmCreate) {
|
|
41
|
-
console.log(chalk.yellow('✅ 项目创建已取消'));
|
|
42
|
-
process.exit(0);
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
// 第三步：选择模板（仅保留基础模板，确保核心功能）
|
|
46
|
-
const templateAnswers = await inquirer.prompt([
|
|
47
|
-
{
|
|
48
|
-
type: 'list',
|
|
49
|
-
name: 'template',
|
|
50
|
-
message: '请选择项目模板：',
|
|
51
|
-
choices: [
|
|
52
|
-
{ name: '基础模板（快速上手）', value: 'basic' }
|
|
53
|
-
],
|
|
54
|
-
default: 'basic'
|
|
55
|
-
}
|
|
56
|
-
]);
|
|
57
|
-
|
|
58
|
-
// 第四步：创建项目
|
|
59
|
-
const spinner = ora('正在创建项目...').start();
|
|
60
|
-
try {
|
|
61
|
-
// 项目目标目录
|
|
62
|
-
const projectDir = path.resolve(process.cwd(), projectName);
|
|
63
|
-
|
|
64
|
-
// 检查目录是否已存在
|
|
65
|
-
if (fs.existsSync(projectDir)) {
|
|
66
|
-
spinner.fail(chalk.red('❌ 项目目录已存在，请删除后重试'));
|
|
67
|
-
process.exit(1);
|
|
68
|
-
}
|
|
69
|
-
|
|
70
|
-
// 1. 创建项目目录
|
|
71
|
-
fs.ensureDirSync(projectDir);
|
|
72
|
-
|
|
73
|
-
// 2. 生成 package.json（修复本地路径依赖问题）
|
|
74
|
-
// 生成 package.json（核心：删除本地路径，改用 npm 版本）
|
|
75
|
-
const packageJson = {
|
|
76
|
-
"name": projectName,
|
|
77
|
-
"version": "1.0.0",
|
|
78
|
-
"description": "XiangJsonCraft 项目",
|
|
79
|
-
"type": "module",
|
|
80
|
-
"scripts": {
|
|
81
|
-
"start": "npx serve .",
|
|
82
|
-
"test": "echo \"Error: no test specified\" && exit 1"
|
|
83
|
-
},
|
|
84
|
-
"dependencies": {
|
|
85
|
-
|
|
86
|
-
"xiangjsoncraft": "^2.0.1"
|
|
87
|
-
},
|
|
88
|
-
"license": "MIT"
|
|
89
|
-
};
|
|
90
|
-
fs.writeJsonSync(path.join(projectDir, 'package.json'), packageJson, { spaces: 2 });
|
|
91
|
-
|
|
92
|
-
// 3. 生成核心文件（解决空壳问题）
|
|
93
|
-
// 3.1 生成 index.html（核心入口）
|
|
94
|
-
const indexHtml = `<!DOCTYPE html>
|
|
95
|
-
<html lang="zh-CN">
|
|
96
|
-
<head>
|
|
97
|
-
<meta charset="UTF-8">
|
|
98
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
99
|
-
<title>${projectName} - XiangJsonCraft 2.0</title>
|
|
100
|
-
<!-- 引入框架核心 -->
|
|
101
|
-
<script src="./node_modules/xiangjsoncraft/dist/xiangjsoncraft.umd.js"></script>
|
|
102
|
-
</head>
|
|
103
|
-
<body>
|
|
104
|
-
<div id="app"></div>
|
|
105
|
-
<!-- 引入配置文件 -->
|
|
106
|
-
<script type="module">
|
|
107
|
-
import config from './config.json' assert { type: 'json' };
|
|
108
|
-
// 渲染 JSON 配置
|
|
109
|
-
window.XiangJsonCraft.render(config, document.getElementById('app'));
|
|
110
|
-
</script>
|
|
111
|
-
</body>
|
|
112
|
-
</html>`;
|
|
113
|
-
fs.writeFileSync(path.join(projectDir, 'index.html'), indexHtml);
|
|
114
|
-
|
|
115
|
-
// 3.2 生成 config.json（核心配置文件）
|
|
116
|
-
const configJson = {
|
|
117
|
-
"framework": "XiangJsonCraft 2.0.1",
|
|
118
|
-
"styles": {
|
|
119
|
-
"body": {
|
|
120
|
-
"backgroundColor": "#f0f4f8",
|
|
121
|
-
"minHeight": "100vh",
|
|
122
|
-
"margin": "0",
|
|
123
|
-
"padding": "20px",
|
|
124
|
-
"fontFamily": "Arial, sans-serif"
|
|
125
|
-
},
|
|
126
|
-
"#app": {
|
|
127
|
-
"maxWidth": "1200px",
|
|
128
|
-
"margin": "0 auto"
|
|
129
|
-
},
|
|
130
|
-
".app-title": {
|
|
131
|
-
"fontSize": "2rem",
|
|
132
|
-
"color": "#2d3748",
|
|
133
|
-
"textAlign": "center",
|
|
134
|
-
"marginBottom": "40px"
|
|
135
|
-
},
|
|
136
|
-
".app-desc": {
|
|
137
|
-
"fontSize": "1.2rem",
|
|
138
|
-
"color": "#4a5568",
|
|
139
|
-
"textAlign": "center"
|
|
140
|
-
}
|
|
141
|
-
},
|
|
142
|
-
"content": {
|
|
143
|
-
".app-title": {
|
|
144
|
-
"value": "欢迎使用 XiangJsonCraft 2.0.1",
|
|
145
|
-
"isHtml": false
|
|
146
|
-
},
|
|
147
|
-
".app-desc": {
|
|
148
|
-
"value": "零CSS零JS、纯JSON驱动的轻量前端框架",
|
|
149
|
-
"isHtml": false
|
|
150
|
-
}
|
|
151
|
-
}
|
|
152
|
-
};
|
|
153
|
-
fs.writeJsonSync(path.join(projectDir, 'config.json'), configJson, { spaces: 2 });
|
|
154
|
-
|
|
155
|
-
// 3.3 生成 README.md（使用说明）
|
|
156
|
-
const readmeMd = `# ${projectName}
|
|
157
|
-
基于 XiangJsonCraft 2.0.1 的项目
|
|
158
|
-
|
|
159
|
-
## 快速开始
|
|
160
|
-
1. 安装依赖：
|
|
161
|
-
npm install
|
|
162
|
-
|
|
163
|
-
2. 启动开发服务器：
|
|
164
|
-
npm run start
|
|
165
|
-
|
|
166
|
-
3. 自定义项目：
|
|
167
|
-
修改 config.json 文件（所有样式/内容/交互都在这里配置）
|
|
168
|
-
|
|
169
|
-
## 核心特性
|
|
170
|
-
- 纯 JSON 驱动，无需编写 CSS/JS
|
|
171
|
-
- 响应式布局，适配所有设备
|
|
172
|
-
- 实时热更新，修改配置立即生效
|
|
173
|
-
- 零配置部署，直接上传文件即可发布
|
|
174
|
-
`;
|
|
175
|
-
fs.writeFileSync(path.join(projectDir, 'README.md'), readmeMd);
|
|
176
|
-
|
|
177
|
-
spinner.succeed(chalk.green(`✅ 项目「${projectName}」创建成功！`));
|
|
178
|
-
|
|
179
|
-
// 第五步：安装依赖提示
|
|
180
|
-
const installAnswers = await inquirer.prompt([
|
|
181
|
-
{
|
|
182
|
-
type: 'confirm',
|
|
183
|
-
name: 'confirmInstall',
|
|
184
|
-
message: '是否立即安装项目依赖？',
|
|
185
|
-
default: true
|
|
186
|
-
}
|
|
187
|
-
]);
|
|
188
|
-
|
|
189
|
-
if (installAnswers.confirmInstall) {
|
|
190
|
-
const installSpinner = ora('正在安装依赖...').start();
|
|
191
|
-
try {
|
|
192
|
-
// 切换到项目目录执行安装
|
|
193
|
-
const { execSync } = await import('child_process');
|
|
194
|
-
execSync('npm install --legacy-peer-deps', {
|
|
195
|
-
cwd: projectDir,
|
|
196
|
-
stdio: 'ignore'
|
|
197
|
-
});
|
|
198
|
-
installSpinner.succeed(chalk.green('✅ 依赖安装成功！'));
|
|
199
|
-
} catch (err) {
|
|
200
|
-
installSpinner.fail(chalk.yellow('⚠️ 依赖安装失败，请手动进入项目目录执行 npm install --legacy-peer-deps'));
|
|
201
|
-
}
|
|
202
|
-
}
|
|
203
|
-
|
|
204
|
-
// 输出使用指南
|
|
205
|
-
console.log(chalk.cyan(`
|
|
206
|
-
使用指南
|
|
207
|
-
1. 进入项目目录：
|
|
208
|
-
cd ${projectName}
|
|
209
|
-
2. 启动开发服务器：
|
|
210
|
-
npm run start
|
|
211
|
-
3. 自定义项目：
|
|
212
|
-
修改 config.json 文件（所有样式/内容/交互都在这里配置）
|
|
213
|
-
4. 部署上线：
|
|
214
|
-
直接将项目文件上传到服务器即可，无需打包
|
|
215
|
-
|
|
216
|
-
📚 官方文档：https://github.com/dxiangwiki/xiangjsoncraft
|
|
217
|
-
💡 提示：必须使用本地服务器运行，不能直接打开HTML文件！
|
|
218
|
-
`));
|
|
219
|
-
|
|
220
|
-
} catch (err) {
|
|
221
|
-
spinner.fail(chalk.red(`❌ 项目创建失败：${err.message}`));
|
|
222
|
-
process.exit(1);
|
|
223
|
-
}
|
package/rollup.config.js
DELETED
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import terser from '@rollup/plugin-terser';
|
|
2
|
-
|
|
3
|
-
export default {
|
|
4
|
-
input: 'src/renderJson.js', // 你的核心渲染文件
|
|
5
|
-
output: {
|
|
6
|
-
file: 'dist/xiangjsoncraft.umd.js',
|
|
7
|
-
format: 'umd', // UMD 格式兼容浏览器/Node.js
|
|
8
|
-
name: 'XiangJsonCraft', // 全局变量名，对应 window.XiangJsonCraft
|
|
9
|
-
globals: {},
|
|
10
|
-
// ✅ 确保打包后的代码兼容低版本浏览器
|
|
11
|
-
compact: true,
|
|
12
|
-
sourcemap: false
|
|
13
|
-
},
|
|
14
|
-
plugins: [
|
|
15
|
-
terser() // 压缩但不改变语法
|
|
16
|
-
]
|
|
17
|
-
};
|
package/template/config.json
DELETED
|
@@ -1,234 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"styles": {
|
|
3
|
-
"*": {
|
|
4
|
-
"margin": "0",
|
|
5
|
-
"padding": "0",
|
|
6
|
-
"boxSizing": "border-box",
|
|
7
|
-
"fontFamily": "'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif"
|
|
8
|
-
},
|
|
9
|
-
"body": {
|
|
10
|
-
"backgroundColor": "#f0f4f8",
|
|
11
|
-
"color": "#334e68",
|
|
12
|
-
"lineHeight": "1.6",
|
|
13
|
-
"transition": "backgroundColor 0.5s ease",
|
|
14
|
-
"minHeight": "100vh"
|
|
15
|
-
},
|
|
16
|
-
".welcome-container": {
|
|
17
|
-
"maxWidth": "1200px",
|
|
18
|
-
"margin": "0 auto",
|
|
19
|
-
"padding": "20px"
|
|
20
|
-
},
|
|
21
|
-
".welcome-header": {
|
|
22
|
-
"textAlign": "center",
|
|
23
|
-
"padding": "60px 20px",
|
|
24
|
-
"marginBottom": "40px",
|
|
25
|
-
"borderRadius": "12px",
|
|
26
|
-
"background": "linear-gradient(135deg, #4299e1, #63b3ed)",
|
|
27
|
-
"color": "white",
|
|
28
|
-
"boxShadow": "0 10px 25px -5px rgba(66, 153, 225, 0.3)",
|
|
29
|
-
"transition": "transform 0.5s ease, boxShadow 0.5s ease"
|
|
30
|
-
},
|
|
31
|
-
".welcome-header:hover": {
|
|
32
|
-
"transform": "translateY(-5px)",
|
|
33
|
-
"boxShadow": "0 15px 30px -8px rgba(66, 153, 225, 0.4)"
|
|
34
|
-
},
|
|
35
|
-
".logo-container": {
|
|
36
|
-
"marginBottom": "30px"
|
|
37
|
-
},
|
|
38
|
-
".logo": {
|
|
39
|
-
"width": "120px",
|
|
40
|
-
"height": "120px",
|
|
41
|
-
"margin": "0 auto",
|
|
42
|
-
"backgroundColor": "white",
|
|
43
|
-
"borderRadius": "50%",
|
|
44
|
-
"display": "flex",
|
|
45
|
-
"alignItems": "center",
|
|
46
|
-
"justifyContent": "center",
|
|
47
|
-
"fontSize": "48px",
|
|
48
|
-
"color": "#4299e1",
|
|
49
|
-
"boxShadow": "0 4px 12px rgba(0, 0, 0, 0.1)"
|
|
50
|
-
},
|
|
51
|
-
".logo::after": {
|
|
52
|
-
"content": "'J'",
|
|
53
|
-
"fontWeight": "bold"
|
|
54
|
-
},
|
|
55
|
-
".main-title": {
|
|
56
|
-
"fontSize": "2.5rem",
|
|
57
|
-
"marginBottom": "15px",
|
|
58
|
-
"textShadow": "0 2px 4px rgba(0, 0, 0, 0.1)"
|
|
59
|
-
},
|
|
60
|
-
"@media (maxWidth: 768px)": {
|
|
61
|
-
".main-title": {
|
|
62
|
-
"fontSize": "2rem"
|
|
63
|
-
}
|
|
64
|
-
},
|
|
65
|
-
".subtitle": {
|
|
66
|
-
"fontSize": "1.1rem",
|
|
67
|
-
"opacity": "0.9",
|
|
68
|
-
"maxWidth": "600px",
|
|
69
|
-
"margin": "0 auto"
|
|
70
|
-
},
|
|
71
|
-
".features-section": {
|
|
72
|
-
"display": "grid",
|
|
73
|
-
"gridTemplateColumns": "repeat(auto-fit, minmax(300px, 1fr))",
|
|
74
|
-
"gap": "30px",
|
|
75
|
-
"marginBottom": "60px"
|
|
76
|
-
},
|
|
77
|
-
".feature-card": {
|
|
78
|
-
"backgroundColor": "white",
|
|
79
|
-
"borderRadius": "12px",
|
|
80
|
-
"padding": "30px",
|
|
81
|
-
"boxShadow": "0 4px 12px rgba(0, 0, 0, 0.05)",
|
|
82
|
-
"transition": "transform 0.3s ease, boxShadow 0.3s ease"
|
|
83
|
-
},
|
|
84
|
-
".feature-card:hover": {
|
|
85
|
-
"transform": "translateY(-8px)",
|
|
86
|
-
"boxShadow": "0 12px 20px rgba(0, 0, 0, 0.08)"
|
|
87
|
-
},
|
|
88
|
-
".feature-icon": {
|
|
89
|
-
"width": "60px",
|
|
90
|
-
"height": "60px",
|
|
91
|
-
"borderRadius": "12px",
|
|
92
|
-
"backgroundColor": "#ebf8ff",
|
|
93
|
-
"color": "#4299e1",
|
|
94
|
-
"display": "flex",
|
|
95
|
-
"alignItems": "center",
|
|
96
|
-
"justifyContent": "center",
|
|
97
|
-
"fontSize": "24px",
|
|
98
|
-
"marginBottom": "20px"
|
|
99
|
-
},
|
|
100
|
-
".feature-title": {
|
|
101
|
-
"fontSize": "1.3rem",
|
|
102
|
-
"marginBottom": "15px",
|
|
103
|
-
"color": "#2d3748"
|
|
104
|
-
},
|
|
105
|
-
".feature-description": {
|
|
106
|
-
"color": "#718096",
|
|
107
|
-
"lineHeight": "1.7"
|
|
108
|
-
},
|
|
109
|
-
".action-section": {
|
|
110
|
-
"textAlign": "center",
|
|
111
|
-
"marginBottom": "80px"
|
|
112
|
-
},
|
|
113
|
-
".primary-button": {
|
|
114
|
-
"backgroundColor": "#4299e1",
|
|
115
|
-
"color": "white",
|
|
116
|
-
"border": "none",
|
|
117
|
-
"borderRadius": "8px",
|
|
118
|
-
"padding": "14px 32px",
|
|
119
|
-
"fontSize": "1rem",
|
|
120
|
-
"fontWeight": "600",
|
|
121
|
-
"cursor": "pointer",
|
|
122
|
-
"transition": "all 0.3s ease",
|
|
123
|
-
"boxShadow": "0 4px 6px rgba(66, 153, 225, 0.2)"
|
|
124
|
-
},
|
|
125
|
-
".primary-button:hover": {
|
|
126
|
-
"backgroundColor": "#3182ce",
|
|
127
|
-
"transform": "translateY(-2px)",
|
|
128
|
-
"boxShadow": "0 6px 10px rgba(66, 153, 225, 0.3)"
|
|
129
|
-
},
|
|
130
|
-
".additional-info": {
|
|
131
|
-
"marginTop": "15px",
|
|
132
|
-
"color": "#718096",
|
|
133
|
-
"fontSize": "0.95rem"
|
|
134
|
-
},
|
|
135
|
-
".page-footer": {
|
|
136
|
-
"textAlign": "center",
|
|
137
|
-
"paddingTop": "30px",
|
|
138
|
-
"borderTop": "1px solid #e2e8f0",
|
|
139
|
-
"color": "#718096"
|
|
140
|
-
},
|
|
141
|
-
".copyright": {
|
|
142
|
-
"marginBottom": "15px",
|
|
143
|
-
"fontSize": "0.9rem"
|
|
144
|
-
},
|
|
145
|
-
".social-links": {
|
|
146
|
-
"display": "flex",
|
|
147
|
-
"justifyContent": "center",
|
|
148
|
-
"gap": "15px"
|
|
149
|
-
},
|
|
150
|
-
".social-icon": {
|
|
151
|
-
"color": "#718096",
|
|
152
|
-
"fontSize": "1.2rem",
|
|
153
|
-
"transition": "color 0.3s ease"
|
|
154
|
-
},
|
|
155
|
-
".social-icon:hover": {
|
|
156
|
-
"color": "#4299e1"
|
|
157
|
-
},
|
|
158
|
-
"body:not(.loaded) .welcome-header": {
|
|
159
|
-
"opacity": "0",
|
|
160
|
-
"transform": "translateY(20px)"
|
|
161
|
-
},
|
|
162
|
-
"body.loaded .welcome-header": {
|
|
163
|
-
"opacity": "1",
|
|
164
|
-
"transform": "translateY(0)",
|
|
165
|
-
"transition": "opacity 0.8s ease, transform 0.8s ease"
|
|
166
|
-
},
|
|
167
|
-
"body:not(.loaded) .feature-card": {
|
|
168
|
-
"opacity": "0",
|
|
169
|
-
"transform": "scale(0.95)"
|
|
170
|
-
},
|
|
171
|
-
"body.loaded .feature-card": {
|
|
172
|
-
"opacity": "1",
|
|
173
|
-
"transform": "scale(1)",
|
|
174
|
-
"transition": "opacity 0.6s ease, transform 0.6s ease"
|
|
175
|
-
},
|
|
176
|
-
"body.loaded .feature-card:nth-child(1)": {
|
|
177
|
-
"transitionDelay": "0.2s"
|
|
178
|
-
},
|
|
179
|
-
"body.loaded .feature-card:nth-child(2)": {
|
|
180
|
-
"transitionDelay": "0.4s"
|
|
181
|
-
},
|
|
182
|
-
"body.loaded .feature-card:nth-child(3)": {
|
|
183
|
-
"transitionDelay": "0.6s"
|
|
184
|
-
}
|
|
185
|
-
},
|
|
186
|
-
"content": {
|
|
187
|
-
".main-title": "Welcome to xiangjsoncraft",
|
|
188
|
-
".subtitle": "Create beautiful web pages with simple JSON configuration",
|
|
189
|
-
".primary-button": "Get Started",
|
|
190
|
-
".additional-info": "Join thousands of developers using our JSON configuration system",
|
|
191
|
-
".copyright": "© 2025 Dong Xiang. All rights reserved."
|
|
192
|
-
},
|
|
193
|
-
"features": {
|
|
194
|
-
"selectorPrefix": "#feature",
|
|
195
|
-
"items": [
|
|
196
|
-
{
|
|
197
|
-
"iconClass": "fas fa-code",
|
|
198
|
-
"title": "Simple Configuration",
|
|
199
|
-
"description": "Define your entire page style and content with easy-to-understand JSON"
|
|
200
|
-
},
|
|
201
|
-
{
|
|
202
|
-
"iconClass": "fas fa-paint-brush",
|
|
203
|
-
"title": "Beautiful Designs",
|
|
204
|
-
"description": "Create stunning interfaces without writing complex CSS code"
|
|
205
|
-
},
|
|
206
|
-
{
|
|
207
|
-
"iconClass": "fas fa-mobile-alt",
|
|
208
|
-
"title": "Responsive by Default",
|
|
209
|
-
"description": "Your pages will look great on all devices with built-in responsiveness"
|
|
210
|
-
}
|
|
211
|
-
]
|
|
212
|
-
},
|
|
213
|
-
"icons": {
|
|
214
|
-
"selector": ".social-links",
|
|
215
|
-
"items": [
|
|
216
|
-
{
|
|
217
|
-
"class": "fab fa-github",
|
|
218
|
-
"url": "#"
|
|
219
|
-
},
|
|
220
|
-
{
|
|
221
|
-
"class": "fab fa-twitter",
|
|
222
|
-
"url": "#"
|
|
223
|
-
},
|
|
224
|
-
{
|
|
225
|
-
"class": "fab fa-linkedin",
|
|
226
|
-
"url": "#"
|
|
227
|
-
},
|
|
228
|
-
{
|
|
229
|
-
"class": "fab fa-instagram",
|
|
230
|
-
"url": "#"
|
|
231
|
-
}
|
|
232
|
-
]
|
|
233
|
-
}
|
|
234
|
-
}
|
package/template/index.html
DELETED
|
@@ -1,53 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8">
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
7
|
-
<title>Welcome Page</title>
|
|
8
|
-
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
9
|
-
<style id="dynamic-styles"></style>
|
|
10
|
-
</head>
|
|
11
|
-
|
|
12
|
-
<body>
|
|
13
|
-
<div class="welcome-container">
|
|
14
|
-
<header class="welcome-header">
|
|
15
|
-
<div class="logo-container">
|
|
16
|
-
<div class="logo"></div>
|
|
17
|
-
</div>
|
|
18
|
-
<h1 class="main-title"></h1>
|
|
19
|
-
<p class="subtitle"></p>
|
|
20
|
-
</header>
|
|
21
|
-
|
|
22
|
-
<main class="features-section">
|
|
23
|
-
<div class="feature-card" id="feature-1"></div>
|
|
24
|
-
<div class="feature-card" id="feature-2"></div>
|
|
25
|
-
<div class="feature-card" id="feature-3"></div>
|
|
26
|
-
</main>
|
|
27
|
-
|
|
28
|
-
<section class="action-section">
|
|
29
|
-
<a href="https://www.npmjs.com/package/xiangjsoncraft">
|
|
30
|
-
<button class="primary-button"></button>
|
|
31
|
-
</a>
|
|
32
|
-
<p class="additional-info"></p>
|
|
33
|
-
</section>
|
|
34
|
-
|
|
35
|
-
<footer class="page-footer">
|
|
36
|
-
<p class="copyright"></p>
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
<div class="social-links">
|
|
40
|
-
</div>
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
</footer>
|
|
44
|
-
</div>
|
|
45
|
-
|
|
46
|
-
<script type="module">
|
|
47
|
-
import { renderJsonStyles } from './renderJson.js';
|
|
48
|
-
// 页面加载完成后渲染
|
|
49
|
-
window.addEventListener('DOMContentLoaded', renderJsonStyles);
|
|
50
|
-
</script>
|
|
51
|
-
</body>
|
|
52
|
-
|
|
53
|
-
</html>
|