Front-End Developer 三月份工作坊 2015.03.28 @ CLBC 大船艦
Mark Wu 吳自勝
曾經是前端，跑出來創業，只好當全端。
Wowcar Co-founder
解決中古車買賣資訊不對稱、黑心銷售等問題
最近嘗試把道路救援做成 Uber
創意工作者的社群平台，
你可以在這裡找到一群志同道合的夥伴。
這邊有個適合設計師參加的活動
溝通力、思考力、設計力、傳達力、行銷力、募資力、
動員力、應用力、數字搖滾、後搖滾
還沒有申請 Tumblr 的趕快去申請
修改主題從進入 Customize 開始
引入外部 CSS 的方法
上傳後就可以得到在 Tumblr 上的檔案位址
Google Font 是網路上的絕對位址，直接引入
把 ICON 變成字型來用
因為要引入五種不同的字型檔，
上傳到 Tumblr 有路徑問題要解決。
直接都引入 cdn 就好了
變數 {Varialble}
區塊 {block}{/block}
將 <body></body> 之間的程式碼貼到 Tumblr 上，要用 {block:IndexPage} {/block:IndexPage} 包起來
不然我們還開課幹麻
左上角有原先主題的 menu 按鈕
把原先主題的 html 註解掉
選取起來按 Command + / (Ctrl + /)
手機上顯示還是 Tumblr
進入進階設定關閉使用手機版主題
頁首圖沒有出來
打開 Developer Tools 看個究竟
Command + Option + I (windows F12)
發現是使用 background-image
上傳背景圖至 Theme Assets
在 <style></style> 之間撰寫 CSS 覆蓋屬性
超連結出現底線
CSS text-decoration: none
使用 Font Awesome - Stacked Icons
總共有 12 個 Columns
改成兩欄就把 12 除 2，一欄有 6 Columns
.col-md-4
.col-md-4
.col-md-4
.col-sm-6
.col-sm-6
顏色是由 .text-primary 來控制
依照 Grid System 12 Columns，
作品集數量一定要可以整除 12 。
2, 3, 4, 6 都可以，5 個就是來『亂』的
觸發 Modal 按鈕
modal
關閉按鈕
如果有時間再教如何把 Tumblr 文章改成 Portfolio
靠右 - class="timeline-inverted"
March 2011
An Agency is Born
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt ut voluptatum eius sapiente, totam reiciendis temporibus qui quibusdam, recusandae sit vero unde, sed, incidunt et ea quo dolore laudantium consectetur!
用 facebook API 去抓成員的圖片，這樣就不用更新了。
http://graph.facebook.com/{username}/picture?width=300&height=300
防止讓使用者就這樣離開你的網頁了
target=_blank
那就用 Google 表單當後端吧
不過這邊會需要一點 JavaScript
然後打開 Developer Tools
（Command + Option + I, F12）
找到 form 標籤，把 action 位址記下來。
entry_188... 這個，每題的 id 都記下來。
移除 contact_me.js 的引入
寫在 <script></script> 之間
url, data 參數, 傳送成功函示修改
$.ajax({
url: "https://docs.google.com/forms/d/19CjYWDf-7NxRgVA-b161yVaGIvY_1na8FKzOFNjYduk/formResponse",
type: "POST",
dataType: "xml",
data: {
entry_18897851: name,
entry_1885173539: phone,
entry_1305018232: email,
entry_1893396168: message
},
cache: false,
statusCode: {
0: function() {
// Success message
$('#success').html("");
$('#success > .alert-success').html("");
$('#success > .alert-success')
.append("Your message has been sent. ");
$('#success > .alert-success')
.append('');
//clear all fields
$('#contactForm').trigger("reset");
},
200: function() {
// Success message
$('#success').html("");
$('#success > .alert-success').html("");
$('#success > .alert-success')
.append("Your message has been sent. ");
$('#success > .alert-success')
.append('');
//clear all fields
$('#contactForm').trigger("reset");
}
}
})
工具 -> 通知規則
有人填表你就收到信了
Tumblr 都直接顯示整篇文章，我想要只顯示第一張圖啊...
小心...有大量 JavaScript
{block:Posts}
{block:RebloggedFrom}
{ReblogParentName}
{/block:RebloggedFrom}
{block:Text}
{block:Title}{Title}
{/block:Title}
{block:Body}
{Body}
{/block:Body}
{/block:Text}
{/block:Posts}
{block:Posts}{/block:Posts} 把每篇文章顯示出來
{block:Body}{Body}{/block:Body}