Tagi widżetów dla układów bloga

Jeśli do tworzenia sekcji z treścią bloga korzystasz z motywu układu, możesz dodawać elementy strony, takie jak obrazy czy listy blogów, za pomocą widżetów.

Rodzaje tagów

W tej sekcji opisano fragmenty kodu HTML, jakie można dodawać wewnątrz tagów zamykających.

Dołączenia (b:include)

Kiedy używać dołączeń

Dołączenia najczęściej przydają się wtedy, gdy dany fragment kodu chcesz zastosować w kilku różnych miejscach lub tylko w określonych sytuacjach.

Aby ich użyć, wpisz odpowiednią treść między tagami b:includable, a następnie wstaw tag b:include tam, gdzie ma się ona pojawiać na stronie.

Formatowanie

 

<b:includable id='main' var='tenwidżet'>
  [tu wstaw, co tylko chcesz]
</b:includable>

 

Atrybuty

• id (wymagany): unikalny identyfikator składający się z liter i cyfr. Każdy widżet musi mieć jeden element dołączany o identyfikatorze id='main'.
• var (opcjonalny): identyfikator składający się z liter i cyfr, używany przy odwoływaniu się do danych w obrębie danej sekcji.

Jeśli utworzysz więcej elementów dołączanych o różnych identyfikatorach, to nie będą one automatycznie wyświetlane. Jednak jeśli utworzysz element dołączany z identyfikatorem id='nowy', to używając tagu <b:include name='nowy' /> możesz utworzyć odniesienie do niego w swoim głównym elemencie dołączanym. W ten sposób element taki będzie wyświetlany automatycznie.

Tag b:include ma następujące atrybuty:

• name (wymagany): identyfikator składający się z liter i cyfr. Musi odpowiadać identyfikatorowi istniejącego tagu b:includable w obrębie tego samego widżetu.
• data (opcjonalny): wyrażenie lub dane, które mają być uwzględnione w dołączanej sekcji. Będzie to wartość atrybutu var w elemencie dołączanym.
• cond (opcjonalny): wyrażenie, dzięki któremu dołączenie będzie realizowane wyłącznie po spełnieniu danego warunku. Działa analogicznie do atrybutu cond tagu b:if.

Przykład

Oto przykład zastosowania tagów b:includable i b:include.

Najważniejsze jest tutaj zrozumienie, w jaki sposób sekcja „post” zostaje włączona do sekcji „main”. Sekcja główna pobiera dane z posta i przypisuje je do zmiennej „p”. Sekcja dołączana odwołuje się do niej za pomocą zmiennej „post”. Następnie wyświetlany jest tytuł.

Dołączenie jest realizowane wyłącznie, gdy wartość indeksu jest mniejsza niż 10. Tak więc w tym przykładzie wyświetlanych będzie maksymalnie 10 postów (indeks zaczyna się od 0).

 

<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Tytuł: <data:post.title/>
</b:includable>

 

Dane wyjściowe (data:)

Przykłady

• <data:title/> wyświetla tytuł widżetu.

• <data:photo.url/> – rozmiar: <data.photo.width /> x <data.photo.height /> wyświetla atrybuty składowe zdjęcia. Atrybutami składowymi zdjęcia mogą być URL, wysokość i szerokość. Zapis „.” informuje, że chcemy wyświetlić URL konkretnego zdjęcia, a nie innego elementu.

Więcej przykładów

Zapoznaj się z pełną listą obsługiwanych tagów danych dla układów.

 

Pętle (b:loop)

Kiedy używać tagu b:loop

Tag b:loop pozwala na wielokrotne powtarzanie danej sekcji. Najczęściej stosuje się go do wyświetlania poszczególnych postów z listy postów na danej stronie, bądź też poszczególnych komentarzy, etykiet itp.

Formatowanie

Ogólny format stosowania pętli wygląda następująco:

 

<b:loop var='identyfikator' values='zbiór-danych'>
  [tu wstawiasz powtarzającą się treść]
</b:loop>

 

