在 Weebly 上製作倒數計時器

本文摘自 <Weebly in 3 Min>

前言:本文將假設你已經了解  <如何善用 App Center>

做網站時常遇到需要倒數計時器,像是促銷專案將到什麼時候結束,活動報名到什麼時候截止。有了倒數計時器就更能將訪客流量轉換成使用者行動,像是增加購買人數或是報名人數。小米之前的飢餓行銷某種程度上就是善用倒數計時器。

本文將要教你兩種方法如何在 Weebly 上安裝倒數計時器。



1. App Center 

首先,因為倒數計時器並不是 Weebly 的預設套件,我們得先去 App Center 下載倒數計時器。搜尋 Countdown,並選擇第一個的 Countdown (免費) 或是第三個的 Countdown Timer (免費),如下圖。

圖 1

這邊我選擇第一個的 Countdown,點擊後再點 Add,然後將他連到你的 Weebly 網站,如下圖。
圖 2

這個 Countdown 套件就會出現在你的 Weebly 網頁上了。
回到你的 Weebly Drag & Drop page,將 Countdown 套件拖曳到你想要的位置。接著,點擊 Countdown,他的編輯欄就會冒出來,就像其他的 Weebly 套件一樣,如下圖。
圖 3

你可以透過 Edit 進去來調整 Countdown Timer 上的文字,時間,大小,和設計,如下圖。
圖 4
使用第三方為 Weebly 寫的外加套件雖然方便但有個壞處。它們常常提供你兩個版本:免費版和付費版 ; 免費版功能常常有局限外,也常常有他們的 logo。如果你不介意他們的 logo,自然沒問題 ; 如果你介意,可能要自己來寫點 code,請繼續看第二個方法。


2. DIY

在使用第二個方法前,請先閱讀 <如何修改程式碼> 以及 <如何修改 JavaScript>。將以下提供的 HTML, CSS 和 JavaScript 個別貼在所屬的地方。你可以將 HTML code 用 Drag & Drop 的方式貼在網頁上任何地方 ; CSS 則是用 <style></style> 包裹起來後貼在   Page > 有用到 Countdown 的 page > SEO Settings > Footer。



因為製作 Countdown Timer 將需要為數較多的 JavaScript,所以我們特地把 JavaScript 獨立出來成一個檔案。進入 Theme > Edit HTML/CSS > Assets,成立新的檔案叫 countdown.js,並將提供的 JavaScript code 貼上,如下圖。
圖 1
最後,到 Page > 有用到 Countdown 的 page > SEO Settings > Footer,並將下列的 code 貼上。這是用來呼叫獨立出來的 JavaScript 檔案。

<script type="text/javascript" src="/files/theme/countdown.js">
</script>


這樣就大功告成啦~。







延伸閱讀 <如何製作 Count 套件>

3 種在 Weebly 上修改 HTML 的方法

本文摘自 <Weebly in 3 Min>

前言:本文假設你已經了解 <如何修改程式碼>

只要是稍微進階的 Weebly 使用者都會難免遇到要修改 HTML 的狀況。本文將要教你三種技巧來修改 HTML。



1. Drag & Drop 

將 HTML Embed 套件拖曳到你想要的位置,如下圖。通常會使用這樣的情況還蠻多的。像是 將 Mailchimp 的 Sign Up Form 嵌入進的你的網頁,或是向使用者討讚 XD。

圖 1



2. Theme > Edit HTML/CSS > Header Type

進入後台程式編輯後,在 Header Type 中找到你想要編輯的頁面,如下圖。這通常是當你想要對頁面設計做大幅度的更改,像是遮蔽掉 Weebly 免費版中強制嵌入的廣告,或是增加另外一個 section

圖 2



在編輯完後,回到 Page > 你的 Page > Header Type,來確認你使用的 Header Type 是一致的。

圖 3

3. 使用 tpl

