Open Design Web Widget 技能指南

技能概述

Web Widget 技能生成可嵌入任何網站的獨立微應用。每個 Widget 是一個自包含的 HTML 文件，包含所有 CSS 和 JS，可直接嵌入網頁、博客側欄、儀表板或作為 iframe 加載。常見類型：天氣顯示、倒計時器、實時時鐘、即時搜尋框、社交媒體 feed、簡易計算器。

觸發關鍵字

• web widget、embedded widget、網站小組件、嵌入組件
• micro app、sidebar widget、iframe widget

什麼時候用

• 在博客側欄嵌入天氣/時鐘
• 活動頁面的倒計時組件
• 管理系統的快捷搜尋
• 落地頁的社交媒體展示

使用方法

實際場景

場景一：活動倒計時 Widget

你的公司即將舉辦年度技術峰會（2026-06-15），需要在官網首頁嵌入一個精美的倒計時 Widget，實時顯示距離活動開始的剩餘天數、小時、分鐘、秒。Widget 使用深色背景 + 霓虹數字風格，與官網科技主題一致。

場景二：天氣信息側欄

個人博客需要一個天氣 Widget 顯示所在城市的當前天氣。Widget 通過 OpenWeatherMap API 獲取數據，每 30 分鐘刷新一次。包含溫度、天氣圖標、城市名稱，樣式簡潔現代。

核心實現

<!-- 倒計時 Widget -->
<div id="countdown-widget" class="widget">
  <div class="widget-title">技術峰會倒計時</div>
  <div class="countdown-display">
    <div class="time-block"><span id="days">00</span><label>天</label></div>
    <div class="time-block"><span id="hours">00</span><label>時</label></div>
    <div class="time-block"><span id="mins">00</span><label>分</label></div>
    <div class="time-block"><span id="secs">00</span><label>秒</label></div>
  </div>
</div>

<style>
.widget {
  background: #1e293b; color: #fff;
  border-radius: 16px; padding: 1.5rem; text-align: center;
  max-width: 400px; margin: 0 auto;
}
.countdown-display { display: flex; gap: 1rem; justify-content: center; }
.time-block { display: flex; flex-direction: column; align-items: center; }
.time-block span {
  font-size: 2.5rem; font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #38bdf8;
}
.time-block label { font-size: 0.75rem; text-transform: uppercase; opacity: 0.6; }
</style>

<script>
const target = new Date('2026-06-15T09:00:00+08:00');
function update() {
  const diff = target - new Date();
  const d = Math.floor(diff / 86400000);
  const h = Math.floor((diff % 86400000) / 3600000);
  const m = Math.floor((diff % 3600000) / 60000);
  const s = Math.floor((diff % 60000) / 1000);
  document.getElementById('days').textContent = String(d).padStart(2, '0');
  document.getElementById('hours').textContent = String(h).padStart(2, '0');
  document.getElementById('mins').textContent = String(m).padStart(2, '0');
  document.getElementById('secs').textContent = String(s).padStart(2, '0');
}
update();
setInterval(update, 1000);
</script>

嵌入方式

<!-- 方式一：直接複製 HTML -->
<!-- 把 Widget 的 HTML 複製到目標頁面的任意位置 -->

<!-- 方式二：iframe 嵌入 -->
<iframe src="countdown-widget.html" width="400" height="200"
  frameborder="0" style="border-radius: 16px;"></iframe>

<!-- 方式三：Shadow DOM 隔離 -->
<script>
const host = document.getElementById('widget-host');
const shadow = host.attachShadow({mode: 'closed'});
shadow.innerHTML = widgetHTML; // 完全隔離樣式衝突
</script>

自檢清單

• 單一 HTML 文件，無外部依賴
• CSS 使用 scoped 或 inline 樣式避免衝突
• JS 不污染全局命名空間
• 支持 iframe 嵌入
• 響應式適配不同容器寬度

推薦閱讀

• Web Components (MDN) — 標準化組件封裝
• Shadow DOM 指南 — 樣式隔離
• iframe Best Practices — 響應式 iframe 技巧