Anatomia posta

     Nie dość, że czasu mi ostatnio brak, to jeszcze człowiek sobie wymyślił, że sobie ściągnie taką i taką grę i będzie w nią grał. Tylko człowiek nie pomyślał, że zainstalowanie tej gry to istne piekło... Ale spokojnie, dajcie mi parę dni i gra będzie śmigać tak jak to w założeniu powinna.

Tymczasem, moim mili, przechodzimy do dzisiejszego posta. Jak w tytule o anatomii właśnie tego posta słów  kilka. Będzie dużo obrazków, dużo informacji i spróbujemy się tymi kodami właśnie pobawić. 

Zabawę zaczynamy od znalezienia Blog1 , gdzie zwracamy uwagę na "main" i "post".

Jeśli można to na sam początek zajmiemy się zawartością main, czyli lecimy od góry do dołu.

Przed całą resztą pozwolę sobie skomentować pewien fakt, mniej lub bardziej ważny. Co ciekawe kod HTML daty znajduje się w części "main", a nie jak to się każdy może spodziewać w "post", jednak - o czym za chwile - spokojnie, bez wyrzutów sumienia możemy zmieniać pozycje danych rzeczy. Tak w sumie to na tym ten post ma również polegać. Przecież post nie może być tylko o kodach, nie?

DATA:

  <b:if cond='data:post.dateHeader'>
          <h2 class='date-header'><span><data:post.dateHeader/></span></h2>
        </b:if>

Edytując datę używamy h2.date-header  datę z kolei jeśli komuś się to nie podoba i chce sobie zmienić selektor edytujący datę to: h2 zamienia na div, a date-header na wymyślony selektor np. dataGT. W tym przypadku zamiast h2.date-header wpiszemy właśnie dataGT.
POST ( bez daty ):

   <div class='post-outer'>
        <b:include data='post' name='post'/>
        <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
          <b:include data='post' name='comment_picker'/>
        </b:if>
        </div> 

O ile korzystne i nieskutkujące zagładą bloga jest przemieszczanie daty, tak posta proponowałabym zostawić w spokoju.
I znowu jeśli nie podoba nam się post-outer i mamy jakieś niecne zamiary względem całego postu ( no dobra, bez daty ) to zmieniamy tenże post-outer na np. postGT.
Tyle co do zakładki "main".

Przechodzimy dalej, do tego - niech będzie - bardziej atrakcyjnego trójkącika ( >?< ), czyli "post".
Na samym początku w nasze oczy rzuca się kod na tytuł posta, o którym było mówione przy okazji Data, tytuł i pos-header.

<a expr:name='data:post.id'/>    <b:if cond='data:post.title'>      <h3 class='post-title entry-title' itemprop='name'>      <b:if cond='data:post.link'>        <a expr:href='data:post.link'><data:post.title/></a>      <b:else/>        <b:if cond='data:post.url'>          <b:if cond='data:blog.url != data:post.url'>            <a expr:href='data:post.url'><data:post.title/></a>          <b:else/>            <data:post.title/>          </b:if>        <b:else/>          <data:post.title/>        </b:if>      </b:if>      </h3>    </b:if>

Teraz żywy screen z szablonu Ghost River i jego tytułu posta.

Dalej w kolejce jest post-header, a jego anatomie przedstawię w tym oto obrazku:

Powyżej mamy niestety kody tylko i wyłącznie na link do komentarzy i datę, a co z resztą? No cóż, z tego co wiem są, żyją i póki co mają się dobrze.
Autor posta:

<span class='post-author vcard'>
        <b:if cond='data:top.showAuthor'>
          <data:top.authorLabel/>
            <b:if cond='data:post.authorProfileUrl'>
              <span class='fn' itemprop='author' itemscope='itemscope' itemtype='http://schema.org/Person'>
                <meta expr:content='data:post.authorProfileUrl' itemprop='url'/>
                <a expr:href='data:post.authorProfileUrl' rel='author' title='author profile'>
                  <span itemprop='name'><data:post.author/></span>
                </a>
              </span>

Etykiety:

<span class='post-labels'>
        <b:if cond='data:post.labels'>
          <data:postLabelsLabel/>
          <b:loop values='data:post.labels' var='label'>
            <a expr:href='data:label.url' rel='tag'><data:label.name/></a><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
          </b:loop>
        </b:if>
      </span> 

Żeby nie było można je dodawać i to post-headera, i do post-footera, co nawet mamy zaproponowane w edycji postów w blogu w "układzie", jednak przy kombinacjach z kodem, czasami jest to niemożliwe, dlatego trzeba to poprzemieszczać. Albo wyrzucić poza jedno i drugie.

Z kolei kod HTML post-footera bardzo, ale to bardzo przypomina ten post-header, więc lecimy już z górki:

<div class='post-footer'>
    <div class='post-footer-line post-footer-line-1'>  <span.....</span> <span..... </span>
</div> </div>

Tadaaaaa, mamy to!
Z tego miejsca przypominam, że naprawdę fajnie się zmienia od czasu do czasu miejsce tychże rzeczy. Odrywamy się od monotonii i jednak, jesteśmy o krok bliżej w stronę całkowicie naszego kodu HTML ( ale nie liczcie, że takowy napiszecie na bloggera, jest to nie wykonalne, za dużo haczyków ).
A teraz, na samiutki koniec, trochę selektorów dla CSS'owych wariatów!

• a.comment-link:link - link w poście do komentarzy. Przydaje się, gdy ktoś chce, aby czytelnik go nie przegapił! :D 
• jump-link - efekt dla tych, którzy lubią szykować niespodzianki. Odpowiada za przycisk "więcej"
• post-timestamp - efekt dla daty w post-header
• a.timestampl-link:link - ewentualna opcja dla tego co powyżej

Mało nowych rzeczy, ale liczę na wybaczenie ( chociaż z drugiej strony, w bazie mamy już masę selektorów, jeszcze trochę i będziemy znać wszystkie! ). :( A teraz na ten sam, samotny koniec, koniec, jeszcze jedna rzecz, takie jedno małe skromne pytanko:

Czy ktoś z obecnych gra może w lola?