這是相當進階的做法,只有在為數相當多的 HTML code 的情況下推薦使用。 Weebly 使用 Mustache 技術將同個 block 的 HTML 脫離出去成立另一個檔案。在原本的 Header Type file 中就只剩下如以下的 code。第二段中用 curly braces 包夾的名稱就取代了原本佔了幾十行的 HTML code,在日後維護程式碼也簡潔多了。

<div id="footer-alternative">
   {{>alternative-footer}}
</div>


接著將脫離出去的 HTML block 存在獨立的 tpl file 中。先在 Partials 中成立一個新的 file,並將副檔名命名為 tpl,檔名則必須要和之前在 HTML 模板中留下的 curly braces 一樣。如果 curly braces 是長這樣 {{>alternative-footer}},那麼檔名則必須是 alternative-footer.tpl,如下圖一樣。
圖 4

以上三種方法針對使用者的不同需求而設立。




如何修改 Weebly 網站的程式碼

本文摘自 <Weebly in 3 Min>

相比 Wix 或是 Squarespace , Weebly 最大的優勢就是它允許你修改網站的程式碼 (了解 Wix, Weebly, 和 Squarespace 的差別)。這讓 Weebly 做出來的網站有無限的可能,只要你會一些基本的 Html, CSS, 和 JavaScript 的話。

Weebly 除了提供直接嵌入 HTML 的套件 (如下圖 1),更允許你直接進入後台修改程式碼。如下圖 2 所示, Theme > HTML,就可以在後台修改程式碼了。

圖 1


圖 2


本文將會專注探討如何善用 Weebly 後台程式修改的功能。這有兩種方式:一種是使用別人已經寫好的 code,另一種是自己來寫 code。讓我們先聊聊第一種方法。

第一種方法:Weebly in 3 MinsWebnotsWeebly Tricks 有許多已經寫好的 Weebly 套件。只要照著這些網站的教學,你可以在不用自己寫 code 的情況下修改網站。這些網站提供很多連你也沒想過的網站設計和功能,像是固定按鈕,影片背景,非常適合訓練自己的前端設計思維。

第二種方法:自己來寫 code。自己架網站,總是會遇到只有自己網站才獨有的特色或功能,這時候得自己寫 code 了。如圖 3,我們先為你一一介紹 Weebly 程式後台的功能。

圖 3

1. Tool Bar (功能列,從左至右)

  • 提供黑色和白色的 coding 背景
  • 搜尋
  • Docs - Weebly coding 的使用說明書
  • Auto Preview (自動更新預覽)

Weebly 的後台最大的特色之一就是自動更新預覽。當你一寫出一段 code,系統就會自動更新下方的預覽頁面 (Preview)。這樣可以即時檢查你寫的 code,不過如果你寫的是較長的 code,自動更新預覽功能反而會變得非常擾人,建議是關閉比較好。



2. Theme Name (主題名稱)

你可以在 Theme Name 上點擊兩下來更改你的主題名稱。每當你在你的 Weebly 網站上進行程式修改,Weebly 會將你的更新儲存在另一個主題。這樣你還是可以保有原生的主題。



3. Header Type (HTML 模板)

你的網站所使用的 html 模板全都放在 Header。所有 Weebly 網站使用的 html 模板基本就是這三種: header, no-header, 和 splash,如下圖。



4. Styles (CSS 模板)

所有你的網頁使用的 CSS (Style Sheets) 都會出現在 styles 中的 main.less 或是 main_style.css 檔案裡。要修改 CSS 也是從這邊修改。順帶一提, 2016 年以後出現的 Weebly 主題都是使用 Less,它是 CSS 的更高階語言。所謂高階,其實也就是簡化在 CSS 上重複的步驟。

延伸閱讀 <如何修改 CSS> < Less >



5. Partials (局部模板)

Partials 裡集合了所有拆開的 html 組件,這些組件在許多 html 模板上被重複使用,像是 blog, ecommerce,navigation,membership,search box。



