Treesaver 原理、文件功能结构

原理

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演示地址：

http://treesaver.net/portfolio/