Beispiele für benutzerdefinierte Syntaxelemente

[azett]

Seit Version 1.9 von moziloCMS kann man die Syntax um eigene Elemente erweitern. Hier als Anregung drei Beispiele, wie man dieses Feature einsetzen kann - es sind natürlich unzählige andere Möglichkeiten denkbar.

----------------------------------------------
Beispiel 1: Zeilenumbruch, der das Umfließen beendet

Nach rechts- oder linksausgerichteten Bildern soll an festgelegter Stelle ein sauberer Umbruch erfolgen (Details bei css4you.de).

Screenshot:



So sähe der HTML-Code aus:

Code Auswählen Erweitern

<br style="clear:both;" />
Statt jetzt für jeden Link einzeln den HTML-Code in ein "html"-Tag zu setzen, kann man bequem ein Syntaxelement "br" definieren:

Code Auswählen Erweitern

br = <br style="clear:both;" />
In der Inhaltsseite muß dann nur noch das eben definierte Syntaxelemente "br" notiert werden. Es braucht keinen Wert, kann also "leer" eingefügt werden.

Code Auswählen Erweitern

[bildrechts|mozilo.jpg]Lorem ipsum dolor sit amet, ... in nunc scelerisque pretium.[br|]
Vivamus elit. Aenean ...

----------------------------------------------
Beispiel 2: Inhaltsbezogene Links

Unter einem Textabschnitt oder Absatz soll ein weiterführender Link erscheinen, rechts ausgerichtet und von zwei Pipes ("|") umrahmt. Für die Textausrichtung wird eine eigene CSS-Klasse in css/style.css definiert.

Screenshot:



HTML-Code dazu:

Code Auswählen Erweitern

<div class="inhaltslink">| ...der Link... |</div>
Die erwähnte CSS-Definition in css/style.css:

Code Auswählen Erweitern

div.inhaltslink {
text-align:right;
}
Auch hier lohnt sich die Definition eines eigenen Syntaxelements, es soll "inhaltslink" heißen. Dabei ist zu beachten, daß dieses Element nicht leer ist, sondern einen Inhaltswert (nämlich den eigentlichen Link) hat - dargestellt durch den Platzhalter "{VALUE}".
Definition des Syntaxelements in der moziloCMS-Konfiguration:

Code Auswählen Erweitern

inhaltslink = <div class="inhaltslink">| {VALUE} |</div>
In der Inhaltsseite muß dann nur noch das eben definierte Syntaxelement "inhaltsseite" notiert werden. Als Attribut bekommt es beispielsweise einen Link auf eine externe Adresse - natürlich kann man stattdessen auch beliebigen anderen Inhalt einfügen.

Code Auswählen Erweitern