6. Assets (有使用的資源)

Assets 集結了你的網站會使用的資源,像是圖片,scripts (也就是 javascript),如下圖。你可以將圖片儲存在 Assets 裡 ; 任何存在 Assets 的圖片都會被賦予一個 url,看延伸閱讀來了解如何製作圖片連結。另外,你可以將 javascripts 存在 Assets,再用連結從 html 提取,請看延伸閱讀。

延伸閱讀:<如何製作圖片連結> <如何嵌入 Javascript>



7. Export Theme (輸出主題)

另外,相比 Wix 或是 Squarespace,Wix 的另一個優勢就是它允許你將整個網站的程式碼輸出並下載下來。如果你想要將你的主題備份起來,以備不時之需,或是製作主題給客戶,這功能是相當重要 (注意備份主題和備份網站是不同的,如果你要備份整個網站,請看 <如何備份整個網站> )。看延伸閱讀來了解如何輸出主題。

延伸閱讀:<輸入和輸出主題>



8. Coding Area (程式介面)

這裡就是你瀏覽和修改程式碼的地方了。



9. Preview (預覽頁面)

在 Coding Area 更新的程式碼都會直接反應在 Preview。如果你在 tool bar 上點選 auto-preview,每一次的程式更改都會引起 Preview 自動更新。



10. Full Screen Mode (全螢幕)

點選 Full Screen Mode 可以全螢幕瀏覽 Preview。



11. Save (儲存)

這大概是本篇文章裡最重要的功能了。每次的程式更改後,絕對不能忘記按下儲存鍵。






5 種在 Weebly 上修改 JavaScript 的方法

本文摘自 <Weebly in 3 Min>


前言:本文假設你已經知道如何在 Weebly 上修改程式

除了 HTML,CSS 之外,前端網頁設計的最重要元素就是 JavaScript 了。它提供更複雜的使用者互動介面,並讓你的靜態網頁開始具備運算能力。本文章將會教你如何在 Weebly 上嵌入 JavaScript,進行 Google Analytics 追蹤,嵌入簡單的 JQuery 套件,或者是呼叫其他網站服務的 API。


1.  Settings > SEO > Footer Code
範例 1

當 JavaScript 放在 Setting 時,他的應用範圍是全網站的。舉個例子,當你想要用 Google Analytics 功能來追蹤你的網站訪客來源和數量時,Google 會要求你將一段他們提供的 JavaScript code 複製在每個頁面上。JavaScript 一般而言最適合放在 footer,因為這樣可以讓 瀏覽器優先顯示 <Body> 中的 HTML 物件才去 compile JavaScript,才不會拖累到在 <Body> 中 HTML 物件的顯示速度。以下 2. ~ 4. 的方法也都建議將 JavaScript 放在 footer。

應用:Google Analytics,Facebook Like 按鈕



2. Pages > 你要的 Page > SEO > Footer Code
範例 2
放在各別 Page 的 JavaScript 的應用範圍只限於該頁面。這通常是當你想要用 JavaScript 給該頁面做一些微調,像是隱藏或是修改某些在整個網站上通行的預設套件,並且呼叫 CDN。

應用:呼叫 JQuery 的 CDN,並且用 JQuery 對網站套件進行修改



3. Theme > HTML Editings > 直接嵌入在 HTML 模板
範例 3
和修改 HTML 模板的途徑一樣,你可以直接在原始碼上直接添加 JavaScript。這樣的應用範圍限於 HTML 模板,像是 Header Page 和 Landing Page。

應用:用 JavaScript 為 Landing Page 添加一些特殊功能,像是小遊戲。



4. Theme > HTML Editings > Assets > Upload or Create JavaScript
範例 4
當 JavaScript Code 的數量越來越多時,最好就是將 JavaScript 獨立出來打包成一個檔案。所有 JavaScript 的檔案名就是 .js,而你可以將這些檔案存在 Assets  (沒錯,就是那個也能存圖片,CSS files 的地方)。接著,你可以在 HTML 模板或是各別頁面上用 Script 的方式呼叫這些 js 檔案,如下列的 code。

