本文摘自 <Hank Chan's Blog>
前言:本文假設你已經知道 <如何在 Weebly 上修改程式>。
除了 HTML,CSS 之外,前端網頁設計的最重要元素就是 JavaScript 了。它提供更複雜的使用者互動介面,並讓你的靜態網頁開始具備運算能力。本文章將會教你如何在 Weebly 上嵌入 JavaScript,進行 Google Analytics 追蹤,嵌入簡單的 JQuery 套件,或者是呼叫其他網站服務的 API。 1. Settings > SEO > Footer Code
當 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
應用:呼叫 JQuery 的 CDN,並且用 JQuery 對網站套件進行修改 3. Theme > HTML Editings > 直接嵌入在 HTML 模板
和修改 HTML 模板的途徑一樣,你可以直接在原始碼上直接添加 JavaScript。這樣的應用範圍限於 HTML 模板,像是 Header Page 和 Landing Page。
應用:用 JavaScript 為 Landing Page 添加一些特殊功能,像是小遊戲。 4. Theme > HTML Editings > Assets > Upload or Create JavaScript
當 JavaScript Code 的數量越來越多時,最好就是將 JavaScript 獨立出來打包成一個檔案。所有 JavaScript 的檔案名就是 .js,而你可以將這些檔案存在 Assets (沒錯,就是那個也能存圖片,CSS files 的地方)。接著,你可以在 HTML 模板或是各別頁面上用 Script 的方式呼叫這些 js 檔案,如下列的 code。
應用:需要較多 JavaScript code 的時候 5. Drag & Drop > HTML Embed 最後一個方法,也是大家最熟悉的方法: Drag & Drop。透過 Drag & Drop 你可以輕鬆地將第三方套件直接嵌入你的網頁上,像是 Disqus 的留言套件,和 Mailchimp 套件。但是由於從 Drag & Drop 放入的 JavaScript 和頁面上的其他物件都會被放在 <body> 中,瀏覽器有時候得優先處理 JavaScript 才能繼續跑其他的 HTML 物件,所以會拖累到 <body> 裡 HTML 物件的顯示速度。只有在少量 JavaScript code 的情況下才會推薦使用。 應用:嵌入 Disqus 留言套件,嵌入 Mailchimp Signup 套件 =========================================================== 懂得 JavaScript 將會開啟創作 Weebly 套件的大門。透過 JavaScript 你將可以了解如何運用我們提供的 <如何嵌入影片背景> <如何顯示年份> 等進階文章。 延伸閱讀:<3 種修改 HTML 的方法> <四種修改 CSS 的方法>
Comments
|
Details
Hank在原本想幫家裡 中藥店 架網站的想法下,誤打誤撞的進入了 Weebly 的世界,從此成為 Weebly 的愛好者. Categories |