xiangjsoncraft

v1.1.0

Published

2 months ago

Create beautiful web pages with simple JSON configuration

Downloads

0High
0Medium
0Low

dongxiang678

json css html configuration ui web

XiangJsonCraft 软件包官方文档

XiangJsonCraft Logo

XiangJsonCraft 是一个简单而强大的 JSON 配置与 HTML 页面渲染工具，由大学生董翔开发，专为前端开发者设计。通过简洁的 API，它允许你使用 JSON 配置文件来定义样式和内容，并将其应用到 HTML 页面中，实现动态页面的快速构建。

🚀 最新更新 (v1.1.0)

我们很高兴地宣布 XiangJsonCraft v1.1.0 版本发布！这个版本带来了重大功能升级，让 JSON 配置网页的能力得到质的飞跃：

核心增强

全面支持任意 CSS 选择器：不再局限于预设元素，现在可通过 JSON 配置任何 CSS 选择器（类、ID、伪类、媒体查询等）
增强的渲染逻辑：重构了渲染引擎，支持更复杂的样式结构和内容类型
响应式设计支持：通过媒体查询配置，轻松实现不同屏幕尺寸的适配
HTML 内容支持：不仅能设置文本内容，还可以配置 HTML 片段

配置示例升级

旧版本：

{
  "styles": {
    "body": { ... },
    "header": { ... }
  }
}

新版本支持：

{
  "styles": {
    ".card": { ... },
    "#hero-section": { ... },
    "nav a:hover": { ... },
    "@media (max-width: 768px)": { ... }
  },
  "content": {
    ".title": {
      "value": "<strong>欢迎使用</strong>",
      "isHtml": true
    }
  }
}

特性

简单易用：只需几行代码即可完成页面渲染
灵活配置：通过 JSON 文件定义样式和内容
轻量级：无额外依赖，体积小巧
全面的选择器支持：兼容所有 CSS 选择器语法
响应式设计：轻松配置不同设备的显示效果
动态内容：支持文本和 HTML 内容的动态注入

安装

npm install xiangjsoncraft

快速开始

1. 创建 JSON 配置文件

创建 config.json 配置文件，定义页面的样式和内容：

{
  "styles": {
    "*": {
      "margin": "0",
      "padding": "0",
      "boxSizing": "border-box"
    },
    "body": {
      "fontFamily": "Arial, sans-serif",
      "lineHeight": "1.6",
      "color": "#333"
    },
    ".header": {
      "backgroundColor": "#2c3e50",
      "color": "white",
      "padding": "1rem",
      "textAlign": "center"
    },
    "nav ul": {
      "display": "flex",
      "listStyle": "none",
      "justifyContent": "center",
      "gap": "1rem"
    },
    "nav a:hover": {
      "color": "#f39c12",
      "textDecoration": "none"
    },
    "@media (max-width: 768px)": {
      "nav ul": {
        "flexDirection": "column",
        "alignItems": "center"
      }
    }
  },
  "content": {
    ".header h1": {
      "value": "我的网站",
      "isHtml": false
    },
    "#intro": {
      "value": "<p>欢迎访问我的网站</p>",
      "isHtml": true
    }
  }
}

2. 创建 HTML 页面

创建 index.html 页面：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XiangJsonCraft 示例</title>
    <style id="dynamic-styles"></style>
</head>
<body>
    <header class="header">
        <h1></h1>
    </header>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">关于</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <div id="intro"></div>

    <script type="module">
        import { renderJsonStyles } from './renderJson.js';
        renderJsonStyles();
    </script>
</body>
</html>

3. 渲染逻辑

renderJson.js 中的渲染函数：

// 定义 replaceCamelCase 方法，用于将驼峰式命名转换为连字符命名
String.prototype.replaceCamelCase = function (separator = '-') {
    return this.replace(/[A-Z]/g, function (match) {
        return separator + match.toLowerCase();
    });
};

