每日设计团队
将每日设计团队嵌入您的网站
每日设计团队 每天发布一个新专题。图片地址始终不变,但背后的图片每天更新,因此您只需添加一次代码,访客便能自动看到当天的专题。
工作原理
每天都会在同一个固定地址发布一张新图片。您的页面加载该地址,因此始终显示当前专题,访客点击后即可前往 每日设计团队 阅读完整内容。
更喜欢脚本方式?只需添加一个容器和一个脚本:小组件会根据 data-dotd-variant 属性(image、cta 或 card)绘制您选择的样式,并在可用时使用脚本地址对应的语言。如果无法运行脚本,请使用相同样式的 HTML 版本。
样式 A:仅图片
今日图片,链接至 每日设计团队。最轻量的选项。
实时预览
<a href="https://designteamoftheday.com/zh/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-team-of-the-day/today.png" alt="屡获殊荣的每日设计团队,正在协作开展创新项目" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designteamoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designteamoftheday.com/feature.js?lang=zh"></script>
样式 B:图片加行动号召
今日图片,下方附带行动号召按钮。
实时预览
<a href="https://designteamoftheday.com/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-team-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="designteamoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designteamoftheday.com/feature.js?lang=zh"></script>
样式 C:Bootstrap 卡片
一个 Bootstrap 卡片,包含图片、专题标题、简短介绍和行动号召按钮。您的页面需要引入 Bootstrap。
实时预览
<div class="card" style="max-width:24rem">
<a href="https://designteamoftheday.com/zh/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-team-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://designteamoftheday.com/zh/" class="btn btn-danger" target="_blank" rel="noopener">探索每日设计团队</a>
</div>
</div>
<div data-dotd="designteamoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designteamoftheday.com/feature.js?lang=zh"></script>
选项 3:JSON
适用于开发者、应用程序和自动化。JSON 包含名称、描述、图片地址、链接和日期。允许跨域请求。
fetch("https://designteamoftheday.com/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": "designteamoftheday.com",
"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-team-of-the-day/today.png",
"image_alt": "屡获殊荣的每日设计团队,正在协作开展创新项目",
"url": "https://designteamoftheday.com/zh/",
"feature_url": "https://competition.adesignaward.com/design-team-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/design-teams-of-the-days.php",
"embed_url": "https://designteamoftheday.com/zh/qian-ru/"
}
注意事项
- 请保留图片周围的链接,以便访客能够查看完整的专题内容。
- 请始终使用上方所示的图片地址,不要另存副本,这样您的页面才能保持最新。
- 图片采用响应式设计,宽度不会超过其容器。
- 需要帮助或自定义格式?请联系我们。