over 2 years ago

備註1. 記得弄個新branch

$ git checkout master
$ git checkout -b filling-in-layout

備註2: Listing 5.1有兩個<div class="container">container可以用超過一次。
備註3: container 用於自適應且固定寬度的容器。
備註4: container-fluid 用於 100% 寬度的容器,橫跨可視區域的全部寬度。

app/views/layouts/application.html.erb
 <!DOCTYPE html>
<html>
  <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag 'application', media: 'all',
                                           'data-turbolinks-track' => true %>
    <%= javascript_include_tag 'application', 'data-turbolinks-track' => true %>
    <%= csrf_meta_tags %>
    <!--[if lt IE 9]>
      <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
      </script>
    <![endif]-->
  </head>
  <body>
    <header class="navbar navbar-fixed-top navbar-inverse">
      <div class="container">
        <%= link_to "sample app", '#', id: "logo" %>
        <nav>
          <ul class="nav navbar-nav navbar-right">
            <li><%= link_to "Home",   '#' %></li>
            <li><%= link_to "Help",   '#' %></li>
            <li><%= link_to "Log in", '#' %></li>
          </ul>
        </nav>
      </div>
    </header>
    <div class="container">
      <%= yield %>
    </div>
  </body>
</html>

備註5: 一次搞懂 Assets Pipeline
重點1: Bootstrap 是用Less CSS,可是Rails是用Sass,所以要靠bootstrap-sass把 Less 轉換成Sass
重點2: rails generate會為每個Controller產生對應的CSS檔
重點3: 自製的CSS檔裡面,要記得@import bootstrap-sprocketsbootstrap
重點4: Partial 檔案的命名,開頭要有底線(_),然後要放到app/views/layouts/(我好像都在放app/views/common/),在view裡面要用render去把它運算出來。
重點5: 我的專案裡面:
common裡面是放partial,譬如底線navbar.html,使用方式是<%= render 'layouts/navbar' %>
layout裡面是放controller要的,譬如dashboard.html,使用方式是 layout 'dashboard'
重點6: Sass = nesting + variables + mixins
重點7: Less: @Sass: $,不過bootstrap-sass gem會把Less轉換成Sass

  1. <div>就是 division:把文件區分成不同的區域。
    HTML5 新增<header>, <nav>, <section>,<footer>,其實也都是<div>
    The div tag is a generic division; it doesn’t do anything apart from divide the document into distinct parts. In older-style HTML, div tags are used for nearly all site divisions, but HTML5 adds the header, nav, and section elements for divisions common to many applications.

  2. <header> : 裡面的東西要在網頁的最上方
    header tag indicates elements that should go at the top of the page.

  3. <nav>其實沒啥用,只是會讓結構看起來比較清楚。
    The <nav> tag, though formally unnecessary here, is used to more clearly communicate the purpose of the navigation links.

  4. <%= yield %>: 會把每一頁的內容放到這裡來

    <div class="container">
        <%= yield %>
    </div>
    

    As before, the container class has special meaning to Bootstrap. As we learned in Section 3.4.3, the yield method inserts the contents of each page into the site layout.

  5. 因為是用image_tag helper,圖片要放在app/assets/images/,然後就可以直接寫檔名 rails.png,不需要寫路徑

    <%= link_to image_tag("rails.png", alt: "Rails logo"),
            'http://rubyonrails.org/' %>
    

    The second link_to shows off the image_tag helper, which takes as arguments the path to an image and an optional options hash, in this case setting the alt attribute of the image tag using symbols. For this to work, there needs to be an image called rails.png, which you should download from the Rails Tutorial website at http://railstutorial.org/rails.png and place in the app/assets/images/ directory.
    Because we used the image_tag helper in Listing 5.2, Rails will automatically find any images in the app/assets/images/ directory using the asset pipeline (Section 5.2).

  6. image_tag的功能:

    <img alt="Rails logo" src="/assets/rails-9308b8f92fea4c19a3a0d8385b494526.png" />
    

    圖片名稱會變數字。
    src的地方也不會顯示image這個資料夾,只有asset,這樣可以讓server讀得比較快。
    Here the string 9308b8f92fea4c19a3a0d8385b494526 (which will differ on your system) is added by Rails to ensure that the filename is unique, which causes browsers to load images properly when they have been updated (instead of retrieving them from the browser cache).
    Note that the src attribute doesn’t include images, instead using an assets directory common to all assets (images, JavaScript, CSS, etc.).
    On the server, Rails associates images in the assets directory with the proper app/assets/images directory, but as far as the browser is concerned all the assets look like they are in the same directory, which allows them to be served faster. Meanwhile, the alt attribute is what will be displayed if the page is accessed by a program that can’t display images (such as screen readers for the visually impaired).

  7. Bootstrap: bootstrap-sass gem
    Bootstrap 是用Less CSS,
    可是Rails是用Sass,
    所以要靠bootstrap-sass把 Less 轉換成Sass
    Our first step is to add Bootstrap, which in Rails applications can be accomplished with the bootstrap-sass gem, as shown in Listing 5.4. The Bootstrap framework natively uses the Less CSS language for making dynamic stylesheets, but the Rails asset pipeline supports the (very similar) Sass language by default (Section 5.2), so bootstrap-sass converts Less to Sass and makes all the necessary Bootstrap files available to the current application.8

  8. rails generate會為每個Controller產生對應的CSS檔,不過這樣很麻煩,所以可以自己弄一個CSS檔,放在app/assets/stylesheets/裡面。
    Although rails generate automatically creates a separate CSS file for each controller, it’s surprisingly hard to include them all properly and in the right order, so for simplicity we’ll put all of the CSS needed for this tutorial in a single file. The first step toward getting custom CSS to work is to create such a custom CSS file:

    $ touch app/assets/stylesheets/custom.css.scss
    
  9. app/assets/stylesheets/ 這裡面的CSS檔,都會被加到application.css,然後整個網站都會用到。
    custom.css.scss.css是指 CSS file, and the .scss是指Sassy CSS,用來處理Sass。
    is part of the asset pipeline (Section 5.2), and any stylesheets in this directory will automatically be included as part of the application.css file included in the site layout.
    Furthermore, the filename custom.css.scss includes the .css extension, which indicates a CSS file, and the .scss extension, which indicates a “Sassy CSS” file and arranges for the asset pipeline to process the file using Sass.

  10. 自製的CSS檔裡面,要記得@import bootstrap-sprocketsbootstrap
    Inside the file for the custom CSS, we can use the @import function to include Bootstrap (together with the associated Sprockets utility), as shown in Listing 5.5.9

    Listing 5.5: Adding Bootstrap CSS.
    app/assets/stylesheets/custom.css.scss
    @import "bootstrap-sprockets";
    @import "bootstrap";
    
  11. Partial 檔案的命名,開頭要有底線(_),然後要放到app/views/layouts/(我好像都在放app/views/common/),在view裡面要用render去把它運算出來。
    ps. 我的專案裡面:
    common裡面是放partial,譬如底線navbar.html,使用方式是<%= render 'layouts/navbar' %>
    layout裡面是放controller要的,譬如dashboard.html,使用方式是 layout 'dashboard'

    app/views/layouts/application.html.erb
     <!DOCTYPE html>
    <html>
    <head>
    <title><%= full_title(yield(:title)) %></title>
    <%= stylesheet_link_tag "application", media: "all",
                                           "data-turbolinks-track" => true %>
    <%= javascript_include_tag "application", "data-turbolinks-track" => true %>
    <%= csrf_meta_tags %>
    <%= render 'layouts/shim' %>
    </head>
    <body>
    <%= render 'layouts/header' %>
    <div class="container">
      <%= yield %>
      <%= render 'layouts/footer' %>
    </div>
    </body>
    </html>
    

    a single call to a Rails helper called render
    this underscore is the universal convention for naming partials, and among other things makes it possible to identify all the partials in a directory at a glance.

  12. 5.2 Sass and the asset pipeline
    一次搞懂 Assets Pipeline
    Sprockets: 用來從你的 assets 路徑中打包壓縮你所有的 assets 後包裝成一個檔案

    • Assets 的結構
      1. app/assets(通常放置我們自己為了自己的程式所寫的 js、css 或是 images)
      2. lib/assets(通常是我們所使用的套件中去用到的 assets)
      3. vendor/assets(通常是放一些我們從別的地方借用的 assets,例如說一些 jQuery 的套件)
      4. 這三個目錄,在預設情況下這三個資料夾的東西是共通的(因為都會被打包成一個檔案),你可以把你的 rails app 跑起來後在 http://localhost:3000/assets/application.js 中看到你所有的 js 都在這支檔案中,css 同理亦然
      5. 在 terminal 中輸入 Rails.application.config.assets.paths 來查看所有的 assets 路徑。你可以發現,除了原本我們剛剛說的三個 assets 目錄之外,還出現了包含在我們 GemFile 中的 jquery,這代表你的 assets 現在也可以包成 gem 來用,
      6. 如果你有很多個 projects 常重複使用一些共通的 assets,不妨考慮包成 gem 來使用,方便又愉快。
    • Assets 的載入
      1. app/asset/javascripts/application.js 這支檔案為例,這是一支 manifest 檔案
      2. 主要用來告訴 Sprockets 說哪些檔案是要被載入最後要被包起來壓縮的,最後這支檔案裡面所有的東西就會被包成 application.js 這支檔案,也是我們 layout/application.html.erb 中的 javascript_include_tag 'application' 中的檔案
      3. require_tree . 表示是把三個 assets/javascript 目錄下的檔案或是子目錄內的檔案全部都包進來
  13. asset pipeline:convenience in development and efficiency in production.

  14. Sass = nesting + variables + mixins
    SCSS only adds features to CSS, rather than defining an entirely new syntax.

  15. css層級的用法: nesting

    <div class="center jumbotron">
    <h1></h1>
    <h2></h2>
    </div>
    
    .center {
    text-align: center;
    }
    .center h1 {
    margin-bottom: 10px;
    }
    
    .center {
    text-align: center;
    h1 {
    margin-bottom: 10px;
    }
    }
    
    <footer class="footer">
    <small>
    The <a href="http://www.railstutorial.org/">Ruby on Rails Tutorial</a>
    by <a href="http://www.michaelhartl.com/">Michael Hartl</a>
    </small>
    <nav>
    <ul>
      <li><%= link_to "About",   about_path %></li>
      <li><%= link_to "Contact", contact_path %></li>
      <li><a href="http://news.railstutorial.org/">News</a></li>
    </ul>
    </nav>
    </footer>
    
    footer {
    margin-top: 45px;
    padding-top: 5px;
    border-top: 1px solid #eaeaea;
    color: #777;
    a {
    color: #555;
    &:hover {
      color: #222;
    }
    }
    small {
    float: left;
    }
    ul {
    float: right;
    list-style: none;
    li {
      float: left;
      margin-left: 15px;
    }
    }
    }
    
  16. Variables:bootstrap-sass gem會把Less轉換成Sass
    color: #777;
    $light-gray: #777;
    Less: @
    Sass: $
    Bootstrap page of Less variables. That page defines variables using Less, not Sass, but the bootstrap-sass gem provides the Sass equivalents.

17.

root_path -> '/'
root_url  -> 'http://www.example.com/'
get 'help' => 'static_pages#help'
help_path -> '/help'
help_url  -> 'http://www.example.com/help'
← ROR TUTORIAL (3RD ED.) Ch4 Rails-flavored Ruby ROR TUTORIAL (3RD ED.) Ch6 Modeling users →