<script src="/files/theme/yourjavascriptfile.js"
 type="text/javascript"></script>


應用:需要較多 JavaScript code 的時候





5. Drag & Drop > HTML Embed
範例 5

最後一個方法,也是大家最熟悉的方法: Drag & Drop。透過 Drag & Drop 你可以輕鬆地將第三方套件直接嵌入你的網頁上,像是 Disqus 的留言套件,和 Mailchimp 套件。但是由於從 Drag & Drop 放入的 JavaScript 和頁面上的其他物件都會被放在 <body> 中,瀏覽器有時候得優先處理 JavaScript 才能繼續跑其他的 HTML 物件,所以會拖累到 <body> 裡 HTML 物件的顯示速度。只有在少量 JavaScript code 的情況下才會推薦使用。

應用:嵌入 Disqus 留言套件,嵌入 Mailchimp Signup 套件





=======================================================================

懂得 JavaScript 將會開啟創作 Weebly 套件的大門。透過 JavaScript 你將可以了解如何運用我們提供的 <如何嵌入影片背景> <如何顯示年份> <製作倒數計時器> 等進階文章。



延伸閱讀: <3 種修改 HTML 的方法> <4 種修改 CSS 的方法>

在 Weebly上製作 Line 分享按鈕

本文參考自 <Weebly in 3 Mins>

前言:本文假設你有一些基本的 HTML CSS and JavaScript 概念,以及如何在 Weebly 上進行程式更改的動作。你可以閱讀這篇 <如何在 Weebly 上修改程式>。

用 Facebook 和 Line 來分享是台灣目前的主流。相較 Facebook 提供了很多的分享套件,和許多網站提供的分享按鈕,Line 的分享按鈕反而相當少見。本文章將要教你如何善用 Line 官網所提供的按鈕,方便你的用戶直接將你的網頁分享到 Line 的群組,如下圖。

Weebly in 3 Min 的 Footer



首先,到 Line 的 social plugin 開發網頁。他有三個分享的按鈕給你選擇:"Line it", "Add friend", "Like"。你依照你的需求選擇相應的 social plugin。這邊將用 "Like" 來當作範例教你如何嵌入到你的 Weebly 網頁,如下圖 1 和 下圖 2。

圖 1
  1. 在 Set URL 上加入你想要用 Line 分享的網頁網址。

  2. 在 Select a share option 的兩個選項中選一個你想要的按鈕。這邊是選擇左邊的按鈕。

    圖 2

  3. 再往下滑,如圖 2,它會問你要不要加上 "Add friend"。如果沒有 Line 的官方粉絲帳號,就選擇左邊的 off。

  4. 經過這一系列的設定後,Line 就會幫你產生出 code。它通常長得像下面這一段 code。
<div class="line-it-button" data-lang="en" data-type="like"
 data-url="http://yourwebsite.com/" data-share="true"
 style="display: none;"></div>  /* HTML */
 <script src="https://d.line-scdn.net/r/web/social-plugin/js/
thirdparty/loader.min.js" async="async" defer="defer"></script>
   /* JavaScript */


5. 你可以將第一段的 HTML code 嵌入在你的 Weebly 網頁上任何一個地方,透過 embed code 這個套件。你也可以透過 Theme > Edit HTML 直接嵌入這段 HTML code 到原始碼中。

6. 將第二段的 JavaScript 嵌入在 Settings > SEO > Footer Code。這樣你的 Line sharing button 就大功告成了。



Line 是 Facebook 之外台灣人目前最喜歡用的聊天 app,尤其是中老年人特別喜歡用 Line 群組來分享一些圖文並茂的文章。如果你網頁針對是這樣年齡層的使用族群,那麼在你的網頁上加上 Line 分享功能就非常重要了。