Cirru HTML: 类似 Jade 的缩进语法来编译生成 HTML

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 3903 天前的主题，其中的信息可能已经有所发展或是发生改变。

Jade 很强大的, 但是空格处理, 还有属性偏多时的写法让我不舒服,
刚好自己想尝试写个模版引擎, 就做了一个给自己用, 按 Cirru 的文法写的.

主要的功能:
* 缩进语法
* : 语法简化属性的书写
* 简化的 @ 语法, 用来处理逻辑和嵌入数据
* 嵌入文件的功能
* 做了预编译, 加快模版的执行

缺少的部分:
* 没有做命令行版本的编译工具
* 每次渲染前需要做 cache
* 详细文档.. 看视频也能了解一些
* 基于 CommonJS 规范. 没有 requirejs 等版本

使用 @partial 和 @insert 依赖服务端环境, 其他的浏览器环境也能跑.

代码的例子: #file-html-cirru

项目的仓库地址: https://github.com/Cirru/cirru-html

我在项目里使用的时候会用 ShellJS 脚本这样调用:
https://github.com/jiyinyiyong/dual-balanced-ternary/blob/master/make.coffee#L14

cirru-html 和 Vue.js 搭配的效果是这样的:
https://github.com/jiyinyiyong/todolist/blob/master/cirru/menu.cirru

另外还有个视频做了一些比较具体的介绍:

目前非常粗糙, 有想法请在 GitHub 上提 Issue, 欢迎 fork

第 1 条附言 · 2014-05-12 15:01:32 +08:00

后续的更新之后, 方便浏览器端调用,, 不过接口也随之做了修改:
https://github.com/Cirru/cirru-html
浏览器端的 Demo:
http://repo.cirru.org/html/index.html

语法

编译

jade

4 条回复 • 2014-05-12 19:22:47 +08:00