Rails – Tùy chỉnh layout

5/5 - (160 votes)

Như chúng ta đã biết, trong Rails có một file chứa code HTML có chức năng chính là định nghĩa cách các thành phần trong toàn bộ website được hiển thị như thế nào, chẳng hạn như trong blog Phở Code, cho dù bạn có đọc bài nào thì giao diện của website vẫn luôn có phần tiêu đề, thanh navigation (hay menu), vùng sidebar, footer…v.v file này được gọi là file Layout. Khi cần chỉnh sửa lại giao diện thì chúng ta chỉ cần chỉnh sửa file này là được.

Trong một project Rails thì file này là file application.html.erb nằm trong thư mục app/views/layout, chúng ta sẽ chỉnh sửa file này.

Chúng ta sửa lại nội dung file application.html.erb như sau:

<!DOCTYPE html>
<html>
<head>
<title>Books Store</title>
    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
</head>
<body id="store">
    <div id="banner">
        <%= image_tag("logo.png") %>
        <%= @page_title || "Books Store" %>
    </div>
    <div id="columns">
        <div id="side">
            <a href="#">Home</a><br />
            <a href="#">FAQ</a><br />
            <a href="#">News</a><br />
            <a href="#">Contact</a><br />
        </div>
        <div id="main">
            <%= yield %>
        </div>
    </div> 
</body>
</html>

Chúng ta định nghĩa một số id cho thẻ <div> để tùy chỉnh giao diện cho từng phần khác nhau.

Ở trong thẻ <div id="banner">, chúng ta gọi đến hàm image_tag() để tạo một thẻ <img> chứa thuộc tính src dẫn đến file tương ứng. File này bạn có thể tự tạo hoặc lấy ở đâu đó (lấy hàng miễn phí ấy 🙂 ) rồi bỏ vào thư mục app/assets/images.

Sau đó chúng ta gọi đến biến @page_title để hiển thị tiêu đề website, biến này sẽ được gửi từ một controller nào đó, ở đây chúng ta chưa khai báo, do đó chúng ta thực hiện phép toán OR (toán tử ||) với chuỗi “Books Store” để hiển thị chuỗi này nếu biến @page_title không tồn tại.

Tiếp theo là các vùng columns, side, main… đây chỉ là các thẻ <div> bình thường. Ở vùng main, chúng ta có dòng code gọi phương thức yield, phương thức này sẽ gọi controller gắn với đối tượng root mà chúng ta đã bàn đến trong bài trước, dùng để lấy nội dung hiển thị của controller đó, tức là phương thức yield này sẽ gọi đến phương thức index trong controller store, và nội dung trả về là danh sách các sản phẩm.

Cuối cùng chúng ta cần định nghĩa CSS cho các thẻ <div> trên bằng cách chèn thêm đoạn code sau vào trong file depot.css như sau:

...
#banner {
    background: #9c9;
    padding-top: 10px;
    padding-bottom: 10px;
    border-bottom: 2px solid;
    font: small-caps 40px/40px "Times New Roman", serif;
    color: #282;
    text-align: center;
}

#banner img {
    float: left;
    padding-left: 5px;
}

#columns {
    background: #141;
}

#main {
    margin-left: 17em;
    padding-top: 4ex;
    padding-left: 2em;
    background: white;
}

#side {
    float: left;
    padding-top: 1em;
    padding-left: 1em;
    padding-bottom: 1em;
    width: 16em;
    background: #141;
}

#side a {
    color: #bfb;
    font-size: small;
}

Kết quả chúng ta có trang web như sau:

0 0 votes

Article Rating

Share this: