- 登入
- 註冊
發現貼在 Vibe 畫布裡的代碼失效嗎？試著放到頁面設定的頁尾腳本！
截至 2026 年，請 AI 幫忙寫 Vibe 畫布的互動效果越來越常見。但你可能會拿到一段「混在一起」的程式碼，裡面有區塊樣式，也有控制行為的腳本。如果你把整段直接貼進 Vibe 畫布的區塊裡，前台一打開就會發現：版面看起來有，但點按鈕沒反應、計時器沒跑、滑入動畫卡住，AI 答應你的「會動的東西」全死了。
一句話結論：Vibe 畫布的區塊內容不會執行 JavaScript，你必須把 JavaScript 那段「另外抽出來」，貼到右上角星號裡的「即站力 Site Now 頁面設定 → 自訂程式碼片段 → 頁尾腳本」欄位，才會真的生效。
為什麼 JavaScript 直接貼進 Vibe 畫布會失效？#
Vibe 畫布讓你用一段 prompt 產出整塊內容，AI 經常會一次回給你結構（HTML）、樣式（CSS）跟行為（JavaScript）。問題是，秒站的內容區是「給內容用的」，不是「給腳本用的」——當你把整段貼進區塊，瀏覽器看到的 <script> 會被處理成純文字，不會被執行。
結果就是：你看到的版面跟設計稿差不多，但所有「動作」都不見了。按鈕點下去沒事，輪播不會切換，滑到某個位置不會觸發動畫，Google Analytics 自訂事件也沒送出。一切互動，全部死掉。
正確做法是分兩處貼：版面跟樣式留在 Vibe 畫布的區塊內，JavaScript 那段抽出來，貼到「頁面層級」的設定欄位。秒站已經幫你準備好這個欄位，位置就在右上角星號裡。
頁尾腳本是什麼？#
頁尾腳本是秒站「即站力 Site Now 頁面設定」面板裡的一個輸入欄位，貼進去的程式碼會被注入到這頁前台的最尾端，等所有 HTML 跟圖片都載入完才執行。對 JavaScript 來說這個位置最安全，因為這時候頁面上的按鈕、圖片、區塊都已經「生出來」了，腳本不管是要找哪個元素，或是要綁哪個事件，都找得到對應的目標，不會因為「元素還沒準備好」就出錯。
這個欄位也是「單頁設定」，意思是你貼進去的腳本只會在這一頁跑，不會影響其他文章或其他 Vibe 畫布頁面。每頁可以有自己的 JavaScript，互不干擾。
怎麼辨識哪段是 JavaScript？#
不熟程式碼也沒關係，JavaScript 有 4 個非常明顯的特徵，看到任何一個就八九不離十：
- 用
<script>...</script>標籤包起來：最明顯的標記，看到<script>開頭就是 JavaScript。 - 有
function、const、let、var這類字：這些是 JavaScript 在宣告變數跟函式的關鍵字。 - 看到
document.、window.、addEventListener、querySelector：這些是 JavaScript 操作網頁元素跟事件的標準語法。 - 每行尾巴有分號
;、邏輯用大括號{ }包起來：JavaScript 的程式語法特徵。
還是不確定？對照下面這張表，把 AI 回給你的整段拆成三類：
| 種類 | 標籤特徵 | 負責什麼 | 該貼到哪 |
|---|---|---|---|
| HTML | <div>、<p>、<h2>、<img> | 畫面上的文字、圖片、按鈕等結構 | 留在 Vibe 畫布的區塊內 |
| CSS | <style>...</style> | 顏色、字體、間距、版面樣式 | 留在 Vibe 畫布的區塊內 |
| JavaScript | <script>...</script> | 點擊、捲動、計時、表單驗證等互動行為 | 抽出來貼到頁尾腳本欄位 |
實務上的拆法很單純：從 AI 回給你的整段裡，找到 <script> 開頭、</script> 結尾的那一塊，整個剪下來（連同 <script> 標籤本身），剩下的部分留在區塊裡。剪下來的這塊，就是要貼到頁尾腳本的內容。
把 JavaScript 貼到頁尾腳本的完整步驟#
確認你已經把 JavaScript 那段剪下來、放在剪貼簿之後，依下面 5 步操作：
Step 1：開啟要加 JavaScript 的內容編輯畫面#
到秒站後台找到那篇文章或那個 Vibe 畫布頁面，點進編輯畫面。頁尾腳本是「單頁設定」，所以只會對你目前編輯的這頁有效，其他頁面不會被影響。
Step 2：點右上角星號開啟頁面設定#
看編輯器右上角工具列，會有一顆星號按鈕，滑過去會跳出「即站力 Site Now 頁面設定」。點下去後右側會打開設定面板。
Step 3：滾到面板最底找到自訂程式碼片段#
右側面板最上面是版面、內容區樣式、文章元素等選項，這些先跳過，把面板往下捲到最底。最後一個區塊叫 自訂程式碼片段，這就是放程式碼片段的地方。
Step 4：把 JavaScript 貼到頁尾腳本欄位#
區塊裡會看到三個欄位，由上到下分別是「標題腳本」、「body 開啟腳本之後」、「頁尾腳本」。JavaScript 一律貼到最下面那個「頁尾腳本」，因為這個位置會等整頁的 HTML 都載入完成後才執行，最不容易撞到還沒生出來的元素。
貼的時候，記得把 <script> 跟 </script> 一起貼進去，不要只貼中間那段。例如剪下來的是這樣：
<script>
document.querySelector('.my-button').addEventListener('click', () => {
alert('按到了！');
});
</script>就把這四行整個貼到頁尾腳本欄位裡，連同最上面跟最下面的 <script> 標籤。
Step 5：按「更新」存檔，到前台確認#
右上角點「更新」或「發佈」存檔，這一步沒做設定不會生效。存檔後另開一個前台分頁，按 Ctrl + Shift + R（Mac 是 Cmd + Shift + R）做強制重新整理，避免瀏覽器讀到舊版本的快取頁面，再去操作那個互動元素確認有沒有跑起來。
貼了還是沒動？先檢查這四件事#
- 有沒有包
<script>標籤：只貼中間程式碼，沒帶開頭結尾的<script>，瀏覽器不會把它當 JavaScript 解析。把標籤補回去即可。 - 有沒有把 CSS 一起塞進來：頁尾腳本只放 JavaScript，CSS 那段（包在
<style>裡的）要留在 Vibe 畫布的區塊裡，或單獨抽到外觀設定。混在一起會兩邊都壞掉。 - 有沒有先存檔再看前台：右上角沒按「更新」前，所有面板設定都不算數。存完還要記得到前台強制重整，不要在編輯器裡判斷有沒有生效。
- 多段 JavaScript 是否互相打架：如果同一頁要貼好幾段 JavaScript，建議每段各自包一組
<script>...</script>，並讓變數名稱錯開，避免兩段都宣告const slider之類的東西造成衝突。
確認過這四項仍然沒有跑起來，再請秒站客服協助看看，可能是這段腳本本身有語法錯誤，或跟其他外掛載入順序衝突，這類情況需要看主機端執行結果才能判斷。
什麼時候改用標題腳本？#
自訂程式碼片段區塊裡的三個欄位，平常你只會用到頁尾腳本。剩下兩個欄位的差異整理在這裡，遇到再翻：
| 欄位名稱 | 注入位置 | 常見用途 |
|---|---|---|
| 標題腳本 | 頁面 <head> 結束前 | Google Analytics、廣告追蹤碼這類「需要在頁面一開始就掛上」的代碼。 |
| body 開啟腳本之後 | 頁面 <body> 開始後 | Google Tag Manager 的 noscript 區塊、第三方追蹤平台指定貼這裡的代碼。 |
| 頁尾腳本 | 頁面結尾、所有內容載入完之後 | 互動、動畫、自訂事件、捲動觸發等大多數 JavaScript。不確定就貼這裡。 |
如果你拿到的程式碼是第三方平台給的追蹤碼，平台通常會明確說「請貼到網站 <head>」或「請貼到 <body> 開頭」，照他們指示對應到標題腳本或 body 開啟腳本之後。其餘自己寫、AI 產的互動腳本，一律用頁尾腳本最穩。
延伸閱讀#
常見問題
我的 JavaScript 已經貼到頁尾腳本，為什麼前台還是沒反應？
最常見的三個原因：第一，沒有把 <script> 開頭與 </script> 結尾標籤一起貼進去，瀏覽器讀到的是純文字。第二，存檔後沒有到前台做強制重新整理（Ctrl + Shift + R 或 Cmd + Shift + R），看到的是瀏覽器快取版本。第三，貼的內容裡夾帶了 CSS 或 HTML，請只留 JavaScript 那一段。
標題腳本跟頁尾腳本差在哪？
差別在於程式碼會被注入頁面的哪個位置。標題腳本注入在 <head> 結束前，適合 Google Analytics 這類追蹤碼。頁尾腳本注入在頁面結尾、所有內容載入之後，適合互動、動畫、表單驗證等大多數 JavaScript。如果你不確定要貼哪邊，預設選頁尾腳本，因為它最不容易遇到「元素還沒生出來」造成的錯誤。
同一頁要貼好幾段 JavaScript，可以全部貼在一起嗎？
可以，但建議每段各自包一組 <script>...</script>，不要全部塞在同一組 script 標籤裡。另外要注意變數名稱不能重複，例如兩段都宣告 const slider，瀏覽器會報錯，兩段都不會跑。把每段的變數名稱錯開，例如改成 sliderA、sliderB，可以避免互撞。
我在這頁設定的頁尾腳本，會影響到其他頁面嗎？
不會。自訂程式碼片段區塊裡的三個欄位都是「單頁設定」，只對你目前編輯的這篇文章或這個 Vibe 畫布頁面有效。其他頁面不會受影響。如果你想要同一段 JavaScript 在全站每頁都跑，請聯絡秒站客服協助設定，不要在每頁的頁尾腳本各貼一次，否則之後維護會很辛苦。
AI 給我的整段裡同時有 <code><style></code> 跟 <code><script></code>，要怎麼拆？
依照標籤拆三類：<style>...</style> 是 CSS，<script>...</script> 是 JavaScript，其他像 <div>、<section>、<p> 等是 HTML。把 JavaScript 那段抽出來貼到頁尾腳本，CSS 跟 HTML 一起留在 Vibe 畫布的區塊內容裡。Vibe 畫布本身支援 CSS 與 HTML 並存，但 JavaScript 必須抽出來才會執行。