Za „identifikator” (i) można wstawić dowolną nazwę. Będzie ona reprezentować każdą nową pozycję na liście przy każdym uruchomieniu pętli. Jako wartości (atrybut values) możesz podać dowolny zestaw danych spośród opisanych w artykule o tagach danych w formie listy elementów.

Na przykład w widżecie wyświetlającym posty na blogu wartość posts jest listą. W poniższym kodzie pętla przechodzi przez wszystkie posty, wyświetlając ich tytuły otoczone tagami nagłówka.

 

<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>

 

Zwróć uwagę, że pod zmienną „i” jest podstawiana wartość każdego kolejnego posta, dzięki czemu można pobrać ich tytuły.

Zakres liczbowy

Tag pętli pozwala na powtarzanie kodu w ramach danego zakresu liczbowego, np. od 1 do 3 („1 to 3”) czy od –3 do –9 („-3 to -9”). Za wartość liczbową zostaje tutaj podstawiona wartość zmiennej. Poniższy przykładowy kod spowoduje wygenerowanie nieuporządkowanej listy pozycji o numerach 1, 2 i 3.

 

<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>

 

Atrybut indeksu

Tagi pętli mogą mieć także opcjonalny atrybut indeksu, który przypisuje bieżącej iteracji w pętli liczoną od zera wartość indeksu.

 

<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Indeks: <data:index />, Numer: <data:number /></li>
  </b:loop>
</ul>

 

Ten przykładowy kod spowoduje wygenerowanie nieuporządkowanej listy o następujących pozycjach:

• Indeks: 0, Numer: 9
• Indeks: 1, Numer: 8
• Indeks: 2, Number: 7

If, elseif oraz else (b:if)

Kiedy używać tagów if, elseif i else

Tagi b:if, b:elseif i b:else służą do wyświetlania określonych treści, gdy spełnione są konkretne warunki. Na przykład możesz wyświetlać wybrany tekst na stronie głównej, a inny podczas przeglądania poszczególnych postów.

Formatowanie

 

<b:if cond='warunek'>
  [treść wyświetlana, jeśli warunek jest spełniony]
<b:elseif cond='inny warunek'/>
  [treść wyświetlana, jeśli poprzednie warunki if i elseif nie były spełnione, a ten warunek elseif jest spełniony]
<b:else/>
  [treść wyświetlana, jeśli żadne warunki if i elseif nie są spełnione]
</b:if>

 

Tagi b:elseif i b:else są opcjonalne. Bez nich wyświetlana będzie tylko treść zawarta w sekcji b:if lub żadna. Jednak w każdym przypadku wymagany jest tag zamykający </b:if>.

Jako warunek możesz podać dowolny parametr, którego wartością jest prawda lub fałsz. Niektóre tagi danych same stanowią wartości typu prawda/fałsz, np. allowComments w poście. W przypadku innych danych możesz porównać je z określonymi wartościami, aby uzyskać wynik, który będzie prawdą lub fałszem. Oto kilka przykładów:

• <b:if cond='data:post.showBacklinks'>
  Prawda, jeśli dla bieżącego posta ustawiono wyświetlanie linków przychodzących.
• <b:if cond='data:blog.pageType == "item"'>
  Prawda, jeśli bieżąca strona jest stroną tego elementu (stroną posta).
• <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
  Prawda, jeśli bieżąca strona jest stroną tego elementu (stroną posta), a dla bieżącego posta ustawiono wyświetlanie linków przychodzących.
• <b:if cond='data:displayname != "Tomek"'>
  Prawda, jeśli to nie jest wyświetlana nazwa Tomka.
• <b:if cond='data:displayname == "Tomek" or data:blog.pageType == "static_page"'>
  Prawda, jeśli „Tomek” jest wyświetlaną nazwą lub bieżąca strona jest stroną statyczną (nie stroną posta).
• <b:if cond='data:post.numComments > 1'>
  Prawda, jeśli bieżący post ma więcej niż jeden komentarz.
