SUI 介绍

什么是 SUI

SUI (Simple User Interface) 是 Yao v0.10.4 中新增的一个基于组件的模板引擎，用于创建网页界面。它使用 HTML、CSS 和 TypeScript 来构建网页，具有以下特点：

• AI 友好：模板语法简单直观，易于 AI 生成和理解
• 服务器端渲染 (SSR)：支持服务器端渲染，提升 SEO 效果
• 无需构建工具：不需要额外的构建工具，简化开发流程
• 组件化：支持基于组件的开发方式，促进代码复用
• 多语言支持：内置多语言支持机制
• 数据集成：支持与后端处理器无缝集成

工作原理

1. 模板定义：用户定义 HTML 模板和组件
2. 模板编译：使用 yao sui build 命令编译模板
3. 页面生成：服务器根据路由读取编译后的模板，调用处理器获取数据，生成最终页面

适用场景

• 博客网站
• 公司官网
• 静态内容展示
• 简单的动态网站

技术特点

• 支持模板定义和动态数据
• 支持多套模板配置
• 支持多语言
• 支持后端处理器调用
• 支持 SSR 页面生成

程序流程

1. 定义 SUI 模板
2. 定义静态页面配置
3. 在模板中调用 Yao 处理器获取动态数据
4. 生成前端页面

SUI 工作原理

1. 用户定义模板与页面组件
2. 运行 yao sui build 命令编译模板
3. 运行 yao start 启动服务
4. 后端服务根据路由读取编译后的页面
5. 调用关联的处理器读取数据
6. 填充模板并输出页面