Teachify

更新日誌 Widget

輕鬆將更新日誌嵌入到您的產品或網站中

點擊下方按鈕體驗 Widget

預設設定

深色模式（英文）

What's new?

香港繁中

What's new?

支援點擊背景關閉、ESC 鍵關閉、動畫效果

使用說明

只需要幾行程式碼，即可將更新日誌嵌入到您的網站中：

<!-- 1. 添加容器（使用預設 ID） -->
<div id="changelog-widget">What's new?</div>

<!-- 或使用 data attribute -->
<div data-widget="changelog">What's new?</div>

<!-- 2. 添加嵌入腳本 -->
<script src="/changelog-widget.js"></script>

<!-- 3. 自訂選項（使用 data attributes） -->
<div 
  data-widget="changelog"
  data-theme="dark"
  data-close-on-overlay-click="false"
  data-unread-count-color="#3B82F6"
  data-locale="en"
>
  What's new?
</div>

<!-- 4. 或使用 JavaScript API -->
<script>
  // 初始化特定 widget
  window.FukunekoChangelog.init({
    selector: '#my-changelog',
    theme: 'dark',
    closeOnOverlayClick: false,
    unreadCountColor: '#3B82F6',
    locale: 'en'
  });

  // 初始化所有 widget
  window.FukunekoChangelog.initAll();

  // 銷毀特定 widget
  window.FukunekoChangelog.destroy('#my-changelog');

  // 銷毀所有 widget
  window.FukunekoChangelog.destroyAll();
</script>

特色：

自動追蹤未讀更新數量
支援深色/淺色主題
支援多語系（繁中/港中/英文）
響應式設計
從右側滑入的更新列表（含動畫效果）
記住已讀狀態
可自訂是否允許點擊背景關閉
可自訂未讀數量標記的顏色
平滑的開關動畫效果
完整的生命週期控制 API
支援 SPA 應用程式（自動處理頁面轉換）

設定選項：

data-theme：主題顏色（light/dark）
data-close-on-overlay-click：是否允許點擊背景關閉（true/false）
data-unread-count-color：未讀數量標記的顏色（CSS 顏色值）
data-locale：語系設定（zh-tw/zh-hk/en）

JavaScript API：

FukunekoChangelog.init(options)：初始化特定 widget，可傳入設定選項
FukunekoChangelog.initAll()：初始化所有 widget
FukunekoChangelog.destroy(selector)：銷毀特定 widget
FukunekoChangelog.destroyAll()：銷毀所有 widget

在 SPA 環境中使用：

如果您使用 SPA 框架，widget 會自動處理頁面轉換的生命週期，無需額外設定。您可以：

使用 data-widget="changelog" 屬性或預設 ID 來標記容器
widget 會在頁面載入時自動初始化，並在頁面轉換時自動清理
或使用 init() 和 destroy() 來手動控制特定 widget 的生命週期