Widget zależny od wyszukiwanej etykiety



Ten widget jest zależny od etykiet i wyświetlany tylko podczas wyszukiwania wybranych - Zobacz opis

niedziela, 15 kwietnia 2012

Wydrukuj to...

Warunki w szablonie

Tagi warunkowe pozwalają na modyfikowanie składni szablonu Bloggera tak by jej zawartość pojawiała się tylko pod pewnymi warunkami. Tagi możemy podzielić na lokalne oraz globalne.
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>

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>

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.
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.
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ą.
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.
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.
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ą.
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.
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ł.
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.
np. po otwarciu dowolnego posta lub kliknięciu w czytaj więcej - podobne do <b:if cond='data:blog.pageType == "item"'>


<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.
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.
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.
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ą.
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ę
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.

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


10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

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

Astroni pisze...

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ź!

stach pisze...

?? co masz na musli?? użyj dowolnego przykładu powyżej /luknij punkt 4/ zamiast grafiki daj rożne arkusze stylii

Anonimowy pisze...

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ć...

Anonimowy pisze...

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 :)

stach pisze...

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ść.

Anonimowy pisze...

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 :)

stach pisze...

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.

Anonimowy pisze...

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?

stach pisze...

właśnie po to przenosisz ten tag do sekwencji w loopie by była widoczna każdym poście

Anonimowy pisze...

aaaach :D dziękuję bardzo :)

Unknown pisze...

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

PoL pisze...

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.

majeczkaa pisze...

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.

Lessiter pisze...

Przydatny i pouczający gotowy szablon html, jestem naprawdę pod wrażeniem tego bloga, taka fajna umiejętność pisania

Anna Barańska pisze...

Jestem pod wrażeniem. Bardzo ciekawie napisany artykuł.

Prześlij komentarz

Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP: