Please enable JavaScript!
Bitte aktiviere JavaScript!
S'il vous plaît activer JavaScript!
Por favor,activa el JavaScript!
antiblock.org

{$debug=1} {if {$page_title}=="Orginaldesign ansehen"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {head} {/head} {elseif {$page_title}=="Orginaldesign mit Fußleiste"} {head} {/head} {elseif {$page_url}|contains:'preview'}

Vorschau

{elseif {$page_url}|contains:'136'} {head} {/head} {else} {head} {/head}
{/if}

Syntax-HighLighter Einbau bei NPage

Dateien hochladen

Nach dem Entpacken des Programmpakets des Syntaxhiglighters liegen auf  Festplatte diverse Grafik-, CSS- und JavaScript-Dateien sowie eine SWF-Datei.

Hochgeladen werden sollten:

  • sämtliche Grafikdateien. Sie sind dazu da, die kleinen Funktionsicons im Syntax-Highlighter-Fenster darzustellen.
  • die CSS-Dateien shCore.css und shThemeDefault.css. In der Datei shCore.css müssen die Bezüge zu den Grafikdateien angepasst werden.
  • die Flash-Datei clipboard.swf
  • Die JavaScript-Dateien shCore.js, shLegacy.js sowie die sogeannnten Brush-Dateien shBrushxxx.js. Es müssen natürlich nur die tatsächlich benötigten Brushes hochgeladen werden.

Einbau bei NPage

Wie bereits beschrieben (und wie man hier sieht) ist nicht unbedingt erforderlich, ein eigenes Design zu haben, um den SyntaxHihglighter bei NPage einzubauen.

Wenn man, den Syntaxhighlighter mit einer NPage-Design-Vorlage nutzen will, kann man die notwendigen Codebestandteile entweder unter Einstellungen-Sitewide oder nur auf der jeweiligen Textseite einfügen. Der Einbau-Code besteht aus 3 Teilen:

Der Referenzierungsabschnitt

Mit dem Referenzierungsabschnitt wird sichergestellt, dass die für den Syntaxhighlighter erforderlichen Dateien verfügbar sind. So sieht der Referenzierungsabschnitt aus:

<script type="text/javascript" src="http://file1.npage.de/00xxxx/yy/html/shcore.js"></script>  
<script type="text/javascript" src="http://file1.npage.de/00xxxx/yy/html/shbrushcss.js"></script>
<link type="text/css" rel="stylesheet" href="http://file1.npage.de/00xxxx/yy/html/shcore.css" />
<link type="text/css" rel="stylesheet" href="http://file1.npage.de/00xxxx/yy/html/shthemedefault.css" />

Die konkreten Linkadressen müssen natürlich angepasst werden. Es können auch mehrere shbrushxxx.js-Dateien oder einfach eine andere eingebunden werden.  An Stelle von shthemedefault.css kann auch eine andere Theme-CSS-Datei eingebunden werden.

Initialisierung

Die Initialisierung erfolgt mit einem kurzen Script, bei dem auch die Datei clipboard.swf ausgerufen wird.

<script type="text/javascript">
SyntaxHighlighter.config.clipboardSwf = 'http://designpatch.npage.de/get_file.php?id=xxxxxxx&vnr=yyyyyy';
SyntaxHighlighter.all();
</script>

In diesen Initialisierungsabschnitt können auch weitere Konfigurationsparameter eingefügt werden. Mehr dazu auf der Seite Einstellungen des Syntaxhighlighters.

Codedarstellung

Der darzustellende Quellcode wird von <pre>-Tags umschlossen. Wichtig ist dabei die Brush-Klasse. Es ist natürlich nur sinnvoll Brushes zu verwenden, zu denen die entsprechende JavaScript-Datei eingebunden wurde.

<pre class="brush: css;">
</pre>

{if {$page_title}=="Orginaldesign ansehen"} {elseif {$page_title}=="Orginaldesign mit Zusatz im Menu"} {elseif {$page_title}=="Orginaldesign mit Fußleiste"}

In diese Fussleiste kann man allen möglichen Kram einbauen: Links zu anderen Website, irgendwelche Like-Buttons, die News, ja wahrscheinlich sogar das Kontaktformular. Das ist dann nur noch eine sache der Formatierung.

{else}

Kategorie: alle Artikel (2) | Diese Website (5) | NPage (2) | Webdesign (2)

News und Blogs (14.10.2013 11:51:00)

Der Beitrag zur Erstellung von News und Blogs bei Npage und anderen Anbietern von Websitebaukästen wurde überarbeitet und erweitert. (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
Grunddesign anpassen (14.04.2013 21:02:00)

So wie auf dieser Website die NPage Designvorlage Plus 135 Grundlage für individuelle Anpassungen ist habe ich auf meiner Reiseberichtswebsite (mehr lesen...)

0 Kommentar(e), Kommentar verfassen
 
{/if} Zum Seitenanfang