🔗 数据绑定示例
域名: 000.aicms.dev
标题: 模板系统演示
描述: 这是一个功能完整的演示模板，展示各种定制化能力
版本: v1.0.0
🎨 Tailwind CSS v4 样式
🔄 循环渲染功能
Tailwind CSS v4
现代化的CSS框架，快速构建美观界面
Alpine.js
轻量级JavaScript框架，实现动态交互
数据绑定
Scriban模板引擎，强大的数据处理能力
🧩 布局组件
可复用的导航栏、页脚等布局组件
📌 导航栏组件
components/layout/navigation.sbn
✅ 已在页面顶部渲染
📌 页脚组件
components/layout/footer.sbn
✅ 已在页面底部渲染
说明: 布局组件位于 components/layout/ 目录下，
可以在多个页面中复用，保持网站布局的一致性。
⚡ 自定义组件
项目特定的可复用组件
🎴 自定义卡片组件示例
快速开发
使用组件化开发，提高开发效率
精准定制
灵活的模板系统，满足各种定制需求
高质量
专业的代码结构，易于维护和扩展
说明: 自定义组件位于 components/custom/ 目录下，
可以创建项目特定的可复用UI组件。
⚡ Alpine.js 交互
轻量级JavaScript功能，实现动态交互体验
🔢 计数器示例
👁️ 显示/隐藏切换
👋 这是一个可以切换显示/隐藏的内容区域！
使用 Alpine.js 的 x-show 和 x-transition 指令实现平滑过渡效果。
✏️ 双向数据绑定
实时显示输入内容：
📑 选项卡切换
选项 1 的内容
这是第一个选项卡的内容区域。
选项 2 的内容
这是第二个选项卡的内容区域。
选项 3 的内容
这是第三个选项卡的内容区域。
说明: Alpine.js 提供声明式语法实现动态交互，无需编写冗余的JavaScript代码。 使用 x-data、x-show、x-model、@click 等指令实现丰富的交互效果。
⚡ 高级特性
条件渲染、嵌套数据、索引逻辑
🔀 条件渲染示例
⭐ 高级版
当 isPremium = true 时显示此块
当前状态:
isPremium = true
🗂️ 嵌套数据访问
前端技术
框架工具
开发特性
🔢 带索引的循环
页面管理
布局组件
自定义组件
数据绑定
样式系统
交互功能
响应式设计
构建工具
说明: Scriban 模板引擎支持条件渲染 (if/else)、循环遍历、嵌套数据访问。 这些是高级逻辑特性，适合复杂页面的构建需求。
📱 响应式设计
Tailwind CSS v4 响应式断点和实用工具类
📐 响应式网格布局
移动端: 1列
平板: 2列
桌面: 4列
自动适应
调整浏览器窗口大小查看响应式效果
✨ Tailwind CSS v4 特性
🎨 原生 CSS 变量
更好的性能和可维护性
⚡ 更快的构建
Oxide 引擎大幅提升速度
🔧 简化配置
更直观的配置方式
🛠️ 常用工具类展示
说明: Tailwind CSS v4 提供完整的响应式设计系统和丰富的实用工具类， 可以快速构建现代化、适配多设备的网页界面。
📚 模板系统功能总结
Template 000 - 全栈功能演示模板
页面系统
- ✓ 多页面支持
- ✓ 灵活布局文件
- ✓ 模块化页面结构
组件系统
- ✓ 布局组件 (Layout)
- ✓ 自定义组件 (Custom)
- ✓ 组件复用
数据绑定
- ✓ JSON 数据源
- ✓ Scriban 模板引擎
- ✓ 循环和条件渲染
样式系统
- ✓ Tailwind CSS v4
- ✓ 响应式设计
- ✓ 自定义样式
交互功能
- ✓ Alpine.js 集成
- ✓ 声明式语法
- ✓ 轻量级实现
构建系统
- ✓ npm 脚本
- ✓ CSS 压缩
- ✓ JS 打包
📖 使用提示
📁 目录结构:
- 📄 pages/ - 页面模板文件
- 🧩 components/ - 组件文件
- 🎨 css/ - 样式文件
- ⚡ js/ - JavaScript 文件
⚙️ 常用命令:
- 🔨
npm run css:build - 📦
npm run js:build - 🚀
npm run build - 👀
npm run css:watch