Powered by Blogger.

Weebly 更快速的網站架設 (中) - 善用 App Center

Weebly 的預設套件讓他相比 Wix 看似遜色很多,但其實在它的 App Center 裡收藏了上百種外加套件,其中有許多殺手級應用等著你去發掘。Weebly 這樣做是為了讓使用介面更輕便,反正一般使用者不需要到這麼多複雜的功能。( 點這了解更多 Weebly 和 Wix 的差別 )

在 2016 年以後的 Weebly 版本裡,App Center 位於 Drag & Drop 工具欄的最下方,如下圖。本文將為你解說 App Center 裡的殺手級應用。

圖 1

App Center 將所有外加套件歸類成四種。如上圖所示,但我個人認為這樣的分類其實不清楚,反而找不到許多功能強大的套件。如果你已經有鎖定的第三方 App,建議直接輸入關鍵字搜尋。以下是我用過,且相當推薦的套件:

- Counter

- Countdown Timer

- Powr Countdown

- FAQ

- PinPoll

- Powr Hit Counter

- Price Chart

- Tab

- Team Card

如果你有注意到,Powr 推出了許多非常方便的套件。Powr 是個在推出第三方網頁應用上非常有名氣的公司,他除了在 Weebly,也在 WordPress上推出許多應用。

App Center 裡除了有少數由 Weebly 自己開發的外掛套件之外,大部分都是第三方所寫的 App。使用第三方的外掛套件有個壞處是它們總是有 Logo,除非你打算付費來移除 Logo。不過,本專欄也設有教學讓你自己 Coding 就可以製作這些套件:

<Weebly 攻略 - Hit Count 來訪人數>
<Weebly 攻略 - 製作到數計時器>
<Weebly 攻略 - 如何製作 Count 套件>
<Weebly 攻略 - 你的產品收費表>
<Weebly 攻略 - 應用 Accordion 套件>



延伸閱讀  <Weebly 攻略 - 如何成為 Weebly 開發者>
Tag : , ,

Weebly 攻略 - 製作倒數計時器

本文參自於 <Webnots> <W3Schools>

前言:本文將假設你已經了解  <如何善用 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 > Header。



因為製作 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 套件>
Tag : , ,

Weebly 攻略 - 3 種修改 HTML 的技巧

本文參考自 <Weebly Developer Center>

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

只要是稍微進階的 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

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




Tag : , ,

Weebly 攻略 - 5 種嵌入 JavaScript 的方法

本文大部分參考自 <Webnots>

前言:本文假設你已經知道如何在 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 的方法>
Tag : , ,

Weebly 攻略 - 如何用 Line 來分享你的網站

本文參考自 <Line Developers>

前言:本文假設你有一些基本的 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 分享功能就非常重要了。
Tag : , ,

Weebly 攻略 - 4 種修改 CSS 的方法

本文部分參考自 <Webnots>

前言:本文假設讀者已經具有 CSS 的基本知識。

Weebly 雖然不像 Wix 一樣有許多的主題和套件模板供你選擇,但他們開放程式碼讓你修改 HTML, CSS, 和 JavaScript,讓你可以自己打造和客製化自己的套件 (點這了解如何修改程式碼)。本文章將要教你四種在 Weebly 修改 CSS 的方法。

1. 為單一頁面增添 CSS
有時候為了在特定頁面上添加一些額外套件,尤其是 Weebly 沒有的套件,像是 背景影片 或是 banner,就必須添加額外為套件所寫的 CSS。首先,進入 Pages > 選擇你要的 Pages > SEO settings > Header Code,並照以下指示添加程式碼。

<style>
  // Add your CSS code here
</style>
這樣的 CSS code 只能應用在單一頁面上,好處是它不會增加其他頁面 loading 的負擔。


2. 在網站的 SEO Setting 修改 CSS
如果想要針對整個網站的設計進行簡單的修改, 像是改變整體文字的預設大小或顏色,可以到 Settings > SEO > Header Code 添加以下的 code。

<style>
  // Add your CSS code here
</style>


3. 在 main style sheet 或是 main.less 上修改 CSS
如果是要從事更複雜的 CSS 修改,像是 navigation bar, footer,就必須要修改你的 main style sheet。這邊,我假設你已經閱讀了 <如何修改程式碼>。進入 HTML Edit,然後找到 main-style.css,或是 main.css,或是 main.less,如下圖。
( p.s. 不同的 Weebly 主題模板使用不同的 CSS file,2016 以前的 Weebly 主題使用純 css,之後使用 less。Less 是 CSS 的 pre-processor,它簡化了一些 CSS 的步驟,不過同樣是可以接受 CSS code。)


這邊你可以找到所有網站套件會使用到的 CSS。你可以直接編輯這些 CSS,或是透過 !important 的手段另外寫 CSS 來 override 本來的設定。要記得的是,只要是有添加或是更改 CSS 都要用 comments 來標注本來的設定,如以下。每次修改 CSS 加上 comments 是個好習慣,尤其是之後要再回復成原本設定就方便了。

  .copyright {
  font-size: 16px; /* Original size is 14px */
  text-align: center; /* Orignial text is left-aligned */
  color: white;  /* Original text color is black */
}
因為 main style sheet 上的 CSS 會應用到整個網站,所以不建議隨意修改。而且在 main style sheet 上添加太多的 CSS 會造成後續維護的負擔。


4. 上傳額外的 CSS 檔案
最後一個也是最少人知道的手段,就是上傳額外的 CSS 檔案。進入 Theme > HTML Edit > Assets 後,你可以將 CSS 檔案上傳到這邊,如下圖。


之後在 Page > Header Code 中添加下列的 code 呼叫 CSS file 就好了。

<link href="http://yourwebsite.com/files/theme/your-css-file.css"
 rel="stylesheet" type="text/css"/>


對某些人來說 - 當需要寫為數較多的 CSS 時,在單一頁面上的 header code 既不適合,而 main style sheet 也已經負載過多,這時候有個獨立的 CSS 檔案就有好處。另外,如果你還沒有意識到的話,其實你也可以在你的 Weebly 網站上存放 CSS 檔案和其他圖片資源來供你的其他網站使用。



延伸閱讀:<如何修改 HTML> <如何修改 JavaScript>
Tag : , ,

- Copyright © Hank Chan 的所思所想 - Skyblue - Powered by Blogger -