# Conținut bogat (MD2)

Articolele nu sunt ziduri de text. baas scrie **MD2** — Markdown plus un
strat de directive — ca articolele să aibă o structură reală de document.
Această pagină e randată cu exact același motor pe care îl folosesc
articolele tale, deci fiecare exemplu de mai jos e viu.

:::callout{severity=info title="De ce contează"}
Articolele structurate se citesc mai bine, țin vizitatorii mai mult pe
pagină și oferă motoarelor de căutare și asistenților AI o semantică curată,
pe care s-o citeze. E diferența vizibilă dintre umplutură generată automat
și conținut pe care ești mândru să-ți pui numele.
:::

## Ce pot conține articolele tale

**Callout-uri** — note laterale cu o severitate, ca cele de pe această
pagină.

**Ghiduri pas cu pas:**

::::steps

:::step[Structura apare acolo unde ajută]
Redactorul e instruit să folosească componente doar când îl servesc pe
cititor — niciodată decorativ.
:::

:::step[Totul se degradează elegant]{status=current}
Dacă o componentă nu se poate randa, conținutul tot se citește ca Markdown
curat.
:::

::::

**Comparații:**

::::compare{title="Articole structurate vs. articole simple"}

:::option[Articol MD2]{key=A severity=success}

- Ușor de scanat: pași, callout-uri, tabele
- Grafice și diagrame unde cuvintele sunt lente
- Cod cu adnotări inline

:::

:::option[Articol simplu]{key=B severity=warning}

- O singură coloană lungă de paragrafe
- Date descrise, nu arătate
- Se citește ca orice alt blog AI

:::

::::

**Grafice** din date inline:

:::chart{type=bar title="Timp pe pagină (ilustrativ)"}
articol structurat: 74
articol simplu: 41
:::

**Cronologii, cod adnotat, arbori de fișiere, taburi, badge-uri** — vezi
galeria completă pe un articol real: articolul-vitrină demonstrează fiecare
componentă într-un singur loc (blogul demo din dashboard-ul tău îl include).

## Imagini reprezentative

Fiecare articol generat poate purta și o **imagine reprezentativă**: un hero
lat, `16:9`, generat odată cu articolul și desenat în paleta proprie a
blogului tău.

:::callout{severity=info title="Fără text în imagine, intenționat"}
Direcția artistică interzice literele, etichetele și logo-urile. Textul
generat de model e de obicei greșit scris, nu poate fi editat fără să
plătești pentru o imagine nouă, iar o singură imagine e distribuită între
toate traducerile unui articol — o legendă coaptă în pixeli ar fi greșită în
toate locale-urile, mai puțin unul.
:::

**Cum arată: exact cum arată site-ul tău.** Înainte ca imaginea să fie
desenată, se întâmplă două lucruri.

Întâi, o singură dată per site, **ne uităm la site-ul tău** — culorile reale
în proporțiile în care le folosești, tipografia și formele, plus imaginile
pe care le publici deja. Rezultă o descriere scrisă a felului în care arată
brandul tău: paleta pe roluri, atmosfera și, esențial, *tipul* de imagini pe
care le rulezi (fotografie? ilustrație plată? 3D? deloc?) și cum sunt
finisate. O poți citi, și poți corecta scanarea rulând-o din nou, în pagina
de setări a site-ului.

Apoi, pentru **fiecare articol**, un director artistic citește textul
terminat — nu doar titlul — împreună cu industria, publicul și produsele
tale, acea identitate vizuală și ultimele imagini publicate deja pe blog.
Decide ce ar trebui să arate imaginea acestui articol anume, inclusiv ce
mediu i se potrivește, și scrie brieful pe care modelul de imagine îl
randează.

De aceea două articole de pe același blog primesc imagini diferite, și de
aceea o imagine de-a ta nu seamănă cu una de-a altcuiva. Nu există un stil
al casei aplicat peste brandul tău — singurele lucruri fixe pentru toată
lumea sunt cadrul și regula „fără text" de mai sus.

