Coserv是一个用于简化Web应用开发的框架，不处理会话和请求体解析等问题，主要解决前后端分工和资源重用等难题。文档介绍了如何设置和修改网站的基本结构、语言和主题，并提供了区域和区块的定义与用法，以及多国语言支持的实现方式。通过使用Coserv，开发者可以更快速有效地构建网络应用，开发时间显著缩短。

1. 不⼀一樣的 Web
Server…
coServ
Part
I
Ben
Lue
2014©
Gocharm
Inc.

2. coServ
…
不是 Express.js
的改良版
è 解決的是不同的問題
不處理 session, cookie, request
body-parsing 的問題
è 這些問題 connect.js 或 express.js 已
經處理的不錯了

3. coServ
要解決的是
• 前、後端如何有效分⼯工
• 前端設計的成果能否重複使⽤用
• 快速有效的使⽤用 BaaS 服務
• 網路應⽤用的開發時間縮減成 1/10

4. 開始我們的 coServ
探索⾏行程吧

5. ⽀支援多網站
利⽤用 node
cli/AddSite
就可建⽴立⼀一個網站的基本結
構
{
"127.0.0.1":
{
"Jtle":
"Single-­‐Page
Web
ApplicaJon
Demo",
"locale":
"en",
"home":
"/index",
"theme":
"index”
}
}
在 sites.json 上指定網域名稱
//
網域名稱
sites.json

6. 變更網站預設語系
{
"127.0.0.1":
{
"Jtle":
"Single-­‐Page
Web
ApplicaJon
Demo",
"locale":
"en",
"home":
"/index",
"theme":
"index”
}
}
//
網站預設語系
試著將 coServ demo 的語系從 en 改成 zh，重
開網站就發現⾸首⾴頁已是中⽂文
sites.json

7. 變更網站樣板
{
"127.0.0.1":
{
"Jtle":
"Single-­‐Page
Web
ApplicaJon
Demo",
"locale":
"en",
"home":
"/index",
"theme":
"index”
}
}
//
網站所使⽤用樣板
修改 sites.json 中 theme 的屬性質，就可以換⼀一
個樣板
sites.json

8. 網⾴頁解剖學
⾴頁⾸首區(Head
Region)
左欄區
(LeU
Region)
主內容區
(Content
Region)
⾴頁尾區(Footer
Region)
右圖顯⽰示⼀一個範
例網⾴頁的架構。
我們通常可以將
⼀一個網⾴頁切割成
幾個主要的區域。

9. 區域可以疊套
提⽰示區 (Status Region)
橫幅區 (Banner Region)
功能選單 (Menu Region)
疊套可以無限層數，直到你把 server 灌爆
（不過灌爆應該不是我們的⺫⽬目的吧）

10. 區域是Layout時的好朋友
每個區域有⾃自⼰己專屬的 HTML 和 CSS。你可以專注在
單⼀一區域的設計，coServ 會為你做 CSS 的保護（不
同區域即使⽤用了相同的id/class也不會衝突）。

11. 區域的範例
<div
class=“top_row”>
<%
block(‘banner’);
%>
</div>
<div
class=“bot_row”>
<%
block(‘gallery’);
%>
</div>
.top_row
{
padding:
5px
auto;
background-­‐color:
#000;
}
.bot_row
{
border:
1px
solid;
background-­‐color:
#888;
}
這個範例將區域切成
上下⼆二列。第⼀一列引
⽤用了’banner’這個區
塊，第⼆二列則引⽤用
了’gallery’區塊。
可以利⽤用區域專屬的
CSS 檔來設定每⼀一列
的⼤大⼩小、樣式等。
HTML
CSS

12. 介紹區塊
「區域」主要是⽤用來做網⾴頁空間的安排。「區塊」
則可以產⽣生實際的內容。
區塊的內容可以由本地端（放在 coServ 上）的
node.js 模組產⽣生，或呼叫 COIMOTION API產
⽣生。
不論是本地模組或 API 回傳的內容，都會放在
value 變數中，讓 template 可以引⽤用。

13. 區塊的組成
區塊最多可由五個檔組成
HTML，最少需要這個檔
CSS，區塊的 CSS 設定
Javascript，是區塊的 controller
Include，如果區塊需要引⽤用其他的 css 或 js 檔
Lang，多國語系的語⾔言檔

14. 區塊HTML
其實是⼀一個 template，可以⽤用來套⽤用執⾏行結果
<%
if
(value.list.length
>
0)
{
%>
<ul>
<%
value.list.forEach(funcJon(item)
{
%>
<li><%=
item.Jtle
%></li>
<%
});
%>
</ul>
<%
}
else
{
%>
<div>No
pages.</div>
<%
}
%>
說明：先檢查有沒有資料(value.list)，如果有資
料，每筆輸出成<li>。如果沒資料就顯⽰示 "No
Pages"。

15. 區塊CSS
也是⼀一個 template，所以也可以套⽤用執⾏行結果
.menu_bar
{
<%
if
(value.isGuest)
{
%>
font-­‐color:
#green;
<%
}
else
{
%>
font-­‐color:
#white;
<%
}
%>
}
說明：如果是訪客(value.isGuest)那麼 menu
bar 的字體顏⾊色⽤用綠⾊色的，已登⼊入的會員字體⽤用
⽩白⾊色的。

16. 區塊Javascript
coServ 把區塊的 Javascript 包裝成⼀一個
controller 物件（類似 node.js 的 module）
ctrl.startup
=
funcJon()
{
//
區塊完全載⼊入後會呼叫此函數。可⽤用來做區塊起始的動作
};
ctrl.extFoo
=
funcJon()
{
//
這個函數在外部看的到（類似 node.js export 的效果）
};
funcJon
intFoo()
{
//
這個函數只在 ctrl 內部看的到
};

17. 區塊lang
Lang檔是 XML 格式，參考以下範例：
<?xml
version="1.0"
encoding="UTF-­‐8"?>
<phrases>
<ph
id="Jtle">
<zh>標題</zh>
<en>Title</en>
</ph>
</phrases>
在 HTML 中這麼叫⽤用：
<h2><%=ph.Jtle%></h2>
coServ 會根據使⽤用者的語系輸出對應的⽂文字

18. 參考資料
第⼀一集先到這裡，以下是參考資料：
coServ 開箱⽂文
http://coimotion.github.io/coServ/zh/index.html
coServ 網站的檔案結構
http://coimotion.github.io/coServ/zh/structure.html
coServ 組裝網⾴頁
http://coimotion.github.io/coServ/zh/layout.html
中⽂文 README
https://github.com/coimotion/coServ/blob/master/README_zh.md

19. Thanks