1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
|
Język opisu stron internetowych Comanche
========================================
Comanche to język znaczników podobny do bbcode, za pomocą którego można tworzyć rozbudowane i złożone strony internetowe, składając je z szeregu komponentów - z których niektóre są wstępnie skonstruowane, a inne można zdefiniować w locie. Firmalnie, Comanche jest językiem opisu stron, umozliwiajacym konstruowanie statycznych stron internetowych.
Comanche przede wszystkim wybiera, jakie treści pojawią się w różnych regionach strony. Różne regiony mają nazwy i te nazwy mogą się zmieniać w zależności od wybranego szablonu układu.
<a name="templates"></a>
## Szablony stron
Obecnie istnieje pięć szablonów układu, ale portal może zapewniać dodatkowe układy
**default**
Szablon *default* definuje region 'nav' u góry strony, 'aside' jako pasek boczny o stałej szerokości, 'content' dla głównego obszaru treści i 'footer' dla stopki strony. Jest to szablon domyślny, jak wskazuje na to nazwa.
**full**
Szablon *full* definiuje to samo, co szablon "default", z tym wyjątkiem, że nie ma obszaru 'aside'.
**choklet**
Szablon *choklet* zapewnia szereg płynnych stylów układu, które można określać według odmiany:
* (odmiana domyślna) - układ dwukolumnowy, podobny do szablonu domyślnego, ale bardziej płynny;
* bannertwo - układ dwukolumnowy z regionem bannera, zgodny z szablonem "default" na małych wyświetlaczach;
* three - układ trzykolumnowy (dodano region 'right_aside' do szablonu domyślnego);
* edgestwo - układ dwukolumnowy ze stałymi marginesami bocznymi;
* edgesthree - układ trzykolumnowy ze stałymi marginesami bocznymi;
* full - układ trzykolumnowy ze stałymi marginesami bocznymi i dodatkowym obszarem "header" poniżej paska nawigacji
**redable** (sic)
Szablon do czytania dłuższych tekstów na pełnym ekranie (czyli bez paska nawigacyjnego). Trzy kolumny: 'aside', 'content' i 'right_aside'. Aby zapewnić maksymalną czytelność, zaleca się używanie tylko środkowej kolumny treści.
**zen**
Daje swobodę robienia wszystkiego samemu. Po prostu pusta strona z obszarem zawartości.
Użyj znacznika `template`, aby wybrać szablon układu (w tym przypadku "full"):
```
[template]full[/template]
```
W celu wyboru szablonu "choklet" w odmianie "three" użyj:
```
[template=three]choklet[/template]
```
Jeśli nie określono innego szablonu, zostanie użyty szablon domyślny. Szablon może używać dowolnych nazw dla regionów zawartości. Używa się znaczników `region`, aby zdecydować, jakie treści umieścić w odpowiednich regionach.
Zostały też zdefiniowne trzy "makra", które można wykorzystać"
```
$htmlhead - zastępowane treścią nagłówka witryny.
$nav - zastępowane zawartością paska nawigacyjnego witryny.
$content - zastępowane główną zawartością strony.
```
Domyślnie, `$nav` jest umieszczne w regionie "nav" a `$content` w regionie "content". Makra te są potrzebne tylko wtedy, gdy chcesz zmienić rozmieszczenie tych elementów, tak aby zmienić kolejność lub przenieść je do innych regionów strony.
W celu wybrania motywu dla swojej strony, trzeba użyć znacznika 'theme'.
```
[theme]suckerberg[/theme]
```
Polecenie to wybierze motyw o nazwie "suckerberg". Domyślnie zostanie użyty preferowany motyw Twojego kanału.
```
[theme=passion]suckerberg[/theme]
```
W tym przypadku, wybrany zostanie motywu o nazwie "suckerberg" i schemat "passion" (wariant motywu). Alternatywnie można użyć do tego skondensowanej notacji motywu.
```
[theme]suckerberg:passion[/theme]
```
Notacja skondensowana nie jest częścią samego Comanche, ale jest rozpoznawana przez platformę Hubzilla jako specyfikator motywu.
<a name="regions"></a>
## Regiony
Jak wspomniano powyżej, każdy region ma nazwę. Konkretny region określa się za pomocą tagu "region", który zawiera jego nazwę. Jakakolwiek treść, którą chce się umieścić w tym regionie, powinna być umieszczona pomiędzy tagiem otwierającym a zamykającym region.
```
[region=htmlhead]....content goes here....[/region]
[region=aside]....content goes here....[/region]
[region=nav]....content goes here....[/region]
[region=content]....content goes here....[/region]
```
<a name="assets"></a>
## CSS i Javascript
Jest możliwość włączenia bibliotek Javascript i CSS do regionu htmlhead. Obecnie wykorzystujemy bibliteki jQuery (js), Bootstrap (css/js) oraz Foundation (css/js).
Poniży kod spowoduje nadpisanie wybranych motywów htmlhead.
```
[region=htmlhead]
[css]bootstrap[/css]
[js]jquery[/js]
[js]bootstrap[/js]
[/region]
```
<a name="menus-blocs"></a>
## Menu i bloki
Nasze narzędzia do tworzenia stron internetowych umożliwiają tworzenie również menu i bloków treści. Zapewniają one wyrenderowanie jakichś fragmentów treści strony, które można umieścić w dowolnych regionach i w dowolnej kolejności. Każdy z nich ma nazwę, którą określa się podczas tworzenia menu lub bloku.
```
[menu]mymenu[/menu]
```
Powyższy kod umieszcza menu o nazwie "mymenu" na stronie, ale musi ono znajdować się w jakimś regionie strony.
```
[menu=horizontal]mymenu[/menu]
```
Ten kod umieszcza menu o nazwie "mymenu" na stronie, tak jak kod poprzedni, ale dodatkowo zastosowano tu klasę CSS "horizontal" dla bloku menu. Klasa "horizontal" została zdefiniowana w motywie redbasic. Może, ale nie musi być dostępna w innych motywach.
```
[menu][var=wrap]none[/var]mymenu[/menu]
```
Zmienna [var=wrap]none[/var] w umieszczona w powyższym bloku usuwa otaczający menu element div.
W poniższym przykładzie, w jakimś regionie umieszcza się blok o nazwie "contributors":
```
[block]contributors[/block]
```
Nastęþny przykład pokazuje blok o nazwie "contributors", podobnie jak powyżej, ale z zastosowaniem klasy "someclass". Zastępuje to domyślną klasę bloków "bblock widget":
```
[block=someclass]contributors[/block]
```
W poniższym przykładzie, zmienna [var=wrap]none[/var] umieszczona w bloku "contributors" usuwa z bloku otaczający go element div.
```
[block][var=wrap]none[/var]contributors[/block]
```
## Widżety
Widgety to wykonywalne aplikacje dostarczane przez system, które możesz umieścić na swojej stronie. Niektóre widżety przyjmują argumenty, które pozwalają dostosować widżet do własnych potrzeb.
Podstawowy system dostarcza:
* profile - widżet, który powiela pasek boczny profilu na stronie kanału. Ten widżet nie wymaga żadnych argumentów;
* tagcloud - udostępnia chmurę tagów kategorii; argumenty
* count - maksymalna liczba tagów na liście
Widżety i argumenty są określane za pomocą znaczników 'widget' i 'var'.
```
[widget=recent_visitors][var=count]24[/var][/widget]
```
Spowoduje to załadowanie widżetu "recent_visitors" i dostarczenie go z argumentem "count" ustawionym na "24".
## Komentarze
Znacznik 'comment' służy do wydzielenia komentarzy. Komentarze te nie pojawią się na wyrenderowanej stronie.
```
[comment]This is a comment[/comment]
```
## Instrukcje warunkowe
Do wyboru rozwiązań można używać konstrukcji 'if'. Są one obecnie oparte systemowej zmiennej konfiguracyjnej lub bieżącym obserwatorze.
```
[if $config.system.foo]
... zmienna konfiguracyjna system.foo przyjmuje wartość 'true'.
[else]
... zmienna konfiguracyjna system.foo przyjmuje wartość 'false'.
[/if]
[if $observer]
... ta treść będzie wyświetlana tylko uwierzytelnionym odwiedzającym
[/if]
```
Klauzula 'else' jest opcjonalna.
Oprócz oceny logicznej obsługiwanych jest kilka testów.
```
[if $config.system.foo == bar]
... zmienna konfiguracyjna system.foo jest równa łańcuchowi 'bar'
[/if]
[if $config.system.foo != bar]
... zmienna konfiguracyjna system.foo nie jest równa łańcuchowi 'bar'
[/if]
[if $config.system.foo {} bar ]
... zmienna konfiguracyjna system.foo jest prostą tablicą zawierającą wartość 'bar'
[/if]
[if $config.system.foo {*} bar]
... zmienna konfiguracyjna system.foo jest prostą tablicą zawierającą klucz o nazwie 'bar'
[/if]
```
## Złożony przykład
```
[comment]Użycie istniejącego szablonu strony, który zapewnia region banera a pod nim 3 kolumny[/comment]
[template]3-column-with-header[/template]
[comment]Użycie motywu "darknight"[/comment]
[theme]darkknight[/theme]
[comment]Użycie istniejącego menu nawigacyjnego witryny[/comment]
[region=nav]$nav[/region]
[region=side]
[comment]Użycie wybranego przeze mnie menu i kilku widżetów[/comment]
[menu]myfavouritemenu[/menu]
[widget=recent_visitors]
[var=count]24[/var]
[var=names_only]1[/var]
[/widget]
[widget=tagcloud][/widget]
[block]donate[/block]
[/region]
[region=middle]
[comment]Show the normal page content[/comment]
$content
[/region]
[region=right]
[comment]Show my condensed channel "wall" feed and allow interaction if the observer is allowed to interact[/comment]
[widget]channel[/widget]
[/region]
```
#include doc/macros/main_footer.bb;
|