• <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
  Prawda, jeśli bieżąca strona jest konkretnym postem lub stroną.

Rozgałęziony wybór (b:switch)

Kiedy używać tagów switch

Tagu b:switch używa się, jak tagu b:if mającego kilka tagów b:elseif. Rozgałęzienie switch ma tę zaletę, że nie trzeba powtarzać nazwy zmiennej. Jest czytelne: wyraźnie widać warunki poszczególnych przypadków i który przypadek jest domyślny.

Formatowanie

<b:switch var='[Wyrażenie określające dane]'>
<b:case value="[Wartość 1]" />
 [Dane wyjściowe, gdy var równa się Wartość 1]
<b:case value="[Wartość 2]" />
 [Dane wyjściowe, gdy var równa się Wartość 2]
[… wszystkie inne wartości]
<b:default />
 [Dane wyjściowe, gdy var nie równia się żadnej z podanych wartości b:case]
</b:switch>

Przykład

W tym przykładzie pokazujemy, jak przekazywać na wyjście różne nagłówki w zależności od typu renderowanej strony.

<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Strona</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Posty na blogu</h2>
</b:switch>

Wyrażenia atrybutu (expr:)

Kiedy używać wyrażeń

Atrybutów expr możesz używać do określania wartości atrybutów na podstawie wartości ze słownika danych. 

Przykłady

• <a expr:href='data:blog.homepageUrl'>Strona główna</a>
  Link z adresem URL strony głównej bloga.
• <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>RSS postów</a>
  Link z adresem URL kanału RSS danego posta na blogu. Operator „+” łączy ze sobą obydwa ciągi.
• <a expr:class='data:post.allowComments ? "comment" : "no-comment">Komentarz</a>
  Link zawierający klasę „comment” (gdy dozwolone jest komentowanie) i „no-comment” (gdy komentowanie nie jest dozwolone). Operator trójargumentowy (?:) sprawdza daną wartość logiczną i, jeśli jej wynikiem jest prawda, wybiera pierwszą wartość (po „?”), a jeśli fałsz – drugą (po „:”).

Wyrażenia ustalające wartość (b:eval)

Kiedy używać wyrażeń ustalających wartość

Tagu b:eval można używać do ustalania wartości bardziej skomplikowanych wyrażeń niż w zwykłym tagu data.

Formatowanie

<b:eval expr='[Wyrażenie]' />

Przykłady

• min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
  Przekazuje na wyjście obliczoną względną wysokość (height) na podstawie nowej wartości szerokości (newWidth).
• <b:eval expr="data:post.labels[0].url" />
  Przekazuje na wyjście url pierwszej etykiety posta.
• <b:eval expr='data:post.allowComments ? "Skomentuj" : "Komentarze wyłączone" />
  Przekazuje na wyjście „Skomentuj”, gdy komentarze są dozwolone, lub „Komentarze wyłączone”, gdy nie są dozwolone. Zwróć uwagę, że to wyrażenie korzysta z operatora trójargumentowego.

Alias zmiennej (b:with)

Kiedy używać aliasu zmiennej

Tagu b:with można używać do tymczasowego przechowywania wartości obliczonego wyrażenia i by unikać skomplikowanych wyrażeń w tekście.

Formatowanie

<b:with var='mojaObliczonaWartość' value='[Wyrażenie określające dane]' />

Przykłady

Możesz obliczyć skomplikowany atrybut stylu oparty na zmiennych z danymi przed resztą wyjściowego kodu HTML, aby zagnieżdżony HTML był bardziej czytelny.

<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>Mój nagłówek</h1>
   </div>
 </div>
</b:with>

Zmienna będzie istnieć tylko dla węzłów podrzędnych tagu b:with.

Przykład

Kliknij i zobacz przykład zastosowania wszystkich wymienionych tagów na swoim blogu, w kodzie HTML widżetu Lista stron.

Przykład

W tym widżecie możesz zobaczyć zastosowanie tagów b:widget, b:includable (i b:include), b:if (i b:else) oraz b:loop.

 

<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>