TreeSaver 使用教程整理——Step 4: Using a Title Figure

请首先阅读前几篇教程，才能对本篇文章了解比较深入：

TreeSaver 使用教程整理——Step 1: Getting Started

TreeSaver 使用教程整理——Step 2: Adding Basic UI

TreeSaver 使用教程整理——Step 3: Creating Grids

我们在第二步的基础上，copy到 step4 作为我们 step4 初始的基础。

 

Step 4: Using a Title Figure

内容文件 index.html 的修改

增加文章的标题，或者把已有标题用特殊标签 figure 和CSS  title fallback括起来

<figure>
  <h2 data-sizes="title fallback">
    Chapter I. Down the Rabbit-Hole
  </h2>
</figure>

说明：

figure 是Html5的标签，用于对元素进行组合。这里我们用figure对标题进行组合，不用考虑浏览器对Html5的支持问题，TreeSaver自动处理了兼容问题。

在 figure 中，我们配置了属性： data-sizes="title fallback" ，TreeSaver 使用title fallback来确定figure的内容和位置。title 是用来放置章节的名称，fallback 表示如果 figure 无法定位时，这个呢日哦那个将放在正文区域。
Within the figure, we add the custom data-sizes attribute with two values, title and fallback. Treesaver uses these values to know where the contents of the figure can be positioned. The value title is one we made up and will use for placing the name of the chapter. However, fallback is a reserved name that indicates that this content should be placed in with the body text if the figure cannot be positioned otherwise (more on that later).

 

模板 resources.html 文件的变化

把上一步模板文件如下区域做修改

<div class="grid">
   <div class="column"></div>
</div>
<div class="grid cols-2">
  <div class="column"></div>
  <div class="column col-2"></div>
</div>
<div class="grid cols-3">
  <div class="column"></div>
  <div class="column col-2"></div>
  <div class="column col-3"></div>
</div>

修改为：

<div class="grid">
  <div class="container" data-sizes="title"></div>
  <div class="column"></div>
</div>
<div class="grid cols-2">
  <div class="container cols-2" data-sizes="title"></div>
  <div class="column"></div>
  <div class="column col-2"></div>
</div>
<div class="grid cols-3">
  <div class="container cols-3" data-sizes="title"></div>
  <div class="column"></div>
  <div class="column col-2"></div>
  <div class="column col-3"></div>
</div>

说明：

我们给每个Grid增加了一个 container  同时我们使用 data-sizes 特性，把它都设置成 title, 这样用于表示我们在Grid中figure的大小是依赖于 title的数据尺寸大小。
In this markup, we have added a container to each our grids. Using the data-sizes attribute, we have indicated that the container accepts any figure with content that has a data-size value of title.

 

样式 style.css 文件的变化

我们把上一步的样式文件的如下内容替换成后面的内容

.column {
  width: 280px;
  top: 15px;
  bottom: 15px;
  left: 10px;
}

替换成：

.column, .container {
  width: 280px;
  top: 15px;
  bottom: 15px;
  left: 10px;
}
.container.cols-2 {
  width: 600px;
}
.container.cols-3 {
  width: 920px;
}

 

说明：

container 使用跟 column 同样的样式设置，我们为何确保标题跨栏，我们设置了第二栏和第三栏的container宽度。
As a base, we use the same positioning for containers as we do columns; that way, they will line up correctly within our page grid. Since we want the titles to span across all columns, we manually set the width of our two and three-column containers.

 

演示效果：

第一页标题贯穿了整个三栏。

 

第二页恢复了没有标题的设置。

 

参考资料：

https://github.com/Treesaver/treesaver/wiki/Walkthrough