A template for twstat development usage.
- install nodejs & npm
- install bower
- install twstat-cli
第一次請執行
$ bower install
開啟Local web server
$ python -m SimpleHTTPServer
Once this is running, go to http://localhost:8000/.
開始一個新專案第一步先創立一個新的 folder 看你這個圖表要叫做什麼，例如：template，就在 root folder 下面開一個叫template的資料夾。
然後到 lists.json 裡面找到 data.page 裡面是一個 array, 在 array 的第一個 item 之前 create 你的 project object.
會像是：
{// 專案的 title"title": "2007 ~ 2014 年台灣垃圾處理統計",// 專案的 url 一定要跟你 create folder 的 name 要一樣"url": "garbage",// 專案的圖片一律存在 images 這個 folder 的下面"img": "images/garbage.png",// 當你在 fb fans page po 的文複製到 description"description": "台灣每年產生 700 萬噸以上的垃圾(一天2萬噸)，這麼大量的垃圾如何處理是一個重要的課題。究竟衛生掩埋、焚化、資源回收，哪個才是台灣垃圾處理最大宗？而2002年環保暑發佈了《垃圾回收再利用法》是否改變了台灣垃圾處理的方式？",// 作者姓名"author": "you name"}要開始一個新專案首先要先創立一個新的 index.hbs 在你剛創立的那個 folder 下面，那個 hbs，裡面有很重要的五個區域 {{>head}}, {{> header}}, {{> start}}, {{> end}}, {{> footer}} 這五個區域分別會 include 一些 script。
下面是一個 example 的 index.hbs ，後面分別會講述各部分 include 什麼東西。
index.hbs:
<!DOCTYPE html><head>
{{> head}}
<!-- my js & css --></head><body>
{{>header}}
{{> start}}
<!-- my charts -->
{{> end}}
<!-- my js & css -->
{{> footer}}
</body>head 區塊會 include 下面這些東西, semantic, d3.js, jquery, meta, title..., 所以請不要在其他地方重新宣告。
<metacharset="utf-8"><linkrel="shortcut icon" href="/favicon.ico" type="image/x-icon"><linkrel="icon" type="image/png" href="/favicon.ico" /><metaproperty="og:title" content="用數據看台灣 - {{chart_description.title}}"><metaproperty="og:site_name" content="用數據看台灣 - {{chart_description.title}}"><metaproperty="og:description" content="{{chart_description.description}}"><title>用數據看台灣 - {{chart_description.title}}</title><metahttp-equiv="Content-Type" content="text/html";charset="utf-8"><metaproperty="og:image" content="http://i.imgur.com/04AFcnA.png"><metaproperty="og:image:type" content="image/png"><metaproperty="og:image:width" content="300"><metaproperty="og:image:height" content="300"><metaname="viewport" content="width=device-width, initial-scale=1.0" /><linkrel="stylesheet" href="/bower_components/semantic/dist/semantic.min.css" type="text/css" media="all" /><linkrel="stylesheet" href="/css/style.css" type="text/css" media="all" /><linkrel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"><linkrel="stylesheet" href="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.indigo-pink.min.css"><linkrel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">header 區塊
我們的 header & footer 用 google 所開發的 material-design 所以他會引入一些 material-design 的一些 structure code ，看 material-design doc
header 引入了 mdl 的 header & nav links
<headerclass="mdl-layout__header"><divclass="mdl-layout__header-row"><spanclass="mdl-layout-title"><ahref="http://real.taiwanstat.com/" style="color: #FFF"><imgsrc="/images/assert/round-logo.png" id="round-logo"/>用數據看台灣</a></span><divclass="mdl-layout-spacer"></div><navclass="mdl-navigation mdl-layout--large-screen-only"><aclass="mdl-navigation__link" href="http://real.taiwanstat.com/">台灣開放即時資料</a><aclass="mdl-navigation__link" href="http://long.taiwanstat.com">台灣開放統計資料</a><aclass="mdl-navigation__link" href="http://global.taiwanstat.com/r/">世界即時資訊</a><aclass="mdl-navigation__link" href="http://global.taiwanstat.com/l/">世界統計資訊</a><aclass="mdl-navigation__link" href="http://taiwanstat.com/opendata">開放資料分析部落格</a><aclass="mdl-navigation__link" href="https://www.facebook.com/taiwanstat">Facebook 粉專</a></nav><div></header><divclass="mdl-layout__drawer"><spanclass="mdl-layout-title"><ahref="http://real.taiwanstat.com/"><imgsrc="/images/assert/round-logo.png" id="round-logo"/>用數據看台灣</a></span><navclass="mdl-navigation"><aclass="mdl-navigation__link" href="http://real.taiwanstat.com/">台灣開放即時資料</a><aclass="mdl-navigation__link" href="http://long.taiwanstat.com">台灣開放統計資料</a><aclass="mdl-navigation__link" href="http://global.taiwanstat.com/r/">世界即時資訊</a><aclass="mdl-navigation__link" href="http://global.taiwanstat.com/l/">世界統計資訊</a><aclass="mdl-navigation__link" href="http://taiwanstat.com/opendata">開放資料分析部落格</a><aclass="mdl-navigation__link" href="https://www.facebook.com/taiwanstat">Facebook 粉專</a></nav></div>start 把這個圖表的 title & fb likes 都呈現出來，所以後面只要專心畫圖就好了，不用再寫 fb likes 的 code
<divclass="mdl-layout mdl-js-layout mdl-layout--fixed-header" id="layout-header"><mainclass="mdl-layout__content" id="main-content"><h2id="title">{{chart_description.title}}</h2><divclass="fb-plugin"><divclass="fb-like-box" data-href="https://www.facebook.com/taiwanstat?fref=ts" data-colorscheme="light" data-show-faces="false"></div><divclass="fb-like" data-href="http://real.taiwanstat.com/{{chart_description.url}}" data-width="300px" data-layout="standard" data-action="like" data-show-faces="true" data-share="true"></div></div>end 包含 mdl 的 close tag, 然後包含 google analytics, fb script.
end:
</main></div><scripttype="text/javascript" src="http://d3js.org/d3.v3.min.js"></script><scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><scriptsrc="/bower_components/semantic/dist/semantic.min.js"></script><scriptsrc="https://storage.googleapis.com/code.getmdl.io/1.0.2/material.min.js"></script><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*newDate();a=s.createElement(o),m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)})(window,document,'script','//www.google-analytics.com/analytics.js','ga');ga('create','UA-61023469-1','auto');ga('send','pageview');</script><divid="fb-root"></div><script>(function(d,s,id){varjs,fjs=d.getElementsByTagName(s)[0];if(d.getElementById(id))return;js=d.createElement(s);js.id=id;js.src="//connect.facebook.net/zh_TW/sdk.js#xfbml=1&appId=600079286760117&version=v2.0";fjs.parentNode.insertBefore(js,fjs);}(document,'script','facebook-jssdk'));</script>footer 包含網站 footer 的 template 以及用 js 加入，數據討論區，嵌入碼引入
footer:
<footerclass="mdl-mini-footer"><divclass="mdl-mini-footer__left-section">© 2015 <ahref="#">用數據看台灣團隊</a> | <ahref="http://netdb.csie.ncku.edu.tw">NCKU-NetDB</a>
{{#if chart_description.collaborators}}{{#each chart_description.collaborators}} | <ahref="{{url}}">{{name}}</a>{{/each}}{{/if}}
</div><divclass="mdl-mini-footer__right-section"><spanclass="footer_msg">合作提案、客製化圖表製作、意見回饋
</span>
歡迎來信: <ahref="mailto:contact@taiwanstat.com">contact@taiwanstat.com</a></div></footer><scriptsrc="/js/main.js"></script>