Өнөөдрийн дизайны чиг хандлага
Өнөөдрийн дизайны чиг хандлага-г өөрийн вэбсайтад байршуулах
Өнөөдрийн дизайны чиг хандлага өдөр бүр шинэ онцлох бүтээл нийтэлдэг. Зургийн хаяг хэзээ ч өөрчлөгддөггүй, гэхдээ ард нь байгаа зураг өөрчлөгддөг тул кодыг нэг удаа нэмэхэд таны зочид өнөөдрийн онцлох бүтээлийг автоматаар харах болно.
Хэрхэн ажилладаг вэ
Өдөр бүр нэг тогтмол хаягаар шинэ зураг нийтлэгддэг. Таны хуудас тэр хаягийг ачаалснаар үргэлж одоогийн онцлох бүтээлийг харуулах бөгөөд дарахад зочдыг бүрэн түүхийг нь өгүүлсэн Өнөөдрийн дизайны чиг хандлага руу аваачна.
Скрипт ашиглахыг хүсвэл нэг контейнер, нэг скрипт нэмнэ үү: виджет нь data-dotd-variant (image, cta эсвэл card) дээр сонгосон хэв маягаар, скриптийн хаягт заасан хэл дээр (тухайн хэл боломжтой бол) зурагдана. Хэрэв скрипт ажиллуулах боломжгүй бол ижил хувилбарын HTML хэлбэрийг ашиглана уу.
Хувилбар A: зөвхөн зураг
Өнөөдрийн зураг, Өнөөдрийн дизайны чиг хандлага руу холбогдсон. Хамгийн хөнгөн сонголт.
Шууд урьдчилан харах
<a href="https://designtrendoftheday.com/mn/" target="_blank" rel="noopener">
<img src="https://competition.adesignaward.com/design-trend-of-the-day/today.png" alt="Дизайны ирээдүйг хэлбэржүүлж буй шинээр гарч ирж буй хэв маягийг дүрслэсэн Өнөөдрийн дизайны чиг хандлага" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="image"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=mn"></script>
Хувилбар B: зураг ба үйлдлийн товч
Өнөөдрийн зураг, доор нь үйлдлийн товчтой.
Шууд урьдчилан харах
<a href="https://designtrendoftheday.com/mn/" 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-trend-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="designtrendoftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=mn"></script>
Хувилбар C: Bootstrap карт
Зураг, онцлох бүтээлийн гарчиг, богино тайлбар болон үйлдлийн товч бүхий Bootstrap карт. Таны хуудаст Bootstrap шаардлагатай.
Шууд урьдчилан харах
<div class="card" style="max-width:24rem">
<a href="https://designtrendoftheday.com/mn/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/design-trend-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://designtrendoftheday.com/mn/" class="btn btn-danger" target="_blank" rel="noopener">Өнөөдрийн дизайны чиг хандлагыг нээх</a>
</div>
</div>
<div data-dotd="designtrendoftheday.com" data-dotd-variant="card"></div>
<script async src="https://designtrendoftheday.com/feature.js?lang=mn"></script>
Сонголт 3: JSON
Хөгжүүлэгчид, аппликейшн болон автоматжуулалтад зориулсан. JSON нь нэр, тайлбар, зургийн хаяг, холбоосууд болон огноог агуулна. Хөндлөн домэйн хүсэлтүүд зөвшөөрөгдсөн.
fetch("https://designtrendoftheday.com/feature.json?lang=mn")
.then(function (r) { return r.json(); })
.then(function (d) {
// d.name, d.feature, d.paragraph, d.image, d.url, d.date ...
});
Хариу жишээ
{
"domain": "designtrendoftheday.com",
"name": "Өнөөдрийн дизайны чиг хандлага",
"feature": "Өнөөдрийн дизайны чиг хандлага",
"paragraph": "A' Design Award нь өдөр бүр нэг анхдагч дизайны чиг хандлагыг судалж, бүтээгдэхүүн, төсөл болон туршлагын дизайнд нөлөөлж буй шинээр гарч ирж буй хэв маяг, өөрчлөгдөж буй гоо зүй болон шинэ бүтээлч чиглэлүүдийг Өнөөдрийн дизайны чиг хандлага болгон танилцуулдаг.",
"description": "Өнөөдрийн дизайны чиг хандлага нь өдөр бүр нэг анхдагч дизайны чиг хандлагыг судалж, бүтээгдэхүүн, төсөл болон туршлагын дизайнд нөлөөлж буй шинээр гарч ирж буй хэв маяг, өөрчлөгдөж буй гоо зүй, шинэ бүтээлч чиглэлүүд болон инновацлаг хандлагуудыг нэр хүндтэй A' Design Award and Competition-оор хүлээн зөвшөөрөгдсөнөөр танилцуулдаг.",
"call_to_action": "Өнөөдрийн дизайны чиг хандлагыг нээх",
"date": "2026-11-08",
"language": "mn",
"image": "https://competition.adesignaward.com/design-trend-of-the-day/today.png",
"image_alt": "Дизайны ирээдүйг хэлбэржүүлж буй шинээр гарч ирж буй хэв маягийг дүрслэсэн Өнөөдрийн дизайны чиг хандлага",
"url": "https://designtrendoftheday.com/mn/",
"feature_url": "https://competition.adesignaward.com/design-trend-of-the-day.html",
"registry_url": "https://competition.adesignaward.com/design-trends-of-the-days.php",
"embed_url": "https://designtrendoftheday.com/mn/ontslog/"
}
Мэдэхэд илүүдэхгүй
- Зургийн эргэн тойронд холбоосыг хадгалаарай, ингэснээр зочид бүтэн онцлох бүтээлийг нээж харах боломжтой.
- Үргэлж дээр харуулсан зургийн хаягийг ашиглаж, хуулбарыг хадгалахгүй байгаарай, ингэвэл таны хуудас үргэлж шинэчлэгдэж байна.
- Зураг нь хариу үйлдэлтэй: контейнерээсээ өргөн болохгүй.
- Тусламж хэрэгтэй юу эсвэл тусгай формат хүсэж байна уу? Бидэнтэй холбогдоно уу.