Astro 在建置時渲染標記；大約 40 行原生 JavaScript 將其連接到 PolicyStack Consent 的無頭狀態機。沒有 React，沒有水合作用的島嶼，沒有第三方 iframe — 只有漸進增強和一個屬於您設計系統一部分的橫幅。
PolicyStack Consent 呈現出不同的樣貌，而這種樣貌恰好能完美契合 Astro。其運行時是一個小於 4KB 的無頭狀態機 — 包含類別、決策、管轄權、GPC、持久性 — 沒有內建 UI。標記由您自行編寫。在 Astro 上，這意味著橫幅模板存在於 .astro 元件中，像您網站的其他部分一樣進行伺服器渲染，而一個小的 <script> 標籤在運行時將其連接到 store。沒有島嶼，沒有水合作用，沒有框架轉接器。本文將逐步介紹，Consent 文件則涵蓋了其他所有內容。
Astro 的元件模型非常適合無頭同意管理。一個 .astro 檔案包含兩個部分：
結果：從第一個位元組開始，橫幅的 HTML 就已經在頁面上。腳本只有一個任務 — 翻轉一個隱藏屬性並連接點擊事件。沒有需要下載的框架運行時，沒有需要水合作用的內容，也沒有在頁面渲染半秒後才彈出的橫幅的 FOUC（閃爍）。
您只需要 @policystack/core — 不需要框架轉接器：
這就是全部的運行時依賴。
類別從兩個地方引用 — SSR 模板（用於渲染核取方塊）和運行時腳本（用於建構 store）。在共享模組中定義它們意味著您可以在一個地方更改它們，如果任何一側不同步，建置將會失敗：
有兩點值得注意。隱藏屬性是實現無閃爍效果的關鍵 — 兩個部分預設都是關閉的，腳本會在 store 發出指令時將它們開啟。每個核取方塊上的 data-category={c.key} 讓腳本能夠在不耦合標記與特定順序的情況下找到正確的輸入。
在任何佈局或頁面中使用該元件。在每個頁面上渲染都是安全的 — 腳本僅在狀態變更時執行，並且在 store 發出指令之前，標記都是隱藏的：
除了類別之外，store 關心的另外兩件事是決策的儲存位置以及訪客所在的地區。
儲存轉接器決定了同意記錄如何在重新整理後保留：
管轄權解析器決定了在使用者點擊任何內容之前適用哪個地區的預設值。範例使用了 timezoneResolver()，因為它不需要網路且在客戶端執行 — 對於靜態 Astro 網站來說是一個合理的預設值。另外還有三個選項：
為什麼這很重要：GDPR 要求選擇加入（類別預設為拒絕，橫幅在首次造訪時顯示），CCPA/CPRA 要求提供「請勿出售或分享」的選項，並將全球隱私控制（GPC）視為加州具有法律約束力的訊號，而大多數其他地區則介於兩者之間。store 在初始化時讀取解析器一次，套用正確的預設值，並公開 state.jurisdiction，以便您的橫幅文案可以根據其進行分支。
橫幅正確是一半的工作。另一半是確保分析 SDK 在使用者點擊之前不會觸發。來自 core 的 gateScript() 在腳本載入前會暫存全域變數（gtag, fbq 等），佇列在同意之前所做的呼叫，並在腳本載入並授予同意後重播它們：
從頁面級別的 <script> 標籤（或您的 BaseLayout.astro）匯入此腳本，該腳本僅在授予分析權限後才會附加到 document。@policystack/scripts 套件提供了預先建置的 defineScript 工廠，用於 GA4、Meta Pixel、PostHog、Segment、GTM 和 Hotjar，如果您不想手動編寫的話。
然後將外掛程式新增到您的 Astro 設定中。選擇模式：「warn」用於非阻擋式的開發警告，「error」用於在 CI 中失敗建置，或「off」用於禁用掃描：
每次開發啟動和 HMR 更新時，它都會執行靜態掃描並報告：
在開發模式下，這是一個黃色警告。在 CI 中，這是一個非零退出碼。這種錯誤模式的殺傷力在於，有人在審計前三週將 Hotjar 程式碼片段複製到佈局檔案中，而沒有人注意到 — 因為建置通過了，測試通過了，並且在瀏覽器中看起來正確的橫幅仍然允許 Hotjar 在使用者點擊任何內容的情況下首次繪製時觸發。
您可以從第一天開始添加此功能，或者在第一次審計的前一天添加；運行時不會因此改變。
Astro 的核心理念是「預設輸出更少的 JavaScript」。一個為了渲染兩個 div 和一個核取方塊欄位而引入框架運行時的同意函式庫與此理念相悖。PolicyStack Consent 將同意邏輯與同意 UI 分開，這與 Astro 元件的結構完美吻合：
您將擁有一個存在於 .astro 元件中的橫幅，一個處理您可能出錯的部分的狀態機，以及（如果您需要的話）一個在有人忘記閘道時會導致 PR 失敗的建置時檢查。一些相關的組件：
為開發人員和 AI 提供隱私和同意原語。版本控制、可組合、開源。