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 的方法>

comments powered by Disqus