Régen két sablon volt, most sokkal több.
Konverzió után a régi archívindex sablonból újfajta archívindex sablon lesz -- ezzel kevesebb lesz a meló. Viszont a régi blogsablonból egy csomófajta lesz, egyelőre ugyanolyan tartalommal.
Ezzel lesz a legtöbb meló, érdemes a főoldal sablonnal elindulni, és az alapján, meg a lent leírtak alapján megcsinálnia többit.
Nem kell megijedni a sok sablontól, egy csomó kopipaste az egész, ami miatt mégis többen csináljuk, az a CSS. Nem elég csak bekopizni a megfelelő részeket, itt-ott a sablonhoz kell igazítani akinézetet, ez lesz a macerásabb része.
Egy-két óra elég volt nekem egy sablon kódjának a kipofozására, utána már csak css-ezni kell.
Az alábbiakban taglalt sablondarabokhoz be kell referenciázni a fő CSS-t:
<link type="text/css" rel="stylesheet" href="http://www.nemakaromtudni.hu/.templates/base.css" />
Annak ellenére, hogy minden blog UTF8-ban jelenik meg, minden sablon elején kell lennie egy kódlap definíciónak.
<meta http-equiv="Content-Type" content="text/html; charset=<$Blog.Encoding$>" />
Itt kell listázni a blog archívumjait. Alapból egy dátum lista szerepel itt, tagfelhõ, valamint a kategóriák listája.
Havi bontásra van állítva, ez a legcélszerûbb. UL-LI konstrukciót épít.
<div id="datearchive">
<h2>Archívum</h2>
<fb:Archives type="Monthly">
<fb:Header><ul></fb:Header>
<li><a href="<$Archive.Url$>"><$Archive.Text$></a></li>
<fb:Footer></ul></fb:Footer>
</fb:Archives>
</div>
Szintén UL-LI, kategóriák neve kattintható, mögötte a kategóriákban lévõ bejegyzések száma. Az IfNonZero miatt csak akkor jelenik meg, ha vannak kategóriák. A kategóriák neve mögött megjelenik egy kis RSS ikon is, ha úgyérezzük, hogy nem passzol a dizájnba, akkor az LI-bõl a második A-t kell kitörölni.
<fb:IfNonZero tag="Blog.Categories.Count">
<div id="categories">
<h2>Kategóriák</h2>
<ul>
<fb:Categories order="Ascending"><li><a href="<$Category.Url$>"><$Category.Name encode="html"$> (<$Category.Entries.Count$>)</a>
<a href="<$Category.FeedUrl$>"><img class="rss-12" src="http://www.nemakaromtudni.hu/.templates/s.png" /></a></li></fb:Categories>
</ul>
</div>
</fb:IfNonZero>
Minél többet volt használva a címke, annál nagyobb a betûje. Öt szint van, CSS-ben level1-level5 szabályozza. RSS majd csak a címke archívum oldalon lesz.
<fb:IfNonZero tag="Blog.Tags.Count">
<div id="tags">
<h2>Címkék</h2>
<fb:Tags order="Ascending" join=" "><a class="tag level<$Tag.Frequency$>" href="<$Tag.Url$>"><$Tag.Name encode="html"$></a></fb:Tags>
</div>
</fb:IfNonZero>
Minden bejegyzésnek van egy saját oldala, itt lehet megjeleníteni a kommenteket, meg a bejegyzés teljes szövegét. (Ha a fõoldalon pl. kivonatolva jelenítjük meg.)
Elsõ lépésként csináljunk egy "Sablon darabot", a neve legyen "kommentdoboz", a leírása "Itt van a kommentezõ doboz HTML kódja." Tartalma:
<h3 id="feedback">Mondj valamit</h3>
<p>A szövegben nem lehet HTML-t használni, a linkeket pedig automatikusan aláhúzzuk. Az email cím megadása kötelezõ, de az oldalon nem jelenik meg. <fb:IfAuthenticated><fb:Else>Ha van freeblogos felhasználóneved, <a href="<$Global.Login.Url encode="html"$>%23feedback">itt bejelentkezhetsz</a>.</fb:Else></fb:IfAuthenticated></p>
<form action="<$Entry.Url$>" method="post" id="commentform">
<fb:IfAuthenticated>
<p>Név: <$User.Link$> (<a href="<$Global.Logout.Url encode="html"$>%23feedback">Kijelentkezek</a>)</p>
<input type="hidden" name="<$Forms.Comments.Token$>" id="<$Forms.Comments.Token$>" value="<$User.Token$>"/>
<fb:Else>
<label for="<$Forms.Comments.Name$>">Név:</label><input name="<$Forms.Comments.Name$>" id="<$Forms.Comments.Name$>" type="text" tabindex="1"/><br />
<label for="<$Forms.Comments.Email$>">Email cím:</label><input name="<$Forms.Comments.Email$>" id="<$Forms.Comments.Email$>" type="text" tabindex="2"/><br />
<label for="<$Forms.Comments.Url$>">Honlap:</label><input name="<$Forms.Comments.Url$>" id="<$Forms.Comments.Url$>" type="text" tabindex="3"/><br />
</fb:Else>
</fb:IfAuthenticated>
<textarea name="<$Forms.Comments.Content$>" id="<$Forms.Comments.Content$>" cols="100%" rows="10" tabindex="4"></textarea><br />
<input type="submit" id="submit" name="submit" tabindex="5" value="Ezt mondom">
</form>
Eztán jön a sablon felokosítása.
Csak ha van rá hely.
<fb:PreviousArchive><a href="<$Archive.Url$>">« <$Archive.Text$></a><fb:Footer> </fb:Footer></fb:PreviousArchive>
<fb:NextArchive><a href="<$Archive.Url$>"><$Archive.Text$> »</a></fb:NextArchive>
OL-LI konstrukció, a base.css-ben van egy minimális definíció hozzá, de további igazítást igényel. Leírást lásd a HTML kommentekben. Egy dolgot nem raktam bele, ez pedig a kommentezők képecskéje. Erről infó a HTML kód után.
<fb:IfCommentsActive>
<h3 id="comments">
<fb:IfNonZero tag="Entry.Comments.Count">Eddig <$Entry.Comments.Count$> komment érkezett<fb:Else>Még nincsenek kommentek.</fb:Else></fb:IfNonZero>
(<a href="<$Entry.Comments.FeedUrl$>" title="Komment RSS"><img class="rss-16" src="http://www.nemakaromtudni.hu/.templates/s.png" /></a>)
</h3>
<!-- Kommentlista. OL, LI konstrukció.
Minden komment egy LI-ben helyezkedik el, azon belül a kommentezõ linkjét egy CITE fogja közre, a
dátumot pedig egy SMALL. A bejegyzés szövege P-bõl, A-ból és BR-bõl áll majd.
A Comment.Anchor a Comment.Url-nek segít, így a böngészõ a megfelelõ kommentet fogja mutatni linkeléskor.
-->
<fb:Comments>
<fb:Header><ol></fb:Header>
<li id="<$Comment.Anchor$>">
<cite><$Comment.Author.Link$></cite>:<br />
<small><a href="<$Comment.Url$>"><$Comment.Timestamp$></a></small>
<$Comment.Content$>
</li>
<fb:Footer></ol></fb:Footer>
</fb:Comments>
<!-- Kommentdoboz. Csak akkor jelenik meg, ha a bejegyzést lehet kommentezni, valamint ha az olvasó be van jelentkezve és csak bejelentkezett olvasók szólhatnak hozzá. -->
<fb:IfCommentsAccepted>
<fb:IfAuthenticationRequired>
<fb:IfAuthenticated>
<$fb:Include name="kommentdoboz"$>
<fb:Else>Csak bejelentkezett felhasználók szólhatnak hozzá a bejegyzéshez.</fb:Else>
</fb:IfAuthenticated>
<fb:Else><$fb:Include name="kommentdoboz"$></fb:Else>
</fb:IfAuthenticationRequired>
<fb:Else>Ehhez a bejegyzéshez nem lehet hozzászólni.<br /></fb:Else>
</fb:IfCommentsAccepted>
</fb:IfCommentsActive>
Szóval a kommentezők képe. Mérete 32x32 pixel. Jobbra/balra kellene igazítani, viszont több lehetőségünk is van megoldani. Válaszd azt, amelyiket könnyebb beletenni az adott sablonba, mert pl. a floatos verzió megboríthatja a dolgokat (meg a floatokat nem egyszerű uralni).
A kép urlje ez:
<$Comment.Author.ImageUrl$>
Floatolós, igazítós. Tedd a CITE elé.
<img src="<$Comment.Author.ImageUrl$>" align="left" />
Background bűvészkedős. A LI-nek kell adni egy height-et, meg egy min-height-et CSS-ből, valamint a háttérképet a 2,2 pozícióra rakjuk. (Balodalt lesz a kép)
li
{
background: url(http://www.nemakaromtudni.hu/.templates/s.png) no-repeat 2px 2px;
min-height: 36px;
padding-left: 36px;
}
* html li
{
height: 36px;
}
Az első rule a mozilla és barátainak mondja, hogy legalább 36 pixel magas legyen, az utóbbi ugyanez, csak IE dialektusban.
UTána már csak az LI-knek kell háttérképet megadni:
<li id="<$Comment.Anchor$>" style="background-image: url('<$Comment.Author.ImageUrl$>');">
Amint látjuk az utóbbival több amelé, de lehet hamarabb megvagy vele. (Bár a CSS-em nem teljes, sablonhoz kell igazítani.)
Ha végképp nem boldogulsz, akokr hagyd ki, majd én megcsinálom, de akkor jó lenne, ha még özben szólnál, hogy erre számítsak. Ha viszont sikerrel jársz... Akkor kopipaste módszerrel tudod pakolni a többi sablonba is.
Egy csomó bejegyzés van rajtuk, az archív oldal típusától függõen, de többé kevésbe egyformán néznek ki. A különbségekrõl az egyes alszekciókban lehet majd olvasni. Ezeket a sablonokat szinte copy&paste módszerrel elõ lehet állítani: ha a fõoldal sablon megvan, kis módosítással a többi archívba is be lehet tenni.
Éppen ezért javasolt a bejegyzést megjelenítõ kóddarabot kipakolni egy "sablondarabba" és csak hivatkozni rá.
Ha ezt a megközelítést csináljuk, akkor a sablondarab neve legyen "bejegyzes" (ékezettelenül!), leírása "Ez szabályozza a bejegyzés megjelenését a blogon.". Hivatkozni rá a <$fb:Include name="bejegyzes"$> kóddal lehet. A legszembetûnõbb elõnye, hogy így csak egy helyen kell javítgatni a kinézetet.
No lássuk a közös részeket.
Ha van a bejegyzéshez kivonat, akkor az jelenik meg egy "Elolvasom" link kíséretében, ellenkezõ esetben a teljes szöveg.
<fb:IfTemplate type="Individual">
<$Entry.Content$>
<fb:Else>
<fb:IfNonEmpty tag="Entry.Excerpt">
<$Entry.Excerpt$>
<p><a href="<$Entry.Url$>">Elolvasom »</a></p>
<fb:Else><$Entry.Content$></fb:Else>
</fb:IfNonEmpty>
</fb:Else>
</fb:IfTemplate>
EZ a címet írja ki, vagy a sorszámot, ha nics cím.
<a href="<$Entry.Url$>" rel="bookmark"><$Entry.SmartTitle$></a>
Ha bután néz ki, akkor használjuk az alábbit. Csak akkor jelenik meg, ha van cím, de ebben az esetben a permalinket máshova kell betennünk.
<fb:IfNonEmpty tag="Entry.Title"><a href="<$Entry.Url$>" rel="bookmark"><$Entry.Title$></a></fb:IfNonEmpty>
Csak akkor kell, ha a bejegyzés címét az alternatív módszerrel jelenítjük meg. A konvertált sablonok nagy részében van ilyen, tehát ha a címet linkesítve mutatjuk, a permalinket töröljük ki a sablonból.
<a href="<$Entry.Url$>" rel="bookmark">SZÖVEG</a>
A blogger neve, linkesítve. Emailímet linkel, vagy profilt, a blogger beállításaitól függõen. Ilyen is van már a sablonokban, azt ki kell cserélni ere.
<$Entry.Author.Link$>
Korábban ilyesmi volt, ezt kell kitörölni és a fentivel helyettesíteni:
<a href="<$Entry.Author.Email$>"><$Entry.Author.NickName$></a>
Vesszõvel elválasztott A lista. Ha a dizájnba nem passzol, akkor töröljük ki az fb:Headert, vagy írjuk át ami benne van.
<fb:Categories join=", "><fb:Header>Kategóriák: </fb:Header><a href="<$Category.Url$>"><$Category.Name$></a></fb:Categories>
Vesszõvel elválasztott A lista. Ha a dizájnba nem passzol, akkor töröljük ki az fb:Headert, vagy írjuk át ami benne van.
<fb:Tags join=", "><fb:Header>Címkék: </fb:Header><a href="<$Tag.Url$>"><$Tag.Name$></a></fb:Tags>
Sima infó, kattintáskor a kommentlista elejére visz. Ha a kommentdobozt akarjuk becélozni, akkor (a fenti sablondarabok használata esetén) #comments helyett írjuk azt, hogy #feedback.
<fb:IfCommentsActive><a href="<$Entry.Url$>#comments"><$Entry.Comments.Count$></a></fb:IfCommentsActive>
Szofisztikáltabb komment infó, mást ír ki, ha 0 komment van.
<fb:IfCommentsActive>
<a href="<$Entry.Url$>#comments"><fb:IfNonZero tag="Entry.Comments.Count"><$Entry.Comments.Count$> komment<fb:Else>még nincsenek kommentek</fb:Else></fb:IfNonZero></a>
</fb:IfCommentsActive>
A kettõ közül válasszuk azt, ami jobban passzol a dizájnba. (Egy keskenyebb dizajnba az elsõt, szélesebbe az utóbbit.)
Archívum, címke és kategória lista. Sablondarabba kell pakolni. A sablondarab neve "linklista", leírása: "Ez a sablondarab jeleníti meg a blogod oldalán megjelenõ listákat. (Archívum, utolsó kommentek, kategóriák, egyebek.) Ugyanitt vehetsz fel új linkeket is a blogba."
Használata: <$fb:Include name="linklista"$>
Vannak benne szövegek, hogy Régi dolgok, ilyesmi, ezeket az éppen konvertált sablon megfelelé terminológiájával tessék helyettesíteni. A LI-ken belõl vannak H2-k, ha ezt az adott sablon éppen átdefinálja, akkor cserélük le H3-ra, B-re, akármire.
A kategória listában vannak RSS ikonok, ha ez bután néz ki, akkor a második A-t kell törölni belõlük. Ha csak az RSS ikon miatt néz ki csúnyán, akkor maradjanak, mert az RSS ikonok még kicsit át lesznek dizájnolva.
Vannak sablonk, ahol már van ilyen lista. Meg van, ahol nem is oldalt van, hanem alul (lásd Janka). Ez esetben a sablon HTML struktúrájába kell beilleszteni az alábbi dolgokat. Ha van listája a sablonnak, akkor 90%, hogy van archív lista is benne. Az alapján, összenézve a lenti archívlistával elvileg pofonegyszerűa többit is megcsinálni. Ha nagy gond van, akkor tessék nekem szólni (a@freeblog.hu).
<!-- Keresõ doboz -->
<form method="get" id="searchform" action="<$Blog.Url$>">
<div><input type="text" name="s" id="s" value="<$Blog.SearchExpression encode="html"$>"/><input type="submit" value="Ezt keresem" /></div>
</form>
<br /><br />
<!--
Most jön egy hatalmas UL-LI ahol az LI-ken belül az egyes listk újabb UL-LI-vel jelennek meg. A LI-ken belüli fejléceket egy H2 tartalmazza.
-->
<ul>
<!-- utolsó 5 komment megjelenítése -->
<li>
<fb:IfNonZero tag="Blog.Comments.Count">
<h2>Utolsó kommentek</h2>
<ul>
<fb:Comments lastN="5" order="Descending">
<li><fb:Comment.Entry><a href="<$Entry.Url$>"><$Entry.SmartTitle encode="html"$></a></fb:Comment.Entry>, <strong><$Comment.Author.SiteLink$></strong>: <$Comment.Excerpt words="10"$> <a href="<$Comment.Url$>">»</a></li>
</fb:Comments>
</ul>
<fb:Else><h2>Még nincsenek kommentek.</h2></fb:Else>
</fb:IfNonZero>
</li>
<!-- archívum, havi bontásban -->
<li><h2>Régi dolgok</h2>
<ul>
<fb:Archives type="Monthly" lastn="10"><li><a href="<$Archive.Url$>"><$Archive.Text$></a></li></fb:Archives>
<li><a href="<$Blog.Archives.Url$>">Az összes »</a></li>
</ul>
</li>
<!-- kategória lista-->
<fb:Categories>
<fb:Header><li><h2>Kategóriák</h2><ul></fb:Header>
<li><a href="<$Category.Url encode="html"$>"><$Category.Name$> (<$Category.Entries.Count$>)</a> <a href="<$Category.FeedUrl$>"><img class="rss-12" src="http://www.nemakaromtudni.hu/.templates/s.png" /></a></li>
<fb:Footer></ul></li></fb:Footer>
</fb:Categories>
<!-- kedvenc lista -->
<li><h2>Linkek</h2>
<ul>
<li><a href="http://freeblog.hu">freeblog</a></li>
<li><a href="http://blogring.hu">blogring</a></li>
</ul>
</li>
<!-- blog rss -->
<li><a href="<$Blog.FeedUrl$>"><img class="rss-16" src="http://www.nemakaromtudni.hu/.templates/s.png" /></a></li>
<!-- ez a kép marad! -->
<li><a href="http://freeblog.hu"><img src="http://www.nemakaromtudni.hu/.templates/a88x31.png" /></a></li>
<br style="clear: both;" />
</ul>
Egy kategória összes bejegyzése.
A blog TITLE-jébe ki kell írni a kategória nevét:
<title><$Blog.Title$> » <$Category.Name$></title>
Ha belefér, akkor a bejegyzés lista fölé valahova szintén ki lehet írni, hogy
<h2><$Category.Name$> bejegyzései</h2>
Egy címke összes bejegyzése.
A blog TITLE-jébe ki kell írni a címke nevét:
<title><$Blog.Title$> » <$Tag.Name$></title>
Ha belefér, akkor a bejegyzés lista fölé valahova szintén ki lehet írni, hogy
<h2><$Tag.Name$> bejegyzései</h2>
Egy adott idõintervallum összes bejegyzése.
A blog TITLE-jébe ki kell írni az intervallumot:
<title><$Blog.Title$> » <$Archive.Text$></title>
A bejegyzés lista fölé valahova ki kell írni, hogy
<h2><$Archive.Text$></h2>
Valamint a lapozókat:
Elõzõ intervallum:
<fb:PreviousArchive><a href="<$Archive.Url$>">« <$Archive.Text$></a></fb:PreviousArchive>
Következõ intervallum:
<fb:NextArchive><a href="<$Archive.Url$>"><$Archive.Text$> »</a></fb:NextArchive>
Ha nincs TITLE, akkor adjuk hozzá
<title><$Blog.Title$></title>
Ahova az archív oldalakon az intervallumot írtuk, oda megy a keresett szöveg kiírása:
<h2>A keresett kifejezés: <$Blog.SearchExpression encode="html"$></h2>
Valaminta TITLE-be, hogy ez keresés volt:
<title><$Blog.Title$> » keresés eredménye</title>