Pierwsze działają w obrębie TYLKO szablonu posta/strony, globalne można w zasadzie używać w dowolnym miejscu w kodzie szablonu.
Składnia warunkowa może mieć następującą postać:
<b:if cond= 'NASZ WARUNEK'>
zawartość która ma być wykonana np kod HTML
</b:if>
zawartość która ma być wykonana np kod HTML
</b:if>
lub postać bardziej złożoną
<b:if cond= 'NASZ WARUNEK'>
zawartość która ma być wykonana TYLKO jeśli spełnia warunek
<b:else/>
zawartość która ma być wykonana w pozostałych przypadkach
</b:if>
zawartość która ma być wykonana TYLKO jeśli spełnia warunek
<b:else/>
zawartość która ma być wykonana w pozostałych przypadkach
</b:if>
Jak zauważyliście tag warunkowy ma zasadniczą postać <b:if cond=... </b:if>
Na początek o warunkach globalnych słów kilka.
Stosowanie warunków jest szczególnie przydatne podczas gdy chcemy określić na której stronie lub w którym poście ma się pojawić określona znacznikiem zawartość HTML
Dynamiczne elementy strony, przyciski interaktywne, paski narzędziowe, meta-tagi można łatwo dodawać do kodu szablonu na wybranych typach stron, lub konkretnych ich adresach.
Poniżej przedstawiam przykłady warunków globalnych wraz z opisami działania:
1. warunki złożone:
sprawdzają poprawność założenia z wartością
<b:if cond='data:blog.pageType == "index"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.pageType sprawdza typ strony - w tym przypadku wykonuje kod jeśli strona jest elementem głównym. zawartość która ma być wykonana np kod HTML
</b:if>
np. bezpośredni adres strony lub posta oraz strona główna
<b:if cond='data:blog.pageType == "item"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.pageType sprawdza typ strony - w tym przypadku wykonuje kod jeśli strona jest postem. zawartość która ma być wykonana np kod HTML
</b:if>
np. po otwarciu dowolnego posta
<b:if cond='data:blog.pageType == "static_page"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.pageType sprawdza typ strony - w tym przypadku wykonuje kod jeśli strona jest stroną. zawartość która ma być wykonana np kod HTML
</b:if>
np. po kliknięciu na link strony
<b:if cond='data:blog.pageType == "archive"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.pageType sprawdza typ strony - w tym przypadku wykonuje kod jeśli strona jest wyszukiwaniem archiwum. zawartość która ma być wykonana np kod HTML
</b:if>
np. po kliknięciu na link z archiwum
<b:if cond='data:blog.pageType == "error_page"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.pageType sprawdza typ strony - w tym przypadku wykonuje kod jeśli brak strony. zawartość która ma być wykonana np kod HTML
</b:if>
np. po kliknięciu nieaktualny link
<b:if cond='data:blog.url == data:blog.homepageUrl'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.url sprawdza adres strony - w tym przypadku wykonuje kod jeśli strona jest stroną główną. zawartość która ma być wykonana np kod HTML
</b:if>
np. tylko na głównej stronie bloga (tej z postami)
<b:if cond='data:blog.url == "DOWOLNY.ADRES.W.BLOGU"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.url sprawdza adres strony - w tym przypadku wykonuje kod jeśli strona ma dokładnie taki adres. zawartość która ma być wykonana np kod HTML
</b:if>
np. po wejściu na wybrany adres (jeśli podamy tam: http://edytuj.blogspot.com/p/maps.html - to szablon zinterpretuje kod tylko na stronie mapy mojego bloga)
<b:if cond='data:blog.pageName == "TYTUŁ STRONY"'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.pageName sprawdza tytuł strony - w tym przypadku wykonuje kod jeśli strona ma dokładnie taki tytuł. zawartość która ma być wykonana np kod HTML
</b:if>
np. po wejściu na wybrany adres (jeśli podamy tam: mapa bloga - to szablon zinterpretuje kod tylko na stronie mapy mojego bloga)
2. Warunki proste:
sprawdzają tylko założenie - bez sprawdzania wartości
<b:if cond='data:blog.url'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.url sprawdza adres strony - w tym przypadku wykonuje kod jeśli strona jest postem. zawartość która ma być wykonana np kod HTML
</b:if>
np. po otwarciu dowolnego posta lub kliknięciu w czytaj więcej - podobne do
<b:if cond='data:blog.searchLabel'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.url sprawdza adres strony - w tym przypadku wykonuje kod tylko na stronach etykiet. zawartość która ma być wykonana np kod HTML
</b:if>
np. na otwartej stronie po kliknięciu w etykietę
<b:if cond='data:blog.isMobile'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:blog.isMobile wykonuje kod jeśli na stronie mamy włączone szablony mobilne i przeglądarka jest w wersji mobilnej. zawartość która ma być wykonana np kod HTML
</b:if>
np. jeśli odwiedzimy blog z urządzenia mobilnego
<b:if cond='data:post.isFirstPost'>
zawartość która ma być wykonana np kod HTML
</b:if>
data:post.isFirstPost wykonuje kod jeśli na stronie mamy wyświetlony więcej niż jeden post w pierwszym poście. zawartość która ma być wykonana np kod HTML
</b:if>
np. jako pager postów - jest to przykład globalnego i zarazem lokalnego warunku
3. Warunki sprzeczne:
ww warunki sprawdzają założenie TRUE - czyli zgodności ale możemy używać też zaprzeczenia FALSE modyfikując kod:
<b:if cond='data:blog.pageType != "static_page"'>
zawartość która ma być wykonana
</b:if>
data:blog.pageType sprawdza typ strony - w tym przypadku wykonuje kod jeśli strona NIE jest stroną. zawartość która ma być wykonana
</b:if>
np. wszędzie oprócz stron
4. Łączenie i kaskadowanie warunków:
Czasami zachodzi potrzeba sprawdzenia kilku wartości lub różnych warunków. Przykład poniżej:
<b:widget id='HTML99' locked='false' title='DYNAMICZNA GRAFIKA' type='HTML'>
<b:includable id='main'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:if cond='data:blog.url == "http://adres.wybranej.strony/posta.html"'>
<img src='http://adres.do.naszej.grafiki/nr0.jpg' alt='TA STRONA' />
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<img src='http://adres.do.naszej.grafiki/nr1.jpg' alt='STRONY' />
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<img src='http://adres.do.naszej.grafiki/nr2.jpg' alt='POSTY' />
<b:else/>
<img src='http://adres.do.naszej.grafiki/nr3.jpg' alt='POZOSTAŁE' />
</b:if>
</b:if>
</b:if>
</div>
<span style='display:none;' class='blog-admin'><data:content/></span>
</b:includable>
</b:widget>
Przykładowy powyższy kod gadżetu umiejscowiony np. w pasku bocznym wyświetli nam odpowiednio grafikę<b:includable id='main'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:if cond='data:blog.url == "http://adres.wybranej.strony/posta.html"'>
<img src='http://adres.do.naszej.grafiki/nr0.jpg' alt='TA STRONA' />
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<img src='http://adres.do.naszej.grafiki/nr1.jpg' alt='STRONY' />
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<img src='http://adres.do.naszej.grafiki/nr2.jpg' alt='POSTY' />
<b:else/>
<img src='http://adres.do.naszej.grafiki/nr3.jpg' alt='POZOSTAŁE' />
</b:if>
</b:if>
</b:if>
</div>
<span style='display:none;' class='blog-admin'><data:content/></span>
</b:includable>
</b:widget>
na wybranej stronie nr0.jpg, na stronach nr1.jpg, na postach nr2.jpg a na wszystkich pozostałych grafikę nr3.jpg.
Jak dodać kolejne warunek? Proste wklejamy jako kolejne przesuwając ostatni wynik poziom niżej.
<b:widget id='HTML99' locked='false' title='DYNAMICZNA GRAFIKA' type='HTML'>
<b:includable id='main'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:if cond='data:blog.url == "http://adres.wybranej.strony/posta.html"'>
<img src='http://adres.do.naszej.grafiki/nr0.jpg' alt='TA STRONA' />
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<img src='http://adres.do.naszej.grafiki/nr1.jpg' alt='STRONY' />
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<img src='http://adres.do.naszej.grafiki/nr2.jpg' alt='POSTY' />
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<img src='http://adres.do.naszej.grafiki/nr4.jpg' alt='Strony 404' />
<b:else/>
<data:content/>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
</b:widget>
W tym przypadku <img src='http://adres.do.naszej.grafiki/nr3.jpg' alt='POZOSTAŁE' /> zostało zastąpione tagiem zawartości gadżetu <data:content/> - Zatem na wszystkich pozostałych stronach wyświetli się zamiast grafiki zawartość kodu umieszczonego w tym gadżecie ;). Kod można łatwo zmieniać w sekcji UKŁAD ustawień bloga.<b:includable id='main'>
<h2 class='title'><data:title/></h2>
<div class='widget-content'>
<b:if cond='data:blog.url == "http://adres.wybranej.strony/posta.html"'>
<img src='http://adres.do.naszej.grafiki/nr0.jpg' alt='TA STRONA' />
<b:else/>
<b:if cond='data:blog.pageType == "static_page"'>
<img src='http://adres.do.naszej.grafiki/nr1.jpg' alt='STRONY' />
<b:else/>
<b:if cond='data:blog.pageType == "item"'>
<img src='http://adres.do.naszej.grafiki/nr2.jpg' alt='POSTY' />
<b:else/>
<b:if cond='data:blog.pageType == "error_page"'>
<img src='http://adres.do.naszej.grafiki/nr4.jpg' alt='Strony 404' />
<b:else/>
<data:content/>
</b:if>
</b:if>
</b:if>
</b:if>
</div>
</b:includable>
</b:widget>
5. Przykłady praktycznego zastosowania:
Wykonywanie kodu JS/xHTML/CSS umieszczonego w gadżecie tylko na wybranej stronie LINK
Zmiana wartości TAGU HTML na wybranych stronach LINK
Wykonywanie kodu JS/xHTML/CSS na wybranych typach stron LINK
Zmienny kod JS/xHTML/CSS wg określonego parametru w kodzie szablonu LINK
Napisano już 15 komentarze/y. Dyskusja nabiera poważnego tempa...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz
Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy
Sprawdzanie warunków w pętli - bardzo sprytnie :)
Nie mam jednak pojęcia, jak tam wykorzystać style (albo chociaż div) - co bym nie wpisała, to albo nie daje efektów, albo wyrzuca błąd.
Przykładowo jak przerobić coś takiego:
<style>span.post-labels {color: blue;}</style>
Dzięki za odpowiedź!
?? co masz na musli?? użyj dowolnego przykładu powyżej /luknij punkt 4/ zamiast grafiki daj rożne arkusze stylii
Jej, jestem pełna podziwu dla Twoich umiejętności. Ja ostatnio chciałam zrobić sobie sama szablon i wszystko było by dobrze, gdyby nie to wszystko, co mieści się pomiędzy < body > i < / body >. Nie potrafię sobie z tym poradzić...
Pięknie urwało mi komentarz.
Chciałam w końcu spytać, czy masz pomysł, jak przerobić szablon aby prezentował się mniej więcej tak: http://safe.tumblr.com/theme/preview/30591
Chodzi mi w sumie o taki, a nie inny wygląd sidebaru i o ten dodatkowy box z boku posta, w którym wyświetlana jest data i np. ilość komentarzy.
Wiem, że coś podobnego jest w blogspotowym szablonie rewelacja, ale ten box jest na górze i nie wygląda w żaden sposób fantastycznie. Masz na to jakiś pomysł, którym mógłbys się podzielić? Będę bardzo mocno wdzięczna :)
Pewnie by można dostosować jakiś z podstawowych - ale trzeba na to mieć wolny czas, aktualnie brak takiej możliwości.
W tym bocznym boxie niestety nie będzie tagów /etykiet/ - to jest niewykonalne
Można by je załadować js ale kod będzie dość skomplikowany, przy dużej ilości wpisów na jednej stronie oraz masy etykiet się wykrzaczy lub będzie ładować w nieskończoność.
W boxie w sumie tylko mi zależy żeby była data i ilość kmentarzy - etykiet nie używam i raczej nie zamierzam ;)
Z panelem bocznym poradziłam sobie tako jako, na razie jestem zadowolona. zobaczymy jak długo ;)
Także jakbyś kiedyś miał czas, żeby zastanowić się nad zagadką tego małego boxa i podzielić się z nami rezultatem, to będe zaszczycona :)
ustaw w css szerokość posta .date-outer
poprzenoś <data:post.dateHeader/> do stopki posta
ustaw .post-footer {float:right;} i szerokość dla tego elementu
dopicuj graficznie estetkę i gotowe:)
Tak w skrócie na ww temat.
będe kombinować zapewne :)
A da się ustawić, by przy każdym poście pokazywana była data, nie tylko przy jednym z danego dnia?
właśnie po to przenosisz ten tag do sekwencji w loopie by była widoczna każdym poście
aaaach :D dziękuję bardzo :)
Witam
Mój blog: www.myfinity@blogspot.co.uk
Chciałam zapytać czy da radę z moim szablonem żeby prawy pasek boczny był widoczny na stronie głównej? Z góry dziękuję za pomoc
Gotowy szablon HTML jest dostosowany do wymagań systemów CMS, takich jak Joomla, Drupal, WordPress i inne. Możesz pobrać go za darmo na TemplateMonster.
Moim zdaniem jeśli chodzi o pozycjonowanie stron, to jak najbardziej warto jest zdecydować się także na takie działania jak opisane tutaj https://push-ad.com/pl/blog/rwd-amp-a-moze-dedykowana-wersja-mobilna-jak-przystosowac-strone-do-mobile-first-index/ wdrożenie notyfikacji push. Trochę o tym ostatnio poczytałem i wydaje mi się to byc na prawdę ciekawym i wartym uwagi rozwiązaniem.
Przydatny i pouczający gotowy szablon html, jestem naprawdę pod wrażeniem tego bloga, taka fajna umiejętność pisania
Jestem pod wrażeniem. Bardzo ciekawie napisany artykuł.
Prześlij komentarz
Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP: