Posted by : Hank Chan 10 July 2017

本文大部份摘自於 <Webnots>

相比 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,如下圖。



延伸閱讀 <如何修改 HTML>

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 (儲存)
這大概是本篇文章裡最重要的功能了。每次的程式更改後,絕對不能忘記按下儲存鍵。




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