
內容簡介
總結:Site Grayscale Toggle 外掛讓您可以將整個網站轉換為灰階,並為訪客提供清晰的開/關開關。它建立為CSP友好(無內聯JS),並透過在伺服器端注入初始狀態來避免未設計內容的閃爍。
問題與答案:
- 透過什麼方式可以對整個網站進行灰階過濾?
- 使用html.is-grayscale { filter: grayscale(var(--sgt-level)); }。
- 在哪裡可以調整灰階效果的強度?
- 可以從「設定 → 網站灰階」中調整0到100之間的強度。
- 如何顯示/隱藏漂浮的開/關切換按鈕?
- 透過在底部右側預設位置來進行顯示/隱藏。
- 什麼是使用者可以在任何地方放置開關的短代碼?
- [grayscale_toggle]。
- 如何記住訪客的偏好設定?
- 使用本地存儲(localStorage)跨頁面記住訪客的偏好設置。
- 為何說這個外掛符合CSP安全?
- 因為它沒有內聯JS,而是在伺服器端將初始狀態添加到<html>以避免FOUC。
- Site Grayscale Toggle 外掛具有什麼特性?
- 除了灰階過濾外,還具有強度控制、漂浮切換按鈕、短碼放置、記憶訪客偏好、輕量、主題不可知、與大多數快取/CDN外掛共存的特性。
透過這些問題與答案,可以更深入了解 Site Grayscale Toggle 外掛的功能與使用方式。
外掛標籤
開發者團隊
原文外掛簡介
Site Grayscale Toggle lets you turn your entire site grayscale and give visitors a clear on/off switch. It’s built to be CSP-friendly (no inline JS) and to avoid a flash-of-unstyled-content by injecting the initial state on the server side.
Features:
– Grayscale filter site-wide via html.is-grayscale { filter: grayscale(var(--sgt-level)); }.
– Intensity control (0–100) from Settings → Site Grayscale.
– Show/Hide floating toggle button (bottom-right by default).
– Shortcode: [grayscale_toggle] to place the switch anywhere (headers, menus, footers, blocks, widgets).
– Remembers visitor preference with localStorage across pages.
– CSP-safe: no inline JS; initial state added server-side to to avoid FOUC.
– Lightweight, theme-agnostic; works alongside most caching/CDN plugins.
Use cases include memorial/monochrome modes, accessibility preferences, or design experiments that you want users to control.
