Jokainen Smart Image -työkalun väri voi olla joko kiinteä tai Smart Message -viestin ohjaama. Kiinteä väri on sama jokaisessa julkaisussa. Dynaaminen väri lasketaan uudelleen jokaiselle julkaisulle, joten politiikkaa käsittelevä artikkeli ja urheiluartikkeli voivat saada eri värin samasta mallista.
1. Mitkä kentät tukevat dynaamista väriä#
Dynaamisen värin tukee kuusi kenttää: Overlay color, Text color, Text shadow color, Highlight, Underline ja Decoration. Jokainen niistä määritetään erikseen, joten voit ohjata peittovärin osioidesi väreillä ja pitää tekstin valkoisena.
Vaihtoehto näkyy vain, jos brändilläsi on vähintään yksi Smart Message -malli. Jos malleja ei ole, kenttä pysyy tavallisena värinvalitsimena.
2. Kirjoita Smart Message -viesti, joka palauttaa värin#
Avaa hampurilaisvalikko, siirry kohtaan Brands, valitse brändisi ja sen jälkeen Smart message templates -osio ja luo malli. Muuttujat, joita voit testata, kuten organic.category-kentän normalisoidut kategoriat, on lueteltu artikkelissa Mitkä Twig-muuttujat ovat käytettävissä Nonlissa?.
Säännön on palautettava heksadesimaalimuotoinen väri eikä mitään muuta. Ei ympäröivää tekstiä, ei rivinvaihtoa, ei perässä olevaa välilyöntiä. Käytä muotoja {%- ... -%} ja {{- ... -}}, jolloin Twig poistaa tyhjät merkit puolestasi.
Tässä on sääntö, joka antaa jokaiselle osiolle oman värinsä:
1{%- set categories = organic.category ?? [] -%}2{%- if 'politique' in categories -%}3{{- '#E50032' -}}4{%- elseif 'international' in categories -%}5{{- '#2377FA' -}}6{%- elseif 'rugby' in categories -%}7{{- '#16A34A' -}}8{%- elseif 'hippisme' in categories -%}9{{- '#9333EA' -}}10{%- elseif 'sports' in categories -%}11{{- '#F97316' -}}12{%- else -%}13{{- '#6F819D' -}}14{%- endif -%}Kategorioiden nimet tulevat oman sivustosi taksonomiasta, joten käytä niitä slug-tunnisteita, joita artikkeleissasi todella on.
Lopeta sääntö aina {%- else -%}-haaraan. Sääntö, joka ei palauta mitään luokittelemattomalle artikkelille, jättäisi kentän tyhjäksi.
Nimeämiskäytäntö auttaa: lisää näiden mallien nimen alkuun etuliite [COLOR], esimerkiksi [COLOR] Section color. Värisäännön pudotusvalikko luettelee kaikki brändin Smart Message -viestit, joten etuliitteen ansiosta värimallit löytää helposti.
3. Vaihda kenttä tilaan Dynamic#
Värikenttä alkaa tavallisena värinäytteenä, eikä siinä näy tilan vaihtokytkintä.
Napsauta sen kentän värinäytettä, jota haluat ohjata. Värin ponnahdusikkuna avautuu, ja siinä on kaksi välilehteä, Static ja Dynamic. Napsauta Dynamic.
Ponnahdusikkuna pysyy auki ja näyttää heti sinulle valitun säännön, joten voit korjata sen saman tien.
4. Valitse sääntö ja varaväri#
Color rule on Smart Message -viesti, joka palauttaa värin. Fallback color on väri, jota Smart Image käyttää, jos sääntö epäonnistuu, ei palauta mitään tai palauttaa jotakin, joka ei ole kelvollinen heksadesimaaliväri.
Valitse varaväri, joka on luettavissa sellaisenaan. Sen yleisösi näkee, kun artikkelilla ei ole kategoriaa, joten pidä sitä brändisi neutraalina värinä äläkä jälkikäteen lisättävänä yksityiskohtana.
Kun määritys on valmis, lomakerivillä näkyvät värinäyte, {}-merkki ja säännön nimi. Se rivi kertoo yhdellä silmäyksellä, että kenttä on dynaaminen eikä kiinteä.
Voit palata kiinteään väriin avaamalla ponnahdusikkunan uudelleen ja napsauttamalla Static. Varaväristä tulee uusi kiinteä väri.
5. Lisää esimerkkejä säännöistä#
Yksi väri kutakin sosiaalista verkostoa kohti
1{%- if social_network == 'facebook' -%}2{{- '#1877F2' -}}3{%- elseif social_network == 'linkedin' -%}4{{- '#0A66C2' -}}5{%- elseif social_network == 'instagram' -%}6{{- '#C13584' -}}7{%- else -%}8{{- '#111827' -}}9{%- endif -%}Vahvempi väri linkkijulkaisuissa
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Korostusväri, kun otsikko viestii kiireellisyydestä
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Kaksi väriä vuorotellen päivän mukaan
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Hyvät käytännöt#
Pidä yksi sääntö kutakin tarkoitusta varten. Yhtä mallia, joka päättää peittovärin, tekstin ja alleviivauksen kerralla, ei voi käyttää uudelleen, koska värisääntö palauttaa täsmälleen yhden värin.
Tarkista kontrasti ennen käyttöönottoa. Dynaaminen peittoväri muuttaa tekstisi takana olevaa taustaa, joten väri, joka toimii valkoisen tekstin kanssa yhdessä osiossa, ei välttämättä toimi toisessa. Esikatsele muutamaa artikkelia eri osioista, ennen kuin tallennat määrityksen.
Käytä samaa sääntöä useissa kentissä, kun haluat niiden muuttuvan yhdessä. Kun sekä korostus että alleviivaus osoittavat samaan Smart Message -viestiin, ne pysyvät yhtenäisinä ilman, että logiikkaa tarvitsee kopioida.
7. Jos väri ei muutu#
Tarkista, että sääntö palauttaa pelkän heksadesimaaliarvon. Ylimääräinen välilyönti tai rivinvaihto on yleisin syy, ja siksi yllä olevissa esimerkeissä käytetään Twig-tunnisteita, jotka poistavat tyhjät merkit.
Tarkista, että artikkelissa todella on tiedot, joita sääntösi lukee. Sääntö, joka perustuu organic.category-kenttään, käyttää varaväriäsi julkaisulla, joka on luotu käsin ilman artikkelia sen takana.
Jos Smart Message -viesti on poistettu, kentässä näkyy Rule to be chosen, ja Smart Image käyttää varaväriä. Avaa ponnahdusikkuna ja valitse olemassa oleva sääntö.