注释掉在 photos 控制器里设置 layout 的这行代码,这样控制器就会使用 photos 布局 ...
现在这个控制器方法的视图使用的布局,它里面并没有显示视图里的内容 ... 再打开 photos 这个布局 ... 添加一组 erb 可以输出内容的特殊标记 ... 里面加上一个 yield ... 它会把模板文件里的内容 yield 进来显示在这里 ...
保存 ... 回到浏览器 ... 现在,页面上就会显示模板文件里的内容了 ... 这里显示的就是在 index 这个模板里定义的内容 ...
content_for
在布局里可以使用 yield 定义一些有名字的区域,然后在视图里,你可以把内容放到指定的区域的上面 ... 在这个 photos 布局里,再添加一组 div 标签 ... class 是 navbar ... 一组输出的 erb 标签 ... 然后再用一下 yield .. 后面可以是给这个区域起的一个名字 ... 比如 :navbar .. 意思就是在布局里定义了一个叫 :navbar 的区域 ..
再找到一个视图 ... 往指定的区域里插入内容可以用一下 content_for 这个方法 .. . 一组 erb 的特殊标签,注意没有等号 .. 然后用一下 content_for ... 把区域的名字告诉它 .. :navbar ... 一个代码块 ... 结束的地方再用一个 end ...
随便添加点文字 ...
这样在这个给 content_for 提供的代码块里面的内容就是显示在 photos 布局里的 navbar 这个区域上 ... 也就是会在布局的这个 yield :navbar 这行代码所在的位置上显示 ...
回到浏览器 ... 你会看到我们在视图里为 navbar 区域设置的内容已经显示出来了 ... 查看一下页面的源代码 ... 这块内容会使用一个 div 包装,它上面会有一个 navbar 的类 ...