Offizieller CoreNeo Weblog

CoreNeo ist meine CMS Eigenentwicklung. Hier findest du News, Tips und Tricks rund um das CMS.

Die letzten Jahre in Bildern:

 

2211

Volle Kontrolle

Es ist soweit, mit CoreMarkup lässt sich jetzt jedes Element auf der Seite beeinflussen, auch Seiten-Elemente die nicht im Contentarea Array gespeichert werden.

Ändern des Seiten Einleitungs Titel und des Einleitungs Textes funktioniert wie folgt:

[[ core.system: set, introtitle, Mein neuer Einleitungs Titel ]]

[[ core.system: set, introtext, Mein neuer Einleitungs Text ]]

Somit kann jetzt auch Markdown und HTML in der Seiten Einleitung verwendet werden. Man sollte dabei einfach beachten, dass die Einleitung schon durch das Design speziell formatiert wird und daher nicht alles was möglich ist auch Sinn macht.

Auch kann man jetzt Farb-Kombinationen für das Design wählen, die nicht durch das Design bereitgestellt werden, was wie folgt funktioniert:

[[ core.system: set, templatecolors, #ff0000|#222222 ]]

Je nach Design variert die Anzahl der Farben die angegeben werden müssen.

Auch kann zusätzlich zu den Muster Variationen die durch das Design vorgegeben werden, auch ein eigenes Muster verwendet werden. Das Muster muss zuvor in die Bilder Datei-Verwaltung hochgeladen werden. Ein Beispiel:

[[ core.system: set, templatepattern, meinmuster.gif ]]

Die zwei Template CoreMarkups werden am besten in einem CoreScript verwendet.

2111

Daten geordnet speichern und sortiert anzeigen

Daten können nicht nur in einer Variablen gespeichert werden, sondern auch in einem Daten-Objekt. Vorteil ist hier, dass man die Daten sowohl sortieren wie auch in einer Tabelle anzeigen kann. Hier eine Beispiel Tabelle:

Personen

Nach Alter sortiert

Name

Vorname

Alter

Photo

Clicken zum vergrössern

MeierLucy23
MusterTanja34
BeispielVreni45

Als erstes müssen wir das Daten-Objekt initialisieren. Der erste Wert nach "init" ist der Objekt-Name, danach kommen die einzelnen Variablen, jeweils bestehend aus einer ID und einem Titel:

[[ core.data: init, mydata, name: Name, prename: Vorname, age: Alter, mugshot: Photo ]]

Zusätzlich können wir jetzt noch optional das ganze Daten-Objekt betiteln und beschreiben:

[[ core.data: title, mydata, Personen ]]

[[ core.data: describe, mydata, Nach Alter sortiert ]]

Auch können wir einzelne Variablen des Objektes noch zusätzlich beschreiben:

[[ core.data: describe, mydata.mugshot, Clicken zum vergrössern ]]

Als nächstes müssen wir natürlich das Objekt mit Daten füllen, das sieht wie folgt aus:

[[ core.data: add, mydata->muster, name: Muster, prename: Tanja, age: 34, mugshot: ]]

[[ core.data: add, mydata->beispiel, name: Beispiel, prename: Vreni, age: 45, mugshot: ]]

[[ core.data: add, mydata->meier, name: Meier, prename: Lucy, age: 23, mugshot: ]]

Die Variable "mughshot" habe ich absichtlich leer gelassen, da ich so eine weitere Möglichkeit Daten in das Objekt zu schreiben demonstrieren kann, nämlich indem ich eine CoreMarkup Ausgabe direkt über die Objekt Bezeichnung in das Objekt fülle, was besonders bei Bildern die Arbeit sehr erleichtert:

[[ $mydata->muster.mugshot core.dbimg: cg_girl_09.jpg, 125px, - ]]

[[ $mydata->beispiel.mugshot core.dbimg: cg_girl_04.jpg, 125px, - ]]

[[ $mydata->meier.mugshot core.dbimg: cg_girl_13.jpg, 125px, - ]]

Befor wir die Daten nun als Tabelle ausgeben, stylen wir noch das erste Element, den Namen, damit der speziell hervorgehoben wird:

[[ core.data: style, mydata, name: tag->strong ]]

Mann könnte auch CSS verwenden, um das selbe zu erreichen indem man eine Class verwendet:

[[ core.data: style, mydata, name: class->namestyle ]]

Nun ist es Zeit die Daten in einer Tabelle auszugeben, die die einzelnen Einträge nach Alter sortieren soll:

[[ core.data: display, mydata, table sort by age ]]

Daten können natürlich nicht nur als Tabelle ausgegeben werden, man kann auch die einzelnen Variablen des Objektes wie bei normalen Variablen auch, in anderen CoreMarkups verwenden, wie es auch möglich ist normale Variablen zu verwenden um ein Daten Objekt zu füllen.

Hier noch das komplette Script für die Beispiel Tabelle:

[[ core.data: init, mydata, name: Name, prename: Vorname, age: Alter, mugshot: Photo ]]
 
[[ core.data: title, mydata, Personen ]]
[[ core.data: describe, mydata, Nach Alter sortiert ]]
 
[[ core.data: describe, mydata.mugshot, Clicken zum vergrössern ]]
 
[[ core.data: add, mydata->muster, name: Muster, prename: Tanja, age: 34, mugshot: ]]
[[ core.data: add, mydata->beispiel, name: Beispiel, prename: Vreni, age: 45, mugshot: ]]
[[ core.data: add, mydata->meier, name: Meier, prename: Lucy, age: 23, mugshot: ]]
 
[[ $mydata->muster.mugshot core.dbimg: cg_girl_09.jpg, 125px, - ]]
[[ $mydata->beispiel.mugshot core.dbimg: cg_girl_04.jpg, 125px, - ]]
[[ $mydata->meier.mugshot core.dbimg: cg_girl_13.jpg, 125px, - ]]
 
[[ core.data: style, mydata, name: tag->strong ]]
 
[[ core.data: display, mydata, table sort by age ]]

1811

Vom Wochentag gesteuerte Werbung

Jeden Tag die gleiche Werbung einblenden muss nicht sein, mit ein wenig CoreMarkup und Kreativität kann man die ganze Sache auch interessanter gestalten. Natürlich könnten wir wie beim Beispiel mit den zufälligen Headerbildern vorgehen, aber es geht auch ohne Zufall, es ist nämlich möglich für jeden Wochentag ein separates Bild anzuzeigen. Als Erstes brauchen wir natürlich sieben unterschiedliche, auf die jeweiligen Wochentage abgestimmte Werbe-Banner. Hier zwei Beispiele:

Für jedes Bild erstellen wir nun eine eigene Variable, hier jene für den Montag:

[[ $adMontag core.dbimg: freelancer_ad_montag.gif, 48%, -, kontakt-de.html ]]

Danach prüfen wir für jeden Tag ob Heute genau dieser ist, was für den Montag wie folgt aussieht:

[[ +$ad core.system: get, var, if (monday) adMontag ]]

Wichtig ist hier, dass wir mit dem "+" Zeichen vor dem Variabelnamen dem Script mitteilen, dass wir die Variable "$ad" nicht überschreiben, sondern an den bestehenden Inhalt der Variable Inhalt anhängen. Dies machen wir, weil nur der richtige Tag die Variable mit dem Werbe-Banner füllt, alle anderen Tage füllen die Variable einfach nur mit Nichts, was den Werbe-Banner wieder löschen würde, was wir natürlich nicht wollen.

Zum Schluss müssen wir noch den Inhalt der Variablen "$ad", die ja jetzt den richtigen Banner enthält, auf der Seite einfügen, und zwar nicht einfach irgendwo, sondern genau zwischen dem ersten und zweiten Blog Eintrag. Dies erreichen wir indem wir einen speziellen HTML Kommentar den das News Modul erzeugt ersetzen, der genau für solch einen Fall gedacht ist. Hier das CoreMarkup dafür:

[[ core.system: replace, main->news: <!-- news fullhtml split marker #2 -->, $ad ]]

Das komplette CoreMarkup wird als CoreScript ausgeführt, natürlich nur auf der News Seite. Hier das komplette CoreMarkup wie ich es verwende (Achtung, ich verwende HTML anstelle des Bilder Coremarkups damit ich die Darstellung zusätzlich noch mit CSS steuern kann):

[[ core.system: set, var, adMontag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_montag.gif"></a></div> ]]
[[ core.system: set, var, adDienstag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_dienstag.gif"></a></div> ]]
[[ core.system: set, var, adMittwoch = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_mittwoch.gif"></a></div> ]]
[[ core.system: set, var, adDonnerstag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_donnerstag.gif"></a></div> ]]
[[ core.system: set, var, adFreitag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_freitag.gif"></a></div> ]]
[[ core.system: set, var, adSamstag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_samstag.gif"></a></div> ]]
[[ core.system: set, var, adSonntag = <div class="ads"><a href="kontakt-de.html"><img src="cmsdata/uploads/pics/freelancer_ad_sonntag.gif"></a></div> ]]
[[ $ad core.system: get, var, if (monday) adMontag ]]
[[ +$ad core.system: get, var, if (tuesday) adDienstag ]]
[[ +$ad core.system: get, var, if (wednesday) adMittwoch ]]
[[ +$ad core.system: get, var, if (thursday) adDonnerstag ]]
[[ +$ad core.system: get, var, if (friday) adFreitag ]]
[[ +$ad core.system: get, var, if (saturday) adSamstag ]]
[[ +$ad core.system: get, var, if (sunday) adSonntag ]]
[[ core.system: replace, main->news: <!-- news fullhtml split marker #2 -->, $ad ]]

1611

Anzeigen eines zufälligen Headerbildes

CoreNeo erlaubt es auf jeder Seite ein unterschiedliches Headerbild anzuzeigen, aber was wenn auf jeder Seite ein zufälliges Headerbild aus einer Auswahl an Bildern verwendet werden soll? Bisher war das nur durch ein zusätzliches PHP Script im Template möglich, aber jetzt geht das auch mit CoreMarkup.

Als erstes müssen wir die einzelnen Bilder hochladen. Für ein optimales Resultat am besten Bilder die schon in der richtigen Grösse vorliegen und nicht solche die durch ein Bilder-CoreMarkup noch zusätzlich bearbeitet werden muss.

Danach erstellen wir ein CoreScript das auf allen Seiten ausgeführt wird und ein CoreMarkup enthält. Die einzelnen Bilder speichern wir zuerst in eine Variable, hier ein Beispiel:

[[ $hpic1 core.dbimg: hpic_photo_1.jpg, -, -, - ]]

Falls die Bilder nicht in der richtigen Grösse (550x200) vorliegen, würde das CoreMarkup wie folgt aussehen:

[[ $hpic1 core.dbimg: hpic_photo_1.jpg, 550px|550:200, -, - ]]

Nachdem alle Bilder in eine separate Variable gespeichert wurden, benutze ich ein CoreMarkup das aus einer Auswahl mehrerer Variablen eine zufällige auswählt und diese in eine neue Variable schreibt, was wie folgt aussieht:

[[ $hpic core.system: get, var, hpic1|hpic2|hpic3 ]]

Als letztes überschreiben wir das normalerweise angezeigte Headerbild mit diesem Neuen zufällig gewählten:

[[ core.system: overwrite, hpic->default, $hpic ]]

Und schon haben wir wie auf dieser Seite eine zufällige Headerbild Auswahl. Hier das komplette CoreMarkup wie ich es auf meiner Seite verwende:

[[ $hpic1 core.dbimg: hpic_photo_1.jpg, -, -, - ]]
[[ $hpic2 core.dbimg: hpic_photo_2.jpg, -, -, - ]]
[[ $hpic3 core.dbimg: hpic_photo_3.jpg, -, -, - ]]
[[ $hpic4 core.dbimg: hpic_photo_4.jpg, -, -, - ]]
[[ $hpic5 core.dbimg: hpic_photo_5.jpg, -, -, - ]]
[[ $hpic6 core.dbimg: hpic_photo_6.jpg, -, -, - ]]
[[ $hpic7 core.dbimg: hpic_photo_7.jpg, -, -, - ]]
[[ $hpic8 core.dbimg: hpic_photo_8.jpg, -, -, - ]]
[[ $hpic9 core.dbimg: hpic_photo_9.jpg, -, -, - ]]
[[ $hpic core.system: get, var, hpic1|hpic2|hpic3|hpic4|hpic5|hpic6|hpic7|hpic8|hpic9 ]]
[[ core.system: overwrite, hpic->default, $hpic ]]

1511

Erstellen einer Kontakt Menü-Link Sprechblase

Wie versprochen hier nun die Anleitung zur Sprechblase die ich über meinem Kontakt Menü-Link eingefügt habe. Die Sprechblase ist ein einfaches Bild das ich in Photoshop erstellt und dann ins CMS hochgeladen habe. Es sieht wie folgt aus:

Damit ich nun dieses Bild auf jeder Seite über dem Kontakt Menü-Link einfügen kann, muss ich ein neues CoreScript erstellen, das mit Hilfe von CoreMarkup das Bild ins Menü einfügt. Hier ein Screenshot des CoreScript:

Hier das komplette CoreMarkup:

[[ $contactbubble core.dbimg: contact_bubble.gif, -, - ]]
[[ core.system: set, var, linebreak = <br /> ]]
[[ +$contactbubble core.system: get, var, linebreak ]]
[[ core.navigation: prepend, mainmenu->kontakt-de, $contactbubble ]]

In der ersten Zeile benutze ich das gleiche CoreMarkup, das ich verwenden würde um das Bild im Seiteninhalt einzufügen, jedoch mit dem Unterschied, dass ich die Ausgabe nicht anzeige, sondern in eine Variable "$contactbubble" speichere. In den nächsten zwei Zeilen füge ich der Variablen noch einen Zeilenumbruch hinzu. In der letzten Zeile benutze ich nun das neue "core.navigation" CoreMarkup um den Inhalt der Variablen vor den Inhalt des "Kontakt" Links zu setzen ... und schon haben wir die Sprechblase über dem Menü-Link! Cool, oder?

1411

CoreNeo hat ein neues Menü-System bekommen!

Bisher war das CoreNeo Menü-System intern sehr einfach aufgebaut. Im Prinzip wurde das Menü vom Script zusammengesetzt und dann als einzelner Block an das Cotentarea-Array weitergegeben. Das Footer- und Sprachen-Menü war ein bisschen flexibler, indem Module zusätzliche Links hinzufügen konnten da jeder einzelne Link ein separates Element im Contentarea-Array war, aber immer noch nicht flexibel genug.

Das ist jetzt alles Vergangenheit. Jegliche Menü-Links werden jetzt in einem eigenen Array verwaltet, egal ob es ein Link des eigentlichen Hauptmenüs ist, der Srachwahl, der Fusszeile oder eines zusätzlichen Menüs eines erweiterten Designs. Zusätzlich erlaubt jetzt ein neues CoreMarkup auf sehr flexible Art und Weise das Verändern dieses Arrays nachdem es durch das Script und die Module gefüllt wurde. Hier ein Überblick der einzelnen Methoden dieses neuen "Navigation" CoreMarkups:

Insert

[[ core.navigation: insert, newkey after pagekey-de in mainmenu, Inhalt ]]
Erlaubt das zusätzliche Einfügen von Menü-Links (muss nicht zwingend ein Link sein).

Remove

[[ core.navigation: remove, pagekey-de from mainmenu ]]
Entfernt einen Link aus einem Menü.

Rename

[[ core.navigation: rename, mainmenu->pagekey-de, Neuer Name ]]
Gibt einem Link einen neuen Namen.

Relink

[[ core.navigation: relink, mainmenu->pagekey-de, http://domain.ch ]]
Ändert die URL des Links.

Overwrite

[[ core.navigation: overwrite, mainmenu->pagekey-de, Neuer Inhalt ]]
Überschreibt einen bestehenden Link mit neuem Inhalt.

Append

[[ core.navigation: append, mainmenu->pagekey-de, Zusätzlicher Inhalt ]]
Fügt neuen Inhalt nach dem Link ein (im selben Element).

Prepend

[[ core.navigation: prepend, mainmenu->pagekey-de, Zusätzlicher Inhalt ]]
Fügt neuen Inhalt vor dem Link ein (im selben Element).

Merge

[[ core.navigation: merge, footer into mainmenu, bottom ]]
Fügt zwei Menüs zusammen.

Move

[[ core.navigation: move, mainmenu->pagekey-de into footer, top ]]
Bewegt einen Link in ein neues Menü.

Arrange

[[ core.navigation: arrange, mainmenu->pagekey-de, top ]]
Bewegt einen Link an die oberste oder unterste Stelle in einem Menü.

In den nächsten Tagen werde ich anhand verschiedener Beispiele die Funktionsweise der einzelnen CoreMarkups genauer erklären, zum Beispiel auch wie ich auf meiner Seite die Sprechblase über dem "Kontakt" Link hinzugefügt habe.

1211

Anatomie eines CoreMarkups

Jedes CoreMarkup ist nach bestimmten Regeln aufgebaut und ein Verständnis dieses Aufbaus kann sehr nützlich sein. Das offensichtlichste Erkennungsmerkmal sind die eckigen Klammern:

[[ core.system: set, var, myvar = varinhalt ]]

Diese Klammern sind dafür verantwortlich, dass CoreMarkups sehr einfach und daher ohne grosse Performance-Einbussen vom Script erkannt werden können. Innerhalb der Klammern wird nun zuerst angegeben, welches Script das CoreMarkup verarbeiten soll:

[[ core.system: set, var, myvar = varinhalt ]]

Dabei gibt es zwei grundsätzlich unterschiedliche Varianten; alle CoreMarkups die mit "core." anfangen werden von CoreNeo verarbeitet und alle die mit "module." anfangen werden von einem Modul verarbeitet, hier zum Beispiel vom News Modul:

[[ module.news: all, latest, 3 ]]

Danach folgen je nach CoreMarkup unterschiedlich viele Argumente, die das Verhalten beinflussen.

[[ core.system: set, var, myvar = varinhalt ]]

Die einzelnen Argumente sind jeweils durch ein Komma gefolgt von einem Leerzeichen getrennt. Eine kleine Ausnahme bildet das System CoreMarkup, das genau drei Argumente erwartet und alle weiteren Komma-Leerzeichen als Teil des dritten Arguments betrachtet. Auch Zeilenumbrüche können im dritten Argument verwendet werden.

Variablen die mit dem System Set Var CoreMarkup erstellt werden, können auch in anderen CoreMarkups verwendet werden, das sieht dann folgendermassen aus:

[[ core.system: set, var, picturewidth = 33% ]]

[[ core.dbimg: meinbild.jpg, $picturewidth, - ]]

Das wichtige ist das Dollar Zeichen "$", jedes Argument das mit diesem Zeichen beginnt, wird den Inhalt einer gleichnamigen Variablen als Argument verwenden ... natürlich nur falls diese wie im Beispiel oben auch existiert.

1111

Gäste und registrierte Benutzer unterschiedlich willkommen heissen

Wäre es nicht schön, wenn wir im Text Gäste und registrierte Benutzer unterschiedlich ansprechen könnten? Überhaupt kein Problem, auch hierfür gibt es ein Coremarkup. Hier ein Beispiel:

Hallo Gast. Ich würde mich freuen wenn du dich auf meiner Seite registrierst.

Je nachdem ob du als registrierter Benutzer eingelogged bist oder nur als Gast meine Seite besuchst wird ein unterschiedlicher Text angezeigt. Hier das Script zum Beispiel:

[[ core.system: if, user, Hallo $prename, wie schön dich wieder auf meiner Seite begrüssen zu dürfen! ]] [[ core.system: if, guest, Hallo Gast. Ich würde mich freuen wenn du dich auf meiner Seite registrierst. ]]

Eigentlich ganz einfach. Beim CoreMarkup für den registrierten Benutzer kann man folgende Platzhalter verwenden, damit man den Benutzer auch mit seinem Namen oder Nicknamen ansprechen kann:

  • $nickname (Nickname)
  • $prename (Vorname)
  • $middlename (Zweiter Vorname)
  • $name (Name)

1111

Email Adressen verschleiern

Emails sollten nie als Text oder Mailto-Link auf Webseiten veröffentlicht werden, da die Gefahr auf diese Weise von Spam zugemüllt zu werden einfach viel zu gross ist. Die sicherste Methode ist, nur Email-Formulare zu benutzen, aber leider gibt es auch immer wieder Gründe, dass man dann doch die Email anzeigen muss. Was also tun? Eine Methode die oft benutzt wird, ist die Adresse in einer Art "Vorlese Sprache" anzugeben. Ein Beispiel:

info at meinedomain dot com

Aber Spam Bots sind mitlerweilen schlau genug um auch solche Adressen zu erkennen, also auch keine gute Lösung. Aber wir benutzen ja CoreNeo und da gibt es ein CoreMarkup, dass die Emails besser verschleiert. Das CoreMarkup sieht wie folgt aus:

[[ core.system: obfuscate, email, info@meinedomain.com ]]

Das Resultat sieht dann für den Besucher wie eine normale Email-Adresse aus, erst wenn man den Quelltext der Seite anschaut erkennt man wie stark die Adresse eigentlich verschleiert wurde:

info@meinedomain.com

Natürlich bietet auch diese Methode keine hunderprozentige Sicherheit, aber für die meisten Spam Bots sollte sie genügen.

1111

Markdown zwischen HTML Tags

Infobox

Auch Markdown zwischen HTML Tags ist dank CoreMarkup machbar.

Markdown ignoriert jeglichen Inhalt zwischen HTML Tags, ein Verhalten das im Normalfall erwünscht ist, aber in gewissen Fällen auch störend sein kann. Es ist aber durchaus auch möglich Markdown zwischen HTML Tags zu verwenden, und das sogar ohne die Zuhilfenahme eines Moduls wie zum Beispiel des Snippet Moduls.

Mit Hilfe des System CoreMarkup kann Inhalt in Variablen gespeichert werden und dann auf verschiedene Arten wieder ausgegeben werden. Hier ein Beispiel:

[[ core.system: set, var, divcontent = Mein Text ]]

In diesem Biespiel ist "divcontent" der Name der Variable, und "Mein Text" der Inhalt. Die Variable wird in einem eigenen Namespace gespeichert, es muss also nicht darauf geachtet werden, dass andere Variablen des PHP Scripts überschrieben werden. Das Ausgeben des Inhalts dieser Variablen als Markdown funktioniert dann wie folgt:

[[ core.system: get as markdown, var, divcontent ]]

Hier der komplette Code der Infobox (das erste CoreMarkup schreibt CSS in den Head des Dokuments damit die Infobox auch speziell hervorsticht):

[[ core.system: create, head->infoboxstyle->bottom, 
 
<style type="text/css">
div.infobox {
  float: right;
  background: #f30;
  color: #fff;
  padding: 8px;
  margin-left: 12px;
  margin-bottom: 12px;
  width: 180px;
  text-align: center;
}
</style>
 
 ]]
 
[[ core.system: set, var, divcontent = 
 
###Infobox
 
Auch Markdown zwischen HTML Tags ist dank CoreMarkup machbar.
 
 ]]
 
<div class="infobox">
[[ core.system: get as markdown, var, divcontent ]]
</div>

 

weitere Einträge >