原理
Treesaver 的原理是用绝对定位(absolute position)的方法,帮你自动排好分栏(column)、figure (heading、图片)。Treesaver 是浏览器大小尺寸敏感(size-sensitive)的,会就着当前的浏览器尺寸(browser size),选用不同的分栏表格(grid)做排版,而这些grid、column等都已经在resources.html和styles.css里定义好。当然也可以制订文件目录,Treesaver 会自动读取,连续阅读。
理论上,写内容的只需要大概知道了一些Treesaver的规则,就可以直接写html,把写好的html放上服务器上就可以了,不用碰到script的部份。但如果想做特别排版,就要连带修改 resources.html 和 styles.css ,这就稍微难些。
以上原理介绍摘自:http://www.hksilicon.com/kb/cn/articles/27155/Treesaver
TreeSaver具有的布局UI主要有下面几种:
- Chrome: 控制环绕内容,Control the UI around content
- LightBox: 提供放大缩小功能, Provide an interface for zooming Figures
- Grid: 页面布局的结构,分栏,Specify structure used for page layout
- Article Order: 连续读文章的功能,Set up continous reading
- Figure: 主内容之外的内容,For displaying content outside of the main flow
- Container: 图片,For positioning images and other non-flowing content
- Column: 变化的分栏内容,For flowing content
- Field: 重复的内容, For displaying repeated content
出处:https://github.com/Treesaver/treesaver/wiki
TreeSaver 的文件结构
一些Cool的Treesaver演示地址: