跳去主要內容

每日設計師焦點

將每日設計師焦點嵌入你嘅網站

每日設計師焦點 每日發佈一個新專題。圖片地址唔會變,但背後嘅圖片每日都唔同,所以你只需要加一次代碼,你嘅訪客就會自動睇到今日嘅專題。

點樣運作

每日都有一張新圖片發佈喺同一個固定地址。你嘅頁面載入呢個地址,所以永遠都會顯示最新嘅專題,訪客一撳就會去到 每日設計師焦點,睇到完整嘅故事。

鍾意用腳本?加一個容器同一個腳本就得:小工具會根據你用 data-dotd-variant 揀嘅樣式(image、cta 或者 card)嚟顯示,語言就跟腳本地址嘅語言(如果有嘅話)。如果你唔可以執行腳本,就用同一款式嘅 HTML 版本。

款式 A:淨係圖片

今日嘅圖片,連結去 每日設計師焦點。最輕量嘅選擇。

即時預覽

<a href="https://designerhighlightoftheday.com/zy/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" alt="每日設計師焦點展示一位傑出設計師,屬於全球設計社群嘅一份子" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=zy"></script>

款式 B:圖片加行動呼籲

今日嘅圖片,下面附帶行動呼籲。

即時預覽

<a href="https://designerhighlightoftheday.com/zy/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
  <img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" alt="每日設計師焦點展示一位傑出設計師,屬於全球設計社群嘅一份子" loading="lazy" style="display:block;max-width:100%;height:auto;margin:0 auto">
  <span style="display:block;margin-top:.5em;font:600 15px/1.3 system-ui,sans-serif">探索每日設計師焦點</span>
</a>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=zy"></script>

款式 C:Bootstrap 卡片

一張 Bootstrap 卡片,入面有圖片、專題標題、一段簡短介紹同行動呼籲按鈕。你嘅頁面需要用到 Bootstrap。

即時預覽

<div class="card" style="max-width:24rem">
  <a href="https://designerhighlightoftheday.com/zy/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/highlight-of-the-day/today.png" class="card-img-top" alt="每日設計師焦點展示一位傑出設計師,屬於全球設計社群嘅一份子" loading="lazy"></a>
  <div class="card-body">
    <h5 class="card-title">每日設計師焦點</h5>
    <p class="card-text">A' Design Award 每日精選一位頂尖設計師、明星建築師、頂級創意人才或者創新者,作為每日設計師焦點,展示佢哋嘅成就、創意作品同對設計界嘅貢獻。</p>
    <a href="https://designerhighlightoftheday.com/zy/" class="btn btn-danger" target="_blank" rel="noopener">探索每日設計師焦點</a>
  </div>
</div>
<div data-dotd="designerhighlightoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designerhighlightoftheday.com/feature.js?lang=zy"></script>

選項 3:JSON

專為開發者、應用程式同自動化而設。JSON 入面包含名稱、描述、圖片地址、連結同日期。允許跨域請求。

fetch("https://designerhighlightoftheday.com/feature.json?lang=zy")
  .then(function (r) { return r.json(); })
  .then(function (d) {
    // d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
  });

回應範例

{
    "domain": "designerhighlightoftheday.com",
    "name": "每日設計師焦點",
    "feature": "每日設計師焦點",
    "paragraph": "A' Design Award 每日精選一位頂尖設計師、明星建築師、頂級創意人才或者創新者,作為每日設計師焦點,展示佢哋嘅成就、創意作品同對設計界嘅貢獻。",
    "description": "每日設計師焦點每日精選一位頂尖設計師、明星建築師、頂級創意人才或者創新者,展示佢哋嘅成就、創意作品同對設計界嘅貢獻,獲極具聲望嘅 A' Design Award and Competition 認可。",
    "call_to_action": "探索每日設計師焦點",
    "date": "2026-11-08",
    "language": "zy",
    "image": "https://competition.adesignaward.com/highlight-of-the-day/today.png",
    "image_alt": "每日設計師焦點展示一位傑出設計師,屬於全球設計社群嘅一份子",
    "url": "https://designerhighlightoftheday.com/zy/",
    "feature_url": "https://competition.adesignaward.com/designer-highlight-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/designer-highlights-of-the-days.php",
    "embed_url": "https://designerhighlightoftheday.com/zy/tese/"
}

實用貼士

  • 保留圖片周圍嘅連結,等你嘅訪客可以發現完整嘅專題。
  • 一定要用上面顯示嘅圖片地址,唔好自己儲存副本,咁你嘅頁面先至保持最新。
  • 圖片係響應式嘅:佢唔會超過容器嘅闊度。
  • 需要幫手或者自訂格式?請聯絡我哋。

每日設計名言

每日設計名言

DesignAdage