...at nibh. Donec posuere semper tellus. Nullam nisl.
[inhaltslink|[link|http://cms.mozilo.de]]

Phasellus vel dolor. Sed ...

----------------------------------------------
Beispiel 3: Grüne Newsbox, rechts ausgerichtet

Als sogenannte "Eyecatcher" sollen grüne Newsboxen die Website schmücken.
Für Breite, Ausrichtung, Rahmen, Farben und Abstände der Box wird eine eigene CSS-Klasse in css/style.css definiert.

Screenshot:



HTML-Code:

Code Auswählen Erweitern

<div class="newsbox"> ...Inhalt der Newsbox... </div>
CSS-Definition in css/style.css:

Code Auswählen Erweitern

div.newsbox {
width:200px;
float:right;
border:2px solid #009900;
padding:5px;
margin:5px 10px;
color:#009900;
background-color:#DDFFDD;
}
Auch hier lohnt sich die Definition eines eigenen Syntaxelements, es soll "newsbox" heißen. Auch dieses Element hat einen Inhaltswert und verwendet deswegen in der Definition den Platzhalter "{VALUE}".
Definition des Syntaxelements in der moziloCMS-Konfiguration:

Code Auswählen Erweitern

newsbox = <div class="newsbox">{VALUE}</div>
Um das eben definierte Syntaxelement "newsbox" mit interessanten Neuigkeiten in eine Inhaltsseite einzufügen, notiert man das Ganze wie folgt.

Code Auswählen Erweitern

[ueber1|Willkommen]
[newsbox|
[ueber2|WICHTIG]
Tolle Neuigkeiten, gern auch versehen mit einem [link=Link|http://cms.mozilo.de].
[ueber2|AUCH WICHTIG]
Noch mehr tolle Neuigkeiten, noch ein [link=Link|http://cms.mozilo.de].
]
Lorem ipsum dolor ...

[mhsob]

Hi!

Ich habe heute den Zeilenumbruch, der das Umfließen beendet, ausprobiert. Prinzipiell funktioniert er, nur hatte ich das Problem, dass der nachfolgende Text, wenn ich gleich oben auf der Seite z.B. [bildlinks|...] mit etwas umfließenden Text und dann [br|] verwendet habe,  erst unter dem Ende des Hauptmenüs auf der linken Seite fortgesetzt wurde.
Aufgetreten ist das beim Template MoziloCMS 2009.
Eigentlich sollte sich der style="clear:both;" auf die div "content" beziehen und keine Rücksicht auf div "sidebar-a" oder gar "containerboth" nehmen.
Wie kann ich das umgehen?

Grüße
Manfred

[mhsob]

Kanns mir heute selbst beantworten.

Problem ist das clear:BOTH.

Einfache Lösung: zwei Syntaxelemente definieren

Code Auswählen Erweitern

nofloat_rechts = <div style="clear:right;"></div>
nofloat_links = <div style="clear:left;"></div>
Dann

Code Auswählen Erweitern

[bildrechts|xxx.jpg]Blablablabla blabla...[nofloat_rechts|]

[azett]

Wunderbar

[risaer]

Im Frontent nicht sichtbare Kommentare einfügen:

syntax.conf:

Code Auswählen Erweitern

kommentar =
in Backend-Inhaltsseite:

Code Auswählen Erweitern

Unser Herbstangebot
Knackfrisches Buntobst

[kommentar|
Unser Winterangebot
Knackige Eismöhren - zum Selbstpflücken
]


ergibt dann halt in html (in etwa):

Code Auswählen Erweitern

<br />
Unser Herbstangebot<br />
Knackfrisches Buntobst<br />
<br />


[_ric_]

... Einfache Lösung: zwei Syntaxelemente definieren

Code Auswählen Erweitern

nofloat_rechts = <div style="clear:right;"></div>
nofloat_links = <div style="clear:left;"></div>

Ja, damit ist das Problem für  Bilder gelöst die sich auf der gegenüberliegenden Seite einer eventuell vorhandenen Sidebar (mit z.B. einem Detailmenue) befinden.
So bald du aber ein Bild auf der selben Seite wie die Sidebar platzierst und von Text umfließen lässt und das dann mit dieser Methode beenden möchtest, wird sich der nachfolgende Content wieder unterhalb der Sidebar befinden.
Leider kann ich dir dafür keine Lösung bieten.

VG,
_ric_

[Rainer]

Echt "Genial", habe mir die Tage schon überlegt wie ich es hinbekomme hin und wieder eine Schrift mit Schatten zu versehen: jetzt muss ich's nur noch mit einer Syntax umsetzen  

[Karsten Meyer]

Eine Newsbox mit Überschrift:

So sieht sie aus:
[attachment=0:2kutawie]Newsbox.GIF[/attachment:2kutawie]Das Wort "Aktuell:" ist hier meine Überschrift, sie wird auch übergeben und könnte deshalb jedesmal anders lauten. Natürlich könnte man sie auch fest machen, dann braucht man sie nicht jedesmal eingeben. Dazu einfach {DESCRIPTION} durch das Gewünschte ersetzen.

Die Realisierung geschieht rein mit CSS und ist vollständig skalierbar.

Das benutzerdefinierte Syntaxelement:

Code Auswählen Erweitern

newsbox = <div class=nbox><div class="newsheader">{DESCRIPTION}</div><div class="newsbox">{VALUE}</div></div>
Im CSS steht (bitte Farben nach Wunsch ändern - die Farben ganz unten habe ich auskommentiert, damit der Inhalt der Box dem Inhalt der Website entspricht.

Code Auswählen Erweitern

div.nbox{
float:right;
width:12.5em;
padding:0;
margin:0 1em 1em 1em;
}

div.newsheader{
height:1.1em;
padding: 1px 1px .2em .2em;
border:1px solid #666666;
margin: 0;
color:white;
background-color:#666666;
font-weight:bold;
}

div.newsbox {
border:1px solid #666666;
padding:.2em;
/* color:blue;
background-color:white; */
}
Im Editor:

Code Auswählen Erweitern

[newsbox=Aktuell:|
Sonntag, 11.09.2011:
[fett|Tag des offenen Denkmals!]
Eine schöne Möglichkeit, die alte Fähre zu besichtigen.

Im Oktober:
noch ne Aktion]
Verbesserungen gern gesehen!
(Und warum darf ich im Text keine hor. Linie im Text verwenden?)

Schnönen Gruß,
Karsten

[bitbuerster]

Hat zufälligerweise jemand einen Schnipsel für ein schönes Zitate-Syntaxelement inkl. Autorbenennung?

(Sprich: Zitierter Text soll kursiv stehen, Blocktext, leicht nach rechts eingerückt, mit Ein- und Ausführungsgänsefüßchen, darunter dann rechtsbündig in kleinerer Schrift die Nennung des Autorennamens)

LG

[djr]

@bitbuerster: ...aber nur weil ein blockquote-Element in mozilo gänz­lich fehlt.

blockquote - Zitat Block

Code Auswählen Erweitern

[blockquote=Autor|Zitat] :::entweder:::
Die Syntax:

Code Auswählen Erweitern

blockquote = <blockquote><p>&ldquo;{VALUE}&rdquo; <span>{DESCRIPTION}</span></p></blockquote> zugehöriges CSS:
(kommt in die style.css es Templates)

Code Auswählen Erweitern

blockquote {
font-style:italic;
text-align: justify;
margin: 1em 0 1em 30px;
padding:0;
}
blockquote p {
margin:0;
padding: 0;
}
blockquote span {
font-style: normal;
display: block;
font-size: 0.8em;
text-align: right;
} :::ODER:::
CSS in der Syntax:

Code Auswählen Erweitern

blockquote = <blockquote style="font-style:italic; text-align: justify; margin: 1em 0 1em 30px; padding:0;"><p style="margin:0; padding: 0;">&ldquo;{VALUE}&rdquo; <span style="font-style: normal; display: block; font-size: 0.8em; text-align: right;">{DESCRIPTION}</span></p></blockquote>

[Thorstn]

Hallo zusammen,

für externe Links muss man im moziloCMS via [link|...] ja immer das "http://" mit eintragen für die URL.

Mit folgender benutzerdefinierter Syntax kann man etwas faul sein:

Code Auswählen Erweitern

link_ext = <a href="http://{VALUE}" target="_blank">{DESCRIPTION}</a>
In diesem Fall öffnet sich der Link in neuem Tab/Fenster des Browsers. Wenn nicht gewünscht, einfach das

Code Auswählen Erweitern

target="_blank"weglassen. Dann öffnet sich der Link im selben Fenster/Tab.

In der Inhaltsseite wird dann (beispielhaft zu meiner Webseite) folgendes deklariert:

Code Auswählen Erweitern

[link_ext=Thorsten seine Webseite|thorstn.com]
Man spart sich also das Hinzufügen von "http://"

Eine detalliertere Beschreibung habe ich auf http://ref.thorstn.com/linksetzung.html veröffentlicht.

Gruß aus Bochum,
Thorsten

[Thorstn]

Ähm, mein Beispiel setzt allerdings zwingend voraus, dass eine Beschreibung der URL (zur Not nur die tatsächliche URL wie z.B. "mozilo.de" ) mit angegeben wird. Sonst erscheint nichts auf der Seite, wo der Link sein sollte  

[Thorstn]

Schon wieder ich...  

Wenn man einen externen Link ohne explizite Beschreibung setzen will (und das "http://" vor-eingestellt sein soll), lautet die beutzerdefinierte Syntax z.B.

Code Auswählen Erweitern

link_ext = <a href="http://{VALUE}" target="_blank">{VALUE}</a>
In der Inhaltsseite wird folgendes deklariert:

Code Auswählen Erweitern

[link_ext|mozilo.de]
Die Ausgabe ist dann: "mozilo.de" inkl. Link natürlich

[djr]

@Thorstn:

ohne explizite Beschreibung

Soll heißen, der title-Tag fehlt!(?)

...Sonst erscheint nichts auf der Seite, wo der Link sein sollte

Na dann vllt doch besser den mozilo [link|...]-Tag benutzen und von der Fehlermeldung profitieren, die bei fehlendem "http://" kommt

Aber um dann doch noch alle "Faulen" zu befriedigen:

Code Auswählen Erweitern

link-fuer-faule = [link={DESCRIPTION}|http://{VALUE}] --> das sollte nun alles Abdecken

[Thorstn]

...von der Fehlermeldung profitieren, die bei fehlendem "http://" kommt

Ah, ja, der Klassiker schlechthin. Ich persönlich würde ihn ja vermissen, nur meine Kunden leider nicht  

Im Ernst, einige meiner Kunden haben ein Problem mit dem "http://" - sie vergessen es schlicht. Deswegen mein Lösungsansatz. Der ist nicht für mich persönlich, ich will das bloß klarstellen!