-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathanpassung.tex
6560 lines (5399 loc) · 277 KB
/
anpassung.tex
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
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
\addtocontents{toc}{\protect\pagebreak}
%revised
\label{Anpassungen}%
\index{Template-S@Templates!Anpassungen}%
\index{Frontend!Anpassung}%
\chapter{Anpassungen}
Früher oder später wird jeder Benutzer von Serendipity zu dem Punkt kommen, an
dem individuelle Anpassungen des Blogs gewünscht sind.
Übliche Anpassungen reichen dabei von der Wahl der Grundfarbe und des
Grundlayouts, eigenen Kopfgrafiken bis hin zu eigenständigen Unterseiten und
Funktionalitäten.
Glücklicherweise bietet Serendipity für solche Anpassungen oft mehrere
Möglichkeiten an, und Sie können über unterschiedliche technische Wege Einfluss
nehmen. In den folgenden Abschnitten werden die einzelnen Möglichkeiten dargestellt, die
meist aufeinander aufbauen und zum Ende hin komplexer werden.
\section{Eingebaute Anpassungsmöglichkeiten}
In den vorhergehenden Kapiteln haben Sie bereits gerlernt, wie Sie das Aussehen
Ihres Blogs durch die Wahl eines Templates verändern können.
\index{Template-Optionen}%
Seit Serendipity Version 1.1 besitzen Templates die Möglichkeit, Template-abhängige
Optionen festzulegen. Diese Optionen können Sie als Administrator bzw. Redakteur
des Blogs mittels der Template-Verwaltung (siehe Kapitel \ref{Styles verwalten}
ab Seite \pageref{Styles verwalten}) beliebig anpassen.
\index{Bulletproof}%
\index{Template-S@Templates!Bulletproof}%
\label{bpdesc}%
Ab Serendipity 1.2 wird standardmäßig ein neues Template
namens \emph{Bulletproof} mitgeliefert. Dieses Template unterscheidet sich in
seiner Zielsetzung wesentlich von normalen Serendipity-Templates. Üblicherweise
ist ein Template auf ein spezielles Design ausgelegt. Dabei legt der Designer des
Templates für Sie fest, wie Artikel dargestellt werden, welche Farben das
Template benutzt und vor allem, wie das Grundlayout ausgelegt ist. Wenn Sie
etwas an den Farben ändern möchten, müssen Sie meist selbst Hand an der
Template-Programmierung anlegen, was ohne Detailkenntnisse vielen Benutzern
schwerfällt.
An genau diese Benutzer richtet sich \emph{Bulletproof}. Es stellt ein
Template-Grundgerüst zur Verfügung, das sich an bestmöglicher
Browser"=Kompatibilität orientiert. Dieses Grundgerüst können Sie mittels der
Template-Optionen nun vielfältig gestalten: Sie können Farbschemas auswählen,
bestimmen, wie viele Spalten das Layout besitzt, welche Navigationsleisten Sie
einbinden wollen und auch wie die Blog-Artikel selbst gestaltet sind.
\index{Framework}%
\index{Kopfgrafiken}%
\index{Headerbild}%
Über ein derartiges Baukasten-Prinzip (\emph{Framework}) können Sie als
Blog-Eigentümer z.\,B.\ leicht andere Kopfgrafiken einsetzen und sich vor allem
darauf verlassen, dass die Basis des Frameworks browser-übergreifend annähernd gleich aussieht.
In zukünftigen Serendipity-Versionen wird dieses Template das Standarddesign
ersetzen und dem Benutzer direkt von Anfang an diesen gestalterischen Freiraum
genehmigen. Auch das Bulletproof-Template können Sie später über eigene
Programmierung/Anpassungen verändern, wie Abschnitt \ref{templateoptionen} ab
Seite \pageref{templateoptionen} zeigen wird.
Abgesehen von den Template-Optionen bietet auch die
Serendipity"=Grundkonfiguration (siehe Seite \pageref{Konfiguration})
einige Möglichkeiten zur Anpassung der Darstellung Ihres Blogs (beispielsweise
dem Blog-Titel und ob Popup"=Fenster verwendet werden sollen).
Über die verfügbaren Plugins zu Serendipity können Sie bereits zahlreiche
Funktionalitäten nachrüsten. Universale Plugins, wie die Einbindung
beliebiger HTML-Texte, JavaScript oder PHP-Dateien (ab Seite \pageref{Plugins}),
ermöglichen es Ihnen, leicht Änderungen vorzunehmen, ohne Dateien bearbeiten zu müssen.
\label{template-css}%
\index{CSS}%
\index{Style Sheets}%
\section{Cascading Style Sheets}
Alle Anpassungen des Layouts nimmt man heutzutage mittels der
Formatierungssprache \emph{CSS} (\emph{Cascading Stylesheets}) vor.
Ein Stylesheet ist eine Datei, in der eine oder mehrere Anweisungen regeln
können, wie ein HTML-Element dargestellt werden soll. Ein Stylesheet ist
sozusagen eine Ergänzung der HTML-Datei: Die HTML-Datei legt die Struktur eines
Dokumentes fest, und das Stylesheet regelt die Darstellung der Struktur.
Eine derartige Trennung von Inhalt und Aussehen hat zahlreiche Vorteile. Zum
einen entschlackt dies die HTML-Datei, da in dieser nur noch der eigentliche
Inhalt gespeichert wird. Dank dieser Trennung kann dasselbe Dokument abhängig
von der Umgebung, in der es dargestellt wird, unterschiedlich formatiert sein.
Klassisches Beispiel ist die Darstellung des Dokumentes auf dem Bildschirm und
die Ausgabe auf dem Drucker. In der Druckversion kann z.\,B.\ ein Kommentarformular
versteckt werden, da man es ja ausgedruckt sowieso nicht ausfüllen kann. Auch
kann die Textbreite beim Ausdruck besser auf das Papierformat abgestimmt werden.
Gerade für sehbehinderte Menschen hat diese Trennung des Inhalts und der
Präsentation enorme Vorteile: Sie können selbständig die Schriftgröße
beeinflussen oder sich Texte von einem Lesegerät vorlesen lassen, ohne dass
lästige Navigationselemente den Vorlesevorgang unterbrechen.
Vor allem machen es Stylesheets aber sehr einfach, schnell grafische Änderungen
auszuprobieren. Um die Schriftart der ganzen Seite zu verändern, reicht es,
eine einzige Anweisung einzufügen. In frühen Zeiten des Internets mussten dafür
zahlreiche \cmd{<font>}-Tags einer Datei einzeln überarbeitet werden. Somit sind
Stylesheets also gerade für Designer ein wahrer Segen.
\index{HTML}%
Eine HTML-Datei besteht aus einer Menge von beliebig verschachtelten Elementen,
den sogenannten Tags. Jedes Tag kann eine Reihe von Attributen und einen Inhalt
besitzen. Ein Textabsatz wird beispielsweise so beschrieben:
\begin{ospcode}
<p>Dies ist ein Absatz.</p>
<p>Der zweite Absatz folgt <em>meistens</em> auf den ersten Absatz.</p>
<p><img src="bild.jpg" /></p>
\end{ospcode}
Das Tag für einen Absatz lautet \cmd{p}, und der Absatztext selbst muss von
einem öffnenden \cmd{<p>}-Tag und einem schließenden \cmd{</p>}-Tag umgeben sein.
Im zweiten Absatz wurde ein weiteres Tag eingesetzt, das eine Zeichenkette
\emph{hervorhebt}. Auch hier ist jeweils ein öffnendes und ein schließendes Tag
vonnöten.
Es gibt jedoch auch HTML-Tags, die keinen öffnenden/schließenden Teil benötigen,
sondern alleine stehen können. Ein Beispiel für ein solches Tag ist die
Einbindung eines Bildes mittels \cmd{img}. Die XHTML-Syntax erfordert für solche
alleinstehenden Tags, dass diese mit einem \cmd{/>} enden. Anhand des
\cmd{<img/>}-Tags lässt sich auch der Einsatz von HTML-Attributen erläutern. Das Attribut
\cmd{src} enthält den Namen der Bilddatei, die angezeigt werden soll.
Jedes Attribut muss immer durch ein Gleichheitszeichen einen Wert zugewiesen
bekommen, der in einfachen oder doppelten Anführungszeichen zu stehen hat.
Nach diesen Grundprinzipien richten sich alle HTML-Dokumente, wobei es jedoch
wesentlich mehr HTML-Tags als die hier aufgeführten gibt. Mittels einer
Stylesheet-Datei kann man nun das Aussehen der Tags beeinflussen:
\begin{ospcode}
p \{
font-size: 1.2em;
\}
p em \{
font-weight: bold;
\}
\end{ospcode}
Diese Syntax unterscheidet sich augenscheinlich von der Art und Weise, wie HTML
programmiert wird. Dennoch haben beide Dateien einen gemeinsamen Nenner,
nämlich die Namen der HTML-Tags sowie deren Verschachtelung.
Obiges Stylesheet würde dafür sorgen, dass unser HTML-Beispiel so ausgegeben
wird, dass die Schriftgröße beider Absätze auf 120\% der vom Benutzer
eingestellten Schriftgröße gestellt wird. Das Wort \emph{meistens} innerhalb
unseres HTML-Beispiels wird dabei fett ausgezeichnet.
Grundsätzlich enthält ein Stylesheet also eine beliebige Anzahl von
Formatierungsanweisungen. Jede Anweisung besteht aus einem Block: Erst folgt die
Angabe, auf welche Elemente eine Formatierung angewandt werden soll
(beispielsweise das \cmd{p}-Tag). Es folgt eine geschweifte Klammer (\cmd{\{})
und danach eine Auflistung von Formatierungsanweisungen. Der Übersichtlichkeit halber
sollte man jede Formatierungsanweisung in eine eigene Zeile schreiben. Als
Erstes kommt der Name der Formatierungsanweisung (\cmd{font-size}), danach ein
Doppelpunkt und danach ein Wert (\cmd{1.2em}). Das Ende der Zeile wird durch
ein Semikolon (\cmd{;}) markiert. Nach einer beliebigen Anzahl von
Formatierungsanweisungen wird der Block durch eine weitere geschweifte Klammer
(\cmd{\}}) wieder geschlossen, und es kann ein weiterer Block folgen.
%FM@Satz: geschweifte Klammern (2x) korrekt?
\index{Cascading}%
Der Begriff \cmd{Cascading} bezeichnet eine wichtige Fähigkeit der Stylesheets:
Die jeweiligen Formatierungsausdrücke
können \emph{vererbt} werden. Dazu muss man wissen, dass die
Struktur einer HTML-Seite einer Baumstruktur ähnelt: Die Verschachtelung
einzelner Elemente könnte man grafisch ähnlich darstellen, wie ein Dateimanager
die Verzeichnisstruktur anzeigt.
Es kann also sein, dass ein Absatz im HTML-Dokument sowohl auf oberster Ebene
vorkommt als auch innerhalb eines Unterabschnitts oder eines bestimmten
Containers:
\osppagebreak
\begin{ospcode}
<div id="Seite">
<div class="abschnitt">
<p>Mein erster Abschnitt.</p>
</div>
<div class="abschnitt">
<p>Mein zweiter Abschnitt.</p>
</div>
<div class="fusszeile">
<p>Seitenende.</p>
</div>
</div>
\end{ospcode}
Anhand dieser Struktur sieht man, dass die Absätze (\cmd{p}-Tags) zwar in
derselben Tiefe (immer als dritte Ebene) verwendet werden, aber jeweils einen
unterschiedlichen Kontext besitzen: Einmal ist der Absatz Teil eines Abschnitts,
aber am Ende ist ein Absatz innerhalb einer Fußzeile gesetzt.
Erst die grafische Umsetzung der HTML-Struktur über ein Stylesheet kann diesen
strukturellen Unterschied sichtbar machen. Denn jeder Formatierungsblock, der
das zu formatierende Element vor der geschweiften Klammer angibt, kann die
hierarchische Einordnung des HTML-Elements wiedergeben:
\begin{ospcode}
#Seite \{
background-color: white;
\}
.abschnitt \{
border: 1px solid black;
\}
p \{
font-size: 0.8em;
\}
.fusszeile p \{
font-weight: bold;
\}
\end{ospcode}
Wenn man sich jeden Block dieser Formatierungen einzeln ansieht, kann man
die gewünschte Formatierung ablesen:
Der erste Block sorgt dafür, dass der \cmd{<div
id="{}Seite"{}>\ldots</div>}"=Container der HTML-Struktur mit einer weißen
Hintergrundfarbe gestaltet werden soll. Jeder Stylesheet-Formatierungsblock kann
über das Symbol \cmd{\#} eine Formatierung direkt auf einen beliebigen Container
anwenden, der in der HTML-Datei über das Attribut \cmd{id="{}\ldots{}"{}} benannt
wurde, in unserem Fall also \cmd{Seite}. Der zweite Block zeigt eine
Formatierung, die auf einen Container angewendet werden soll, der über das
Attribut \cmd{class="{}abschnitt"{}} benannt wurde.
Eine CSS-Datei kann eine Formatierung auf ein HTML-Element also auf dreierlei
Weise festlegen:
\begin{osplist}
\item \cmd{p \{ \ldots \}} formatiert ein HTML-Tag anhand des Tag-Namens.
\item \cmd{.klasse \{\ldots \}} formatiert ein HTML-Tag anhand des
\cmd{class}-Attributes (\cmd{<div class="{}klasse"{}>}).
\item \cmd{\#bezeichner \{ \ldots \}} formatiert ein HTML-Tag anhand des
\cmd{id}"=Attributes (\cmd{<div id="{}klasse"{}>}).
\end{osplist}
Der Unterschied zwischen \cmd{id} und \cmd{class} liegt lediglich darin, dass
eine ID nur einmalig vergeben werden darf, eine Klasse aber beliebig häufig
Verwendung finden darf.
Das \cmd{id}- und \cmd{class}-Attribut lassen sich innerhalb der HTML-Struktur
nicht nur einem \cmd{<div>}-Container zuweisen, sondern auch direkt einem
\cmd{<p>} oder auch \cmd{<img>}-Element. Man kann es also immer dann verwenden,
wenn man ein beliebiges HTML-Element eindeutig auszeichnen möchte.
Diese eindeutige Auszeichnung ist innerhalb des Stylesheets wichtig, damit man
Formatierungen gezielt auf ein Element zuweisen kann. Dabei ist es nicht
unbedingt erforderlich, dass man jedes zu formatierende Element mit einer
speziellen Klasse benennt, da die Stylesheets wie angesprochen die
\emph{Vererbung} bzw. \emph{Verschachtelung} einer Struktur berücksichtigen
können. Dies verdeutlicht das obige Beispiel im vierten Formatierungsblock:
\begin{ospcode}
.fusszeile p \{
font-weight: bold;
\}
\end{ospcode}
Diese Formatierung sagt dem Browser: "`Mache die Schriftart eines Absatzes
fett, wenn der Absatz innerhalb einer Fußzeile eingesetzt wird"'.
Jeder Formatierungsblock kann einzelne HTML-Elemente (entweder über deren
Tag-Namen, die Klasse oder die ID) mit einem Leerzeichen voneinander getrennt
angeben und entspricht dabei der Verschachtelung, wie sie später im Dokument
vorzufinden ist.
Wenn also folgende HTML-Struktur gegeben ist:
\begin{ospcode}
<div class="seite">
<div class="abschnitt">
<p class="absatz">
Mein <em>Einsatz</em>.
</p>
</div>
</div>
\end{ospcode}
dann könnte man gezielt das Wort \emph{Einsatz} über folgende CSS-Anweisung
formatieren:
\begin{ospcode}
.seite .abschnitt .absatz em \{
font-weight: bold;
\}
\end{ospcode}
Anhand dieses Beispiels kann man auch gut verdeutlichen, dass eine
derart komplexe Formatierungskette gar nicht unbedingt notwendig wäre.
Denn die CSS-Anweisung:
\begin{ospcode}
em \{
font-weight: bold;
\}
\end{ospcode}
würde das obige Beispiel exakt gleich formatieren. Achten Sie also später beim
Einsatz von CSS immer darauf, es nicht unnötig kompliziert zu machen. Überlegen
Sie sich, anhand welcher Struktur Sie das zu formatierende Element bereits
gezielt \emph{herauspicken} können.
Mittels CSS-Anweisungen können Sie Elemente auch beliebig oft formatieren, da
der Browser ein Element anhand aller zutreffenden Formatierungsanweisungen
darstellt. Gegeben sei folgender HTML-Code:
\begin{ospcode}
<div class="Seite">
<p>Mein Absatz.</p>
</div>
\end{ospcode}
sowie folgende CSS-Anweisungen:
\begin{ospcode}
.Seite \{
color: red;
\}
p \{
font-size: 1.2em;
\}
\end{ospcode}
Obwohl Sie die Farbe Rot nur dem Container \cmd{.Seite} zugewiesen haben,
wird diese Farbe auch auf den Absatz angewendet, da dieser Teil des
Seiten-Containers ist. Sie müssen also die Farbe nicht extra der
Formatierungsanweisung für den Absatz zuweisen.
Abgesehen von diesen grundsätzlichen Strukturen bietet CSS noch einige spezielle
Möglichkeiten an, die den Rahmen dieses Buches deutlich sprengen würden.\footnote{Wenn
Sie diese Thematik interessiert, sollten Sie sich mit Büchern wie
\emph{Webdesign mit
CSS} von Vladimir Simovic und Jan Heinicke
oder Online-Werken wie SelfHTML (\cmd{http://de.selfhtml.org/css/}) vertraut
machen.}
\subsection{CSS-Anweisungen in Serendipity-Templates}
CSS-Formatierungen sind auch bei Serendipity ein integraler Bestandteil von
Templates. In der Datei \cmd{style.css} eines jeden Template"=Verzeichnisses
liegen alle notwendigen CSS-Anweisungen, die auf die HTML-Ausgabe des Blogs
angewendet werden. Diese CSS-Datei können Sie natürlich bearbeiten, um
individuelle Formatierungen zu erreichen.
Die meisten Serendipity-Templates sind von einem Standard-Template abgeleitet,
so dass die meisten Klassennamen der HTML-Elemente trotz unterschiedlicher
Templates gleich benannt sind. Die meisten dieser Klassennamen sind über das
Präfix \cmd{serendipity\_} eindeutig benannt, so dass Sie über CSS-Anweisungen
gezielt die Ausgabe eines Templates oder Plugins beeinflussen können.
Jedes Plugin der Seitenleiste ist üblicherweise in einen selbständig benannten
HTML-Container eingebunden, damit Sie jedes Seitenleisten-Plugin individuell
formatieren können:
\begin{ospcode}
<div id="serendipityLeftSideBar">
<div class="serendipitySideBarItem
container\_serendipity\_categories\_plugin">
<h3 class="serendipitySideBarTitel
serendipity\_categories\_plugin">Titel</h3>
<div class="serendipitySideBarContent">\ldots</div>
</div>
</div>
\end{ospcode}
\index{Seitenleisten-Plugins!Layout anpassen}%
Wenn Sie beispielsweise alle Links der Kategorien-Ausgabe in der Seitenleiste
grün einfärben wollen, könnten Sie dies mit der folgenden CSS-Regel erreichen:
\begin{ospcode}
.container\_serendipity\_categories\_plugin a \{
color: green;
\}
\end{ospcode}
Eine Auflistung aller CSS-Klassen ist an dieser Stelle leider nicht möglich, da
diese Klassen abhängig vom eingesetzten Template und dessen HTML-Ausgabe sind.
Wenn Sie also eine Anpassung vornehmen wollen, müssen Sie die entsprechenden
eingesetzten HTML-Klassen im Quelltext des jeweiligen Templates nachschlagen.
\index{Firebug}%
Dabei hilft z.\,B.\ die Extension
\cmd{firebug}\footnote{\cmd{http://www.getfirebug.com}} für den Firefox-Browser
enorm, da Sie per Cursor die HTML-Elemente einer Seite auswählen und
direkt alle CSS-Anweisungen zu diesem Element sehen können.
Dennoch hier eine kleine Übersicht über CSS-Klassen, die in vielen Templates
Verwendung finden:
\index{CSS-Variablen}%
\begin{ospdescription}
\index{CSS-Variablen!.mainpane@\#mainpane}%
\index{CSS-Variablen!.content@\#content}%
\ospitem{\cmd{\#mainpane, \#content}}
Enthält in den meisten Templates das Grundgerüst der Seite.
\index{CSS-Variablen!.serendipity\_banner@\#serendipity\_banner}%
\ospitem{\cmd{\#serendipity\_banner}}
Enthält den Seitenkopfbereich, meist mit einem Hintergrundbild.
\index{CSS-Variablen!.homelink1}%
\index{CSS-Variablen!.homelink2}%
\ospitem{\cmd{.homelink1, .homelink2}}
Enthält innerhalb des Seitenkopfbereichs die Links zu der aktuellen Blog-Seite
bzw. Blog-Übersicht.
\index{CSS-Variablen!.serendipity\_LeftSideBar@\#serendipityLeftSideBar}%
\index{CSS-Variablen!.serendipity\_RightSideBar@\#serendipityRightSideBar}%
\ospitem{\cmd{\#serendipityLeftSideBar, \#serendipityRightSideBar}}
Bezeichnet den Container, der jeweils die Elemente der Seitenleiste(n) enthält.
\label{sidebar-css}%
\index{CSS-Variablen!.serendipity\[email protected]}%
\ospitem{\cmd{.serendipitySideBarItem}}
Für jedes Element der Seitenleiste kapselt die Klasse
den jeweiligen Inhalt des Plugins mitsamt dem Titel.
\index{CSS-Variablen!.serendipity\[email protected]}%
\ospitem{\cmd{.serendipitySideBarTitle}}
Enthält den Titel des jeweiligen Seitenleisten-Plugins.
\index{CSS-Variablen!.serendipity\[email protected]}%
\ospitem{\cmd{.serendipitySideBarContent}}
Enthält den Inhalt des jeweiligen Seitenleisten-Plugins.
\index{CSS-Variablen!.serendipity\_Entry\_Date}%
\ospitem{\cmd{.serendipity\_Entry\_Date}}
Alle Blog-Einträge sind nach Veröffentlichungsdatum gruppiert, so dass
mehrere Einträge eines Tages unter derselben Überschrift zusammengefasst werden
und nicht jedesmal das Datum wiederholt wird. Der Container
\cmd{.serendipity\_Entry\_Date} umfasst dabei jeweils einen Veröffentlichungstag.
\index{CSS-Variablen!.serendipity\_date}%
\ospitem{\cmd{.serendipity\_date}}
Das jeweilige Datum der Gruppe \cmd{.serendipity\_Entry\_Date} wird in der
HTML-Klasse \cmd{serendipity\_date} ausgegeben (meist ein \cmd{h3}-HTML-Tag).
\index{CSS-Variablen!.serendipity\_title}%
\index{CSS-Variablen!.serendipity\_entry}%
\ospitem{\cmd{.serendipity\_title, .serendipity\_entry}}
Jeder einzelne Blog-Artikel der Klasse
\cmd{.serendipity\_Entry\_Date} wird innerhalb dieses Containers noch weiter
separiert. Der Titel wird jeweils über die Klasse \cmd{.serendipity\_title}
ausgegeben, der Inhalt des jeweiligen Artikels (mitsamt seiner
Meta-Informationen wie Autorname, Kategoriezuordnung und Plugin-Ausgabe) wird
innerhalb der Klasse \cmd{.serendipity\_entry} ausgegeben.
\index{CSS-Variablen!.serendipity\_entry\_body}%
\index{CSS-Variablen!.serendipity\_entry\_extended}%
\ospitem{\cmd{serendipity\_entry\_body, .serendipity\_entry\_extended}}
Enthält den Text der jeweiligen Blog-Einträge.
\index{CSS-Variablen!.serendipity\_imageComment\_left}%
\index{CSS-Variablen!.serendipity\_imageComment\_center}%
\index{CSS-Variablen!.serendipity\_imageComment\_right}%
\index{CSS-Variablen!.serendipity\_image\_link}%
\ospitem{\cmd{.serendipity\_imageComment\_left,}}
\ospadditem{\cmd{.serendipity\_imageComment\_center,}}
\ospadditem{\cmd{.serendipity\_imageComment\_right, .serendipity\_image\_link}}
Falls Bilder mit Bildunterschriften in einen Blog-Artikel eingebunden worden
sind, werden diese Klassen eingesetzt.
\index{CSS-Variablen!.serendipity\_entryFooter}%
\ospitem{\cmd{.serendipity\_entryFooter}}
Enthält die jeweiligen Meta-Informationen eines Blog-Artikels.
\index{CSS-Variablen!.serendipity\_entry\_author\_self}%
\ospitem{\cmd{.serendipity\_entry\_author\_self}}
Diese Klasse wird bei allen Blog-Einträgen vergeben, die vom aktuell eingeloggten
Besucher geschrieben wurden.
\index{CSS-Variablen!.serendipity\_entryIcon}%
\ospitem{\cmd{.serendipity\_entryIcon}}
Etwaige Kategorie- oder Autorenbilder werden innerhalb dieser Klasse ausgegeben.
\index{CSS-Variablen!.serendipity\_comments}%
\ospitem{\cmd{.serendipity\_comments}}
Enthält den Container für Kommentare und Trackbacks zu einem Blog-Artikel.
\index{CSS-Variablen!.serendipity\_comment\_author\_self}%
\ospitem{\cmd{.serendipity\_comment\_author\_self}}
Falls vom Autor des Blog-Artikels ein Kommentar geschrieben wurde, wird
diese CSS-Klasse eingebunden.
\index{CSS-Variablen!.serendipity\_commentsTitle}%
\ospitem{\cmd{.serendipity\_commentsTitle}}
Enthält den Titel für den jeweiligen Kommentarabschnitt ("`Kommentare"' oder
"`Trackbacks"').
\index{CSS-Variablen!.serendipity\_comment}%
\ospitem{\cmd{.serendipity\_comment}}
Kapselt jeden einzelnen Kommentar zu einem Blog-Artikel.
\index{CSS-Variablen!.serendipity\_commentForm}%
\ospitem{\cmd{.serendipity\_commentForm}}
Enthält das Kommentarformular.
\index{CSS-Variablen!.serendipity\_commentsLabel}%
\ospitem{\cmd{.serendipity\_commentsLabel}}
Enthält die Überschriften zu den jeweiligen Eingabebereichen des Kommentarformulars.
\index{CSS-Variablen!.serendipity\_commentsValue}%
\ospitem{\cmd{.serendipity\_commentsValue}}
Enthält die Eingabeboxen der jeweiligen Eingabebereiche des Kommentarformulars.
\index{CSS-Variablen!.serendipity\_pageFooter}%
\ospitem{\cmd{.serendipity\_pageFooter}}
Enthält die Blätter-Anzeige für die Archivseiten der Blog-Übersichten.
\index{CSS-Variablen!.serendipity\_center}%
\ospitem{\cmd{.serendipity\_center}}
Etwaige Bildschirmmeldungen von Serendipity (z.\,B.\ bei Kommentarübermittlung oder
Fehlern) werden mit dieser Klasse ausgezeichnet.
\index{CSS-Variablen!.serendipity\_msg\_important}%
\index{CSS-Variablen!.serendipity\_msg\_notice}%
\index{CSS-Variablen!.serendipity\_content\_message}%
\ospitem{\cmd{.serendipity\_msg\_important, .serendipity\_msg\_notice,}}
\ospadditem{\cmd{.serendipity\_content\_message}}
Die jeweiligen Bildschirmmeldungen werden entsprechend ihrer Gewichtung
(\cmd{notice} = Hinweis, \cmd{important} = Wichtige Information) mit den
entsprechenden Klassen ausgezeichnet.
\index{CSS-Variablen!.serendipity\_search}%
\ospitem{\cmd{.serendipity\_search}}
Wenn der Besucher eine Volltextsuche ausgeführt hat, werden die Such\-ergebnisse
innerhalb dieser Klasse ausgegeben.
\end{ospdescription}
\index{CSS-Anweisungen!von Serendipity-Plugins}%
\index{Plugins!CSS-Anweisungen}%
\subsection{CSS-Anweisungen von Serendipity-Plugins}
Einige Plugins (wie \emph{Freie Artikel-Tags}) beinhalten eigenständige
CSS"=Anweisungen. Diese Anweisungen werden nicht in die zentrale
\cmd{style.css}-Datei Ihres Templates aufgenommen, sondern durch das Plugin
dynamisch ausgegeben.
Dies hat den Vorteil, dass Sie Ihre CSS-Datei nicht manuell anpassen müssen,
wenn Sie ein beliebiges Serendipity-Plugin installieren. Auch wird so die
Notwendigkeit umgangen, dass alle Templates für die Benutzung mit Plugins
speziell erweitert werden müssen.
Alle Serendipity-Plugins sind so programmiert, dass Sie die CSS"=Anweisungen der
Plugins \emph{überschreiben} können. Dazu müssen Sie die Plugin-Datei nicht
anfassen, sondern nur die Stylesheet-Datei Ihres Templates mit der CSS-Regel
erweitern, die die Vorgaben des Plugins überschreibt.
Konkret heißt das, wenn das Plugin \emph{Freie Artikel-Tags} eine CSS-Regel wie
\begin{ospcode}
.serendipity\_freeTag \{
\ldots
\}
\end{ospcode}
ausgibt, müssen Sie diesen CSS-Code einfach in die eigene \cmd{style.css}-Datei
überführen und dort beliebig anpassen. Das Plugin findet daraufhin den Code in
Ihrer eigenen Datei und weiß, dass es selbst keine CSS-Anweisungen mehr
ausgeben soll.
Sollte dies einmal nicht verlässlich klappen (wenn z.\,B. die
HTML"=Elementnamen nicht übereinstimmen), können Sie in Ihrer
\cmd{style.css}-Datei die CSS-Regeln eines Plugins immer noch überschreiben,
indem Sie eine Regel wie:
\begin{ospcode}
.serendipity\_freeTag \{
color: red !important;
\}
\end{ospcode}
in Ihr Stylesheet übernehmen. Die Anweisung \cmd{!important} sorgt dafür, dass
diese Zeile immer Vorrang vor anderen Anweisungen haben wird.
\index{CSS!Tools}%
\index{Tools!CSS}%
\subsection{CSS-Hilfen}
Beim Bearbeiten von CSS-Dateien brauchen Sie in der Regel immer zwei Dinge: Zum
einen müssen Sie das zu formatierende HTML-Element innerhalb des Quelltextes
ausfindig machen. Als Zweites müssen Sie dann den benötigten Element-Pfad
bzw. Klassennamen mit einer entsprechenden Formatierungsanweisung in Ihre
Stylesheet-Datei einfügen.
Dieser Prozess kann ziemlich müßig werden. Daher haben findige Köpfe für den
Firefox-Browser ein Modul namens
\cmd{Firebug}\footnote{\cmd{http://www.getfirebug.com/}, ähnliche Tools für
andere Browser bzw. JavaScript-basierte Tools sind ebenfalls verfügbar.} erfunden.
Dieses Programm ermöglicht es, mit einem einfachen Mausklick das benötigte
Element ausfindig zu machen und direkt zu sehen, welche CSS-Anweisungen für
dieses Element bereits belegt sind.
\index{Smarty}%
\index{Template-S@Templates!Smarty}%
\section{Smarty-Templates}
\label{Smarty-Templates}%
Nachdem Sie nun gelernt haben, wie Sie CSS-Anweisungen überarbeiten können,
wundern Sie sich möglicherweise bereits, wo Sie denn Einfluss auf die
HTML-Ausgabe Serendipitys nehmen können.
Da Serendipity ein dynamisches System ist, das auf verschiedenen Seiten
unterschiedliche Inhalte, Plugins und Artikellisten darstellen kann, muss auch
die Ausgabe des HTML-Codes dynamisch erfolgen.
\index{Template-Framework}%
Dazu bedient sich Serendipity eines sogenannten Template-Frameworks. Die
Hauptaufgabe eines Template-Frameworks ist es, Variablen zu interpretieren,
abzufragen und auszugeben.
Einfach gesprochen, wollen Sie Serendipity gerne sagen, wo es einen Blog-Titel
ausgeben soll, wo der Artikeltext hinkommt und wo die Seitenleisten platziert
werden. Alle diese Inhalte werden durch Platzhalter (\emph{Variablen}) markiert,
über diese Platzhalter im Template eingebunden und später bei der Ausgabe automatisch
durch die echten Inhalte ersetzt.
Außerdem soll ein Serendipity-Template erkennen können, ob der Besucher
gerade die Detailansicht eines Artikels betrachtet oder die Liste aller
Blog-Artikel zu einem gewissen Zeitpunkt. Abhängig von diesen Variablen muss Ihr
Template unterschiedliche Dinge tun, dies nennt man \emph{Darstellungslogik}.
Beides könnte man mit HTML alleine nicht erreichen, da HTML eine
\emph{statische} Beschreibungssprache ist, keine Programmiersprache. Mit
PHP"=Programmieranweisungen könnte man eine derartige Darstellungslogik
ausdrücken, jedoch ist dies für viele Anwender viel zu kompliziert. Daher
vertraut Serendipity auf eine Software-Bibliothek namens Smarty\footnote{\cmd{http://smarty.php.net/}}.
Smarty ist das Bindeglied zwischen Serendipity und Ihnen als Template-Bauer.
Eine Smarty-Datei ist eine einfache Ansammlung von HTML"=Elementen, Variablen und
Darstellungslogik. Dabei greift Smarty auf übliche Programmiermuster zurück,
eine Variablenabfrage erfolgt beispielsweise mit:
\begin{ospcode}
<div class="Absatz">
\{if \$is\_single\_entry\}
\ldots
\{/if\}
</div>
\end{ospcode}
Smarty-spezifischer Code wird dabei immer in geschweiften Klammern eingebunden.
Folgt in einer geschweiften Klammer ein Dollar-Zeichen, gefolgt von einem Namen,
so bezieht sich dies auf eine Variable. In obigem Beispiel wird geprüft, ob die
Variable \cmd{\$is\_single\_entry} gesetzt ist. Serendipity setzt diese
Variable, und innerhalb eines Smarty-Templates können Sie diese Variable
entweder ausgeben oder abfragen.
Das ist bis auf einige Sonderfälle bereits die ganze Magie: Smarty versteckt die
Komplexität von PHP hinter einer eigenen Syntax, die von HTML"=kundigen Benutzern
leichter eingesetzt werden kann. PHP-Fans können für Serendipity dennoch
PHP-Templates basteln, was ab Seite \pageref{templateapi} eingehender beschrieben
wird. Im Hintergrund arbeitet Smarty eine Template-Datei ab und wandelt sie in
maschinenlesbaren PHP-Code um. Diesen Vorgang nennt man \cmd{kompilieren},
das Ergebnis des Kompilierens landet als temporäre Datei im Verzeichnis \cmd{templates\_c}.
\index{Kompilieren}%
\index{Template-Sc@templates\_c}%
Smarty verfügt über eine große Anzahl an eigenen Funktionen, die in der
offiziellen Dokumentation auf \cmd{http://smarty.php.net/} ausführlich
beschrieben sind. Der folgende kurze Einblick in die Smarty-Syntax soll daher
nur als Einstiegspunkt in die Materie dienen. Tiefergehende Möglichkeiten durch
Erweiterung von Smarty finden Sie ab Seite \pageref{Templates bearbeiten}.
\index{Smarty!Variablen}%
\index{Smarty!Modifier}%
\subsection{Variablen und Modifiers}
Eine Variable kann in einem Smarty-Template einfach über \ospsmarty{variable}
ausgegeben werden. Der Inhalt der Variable erscheint dann später bei der
HTML-Ausgabe anstelle des Platzhalters.
Häufig möchte man den Inhalt einer Variablen jedoch weiterverarbeiten. Wenn
beispielsweise der Inhalt eines Blog-Artikels in der Variable \ospsmarty{entry}
gespeichert wird, möchte man davon nur die ersten 20 Zeichen ausgeben.
Für diesen Zweck kennt Smarty das Konzept der \cmd{Variable Modifiers}. Ein
Modifier ist eine Funktion, die auf eine Variable angewendet wird und deren
Inhalt modifiziert zurückliefert. In obigem Beispiel würde man die Kürzung auf 20
Zeichen wie folgt erreichen:
\begin{ospcode}
\{\$entry|truncate:20\}
\end{ospcode}
\index{Pipe}%
Einen Modifier wendet man an, indem man das Pipe-Symbol (\cmd{|}) hinter
die Variable schreibt, und danach den Namen des Variable
Modifiers, in diesem Fall \cmd{truncate} zum Beschneiden. Ein Variable Modifier
kann Parameter entgegennehmen, in diesem Fall die Zahl \cmd{20} zur Angabe der
Menge von Zeichen, die ausgegeben werden sollen. Mehrere Parameter können
mit \cmd{:} voneinander getrennt werden. Die vollständige Dokumentation der
verfügbaren Parameter einer Funktion können Sie in der Smarty-Dokumentation
unter \cmd{http://smarty.php.net/} nachschlagen. \cmd{truncate} verfügt
z.\,B.\osplinebreak{} über eine zweite Option, mit der man die Kürzung eines Textes
durch das Anhängen einer Zeichenkette wie \cmd{\ldots} verdeutlichen kann:
\begin{ospcode}
\{\$entry|truncate:20:'\ldots'\}
\end{ospcode}
Des Weiteren sind Variable Modifiers schachtelbar, man kann also mehrere
Modifier nacheinander (in der gewünschten Reihenfolge) ausführen. Wenn Sie
beispielsweise den gekürzten Text noch so umwandeln wollen, dass
jeder erste Buchstabe eines Wortes großgeschrieben wird, erreichen Sie dies
mittels:
\begin{ospcode}
\{\$entry|truncate:20:'\ldots'|capitalize\}
\end{ospcode}
Anstelle eines Parameters wie \cmd{:20} kann man an dieser Stelle auch immer auf
im Template gesetzte Variablen zugreifen.
\subsection{Arrays}
\index{Array}
\label{Arrays}
Arrays sind eine besondere Form von Variablen, die in beinahe jeder
Programmiersprache existieren. Während eine Variable wie
\ospsmarty{entry} nur einen einzelnen Artikeltext enthalten kann, ist es manchmal
wichtig, eine Variable zu besitzen, die mehrere Inhalte speichern kann.
Serendipity weist beispielsweise die Liste aller Blog-Artikel einer
Smarty-Variable namens \ospsmarty{entries} zu. Diese Variable stellt eine
Gruppierung von einzelnen Artikeln dar, wobei jeder einzelne Artikel Attribute
wie \cmd{title}, \cmd{body}, \cmd{author} und Weiteres enthält. Solche Gruppierungen nennt
man \emph{Array}, sie können beliebig verschachtelt sein.
Ein Array ist so aufgebaut, dass es immer einen Schlüssel (\emph{Key}) und
einen Wert (\emph{Value}) geben muss. Um den abstrakten Begriff eines Arrays
besser zu verstehen, stellen Sie sich einen großen Schrank vor.
Der Name des Schranks entspricht dem Namen des Arrays. In unserem Fall stellen
wir uns die Beschriftung \ospsmarty{entries} auf dem Schrank vor. Dieser soll unsere
Einträge beinhalten. In jede einzelne Schublade haben wir einen Eintrag
hineingelegt. Jede Schublade besitzt eine eindeutige Beschriftung, wie
\emph{Artikel1}, \emph{Artikel2} und so weiter. Einen Tick komplexer wird es,
wenn wir nun in jeder einzelnen Schublade nochmal eine Fächerunterteilung haben.
In einem Fach liegt die Beschreibung des Artikels, in einem anderen Fach der
Name des Autors und in noch einem weiteren Fach der Titel des Artikels. Jedes
einzelne Fach beschreibt eindeutig, was darin liegt: \emph{author}, \emph{title}
und \emph{body}.
Anhand dieser Beschriftungen kann nun der Inhalt jeder Schublade präzise
adressiert werden. Wenn wir den Titel des zweiten Artikels herausholen wollen,
würden wir sagen: Ich öffne den Schrank \ospsmarty{entries}, ziehe die Schublade
\cmd{Artikel2} heraus und gucke dort in das Fach \cmd{title}. Diesen Vorgang
kann man mittels Smarty-Syntax wie folgt ausdrücken:
\begin{ospcode}
\{\$entries.Artikel2.title\}
\end{ospcode}
Diese Syntax trennt mittels Punkten die unterschiedlichen Ebenen des Arrays
untereinander auf. Von links nach rechts gelesen steht zuerst der \emph{gröbste}
Name des Arrays, dann geht es mit immer detaillierteren Fächerbezeichnungen in die
Tiefe.
Das Beispiel mit dem Schrank mag zunächst trivial klingen, gewinnt aber an
Komplexität, wenn man sich vorstellt, dass jede Schublade entweder einen
endgültigen Wert besitzen kann oder sich darin ein weiteres Fach (ein weiterer
Schrank, im Endeffekt) befindet. So kann man unendliche Verschachtelungen
erreichen, die man später anhand der Schlüssel"=Bezeichnungen (\emph{keys})
adressieren kann.
Während bei JavaScript solche Arrays ebenfalls der \emph{Punkt-Notation} folgen
und so angesprochen werden können, formatiert man den Zugriff auf ein Array
innerhalb von PHP-Code leicht unterschiedlich. Dort schreibt man
anstelle von \ospsmarty{entries.Artikel2.title} die Syntax
\cmd{\{\$entries['Arti\-kel2']['title']\}}, setzt also jeden einzelnen
Array-Schlüssel in eckige Klammern. Bei Smarty können Sie diese
Notation meist nicht einsetzen, lediglich in einigen Sonderfällen
(IF-Abfragen) wird dies von Smarty akzeptiert.
\subsection{Schleifen, IF-Abfragen}
\index{Schleifen}%
\index{foreach}%
Natürlich möchte man später eine Liste von Artikeln dynamisch ausgeben können.
Die Abarbeitung eines Arrays, in der man dynamisch alle Inhalte ausgibt, nennt
man \emph{Schleife}.
Schleifen werden in Smarty mittels der Funktionen \cmd{\{foreach \ldots\}} und
\cmd{\{/foreach\}} erzeugt. Alles zwischen diesen beiden Aufrufen stellt den
eigentlichen Inhalt der Schleife dar und bestimmt, was mit jedem Element eines
Arrays passiert.
\osppagebreak
Greifen wir dazu erneut auf obiges Beispiel des Artikel-Schranks zurück. Um die
Inhalte dynamisch auzulesen, müssten wir dies einem Roboter wie folgt erklären:
\emph{Öffne den Schrank mit dem Titel} \cmd{entries}. \emph{Gehe nacheinander alle
Schubladen durch, und pro geöffneter Schublade machst Du Folgendes: \ldots}
In Smarty-Syntax formuliert sieht dies wie folgt aus:
\begin{ospcode}
\{foreach from=\$entries item="schublade"\}
<p>In dieser Schublade liegt der Artikel mit Titel
<strong>\cmd{\{\$schublade.title\}}</strong>.</p>
\{/foreach\}
\end{ospcode}
Wenn dieses Smarty-Template nun später kompiliert und ausgeführt wird, würde man
folgende HTML-Ausgabe erhalten:
\begin{ospcode}
<p>In dieser Schublade liegt der Artikel mit Titel <strong>Artikel 1
Titel</strong>.</p>
<p>In dieser Schublade liegt der Artikel mit Titel <strong>Artikel 2
Titel</strong>.</p>
<p>In dieser Schublade liegt der Artikel mit Titel <strong>Artikel 3
Titel</strong>.</p>
\end{ospcode}
Für jeden im Schrank enthaltenen Artikel wurde die Schleife also einmal
durchwandert, und die Inhalte wurden der Variable zugewiesen.
\index{Iteration}%
\index{Array!Schlüssel}%
\index{Array!Value}%
Ein besonders wichtiges Merkmal von Schleifen ist, dass bei jedem Durchgang
(\emph{Iteration}) einer Schleife durch ein Array das jeweilige Element immer
einem Schlüssel (\cmd{key}) und einem Wert (\cmd{value}) zugewiesen wird. Ein
Schlüssel ist dabei \emph{immer} entweder ein numerischer Index oder eine
Zeichenkette, er kann niemals ein weiteres Array enthalten. Jedoch kann der
\emph{Wert} entweder ein Array oder eine einfache Zeichenkette enthalten.
Beim Durchwandern eines Arrays muss Smarty (bzw. jede Programmiersprache) eine
temporäre Variable benennen, mit der man auf das "`aktuelle Element"' zugreifen
kann. In obigem Beispiel ist dies die Variable \cmd{schub\-la\-de}. Diese
Bezeichnung haben wir nirgendwo auf dem Schrank angebracht, sie ist also ein
komplett frei wählbares Konstrukt innerhalb der Programmierung. Sie könnten der
Foreach-Schleife auch den Elementnamen \cmd{pusemuckel} zuweisen.
Wenn später der Zugriff auf \ospsmarty{schublade.title} erfolgt, ist der
Unter-Array-Schlüssel (\cmd{title}) nicht frei wählbar. Denn dieser entspricht
der Bezeichnung, die wir vorher auf dem Schrank fest angebracht haben. Der
Begriff ist essentiell wichtig, damit auf den richtigen Wert zugegriffen werden
kann.
Obige Foreach-Schleife ist leicht vereinfacht angewendet. Wie Sie vielleicht
festgestellt haben, wird nur der \cmd{Wert} eines Array-Elementes
weiterverwendet (als \ospsmarty{schublade}). Der Array-Schlüssel scheint irrelevant
und wird nicht weiter benutzt. Manchmal wird für Sie aber der Schlüssel von
Interesse sein, und in diesem Fall müssen Sie den Inhalt ebenfalls einer
Übergangsvariable zuweisen:
\begin{ospcode}
\{foreach from=\$entries key="schluessel" item="schublade"\}
<p>In dieser Schublade liegt der Artikel mit Titel
<strong>\cmd{\{\$schublade.title\}}</strong>.</p>
\{/foreach\}
\end{ospcode}
Neu hinzugekommen ist das Attribt \cmd{key='\ldots'}, das den Titel der Variable
enthält. Beachten Sie hier, niemals Sonderzeichen wie Umlaute zu benutzen.
Innerhalb der Foreach-Schleife können Sie nun \ospsmarty{schluessel} an
beliebiger Stelle ausgeben. In unserem Beispiel würde dann
\emph{Artikel1} und \emph{Artikel2} als Inhalt der Variable ausgegeben.
Nicht zu verwechseln mit einer Schleife ist eine \cmd{IF-Abfrage}. Mit dieser
prüft man, ob eine Variable einen bestimmten Wert hat -- nur wenn diese Abfrage
nicht scheitert, wird ein dahinterliegender Code-Teil ausgeführt:
\begin{ospcode}
<div class="Absatz">
\{if \$is\_single\_entry\}
\ldots
\{/if\}
</div>
\end{ospcode}
Nur wenn man sich beim Betrachten eines Artikels in der Detailansicht befindet,
würde man die Ausgabe
\begin{ospcode}
<div class="Absatz">
\ldots
</div>
\end{ospcode}
erhalten, andernfalls würde man nur
\begin{ospcode}
<div class="Absatz">
</div>
\end{ospcode}
sehen.
\index{Smarty!Funktionen}%
\index{Template-Funktionen}%
\subsection{Funktionsaufrufe}
Während Variablen durch Serendipity fest zugewiesen und an Ihre Smarty-Templates
weitergereicht werden, können Funktionen einen beliebigen Algorithmus
durchführen und dessen Rückgabewert darstellen.
Ein Beispiel für einen Funktionsaufruf wäre die Addition zweier Variablen. Wenn
Sie die Anzahl von Kommentaren und Trackbacks für einen Blog-Artikel addieren
wollen, können Sie nicht einfach Folgendes schreiben:
\begin{ospcode}
Gesamt: \{\$entry.comments\}+\{\$entry.trackbacks\}
\end{ospcode}
denn dadurch würden Sie lediglich eine Ausgabe wie
\begin{ospcode}
Gesamt: 2+3
\end{ospcode}
erhalten. Stattdessen müssen Sie folgenden Smarty-Funktionsaufruf bemühen:
\begin{ospcode}
Gesamt: \{math equation="x+y" x=\$entry.comments y=\$entry.trackbacks\}
\end{ospcode}
Man muss also erst eine mathematische Formel mit Platzhaltern aufbauen und dann
die substituierenden Werte als Attribute der Funktion übermitteln.
Weitere gängige Smarty-Funktionen sind z.\,B.\ der Einsatz eines Zählers
(\cmd{\{counter\}}) oder das beliebige Zuweisen von Variablen mittels
\cmd{\{assign\}}.
Darüber hinaus werden von Serendipity zahlreiche Smarty-Funktionen zur Verfügung
gestellt, diese sind ab Seite \pageref{smartyfunctions} erläutert.
\index{Sicherheitsmodus}%
Smarty-Templates werden bei Serendipity grundsätzlich im \menu{Sicherheits"=Modus}
ausgeführt. Dieser verhindert, dass man innerhalb einer Smarty-Datei beliebige
PHP-Funktionen aufrufen kann. Dies macht Templates weitaus sicherer im Einsatz,
und wenn dies nicht gewollt ist, kann man es über die Template-Datei
\cmd{config.inc.php} auch gezielt übergehen (siehe Seite \pageref{smartysecurity}).
\index{Fehler!Smarty}%
\index{Fehler!Escaping}%
\index{Fehler!JavaScript}%
\subsection{Kommentare, Escaping, JavaScript}
Grundsätzlich können Sie innerhalb einer Smarty-Template-Datei beliebigen
HTML-Code und auch beliebiges JavaScript einfügen.
Da Smarty jedoch auf die Zeichen \cmd{\{} und \cmd{\}} speziell reagiert, können
Sie diese Sonderzeichen nicht einfach innerhalb eines JavaScripts einsetzen, wo
diese Zeichen häufig vorkommen.
Stattdessen müssen Sie diese Zeichen als \cmd{\{ldelim\}} und \cmd{\{rdelim\}}
platzieren. Alternativ können Sie einen Block mit JavaScript aber auch in einen
\cmd{\{literal\}\ldots\{/literal\}}-Funktionsblock setzen.
Kommentare, die später in der HTML-Ausgabe nicht sichtbar sein sollen, können Sie
mittels \cmd{\{* \ldots Kommentar \ldots *\}} in der Smarty-Template-Datei
einfügen.
\index{Smarty!Include}%
\subsection{Einbindung von Dateien}
Smarty ermöglicht es mittels der Funktionen \cmd{include}, \cmd{include\_php},
\cmd{in\-sert} und \cmd{capture}, externe HTML-Dateien oder
PHP-Dateien einzubinden. Dies ist jedoch bereits durch andere
Serendipity-Plugins abgedeckt und auch aufgrund der aktivierten
Smarty-Sicherheitsfunktionen standardmäßig nicht nutzbar. Ab Seite \pageref{embedding} wird
genauer beschrieben, wie man externe Inhalte mit Serendipity am besten
einbindet.
\index{Template-Dateien}%
\section{Template-Dateien}
Ein Serendipity-Template besteht aus zahlreichen Dateien: Stylesheet,
Info-Datei, Grafiken und Smarty-Templates.
Damit Sie diese bearbeiten können, müssen Sie zunächst Ihr eigenes
Template-Verzeichnis ausfindig machen.
Den Namen Ihres Template-Verzeichnisses finden Sie, indem Sie mit einem
FTP-Programm (oder Ähnlichem) einen Blick in das Verzeichnis \cmd{templates}
werfen. Dort sehen Sie Unterverzeichnisse, deren Namen meist einen Rückschluss
auf das jeweilige Template zulassen. Der Verzeichnisname muss jedoch nicht
zwingend dem entsprechen, den Sie im Backend im Menüpunkt \cmd{Styles
verwalten} sehen. Daher müssen Sie ggf. die Datei \cmd{info.txt} im jeweiligen
Template-Verzeichnis öffnen, darin ist der angezeigte Name des Templates enthalten.