新版編輯器文字元件支援貼入 AI 生成的程式碼
發燒互動的編輯器支援豐富的標準元件，但如果標準元件無法滿足你的視覺需求，你可以透過 AI 協助排版，生成需要的 html 程式碼。發燒互動新版編輯器的文字元件支援貼入 AI 生成的程式碼，但需要符合安全的開發規範。請參考以下文章，並指示 AI 在生成時遵循規範生成程式碼。
貼上程式碼方式
使用編輯器提供的文字元件
在文字元件的 Toolbar，點擊 <> 圖示可直接在貼上 AI 生成的程式碼，系統會遵循安全規範自動過濾掉有風險的程式碼。
高度客製動畫的支援方式
提醒！在安全規範下，系統會禁止使用第三方套件或 javascript，如果你的內容一定需要動態的程式碼，你可以採取2種方式。
使用編輯器內所以提供的 Embed 元件
方式總覽與比較
實作路徑 | 適用情境 | 優點 | 缺點 |
1. 符合發燒網頁規範的原生 AI 片段 | 一般 UI 元件、進場動畫、靜態內容 | 最佳 SEO 效果、讀取速度快、不需額外設定、受系統保護。 | 不支援自定義 JavaScript 邏輯。 |
2. GTM 安裝 SDK | 需要 Lucide 圖示、Lottie 動畫或第三方分析套件。 | 專業化管理、代碼整潔、支援全域 JS SDK、具備 SEO 效益。 | 需要 CNAME 串接、需具備 GTM 管理權限。 |
3. Embed 元件 | 需要複雜 JS 互動（如計算機、自訂播放器）但無法使用 GTM 時。 | 高度自由、支援完整 JS/HTML/CSS。 | 失去 SEO 效果、內容儲存於 CDN 網域而非主網域。 |
詳細方式說明
方式一：遵循 AI 生成規範 (原生代碼片段)
這是最推薦的做法，適用於 90% 的網頁視覺元件。可直接將 AI 生成的程式碼貼入文字編輯元件。
技術特點：使用純 HTML 與 CSS，動畫則透過內建的
USAL.js或 CSS@keyframes達成。SEO 表現：優。內容直接存在於網頁 HTML 結構中，搜尋引擎可完整擷取。
開發限制：禁止使用
<script>。若需要動態邏輯，僅能依靠 CSS 狀態（如:hover,:checked）。
可擴充：指定第三方 SDK (透過 GTM)
當您的設計需要 Lucide、FontAwesome 或其他 JS 驅動的視覺套件時。
技術特點：在 GTM 中安裝 SDK，編輯器內僅貼入觸發標籤（如
<i>）。SEO 表現：優。主體 HTML 仍在頁面上，圖示等由 JS 渲染。
開發限制：必須完成 CNAME 串接。若網址仍是 Feversocial 原生網址，則無法觸發 GTM。
方式二：使用 Embed 元件 (JavaScript 替代方案)
如果您必須執行自定義 JavaScript（如 API 串接、複雜計算），且無法使用 GTM。你可以透過編輯器提供的原始碼元件。
技術特點：透過編輯器的 Embed 功能嵌入代碼。
SEO 表現：差。代碼會儲存在
fevercdn.com網域，並以嵌入形式呈現，搜尋引擎難以索引內文。開發限制：僅限於該區塊內運作，且樣式較難與主網頁達成完美整合。
指示 AI 的建議 (Prompt Strategy)
當您決定了路徑後，請將對應的指令提供給 AI：
選擇方式一時：
「請遵守 Feversocial 核心規範，使用
fs-custom-命名、禁用 JS 與偽元素，動畫請用 USAL.js。」選擇擴充方式時：
「請使用 Lucide 標籤格式，環境已透過 GTM 安裝套件，其餘遵守 Feversocial 核心規範。」
選擇方法三時：
「此代碼將用於 Embed 元件，你可以使用 JavaScript，但請確保所有內容封裝在一個獨立的容器內。」