Төп эчтәлеккә күчү

Көн дизайнеры

Көн дизайнеры сезнең сайтка урнаштыру

Көн дизайнеры көн саен яңа материал бастырып чыгара. Рәсем адресы үзгәрми, ләкин аның артындагы сурәт үзгәрә, шуңа күрә сез кодны бер тапкыр өстисез — һәм килүчеләрегез автоматик рәвештә бүгенге материалны күрә.

Ничек эшли

Көн саен яңа сурәт бер үк даими адреста бастырыла. Сезнең бит шул адресны йөкли, шуңа күрә һәрвакыт актуаль материал күрсәтелә, ә басканда килүчеләрегез Көн дизайнеры сайтына күчә, анда тулы хикәя сөйләнә.

Скрипт куллансагыз яхшырак? Бер контейнер һәм бер скрипт өстәгез: виджет data-dotd-variant (image, cta яки card) аша сайланган стильне ясый, скрипт адресындагы телдә — әгәр ул тел булса. Скрипт кулланып булмаса, шул ук вариантның HTML юрамасын кулланыгыз.

Вариант A: бары тик рәсем

Бүгенге сурәт, Көн дизайнеры сайтына сылтама белән. Иң җиңел вариант.

Тере карау

<a href="https://designeroftheday.com/tt/" target="_blank" rel="noopener">
  <img src="https://competition.adesignaward.com/designer-of-the-day/today.png" alt="Бүгенге танылган иҗади визионерны тәкъдим итүче Көн дизайнеры портреты" loading="lazy" style="max-width:100%;height:auto">
</a>
<div data-dotd="designeroftheday.com" data-dotd-variant="image"></div>
<script async src="https://designeroftheday.com/feature.js?lang=tt"></script>

Вариант B: рәсем һәм эш чакыруы

Бүгенге сурәт, астында эш чакыруы белән.

Тере карау

<a href="https://designeroftheday.com/tt/" target="_blank" rel="noopener" style="display:block;max-width:100%;color:inherit;text-decoration:none;text-align:center">
  <img src="https://competition.adesignaward.com/designer-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="designeroftheday.com" data-dotd-variant="cta"></div>
<script async src="https://designeroftheday.com/feature.js?lang=tt"></script>

Вариант C: Bootstrap карточкасы

Bootstrap карточкасы: сурәт, материал исеме, кыска параграф һәм эш чакыруы төймәсе. Сезнең биткә Bootstrap кирәк.

Тере карау

<div class="card" style="max-width:24rem">
  <a href="https://designeroftheday.com/tt/" target="_blank" rel="noopener"><img src="https://competition.adesignaward.com/designer-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://designeroftheday.com/tt/" class="btn btn-danger" target="_blank" rel="noopener">Көн дизайнерын ачыгыз</a>
  </div>
</div>
<div data-dotd="designeroftheday.com" data-dotd-variant="card"></div>
<script async src="https://designeroftheday.com/feature.js?lang=tt"></script>

Вариант 3: JSON

Программистлар, кушымталар һәм автоматлаштыру өчен. JSON эчендә исем, тасвирлама, рәсем адресы, сылтамалар һәм дата бар. Кросс-домен сорауларга рөхсәт ителгән.

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

Җавап мисалы

{
    "domain": "designeroftheday.com",
    "name": "Көн дизайнеры",
    "feature": "Көн дизайнеры",
    "paragraph": "A' Design Award һәр көн бик талантлы дизайнерны яки дөнья класслы архитекторны Көн дизайнеры буларак тәкъдим итә, аерылып торган иҗади эшләр артындагы кешеләрне, аларның дизайн фәлсәфәсен, күренекле проектларын һәм казанышларын күрсәтә.",
    "description": "Көн дизайнеры һәр көн бик талантлы дизайнерны яки дөнья класслы архитекторны тәкъдим итә, аерылып торган иҗади эшләр артындагы гаҗәп кешеләрне, аларның профессиональ тормыш юлын, дизайн фәлсәфәсен, күренекле проектларын һәм бик абруйлы A' Design Award and Competition тарафыннан танылган казанышларын күрсәтә.",
    "call_to_action": "Көн дизайнерын ачыгыз",
    "date": "2026-11-08",
    "language": "tt",
    "image": "https://competition.adesignaward.com/designer-of-the-day/today.png",
    "image_alt": "Бүгенге танылган иҗади визионерны тәкъдим итүче Көн дизайнеры портреты",
    "url": "https://designeroftheday.com/tt/",
    "feature_url": "https://competition.adesignaward.com/designer-of-the-day.html",
    "registry_url": "https://competition.adesignaward.com/designers-of-the-days.php",
    "embed_url": "https://designeroftheday.com/tt/tekdim/"
}

Файдалы мәгълүмат

  • Рәсем тирәсендәге сылтаманы саклагыз, шулай килүчеләрегез тулы материалны таба алачак.
  • Һәрвакыт өстә күрсәтелгән рәсем адресын кулланыгыз, күчермәсен сакламагыз — шулай сезнең бит актуаль булып кала.
  • Рәсем адаптив: ул контейнерыннан киңрәк булмый.
  • Ярдәм яки махсус формат кирәкме? Зинһар, безгә языгыз.

Көннең дизайн цитатасы

Көннең дизайн цитатасы

DesignAdage