方案還停在 Basic，Squarespace 就跑不了任何第三方留言區

裝不裝得成，方案先說了算

Squarespace 賣四檔方案，這篇文章要講的那條線就落在頭兩檔之間。Basic 也給你 Code Block，可是那個區塊只收純文字、HTML、Markdown 和 CSS。把 <script> 標籤放進去，什麼都不會執行。全站共用的 Header 和 Footer 兩個欄位，也就是 code injection，Basic 同樣沒有。

Squarespace 把這件事寫在兩個地方。價格對照表把 code injection 和進階的程式碼區塊標成 Basic 不含、Core 與 Plus 與 Advanced 包含。說明中心說的一樣：code injection 可用於 Core、Plus、Advanced 以及部分舊的收費方案；程式碼區塊裡的 JavaScript 或 iframe 可用於 Core、Plus、Advanced，再加上已經停售的 Business 和 Commerce 幾檔。

Business、Commerce Basic 和 Commerce Advanced 在那幾篇說明文章裡還留著名字。它們是不再販售的舊方案。你的網站要是正好在其中一檔上，自訂程式碼你早就能用，下面的內容原樣適用。

先看見留言區，再去動面板

兩個面板，兩件不同的事

Squarespace 把全站共用的程式碼和頁面裡的程式碼分在兩個地方管，這次安裝兩邊各用一個。載入器得出現在任何可能長出小工具的頁面上，所以它進 Code Injection。掛載元素標的是留言區落腳的那一點，所以它以 Code Block 的形式進頁面正文。

第一次裝壞，多半就壞在把這兩樣對調。把掛載用的 div 放進全站的 Footer 欄位，每個頁面底部都會長出一個留言區，而且它們共用同一段對話。順帶交代一下本文的寫法：Squarespace 的帳號介面語言沒有中文可選，說明中心也只有英語、德語、西班牙語、法語、義大利語、日語、韓語、荷蘭語、葡萄牙語和土耳其語，所以這裡的面板名一律保留英文原樣，括號裡寫的是那個欄位在做什麼，不是中文標籤。

一個面板一個面板地裝

1. squarespace.com 的內建網址本身就算一個網域

   每個 Squarespace 網站一開始都帶一個 something.squarespace.com 的內建網址，在你接上自訂網域之前，它就一直用這個網址回應。所以在試用的網站上，或者在還沒把正式網域指過來的改版裡，網址列上那個地址和你將來上線的地址不是同一個。BootSignal 在載入留言區之前會拿 location.hostname 去比對登記在你 site id 名下的網域，因此那兩個地址在控制台裡是兩筆各自獨立的記錄，而不是一個網站的兩個名字。先把現在這個加進去，接上自訂網域那天再加上它，等內建網址上什麼都打不開了再把它刪掉。控制台會把 site id 排在網域旁邊，而這串字元是整篇文章裡唯一要從 BootSignal 抄過來的值。

2. 把載入器貼進 Code Injection

   從 Squarespace 的後台依序打開 Website、Website Tools、Code Injection（全站共用的程式碼欄位）。標籤放進 FOOTER 那一欄再儲存，Squarespace 會把這一欄的內容注入到站內每個頁面的 body 結束標籤之前。放 Header 那一欄也跑得動，放 Footer 則不會擋在第一次繪製前面。

   程式碼複製

   <script src="https://bootsignal.com/bootsignal.js"
           data-site-id="YOUR_SITE_ID" data-lang="zh-tw" defer></script>

3. 在留言區該在的位置放一個 Code Block

   把那個頁面或部落格文章切到編輯狀態，把游標移到正文下方的區段上，按 Add block 或 + 按鈕，從區塊選單裡挑 Code。點鉛筆圖示打開區塊編輯器，把掛載元素貼進文字欄位。page-key 換成一個只屬於這篇文章、以後也不會變的值，文章的 slug 就很合適。

   程式碼複製

   <div data-bootsignal="comments" data-thread-id="page-key"></div>

4. 關掉 Display Source，再按 Apply 並儲存

   區塊編輯器裡有一個 Display Source 開關（把原始碼當成文字顯示出來）。開著，這段標記就被畫成看得見的文字；關掉，它才會執行。這裡要關掉。先給區塊按 Apply，再儲存頁面。

5. 用無痕視窗驗收

   在沒有 Squarespace 登入狀態的地方打開公開網址。只有這個畫面說的才算數，理由寫在後面兩節裡。