// 封装通用JSON样式渲染函数，支持任意CSS选择器
function renderJsonStyles() {
    // 使用fetch API获取JSON配置文件
    fetch('./config.json')
        .then(response => {
            if (!response.ok) {
                throw new Error(`网络响应失败: ${response.status}`);
            }
            return response.json();
        })
        .then(config => {
            const styleBlock = document.getElementById('dynamic-styles') || createStyleBlock();
            
            // 生成CSS规则
            let cssRules = '';
            
            // 处理所有选择器样式
            if (config.styles && typeof config.styles === 'object') {
                // 遍历所有选择器
                Object.entries(config.styles).forEach(([selector, styles]) => {
                    // 生成该选择器的所有样式属性
                    const styleProperties = Object.entries(styles)
                        .map(([prop, value]) => {
                            // 将驼峰式属性名转换为CSS格式（如fontSize -> font-size）
                            const cssProp = prop.replaceCamelCase();
                            return `${cssProp}: ${value};`;
                        })
                        .join('\n    ');
                    
                    // 添加选择器及其样式到CSS规则
                    cssRules += `${selector} {\n    ${styleProperties}\n}\n\n`;
                });
            }
            
            // 处理内容配置
            if (config.content && typeof config.content === 'object') {
                Object.entries(config.content).forEach(([selector, content]) => {
                    const elements = document.querySelectorAll(selector);
                    elements.forEach(el => {
                        // 支持HTML内容或纯文本
                        if (content.isHtml) {
                            el.innerHTML = content.value;
                        } else {
                            el.textContent = content.value;
                        }
                    });
                });
            }
            
            // 将生成的CSS应用到样式块
            styleBlock.innerHTML = cssRules;
        })
        .catch(error => {
            console.error('处理样式配置时出错:', error);
        });
}

// 创建样式块并添加到文档头部
function createStyleBlock() {
    const style = document.createElement('style');
    style.id = 'dynamic-styles';
    document.head.appendChild(style);
    return style;
}

// 导出渲染函数
export { renderJsonStyles };

4. 运行项目

# 运行开发服务器
npm run dev

在浏览器中访问 http://localhost:3000 即可查看效果。

API 文档

`renderJsonStyles()`

从 config.json 文件中读取样式和内容配置，并将其应用到 HTML 页面中。

示例

import { renderJsonStyles } from './renderJson.js';
renderJsonStyles();

配置说明

配置文件结构：

styles：包含所有CSS样式配置，键为CSS选择器，值为样式属性对象
- 支持所有CSS选择器（类、ID、伪类、媒体查询等）
- 样式属性支持驼峰命名（如fontSize会自动转换为font-size）
content：包含所有内容配置，键为CSS选择器，值为内容对象
- value：要设置的内容（文本或HTML）
- isHtml：布尔值，指示内容是否为HTML片段

彩蛋

# 工具背后的小插曲：“敢改包”的底气来源
其实XiangJsonCraft的诞生，还藏着一段有趣的小场景——

某天，朋友在Vue项目里用这个包时，遇到了个不符合自己编程习惯的小细节，对着node_modules里的代码犯愁：“老师说这地方不能随便改，容易牵一发而动全身。”

我当时笑着回了句：“没事，改不坏。”朋友反问：“你怎么这么自信？难道你会用？”

我故意顿了顿，笑着说：“哼？我会吗……”

其实不是“会用”，是“会造”——整个包的每一行代码，都是我从0到1敲出来的。哪里是样式配置的核心逻辑，哪部分是内容渲染的关键节点，甚至每个变量命名的小心思，早就刻在脑子里了。

对别人来说，改node_modules是“碰别人的代码”；但对我来说，改的是“自己写的工具”。知道怎么调整既不破坏核心功能，又能贴合朋友的习惯，这份底气，其实来自“开发者”这个身份最本质的掌控感。

所以如果你用的时候也有小想法，不用怕“改坏”——工具本身就为“灵活适配”留足了空间，而作为作者，我也始终在背后，为它的稳定和好用托底。

贡献指南

我们欢迎任何人贡献代码或提出建议。如果你想参与开发，请通过邮件联系我们。

许可证

MIT License

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 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: [email protected]

感谢使用 XiangJsonCraft！

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

XiangJsonCraft 软件包 官方文档