coding with hao-3 起步做網站

JerryNil
JerryNil
Jul 10, 2017 · 3 min read

render 的時候,路徑是從 views 開始算

刷新畫面:cmd+ r

當點擊/about 時,routes 會提示由 pages#about 來執行,接著預設會在view/pages 裡尋找同名 about.html.erb 並 render 出來

routes > controller > view

把重複的 code (例如 header) 移到 layout

引入 bulma (一種 css 套件)

到 yarnpkg.com (前端 js 跟 css 套件的管理網站) 裝 bulma

brew install yarn
yarn install bulma

到 application.css 引入 (以 node_modules 為起點計算檔案所處路徑)

*= require bulma/bulma

container 可以讓兩邊有點距離

bulma 會把所有 css 特性的 tag (例如 h1 h3 p) 都消除掉,只用 class 來定義 css

section 包 container 可以得到適當的高度及寬度

erb = embeded ruby

<%= %> 會執行 ruby code 並將結果印在螢幕上

從資料庫抓資料,顯示到螢幕上有兩個方法

  1. 從資料庫抓到 controller
  2. 從 controller 傳到 view

從 controller 傳到 view

在 controller 的 方法裡定義一個實例變數 (instance variable)

下面這個語法可以達到的結果:

<a href="/" class="nav-item is-tab is-hidden-mobile <%= "is-active" if current_page? "/" %>">Home</a>
<a href="/about" class="nav-item is-tab is-hidden-mobile <%= "is-active" if current_page? "/about"%>">About</a>

必裝 sublime text 套件

emmet (https://github.com/sergeche/emmet-sublime)

erb snippet (https://github.com/matthewrobertson/ERB-Sublime-Snippets)

material theme (https://github.com/equinusocio/material-theme)

打 er 按 tab 鍵,出現:

<%  %>

打 pe 按 tab 鍵,出現:

<%=  %>

打 if 按 tab 鍵,出現:

<% if  %>

<% end %>

在終端機打 cmd + shift + D 可以在同一個終端機畫面開分割視窗

輸入,可以不產生 javascript 及 css 檔

rails g controller stores --no-assets

一切都是從 routes 開始的

index 通常就是第一個進入點

JerryNil’s Coding Diary

    JerryNil

    Written by

    JerryNil

    JerryNil’s Coding Diary

    Coding Diary

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade