项目的 Demo 在 http://juy.fm 。
这个音乐站点从功能上，可以简单地理解成是歌单的聚合。所以主要有两个页面：一个是歌单聚合页，一个是歌单详细页（也就是目前 Demo 里展示的页面）。
这两个页面我会复用一个相同的左右两栏结构，左边是辅助栏，右边是内容区。在聚合页中，左栏是歌单列表，右边是当前选中的歌单的展示；在详细页中，左栏是一些辅助按钮，如「返回聚合页」等，右边是 Demo 中所展示的歌单具体内容。
解释以上的设计结构是为了引出我们采用的工具和结构：Iron Router，Meteor 中最知名的路由插件。我们首先要利用它的 Layout 功能，实现页面整体框架的复用，亦即左边 sidebar，右边 main content 的整体结构。
此处有一个小细节：虽然两个页面的整体结构一致，但样式不一定相同，比如聚合页的左栏是列表，宽度会比较大。为了区分样式，需要在结构的顶层（也就是 <body> 标签）上加 class，我目前想到的实现方式是在 router.js 中渲染整体结构之前加。（因为此时 body 这个 DOM 已经有了）
另外，目前使用了一个样式预编译的插件，它兼具把 stylus 转换成 css 和对 css 进行 auto-prefixer 处理的功能。
Github代码：模板整体结构
网友评论