RkBlog

Hardware, programming and astronomy tutorials and reviews.

Skórki Xanthia

Opis skórek i systemu szablonów Xanthia stosowanych w Postnuke.

Oto krótkie omówienie systemu skór Xanthia. Ogólnie system przypomina Encompass, a to dlatego iż Xanthia to fork - pochodna Encompassa. Wejdź do panelu admina, do moduły Xanthia i aktywój skórkę PostNuke. Udaj się do ustawień i wybierz tą skórkę :)

Skórka

Struktura skórki w systemie Xanthia

Omawiana skóra Postnuke ma standardową strukturę plików: Kropki to katalogi oczywiście. Katalog images zawiera pliki graficzne/swf itp. skórki, katalog lang zawiera zestaw językowy skórki. Może ale nie musi istnieć. W pliku lang można przetrzymywać różnego rodzaju tekst umieszczany w skórce jak nazwy modułów jakiegoś menu, linki tego menu itp. Katalog style zawiera pliki css (style.css dla IE, styleNN.css - Netscape, styleMoz.css Mozilla) może zawierać plik typu style.php z arkuszem css i dodatkowym kodem... Katalog templates zawiera szablony (html/htm/tpl) skórki, a dokładniej jej obszarów. Jest to bardzo podobne, wręcz identyczne ze skórkami encompass.
Plik theme.php zawiera kod skórki, którego nie trzeba edytować, chyba że wiemy co robimy, a robimy jakąś zmataczoną skórkę (zawiera m.in. definicję kolorów dla poszczególnych zmiennych, lecz nie same kolory). Plik xaninfo.php zawiera podstawowe informacje o skórce:

$themeinfo['name'] = "nazwa skóry";
$themeinfo['author'] = "Autor Skóry";
$themeinfo['download'] = "http://www.strona autora lub inna.pl";
$themeinfo['api'] = "Xanthia2.0";
$themeinfo['xhtmlsupport'] = 1; // czy zapewnia działanie XHTML

Plik xaninit.php zawiera przypisania jaki plik szablonu odpowiada danemu obszarowi oraz zawiera przypisania kolorów:
// Create theme configuration variables<br />
	//   CreateThemeVar($skinID, < nazwazmiennej >, < skrót do plików językowych >, < wartość >, '');<br />
	CreateThemeVar($skinID,'pagewidth',_TM_PAGEWIDTH,'100%','');<br />
	CreateThemeVar($skinID,'lcolwidth',_TM_LCOLWIDTH,'150','');<br />
    CreateThemeVar($skinID,'rcolwidth',_TM_RCOLWIDTH,'150','');<br />
	CreateThemeVar($skinID,'indexcol',_TM_INDEXCOL,'1','');<br />
	CreateThemeVar($skinID,'righton',_TM_RIGHTON,'0','');<br /><br />
Tutaj mamy definicje zmiennych używanych w skórce jak pagewidth - długość strony, lcolwidth - długość lewej kolumny bloków...<br /><br />


	// CreateThemeTemplate($skinID, < etykieta szablonu >, < nazwa pliku >, < typ szablonu >);<br />
    CreateThemeTemplate($skinID, 'master', 'master.htm', 'theme');<br />
    CreateThemeTemplate($skinID, 'lsblock', 'lsblock.htm', 'block');<br />
    CreateThemeTemplate($skinID, 'rsblock', 'rsblock.htm', 'block');<br />
    CreateThemeTemplate($skinID, 'table1', 'table1.htm', 'theme');<br />
    CreateThemeTemplate($skinID, 'table2', 'table2.htm', 'theme');<br />
    CreateThemeTemplate($skinID, 'News-index', 'News-index.htm', 'theme');<br />
    CreateThemeTemplate($skinID, 'News-article', 'News-article.htm', 'theme');<br />
    CreateThemeTemplate($skinID, 'mainmenu', 'mainmenu.htm', 'block');<br />
    CreateThemeTemplate($skinID, 'ccblock', 'ccblock.htm', 'block');<br /><br />
Tworząc skórkę nie musimy nic tu zmieniać, wystarczy wiedzieć co jest czym, ew. przy edycji "niestandardowych" skórek warto zerknąć tutaj by zorientować się który plik szablonu jest odpowiedzialny za interesujący nas obszar.
master: szkielet skórki, coś jak theme.php w starym PN, theme.html w AutoTheme
lsblock: left side block - bloki lewe
rsblock: righ side block - bloki prawe
ccblock: bloki środkowe
mainmenu: menu główne News-index: układ newsów na stronie głównej ("listy newsów")
News-article: wygląd newsa/artykułu [?]

Pierwsze pięć to podstawa + szablony newsów, choć można zrobić skórkę korzystającą z jednego szablonu dla bloków czy newsów. Typ szablonu (theme/block) określa gdzie szablon jest. Szablony o typie "theme" są w katalogu templates, szablony o typie "block" są w katalogu templates/blocks/. Poniżej CreateThemeTemplate mamy CreateThemeZone:
CreateThemeZone($skinID, <definition - skrót do plików językowych>, <etykieta>, <typ>, <aktywny?>, <typ szablonu>);<br />
CreateThemeZone($skinID, _TM_MASTER, 'master', 0, 1, 'theme');<br />
CreateThemeZone($skinID, _TM_LEFTSIDEB, 'lsblock', 0, 1, 'block');<br /><br />
Dla nas ważna jest ostatnia cyfra w "kolumnie" aktywny. Wartość 1 oznacza że dany szablon jest używany.
Powyższe dane w większości da się (przynajmniej powinno) edytować z panelu Xanthii :)


