Skip to content
This repository
Browse code

changed doc assets-zh to new version

  • Loading branch information...
commit b0382bcfde81b0f317bd382e74fc8ff113a25a7d 1 parent 0ccf3e0
Fred Chu authored

Showing 1 changed file with 52 additions and 20 deletions. Show diff stats Hide diff stats

  1. 72  docs/assets-zh.md
72  docs/assets-zh.md
Source Rendered
... ...
@@ -1,10 +1,12 @@
1  
-## Assets
  1
+# Assets
2 2
 
3  
-### 命名
  3
+COKE 透過 YAML 檔來管理 assets,可以在設定檔裡設定 `css` 跟 `js` 的群組,然後 COKE 會按照設定去取用指定的群組跟檔案。為了方便 debug,所以在 `develoment` 模式 COKE 會各別列出指定的檔案,但在 `production` 模式,COKE 會幫每個有使用到的群組都各別壓縮成一個有版本號的檔案,例如要使用 css 的 `common` 群組跟 `contact` 群組,在 `production` 模式的時候 COKE 會把 `common` 群組裡所有的檔案壓縮成一個 css 檔、`contact` 群組裡所有的檔案壓成另一個 css 檔。
4 4
 
5  
-首先,請將您的 CSS 檔放到 `path-to-project/public/css` 資料夾,js 檔放到 `path-to-project/public/js` 資料夾。
6 5
 
7  
-然後在您的文字編輯器打開這個檔案 `path-to-project/config/assets.yml` ,會看到以下預設的檔案內容:
  6
+
  7
+## Configurations
  8
+
  9
+Assets 設定檔的位置在 `config/assets.yml` ,以下是預設的設定。
8 10
 
9 11
     ---
10 12
     path:
@@ -40,17 +42,22 @@
40 42
         site:
41 43
           - common/ga
42 44
 
43  
-在 `path` 區塊裡的 `css: css` 指的是, Coke 會去 `path-to-project/public/css` 找您的 CSS 檔,但如果改成:
44 45
 
45  
-    ---
  46
+
  47
+## 命名
  48
+
  49
+預設的 `stylesheets` 、 `javascripts` 資料夾路徑是 `css` 、 `js` ,你可以把 `css` 跟 `js` 改成你想要的名字,例如 `stylesheets` 跟 `javascripts`,修改後就會變成:
  50
+
46 51
     path:
47 52
       output: assets
48  
-      css: style
49  
-      js: js
  53
+      css: stylesheets
  54
+      js: javascripts
  55
+
  56
+
50 57
 
51  
-Coke 就會去 `path-to-project/public/style` 資料夾找您的 CSS 檔。
  58
+## Assets 群組
52 59
 
53  
-接下來請看下面這段
  60
+接下來請看下一個區塊
54 61
 
55 62
     css:
56 63
       # css group name
@@ -67,11 +74,23 @@ Coke 就會去 `path-to-project/public/style` 資料夾找您的 CSS 檔。
67 74
         site:
68 75
           - scaffold
69 76
 
70  
-上面這段的意思是「有兩個 CSS 群組,一個叫做 `common` ,一個叫做 `scaffold`,呼叫 `common` 這個群組的時候,Coke 會自動去拿 `path-to-project/public/css/common` 資料夾裡面的 `reset.css`、`util.css`、`base.css`、`header.css`、`nav.css`、`flash.css`、`footer.css` 這些 CSS 檔,如果呼叫 `scaffold` 這個群組的時候,Coke 則會去找 `path-to-project/public/css/` 資料夾裡面的 `scaffold.css`。」。
  77
+這個區塊有兩個群組,一個叫 `common`,另一個叫 `scaffold`,COKE 呼叫 `common` 群組的時候,會把 `public/css/common` 資料夾裡的檔案都放進 view 裡並產生連結:
  78
+
  79
+    /css/common/reset.css
  80
+    /css/common/util.css
  81
+    /css/common/base.css
  82
+    /css/common/header.css
  83
+    /css/common/nav.css
  84
+    /css/common/flash.css
  85
+    /css/common/footer.css
  86
+
  87
+在呼叫 `scaffold` 群組的時候, COKE 會幫 `public/css/scaffold` 資料夾裡的 `scaffold.css` 在 view 裡產生連結。
  88
+
71 89
 
72  
-需要注意的是,`common` 是預設會載入的群組,不用另外寫指令就會幫您載入。
73 90
 
74  
-如果新增一個叫做 `contact` 的群組,呼叫 `contact` 群組的時候想要拿 `path-to-project/public/css/` 資料夾裡的 `contact.css` 這個檔案的話,可以這樣寫:
  91
+### 新增群組
  92
+
  93
+如果要新增一個群組叫做 `contact`,而這個群組有 `base` 、 `mail` 兩個 css 檔,以下是新增後的結果:
75 94
 
76 95
     css:
77 96
       # css group name
@@ -86,12 +105,23 @@ Coke 就會去 `path-to-project/public/style` 資料夾找您的 CSS 檔。
86 105
           - common/footer
87 106
       contact:
88 107
         site:
89  
-          - contact
  108
+          - contact/base
  109
+          - contact/mail
90 110
       scaffold:
91 111
         site:
92 112
           - scaffold
93 113
 
94  
-如果想要把別的網站上的檔案拿來用,則可以把檔案路徑放到 `cdn` 這個子群組底下:
  114
+
  115
+
  116
+### 預設會載入的群組
  117
+
  118
+COKE 預設會載入 `css` 跟 `js` 的 `common` 群組,但如果 `common` 群組裡不填任何東西的話,COKE 就不會產生 `common` 群組的連結。
  119
+
  120
+
  121
+
  122
+### CDN
  123
+
  124
+通常在做網站的時候,不會把 jQuery 或是其他很知名的檔案放到自己的網站上,這時候就可以把這些檔案的連結放到 cdn 這個區塊,但 COKE 不會壓縮 cdn 區塊的檔案。
95 125
 
96 126
     js:
97 127
       # js group name
@@ -101,13 +131,15 @@ Coke 就會去 `path-to-project/public/style` 資料夾找您的 CSS 檔。
101 131
         site:
102 132
           - common/ga
103 133
 
104  
-`jquery.min.js` 是放在別的網站上的檔案,但可以透過 `cdn` 這個子群組設定來取用,而 `site` 子群組是拿目前網站上的檔案來用。
105  
-
106  
-### 取用
  134
+## 將 assets 群組放進 view
107 135
 
108  
-在 `assets.yml` 設定好群組之後,取用的方法很簡單,只要在任何一個 view 加上
  136
+完成了以上的設定之後,就可以在 view 裡透過以下的 helper 把群組放進 view 裡
109 137
 
110 138
     <? it.styles.push( 'contact' ); ?>
111 139
     <? it.scripts.push( 'test' ); ?>
112 140
 
113  
-就可以把 CSS `contact` 群組跟 js `test` 群組的檔案拉進來了。
  141
+
  142
+
  143
+## Production 模式
  144
+
  145
+在 `production` 模式,COKE 預設輸出 assets 的資料夾是 `public/assets/` ,如果要更改的話,把 `path` 區塊的 `output` 改成想要輸出的資料夾名稱即可。如果為了讓使用者可以更快的下載檔案,要把 assets 放在 aws s3 或是其他的地方,可以在 `asset_host` 設定。

0 notes on commit b0382bc

Please sign in to comment.
Something went wrong with that request. Please try again.