ROR 第三章 基本静态的页面(二)
重构
3.3 有点儿动态内容的页面
rails new命令创建了布局文件,暂时重命名。
$ mv app/views/layouts/application.html.erb foobar
添加标题测试:
$ vim spec/requests/static_pages_spec.rb
require 'spec_helper' describe "Static pages" do describe "Home page" do it "should have the content 'Sample App'" do visit '/static_pages/home' expect(page).to have_content('Sample App') end it "should have the title 'Home'" do visit '/static_pages/home' expect(page).to have_title("Ruby on Rails Tutorial Sample App | Home") end end describe "Help page" do it "should have the content 'Help'" do visit '/static_pages/help' expect(page).to have_content('Help') end it "should have the title 'Help'" do visit '/static_pages/help' expect(page).to have_title("Ruby on Rails Tutorial Sample App | Help") end end describe "About page" do it "should have the content 'About Us'" do visit '/static_pages/about' expect(page).to have_content('About Us') end it "should have the title 'About Us'" do visit '/static_pages/about' expect(page).to have_title("Ruby on Rails Tutorial Sample App | About Us") end end end
$ bundle exec rspec spec/requests/static_pages_spec.rb 出现红色错误,因为我们的标题未包含关键字
让标题测试通过
首页完整HTML
<!DOCTYPE html> <html> <head> <title>Ruby on Rails Tutorial Sample App | Home</title> </head> <body> <h1>Sample App</h1> <p> This is the home page for the <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </p> </body> </html>
帮助页面HTML
<!DOCTYPE html> <html> <head> <title>Ruby on Rails Tutorial Sample App | Help</title> </head> <body> <h1>Help</h1> <p> Get help on the Ruby on Rails Tutorial at the <a href="http://railstutorial.org/help">Ruby on Rails Tutorial</a> To get help on this sample app,see the <a href="http://railstutorial.org/book">Rails Tutorial book</a> </p> </body> </html>
关于页面HTML
<!DOCTYPE html> <html> <head> <title>Ruby on Rails Tutorial Sample App | About Us</title> </head> <body> <h1>About Us</h1> <p> The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> is a project to make a book and screencasts to teach web development with <a href="http://railstutorial.org/">Ruby On Rails</a> This is the sample application for the tutorial. </p> </body> </html>
现在执行bundle exec rspec spec/requests/static_pages_spec.rb 可以通过测试了。。
3.3.3 嵌入Ruby
去除三个页面中的重复部分
<% provide(:title,'Home')%>
<%=yield(:title)%>
通过这两句改变标题中的名称home help about
3.3.4 使用布局文件来消除重复
由于三个页面的结构一致,使用application.html.erb来消除布局上的重复
恢复application.html.erb文件
$ mv foobar app/views/layouts/application.html.erb
把布局文件中的title部分改成跟前三个页面一样
<title>Ruby on Rails Tutorial Sample App | <%=yield(:title)%></title>
然后调整三个页面结构
首页:app/views/static_pages/home.html.erb
<%provide(:title,'Home')%> <h1>Sample App</h1> <p> This is the home page for the <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> sample application. </p>
帮助页面:
<%provide(:title,'Help')%> <h1>Help</h1> <p> Get help on the Ruby on Rails Tutorial at the <a href="http://railstutorial.org/help">Ruby on Rails Tutorial</a> To get help on this sample app,see the <a href="http://railstutorial.org/book">Rails Tutorial book</a> </p>
about页面:
<%provide(:title,'About Us')%> <h1>About Us</h1> <p> The <a href="http://railstutorial.org/">Ruby on Rails Tutorial</a> is a project to make a book and screencasts to teach web development with <a href="http://railstutorial.org/">Ruby On Rails</a> This is the sample application for the tutorial. </p>
现在执行bundle exec rspec spec/requests/static_pages_spec.rb 可以通过测试了。。页面精简了很多啊。
提交一下搞定:
git add. git commit -m "Finish static pages" git checkout master git merge static-pages git push -u origin master git push heroku //推送到heroku云