Każdy kolor w Smart Image może być stały albo sterowany przez Smart Message. Kolor stały jest taki sam w każdym poście. Kolor dynamiczny jest obliczany na nowo dla każdego posta, dzięki czemu artykuł polityczny i artykuł sportowy mogą otrzymać różne kolory z jednego szablonu.
1. Które pola akceptują kolor dynamiczny#
Jest ich sześć: Overlay color (kolor nakładki), Text color (kolor tekstu), Text shadow color (kolor cienia tekstu), Highlight (wyróżnienie), Underline (podkreślenie) i Decoration (dekoracja). Każde z nich konfiguruje się niezależnie, więc możesz sterować nakładką za pomocą kolorów działów, a tekst pozostawić biały.
Ta opcja pojawia się tylko wtedy, gdy Twoja marka ma co najmniej jeden szablon Smart Message. Jeśli nie masz żadnego, pole pozostaje zwykłym selektorem kolorów.
2. Napisz Smart Message, który zwraca kolor#
Otwórz menu hamburgerowe, przejdź do Brands (marki), wybierz swoją markę, a następnie sekcję Smart message templates (szablony Smart Message) i utwórz szablon. Zmienne, które możesz sprawdzać, takie jak znormalizowane kategorie w organic.category, są wymienione w artykule Jakie zmienne Twig są dostępne w Nonli?.
Reguła musi zwracać kolor szesnastkowy i nic poza nim. Bez otaczającego tekstu, bez podziału wiersza, bez spacji na końcu. Używaj form {%- ... -%} i {{- ... -}}, aby Twig sam usunął białe znaki.
Oto reguła, która nadaje każdemu działowi własny kolor:
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 -%}Nazwy kategorii pochodzą z taksonomii Twojej własnej strony, więc używaj slugów, które faktycznie mają Twoje artykuły.
Zawsze kończ regułę gałęzią {%- else -%}. Reguła, która dla artykułu bez kategorii nic nie zwraca, pozostawiłaby pole puste.
Pomaga konwencja nazewnictwa: poprzedzaj te szablony prefiksem [COLOR], na przykład [COLOR] Section color. Menu rozwijane reguł koloru wyświetla wszystkie Smart Message marki, więc prefiks ułatwia odnalezienie tych, które dotyczą kolorów.
3. Przełącz pole na Dynamic#
Pole koloru początkowo jest zwykłą próbką koloru, bez widocznego przełącznika trybu.
Kliknij próbkę koloru pola, którym chcesz sterować. Otworzy się okienko koloru z dwiema kartami: Static (statyczny) i Dynamic (dynamiczny). Kliknij Dynamic.
Okienko pozostaje otwarte i od razu pokazuje regułę, która została dla Ciebie wybrana, więc możesz ją natychmiast poprawić.
4. Wybierz regułę i kolor zastępczy#
Color rule (reguła koloru) to Smart Message, który zwraca kolor. Fallback color (kolor zastępczy) to kolor, którego Smart Image używa, gdy reguła nie zadziała, nic nie zwróci lub zwróci coś, co nie jest prawidłowym kolorem szesnastkowym.
Wybierz kolor zastępczy, który sam w sobie pozostaje czytelny. To właśnie jego widzą Twoi odbiorcy, gdy artykuł nie ma kategorii, więc traktuj go jako neutralny kolor marki, a nie jako rozwiązanie na ostatnią chwilę.
Po skonfigurowaniu wiersz formularza pokazuje próbkę koloru, znacznik {} i nazwę reguły. Ten wiersz pozwala od razu zobaczyć, że pole jest dynamiczne, a nie stałe.
Aby wrócić do stałego koloru, ponownie otwórz okienko i kliknij Static. Kolor zastępczy staje się nowym stałym kolorem.
5. Więcej przykładów reguł#
Jeden kolor dla każdej sieci społecznościowej
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 -%}Mocniejszy kolor w postach z linkiem
1{%- if post_type == 'link' -%}2{{- '#E50032' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}Kolor akcentu, gdy tytuł sygnalizuje pilność
1{%- if title matches '/(breaking|live|urgent)/i' -%}2{{- '#DC2626' -}}3{%- else -%}4{{- '#1F2937' -}}5{%- endif -%}Dwa kolory zmieniające się w zależności od dnia
1{%- if 'now' | date('N') in ['6', '7'] -%}2{{- '#7C3AED' -}}3{%- else -%}4{{- '#111827' -}}5{%- endif -%}6. Dobre praktyki#
Stosuj jedną regułę dla jednego celu. Pojedynczego szablonu, który jednocześnie decyduje o nakładce, tekście i podkreśleniu, nie da się ponownie wykorzystać, ponieważ reguła koloru zwraca dokładnie jeden kolor.
Sprawdź kontrast przed wdrożeniem. Dynamiczna nakładka zmienia tło za tekstem, więc kolor, który dobrze współgra z białym tekstem w jednym dziale, może nie sprawdzić się w innym. Przed zapisaniem konfiguracji obejrzyj podgląd kilku artykułów z różnych działów.
Używaj tej samej reguły w kilku polach, gdy chcesz, aby zmieniały się razem. Wskazanie tego samego Smart Message zarówno dla wyróżnienia, jak i dla podkreślenia zapewnia ich spójność bez powielania logiki.
7. Jeśli kolor się nie zmienia#
Sprawdź, czy reguła zwraca samą wartość szesnastkową. Najczęstszą przyczyną jest przypadkowa spacja lub znak nowego wiersza i właśnie dlatego powyższe przykłady używają tagów Twig usuwających białe znaki.
Sprawdź, czy artykuł faktycznie zawiera dane, które odczytuje Twoja reguła. Reguła oparta na organic.category w poście utworzonym ręcznie, bez powiązanego artykułu, użyje koloru zastępczego.
Jeśli Smart Message został usunięty, pole wyświetla Rule to be chosen (reguła do wybrania), a Smart Image używa koloru zastępczego. Otwórz okienko i wybierz istniejącą regułę.