項(xiàng)目的 Demo 在 http://juy.fm 。
這個音樂站點(diǎn)從功能上，可以簡單地理解成是歌單的聚合。所以主要有兩個頁面：一個是歌單聚合頁，一個是歌單詳細(xì)頁（也就是目前 Demo 里展示的頁面）。
這兩個頁面我會復(fù)用一個相同的左右兩欄結(jié)構(gòu)，左邊是輔助欄，右邊是內(nèi)容區(qū)。在聚合頁中，左欄是歌單列表，右邊是當(dāng)前選中的歌單的展示；在詳細(xì)頁中，左欄是一些輔助按鈕，如「返回聚合頁」等，右邊是 Demo 中所展示的歌單具體內(nèi)容。
解釋以上的設(shè)計(jì)結(jié)構(gòu)是為了引出我們采用的工具和結(jié)構(gòu)：Iron Router，Meteor 中最知名的路由插件。我們首先要利用它的 Layout 功能，實(shí)現(xiàn)頁面整體框架的復(fù)用，亦即左邊 sidebar，右邊 main content 的整體結(jié)構(gòu)。
此處有一個小細(xì)節(jié)：雖然兩個頁面的整體結(jié)構(gòu)一致，但樣式不一定相同，比如聚合頁的左欄是列表，寬度會比較大。為了區(qū)分樣式，需要在結(jié)構(gòu)的頂層（也就是 <body> 標(biāo)簽）上加 class，我目前想到的實(shí)現(xiàn)方式是在 router.js 中渲染整體結(jié)構(gòu)之前加。（因?yàn)榇藭r body 這個 DOM 已經(jīng)有了）
另外，目前使用了一個樣式預(yù)編譯的插件，它兼具把 stylus 轉(zhuǎn)換成 css 和對 css 進(jìn)行 auto-prefixer 處理的功能。
Github代碼：模板整體結(jié)構(gòu)
