@section 定义

在布局里，我们可以去定义一些 section，然后在使用它的时候，可以具体设置一下这些不同的 section 里面包含的内容 ..

打开 main .. 在 body 标签里面，再设计一下页面的结构 .. 这个结构我们可以自己根据实际情况去定义 .. 比如可以添加一个 div，上面加上 container ..

里面再包装一个 div，上面有个 header 类 .. 它里面可以是文档的页头部分的内容 .. 在这里可以去定义一个区域 .. 用的是 @section 这个 tag .. 结束的地方可以用一个 @endsection ..

设置一下 section 的名字，比如 header ..

在它们之间可以添加点内容 .. 这样如果没有在视图里面设置这个区域的内容的时候，就会使用这里设置的默认的内容 ..

一组 small 标签 .. 包装一个 headerSection ..

下面可以再定义一个 section .. 先添加一组 div，上面加上 content .. 里面再用一下@section 去定义一个区域 .. 名字是 content ..

添加一行文字 .. There is no content yet.

再访问一下 posts 这个页面 .. 现在页面上会显示布局里的 section 里面的一些默认的内容 ..

@section 使用

再回到使用了这个 main 布局的视图 .. 用一下 @section .. 先设置一下布局里的 header 里面的内容 ..

里面是个大标题 .. 把之前剪切的东西粘贴到这里 ... 现在标题里面没有 html 标签了，所以可以使用两个大括号输出标题内容 ..

下面可以再用一个 @section .. 设置一下 content 这个区域里的内容 .. 在它里面，可以再添加点视图要显示的东西 .. 就是一组循环输出的列表项目 .. 简单再修改一下 ..

回到浏览器 .. 再预览一下 ..

现在这个页面的显示用了 main 布局.. 在视图里面设置了要在不同的布局区域里面显示的内容 ..

@super

还有一个事，就是，就是在视图里设置布局 section 的时候，如果你不想覆盖原本在 laytout 里的 section 里定义的内容，只是想去扩展一下它里面的东西 ..

在设置 section 内容的时候，可以使用一个 @super ..

这样原本在布局里定义的这个 section 里的内容会被保留下来 ..

在 edge 模板里面添加注释，可以使用这样的形式 .. 编辑器里安装了 edge package 以后，使用快捷键 command + / 可以注释掉选中的行 ..