每日设计
将每日设计嵌入您的网站
每日设计 每天发布一个新专题。图片地址始终不变，但背后的图片每天更新，因此您只需添加一次代码，访客便能自动看到当天的专题。
工作原理
每天都会在同一个固定地址发布一张新图片。您的页面加载该地址，因此始终显示当前专题，访客点击后即可前往 每日设计 阅读完整内容。
更喜欢脚本方式？只需添加一个容器和一个脚本：小组件会根据 data-dotd-variant 属性（image、cta 或 card）绘制您选择的样式，并在可用时使用脚本地址对应的语言。如果无法运行脚本，请使用相同样式的 HTML 版本。
样式 A：仅图片
今日图片，链接至 每日设计。最轻量的选项。
实时预览
<a href="https://designoftheday.org/zh/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-of-the-day/today.png" alt="每日设计精选，展示屡获殊荣的卓越创意" loading="lazy" style="max-width:100%;height:auto">
</a><div data-dotd="designoftheday.org" data-dotd-variant="image"></div>
<script async src="https://designoftheday.org/feature.js?lang=zh"></script>样式 B：图片加行动号召
今日图片，下方附带行动号召按钮。
实时预览
<a href="https://designoftheday.org/zh/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
<img src="https://competition.adesignaward.com/design-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="designoftheday.org" data-dotd-variant="cta"></div>
<script async src="https://designoftheday.org/feature.js?lang=zh"></script>样式 C：Bootstrap 卡片
一个 Bootstrap 卡片，包含图片、专题标题、简短介绍和行动号召按钮。您的页面需要引入 Bootstrap。
实时预览
<div class="card" style="max-width:24rem">
<a href="https://designoftheday.org/zh/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-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://designoftheday.org/zh/" class="btn btn-danger" target="_blank" rel="noopener">探索每日设计</a>
</div>
</div><div data-dotd="designoftheday.org" data-dotd-variant="card"></div>
<script async src="https://designoftheday.org/feature.js?lang=zh"></script>选项 3：JSON
适用于开发者、应用程序和自动化。JSON 包含名称、描述、图片地址、链接和日期。允许跨域请求。
fetch("https://designoftheday.org/feature.json?lang=zh")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});示例响应
{
"domain": "designoftheday.org",
"name": "每日设计",
"feature": "每日设计",
"paragraph": "A' Design Award 每天展示一件杰出的设计作品、一款高度创新的产品或一个极具创意的项目作为每日设计，呈现创造力与优秀设计的卓越典范。",
"description": "每日设计每天展示一件杰出的设计作品、一款高度创新的产品或一个极具创意的项目，呈现创造力与优秀设计的卓越典范，由享有盛誉的 A' Design Award and Competition 甄选认可。",
"call_to_action": "探索每日设计",
"date": "2026-11-08",
"language": "zh",
"image": "https://competition.adesignaward.com/design-of-the-day/today.png",
"image_alt": "每日设计精选，展示屡获殊荣的卓越创意",
"url": "https://designoftheday.org/zh/",
"feature_url": "https://competition.adesignaward.com/design-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/designs-of-the-days.php",
"embed_url": "https://designoftheday.org/zh/qian-ru/"
}注意事项
- 请保留图片周围的链接，以便访客能够查看完整的专题内容。
- 请始终使用上方所示的图片地址，不要另存副本，这样您的页面才能保持最新。
- 图片采用响应式设计，宽度不会超过其容器。
- 需要帮助或自定义格式？请联系我们。