Display Source 會把嵌入的程式碼變成文字

留言區該在的位置上直挺挺躺著一行角括號，原因就是它，沒有例外。Code Block 身兼兩職：它可以執行你的標記，也可以把標記當成給讀者看的程式碼範例畫出來，走哪一條由 Display Source 決定。開著不管，Squarespace 就會老老實實把 <div data-bootsignal="comments"> 印給訪客看。

這個開關不在網站設定裡，而在區塊編輯器內部，所以它一個區塊一份。三個月後你新加的 Code Block 也帶著自己的開關起步，能用同樣的方式再坑你一次。確認它花兩秒；從前台一路往回追原因，卻要賠上半天，因為根本沒有東西壞掉。

編輯畫面不是驗收的地方

Squarespace 對待登入狀態和訪客狀態並不一樣，而自訂程式碼正是兩者分岔的地方。在你斷定小工具壞掉之前，有四件事得先知道。

• 登入狀態下腳本經常不執行。Squarespace 寫得很直白：這是一種安全措施，有時候你登入時看不到自己的程式碼，訪客卻看得到。
• Code Block 的編輯器裡有一個 Preview in Safe Mode 按鈕（把嵌入的東西單獨渲染一次），至少能讓你確認標記本身是完好的。
• 自訂程式碼要是把編輯器絆住了，你會看到 "We detected an error loading your site preview" 這則訊息，旁邊還有一個 Disable Scripts in Preview 按鈕（在編輯器裡停掉自訂程式碼）。按下去，登入期間自訂程式碼就不再渲染，訪客那邊照舊。Squarespace 不建議在預覽裡把腳本重新打開，因為那會妨礙你編輯網站。
• 一個沒有 Squarespace 登入狀態的無痕視窗，是唯一能把這個問題了結的檢查。

訂閱只有一份，區塊以後想加幾個都行

留言區不單賣。一個已登記網域是 每月 $20 或每年 $200，這一行就涵蓋整份目錄：今天是 38 個付費小工具，旁邊還有 33 個免費的瀏覽器工具，以及你訂閱期間新上線的東西。這筆錢裡沒有哪一項在數瀏覽次數或留言則數，所以意外傳開的那篇文章和沒人讀的那篇文章付一樣的錢。再多一個 Squarespace 網站就是再多一個網域，網域在同一個控制台裡新增。

落到 Squarespace 上，這句話的意思是第二個小工具的代價只多一個 Code Block。載入器已經在 Code Injection 裡了，想在同一篇文章下面掛上評分，不過是在新區塊裡寫一個 div。

這一類小工具裡有不少是反著來的，所以下面兩句要說出聲。用戶評價牆只用評分小工具真正收到的評語來砌牆，它根本沒有編造引文的機制。社會認同提示只把你網站上已經存下的真實動靜重播一次，所以它永遠不會生出「俄亥俄州的某人剛剛買了這個」那種彈窗。

還在挑，而不是已經決定要裝哪一個？託管式留言系統的價格對照收在備選方案那一欄。

一個月後才咬人的那幾件事

• 一篇文章一個 thread id，永遠如此。兩個 Code Block 共用同一個 data-thread-id，對話也就共用了。直接拿文章的 slug 來命名，下一個來改站的人一眼就看得出規律。
• 要是為了間距或寬度在區塊周圍寫 CSS，請寫進 CSS Editor，別寫進 Code Injection 的 header。Squarespace 提醒 Ajax 載入頁面會讓注入的 CSS 套不上去，並且指名這種情況要用 CSS Editor。
• 一個 Code Block 最多裝 400 KB，換算成字元大約是 300,000 個。一行掛載元素離這個數還遠得很，不過以後要往裡貼更重的東西，天花板就在那裡。
• 只對 7.0 版的網站成立：放在 Index 裡的頁面，上面的程式碼可能不會顯示。Squarespace 給的繞路方式是把這個頁面移出 Index，然後登出再看一次。
• 自訂程式碼在 Squarespace 的支援範圍之外，他們也提醒平台更新可能弄壞這類以程式碼做的客製。改完版型之後的那次檢查，得你自己跑。

改版檢查清單裡可以多一個習慣：動過版型或區段之後，用無痕視窗打開一篇文章，確認留言區還在原地。版面一變，Squarespace 會挪動區塊，而掉進隱藏區段裡的 Code Block，會把留言一起帶走。