Ruby on Rails - Bố cục
Bố cục xác định môi trường xung quanh của một trang HTML. Đó là nơi để xác định giao diện chung cho đầu ra cuối cùng của bạn. Các tệp bố cục nằm trong ứng dụng / chế độ xem / bố cục.
Quá trình này bao gồm việc xác định một mẫu bố cục và sau đó cho bộ điều khiển biết rằng nó tồn tại và sử dụng nó. Đầu tiên, hãy tạo mẫu.
Thêm tệp mới có tên standard.html.erb vào app / views / layouts. Bạn cho bộ điều khiển biết mẫu nào sẽ sử dụng theo tên của tệp, vì vậy bạn nên tuân theo một sơ đồ đặt tên tương tự.
Thêm mã sau vào tệp standard.html.erb mới và lưu các thay đổi của bạn -
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv = "Content-Type" content = "text/html; charset = iso-8859-1" />
<meta http-equiv = "Content-Language" content = "en-us" />
<title>Library Info System</title>
<%= stylesheet_link_tag "style" %>
</head>
<body id = "library">
<div id = "container">
<div id = "header">
<h1>Library Info System</h1>
<h3>Library powered by Ruby on Rails</h3>
</div>
<div id = "content">
<%= yield -%>
</div>
<div id = "sidebar"></div>
</div>
</body>
</html>Mọi thứ bạn vừa thêm đều là các phần tử HTML tiêu chuẩn ngoại trừ hai dòng. Cácstylesheet_link_tagphương thức trợ giúp xuất ra một biểu định kiểu <link>. Trong trường hợp này, chúng tôi đang liên kết bảng định kiểu style.css. Cácyield lệnh cho Rails biết rằng nó nên đặt html.erb cho phương thức được gọi ở đây.
Bây giờ mở book_controller.rb và thêm dòng sau ngay dưới dòng đầu tiên -
class BookController < ApplicationController
layout 'standard'
def list
@books = Book.all
end
...................Nó hướng dẫn bộ điều khiển mà chúng tôi muốn sử dụng bố cục có sẵn trong tệp standard.html.erb. Bây giờ, hãy thử duyệt các cuốn sách sẽ xuất hiện màn hình sau.
Thêm trang định kiểu
Cho đến nay, chúng tôi vẫn chưa tạo bất kỳ biểu định kiểu nào, vì vậy Rails đang sử dụng biểu định kiểu mặc định. Bây giờ, hãy tạo một tệp mới có tên style.css và lưu nó trong / public / stylesheets. Thêm mã sau vào tệp này.
body {
font-family: Helvetica, Geneva, Arial, sans-serif;
font-size: small;
font-color: #000;
background-color: #fff;
}
a:link, a:active, a:visited {
color: #CD0000;
}
input {
margin-bottom: 5px;
}
p {
line-height: 150%;
}
div#container {
width: 760px;
margin: 0 auto;
}
div#header {
text-align: center;
padding-bottom: 15px;
}
div#content {
float: left;
width: 450px;
padding: 10px;
}
div#content h3 {
margin-top: 15px;
}
ul#books {
list-style-type: none;
}
ul#books li {
line-height: 140%;
}
div#sidebar {
width: 200px;
margin-left: 480px;
}
ul#subjects {
width: 700px;
text-align: center;
padding: 5px;
background-color: #ececec;
border: 1px solid #ccc;
margin-bottom: 20px;
}
ul#subjects li {
display: inline;
padding-left: 5px;
}Bây giờ hãy làm mới trình duyệt của bạn và thấy sự khác biệt -
Tiếp theo là gì?
Chương tiếp theo giải thích cách phát triển các ứng dụng bằng Rails Scaffolding để cho phép người dùng truy cập để thêm, xóa và sửa đổi các bản ghi trong bất kỳ cơ sở dữ liệu nào.