:::callout{severity=warning title="Scanează-ți întâi site-ul"}
Fără scanarea vizuală nu există dovezi despre cum arată brandul tău, așa că
direcția artistică se bazează doar pe industrie și public — corect, dar
generic. Apasă o dată **Reîmprospătează din site** în pagina de setări a
site-ului; asta reîmprospătează și profilul de conținut.
:::

**Unde apare**, peste tot deodată, fără nicio muncă din partea ta:

| Suprafață | Ce primești |
|---|---|
| Pagina articolului | Un `<img>` hero deasupra titlului, cu lățime și înălțime intrinseci, ca textul să nu se rearanjeze niciodată în jurul imaginii |
| Distribuire socială | `og:image`, `og:image:alt`, dimensiuni și `twitter:card: summary_large_image` |
| JS SDK | `hero_image_url` în JSON-ul fragmentului; SDK-ul setează tagurile sociale și le curăță când navighezi către un articol fără una |
| Sitemap | O intrare într-un [sitemap de imagini](/ro/docs/delivery-api) Google, per articol |
| RSS | Un `<enclosure>` cu lungimea reală în octeți și tipul imaginii |
| [Webhook-uri](/ro/docs/webhooks) | Un obiect `image` în payload-ul articolului |

**De unde este servită.** Din propriul tău API, la
`https://api.dailysmith.com/v1/media/{id}` — un URL permanent, imuabil, prietenos cu
CDN-urile, nu un link de stocare care expiră. E public după id (un `<img>` e
preluat de browsere și crawlere care nu dețin niciuna dintre credențialele
tale) și id-ul e un UUID aleatoriu pe care nimeni nu-l poate ghici.

**Activare și dezactivare.** Imaginile reprezentative sunt **activate
implicit**, per blog, pe pagina de setări a blogului. Fiecare imagine costă
aproximativ 0,13 $, plus circa 0,01 $ pentru pasul de direcție artistică,
facturate împreună cu articolul căruia îi aparțin și afișate în istoricul de
generare al acelui articol, lângă costul redactării — direcția artistică are
propriul rând acolo, ca să poți citi oricând ce i s-a cerut imaginii.

:::callout{severity=success title="Nu-ți poate costa niciodată un articol"}
Generarea imaginii e best-effort, exact ca motorul de randare a conținutului
bogat: dacă modelul refuză, cererea expiră sau stocarea e indisponibilă,
eșecul e înregistrat în istoricul de generare al articolului și **articolul
e publicat fără imagine**. Nimic din conținutul tău nu depinde de asta.
:::

**Nu e imaginea pe care o voiai?** Pagina fiecărui articol are un buton
**Regenerează imaginea**. Cumpără o imagine diferită — directorul artistic
este informat ce arată cea curentă, deci nu-ți va da aceeași idee din nou —
și îndreaptă articolul către cea nouă peste tot unde apare. Imaginea veche
își păstrează URL-ul și rămâne accesibilă, așa că un card social distribuit
deja, sau un crawler care a indexat-o, nu se strică niciodată. Costă la fel
ca prima.

**Articole existente.** Un articol scris înainte să activezi imaginile are
un buton **Generează imaginea** pe pagina lui din dashboard. Rulează în
fundal și atașează rezultatul. Un articol care are deja o imagine o
păstrează — regenerarea nu e oferită, intenționat, ca o imagine deja
aprobată de tine să nu se schimbe niciodată pe la spate.

## Teme

Fiecare componentă citește cincisprezece token-uri de culoare, deci întregul
sistem își schimbă aspectul ca să se potrivească site-ului tău — manual sau
dintr-o [scanare AI a designului site-ului tău](/ro/docs/theming).

## Pentru curioși: sintaxa

Directivele sunt delimitate cu `:::` și se cuibăresc cu `::::`:

```
:::callout{severity=info title="De reținut"}
O notă laterală de un paragraf.
:::

::::steps
:::step[Primul pas]
Fă lucrul respectiv.
:::
::::
```

Nu trebuie niciodată să scrii asta de mână — redactorul o produce — dar
sursa brută a fiecărui articol e păstrată (`body_markdown`), deci conținutul
tău e portabil, re-randabil și niciodată blocat în HTML.