Przykład szablonu - master.html

Otwórz master.html skórki a zobaczysz głównie kod HTML szkieletu strony. Zawierać będzie wiele zmiennych Xanthia np: !--[sitename]-- - nazwa strony. Ze zmiennych spoza obszaru HEAD Ważne są m.in.:
<!--[pnbannerdisplay]--> : wyświetla tutaj banner
<!--[$centerblocks]-->: wyświetla środkowe bloki
<!--[$maincontent]-->: wyświetla moduł
<!--[$leftblocks]-->: wyświetla lewe blok
<!--[$rightblocks]-->: wyświetla prawe bloki
Przykład master.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html lang="<!--[lang]-->">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=<!--[charset]-->">
<meta name="DESCRIPTION" content="<!--[slogan]-->">
<meta name="ROBOTS" content="INDEX,FOLLOW">
<meta name="resource-type" content="document">
<meta http-equiv="expires" content="0">
<meta name="author" content="<!--[sitename]-->">
<meta name="copyright" content="Copyright (c) 2004 by <!--[sitename]-->">
<meta name="revisit-after" content="1 days">
<meta name="distribution" content="Global">
<meta name="generator" content="PostNuke <!--[pnml name="_PN_VERSION_NUM"]--> - http://postnuke.com">
<meta name="rating" content="General">
<meta name="KEYWORDS" content="<!--[keywords]-->">
<title><!--[title]--></title>
<link rel="StyleSheet" href="<!--[$themepath]-->/style/styleNN.css" type="text/css">
<link rel="icon" href="<!--[$imagepath]-->/icon.png" type="image/png">
<link rel="shortcut icon" href="<!--[$imagepath]-->/favicon.ico">
<style type="text/css">
@import url("<!--[$themepath]-->/style/style.css");
</style>
<!--[additional_header]-->
<!--[modulestylesheet]-->
</head>
<body>

<center><img src="<!--[$imagepath]-->/logo.gif"></center>
<table border="0" cellpadding="4" cellspacing="0"><tr><td>
<!--[$leftblocks]--></td><td><!--[$centerblocks]--><br /><!--[$maincontent]--></td><td>< !--[$rightblocks]-- ></td></tr></table>
<center><!--[pnbannerdisplay]--></center>
</body></html>
Wszystko do znacznika body to standard, poniżej mamy wyśrodkowane logo (zobacz jak podaje się link do plik graficznego) dalej mamy 3 kolumnową tabelę zawierającą lewe bloki/ środkowe bloki i moduł/ prawe bloki. Poniżej tabeli mamy wyśrodkowany banner.

Inne szablony

By edytować inne obszary należy przejść do innych szablonów. Np. lewe bloki określa standardowo lsblock.html. Z ważnych zmiennych mamy:
<!--[$title]-- > - tytuł bloku
<!--[$content]-- > - treść bloku
<!--[$lcolwidth]-- > - długość bloku
zmienna lcolwidth nie musi być podawana, lecz jest w standardzie i ułatwia później edycję. daje się ją np. w "width" tabeli. wartość określona jest w xaninit.php
Podobnie w innych szablonach.

Panel admina Xanthia

Po wejściu do panelu admina Xanthii mamy: [ View Themes | Configure Xanthia ]. Configure - konfiguracja modułu zawierająca ustawienia Cachowania, krótkich urli itp. Nas głównie interesuje to co jest w View Themes. Wchodzimy tam. Po wejściu pojawią sie skórki Xanthii jakie mamy w katalogu Themes oraz opcje ich konfiguracji:
34
Na samym początku wszystkie są nieaktywne (Inactive). By można było je wybrać w Ustawieniach jako skórkę trzeba Aktywować daną skórkę. Po aktywacji mamy opcję Edycji (Edit Theme), Deaktywacji (Remove Theme), Przeładowania szablonów (coś zmieniliśmy i trzeba te zmiany wczytać...) (Reload Templates), kliknięcie na Generate config cache wywali błąd składniowy (PN 0.750RC2 :)... Klikamy na Edit Theme aktywnej skórki (u mnie PostNuke). Mamy: [ Block Zones | Theme Zones | Theme Templates | Theme Colors | Theme Settings | Block Control ] - ([ Obszary Bloków | Obszary szkieletowe | Szablony szkieletowe | Kolory Skórki | Ustawienia skórki | Kontrola Bloków ]). Zony - obszary to nazwa obszaru i przypisany temu obszarowi szablon. Theme Templates umożliwia przeładowanie danego szablonu oraz jego bezpośrednią edycję.
35
Theme Settings określa długości bloków, strony itp, Theme Colors określa kolory CSS.
36
RkBlog

11 July 2008;

Comment article