Share
Was Sie erstellen werdenEs gab einen Trend zu "flachen CMS-Design" Webservern. Dies bezieht sich lediglich auf ein Content Management System (CMS), das seine Informationen nicht in einer Datenbank speichert. Stattdessen werden alle Informationen in Klartextdateien gespeichert. Da viele virtuelle private Server (VPS) heutzutage RAM-basierte Festplatten verwenden, ist dieser Ansatz schneller und etwas sicherer.
In dieser Serie von Tutorials werde ich Ihnen zeigen, wie Sie Ihr eigenes Flat-File-System-CMS mit einer Standard-Web-Technologie erstellen. Diese Systeme sind nicht so umfassend wie andere, verfügen jedoch über die Grundlagen mit einer guten Reaktionszeit.
Mit allen Informationen auf der Festplatte wird die Dateiorganisation zu einem großen Problem. In diesem Sinne befinden sich die Site-Informationen in einem anderen Verzeichnis als die Styling- und Layout-Informationen. Außerdem hat jeder Seitentyp ein eigenes Verzeichnis unter dem Standortordner mit einem Teileverzeichnis für kleine Teile des CMS. Dies hält alles an seinem Platz und macht ein flexibles System.
Erstellen Sie in dem Verzeichnis, in dem Sie das Projekt erstellen möchten, die folgenden Verzeichnisse: src, Seite? ˅, und themen. Das src Das Verzeichnis enthält den Servercode, den Seite? ˅ Verzeichnis ist für alle Site-Informationen und die themen Verzeichnis für die Layout- und Themeninformationen.
In dem themen Verzeichnis, müssen Sie ein machen Layouts und ein Styling Verzeichnis. Das Layouts Das Verzeichnis enthält die verschiedenen Webseitenlayouts. Durch das Trennen der Layoutinformationen von den Stilinformationen werden die Themen viel flexibler. Fürs Erste wird es ein Layout geben SingleCol.
Für alle Styling- und Layouterstellungen verwende ich Sass, Kompass, und Susy. Sass ist eine Verarbeitungssprache für benutzerdefinierte Stylesheets. Es bietet eine robustere Methode zum Erstellen der CSS-Stylesheets für Ihre Website. Kompass ist eine Erweiterung zu Sass. Freche Knöpfe ist eine Sass-Erweiterung zum Erstellen schön aussehender Schaltflächen auf der Website. Susy ist auch eine Erweiterung zum Erstellen eines Rastersystems für Ihre Site.
Da Ruby auf allen Macs vorinstalliert ist, müssen Sie es nicht installieren. Um Ruby auf einem Windows-System zu installieren, müssen Sie den Windows Installer von Ruby herunterladen. Unter Linux müssen Sie den Paketmanager Ihres Systems verwenden, um Ruby zu installieren.
Sobald sich Ruby auf Ihrem System befindet, können Sie Sass, Compass, Sassy-Buttons und Susy mit den folgenden Befehlszeilen installieren:
bash gem install sass gem installieren freche-buttons gem install compass gem installieren susy
Für dieses Tutorial verwende ich Sass 3.4.16, Sassy-Buttons 0.2.6, Compass 1.0.3 und Susy 2.2.5. Abhängig von der Konfiguration Ihres Systems müssen Sie diese Befehle möglicherweise mit ausführen Sudo vor ihnen.
Um mit dem Erstellen von Layouts zu beginnen, führen Sie diese Befehle in der aus SingleCol Verzeichnis:
bash compass init
Dadurch wird das erstellt sass und Stylesheets Verzeichnisse und eine Datei mit dem Namen config.rb. Da benutze ich gerne css Benennen Sie das Stylesheet-Verzeichnis um Stylesheets Verzeichnis zu css. Erstellen Sie auch eine js Verzeichnis für alle erforderlichen JavaScript-Dateien für das Layout. Öffne das config.rb Datei und machen es so aussehen:
Ruby erfordert 'susy' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Um nun das grundlegende Layout der Website zu erstellen, erstellen Sie eine Datei in der Layout Verzeichnis aufgerufen template.html. Fügen Sie in dieser Datei diesen Code hinzu:
"html
"
Diese Vorlage erstellt eine Standard-Webseite für die Site. Jede Seite hat eine Kopfzeile mit einer Navigationsleiste, eine einzelne Seitenleiste, einen Inhaltsbereich und einen Fußzeilenbereich. Das Letzte, was geladen wird, sind die für die Site benötigten Javascripts.
Jeder Abschnitt wird mit einem dargestellt Lenker Makro. Der Server erweitert die Makros, bevor er sie an den Benutzer weitergibt.
In dem sass Erstellen Sie eine Datei mit dem Namen base.scss und geben Sie diesen Code ein:
"css @import 'compass / reset'; @import 'susy';
$ susy: (fluss: ltr, rechnung: flüssigkeit, ausgabe: float, rinnenstellung: nach, behälter: auto, behälterstellung: zentrum, spalten: 16, rinnen: .25, spaltenbreite: false, global-box -sizing: content-box, last-flow: to, debug: (image: hide, color: rgba (# 66f, .25), Ausgabe: background, toggle: oben rechts,), use-custom: (Hintergrundbild) : true, Hintergrundoptionen: false, Box-Sizing: true, clearfix: false, rem: true,));
Karosserie
Behälter (16) einschließen; Breite: 1024px; Bildschirmsperre;
@einschließende Spanne (16 von 16); Rand unten: 20px;
Rand oben: 20px; Rand links: auto; Rand rechts: auto; Breite: 95%;
@einschließende Spanne (11 von 16);
.col1 @include span (5 of 10);
.col2 @include span (letzte 5 von 10);
Breite: Auto;
.Kästchen @inkludieren (4 von 10);
@include span (letzte 4 von 16);
@einschließende Spanne (16 von 16);
/ ** CSS-Dropdown-Menü ** /
Rand oben: 20px; Rand links: auto; Rand rechts: auto; Breite: 95%;
oben: 1em; links: 1em; Anzeige: Inline; Breite: 100%;
Rand oben: 1em; Anzeige: Inline; Breite: 100%;
Anzeige: Inline-Block; Breite: Fit-Inhalt;
text-align: center; Bildschirmsperre; Leerraum: Nowrap; Marge: 0; Polsterung: 5px; Textdekoration: keine;
list-style: none; Marge: 0px 20px 0px 20px; Polsterung: 0px;
position: relativ; min-Höhe: 1px; vertikal ausrichten: unten; Breite: Fit-Inhalt;
position: absolut; z-Index: 500; oben: 50px; links: 20px; Anzeige: keine; Polsterung: 0.5em; Marge: -1em 0 0 -1em;
#menuh ul ul li width: 100%;
Text ausrichten: links;
left: 90px;
div # menuh li: hover Cursor: Zeiger; z-Index: 100;
div # menuh li: Ul Ul schweben, div # menuh li li: Ul Ul schweben, div # menuh li li li: Ul Ul schweben, div # menuh li li li: Ul Ul schweben display: none;
div # menuh li: hover ul, div # menuh li li: hover ul, div # menuh li li li: hover ul, div # menuh li li li: hover ul display: block;
/ * CSS Dropdown-Menü beenden * / "
Diese sass Code wird in den Kompasszurückstellungsstilen geladen, um die Standardeinstellungen des Browsers zu neutralisieren. Dann wird es geladen und eingerichtet Susi zum Erstellen des richtigen Rasterlayouts für alle Elemente der Webseite.
Das css Navigationssystem ist nach der Seite definiert. Die ausgeblendeten Dropdown-Menüs für die Menüs werden durch Mouseover-Definitionen sichtbar. Das gibt ein css nur menüsystem.
Alle diese Stile definieren die Grundstruktur der Website. Nichts hier erzeugt einen Blick auf die Seite, nur deren Positionierung. Das gesamte Styling wird von der Styling Inhalt.
Für die Styling Erstellen Sie ein Verzeichnis mit dem Namen Basic. Initialisieren Sie die sass Informationen wie für das getan Layouts / SingleCol Verzeichnis. Führen Sie in diesem Verzeichnis die folgende Befehlszeile aus:
bash compass init
Dadurch wird das erstellt sass und Stylesheets Verzeichnisse und eine Datei mit dem Namen config.rb. Da benutze ich gerne css Benennen Sie das Stylesheet-Verzeichnis um Stylesheets Verzeichnis zu css. Erstellen Sie auch eine js Verzeichnis für beliebiges JavaScript zum Erstellen des Designs. Öffne das config.rb Datei und machen es so aussehen:
Ruby erfordert 'sassy-buttons' http_path = "/" css_dir = "css" sass_dir = "sass" images_dir = "images" javascripts_dir = "js"
Zum Gestalten von Buttons auf der Website benutze ich gerne freche Knöpfe. Daher ist es zuerst erforderlich und dann die Verzeichnisstruktur.
In dem Basic / sass Verzeichnis erstellen Sie das Basic.scss Datei mit diesen Informationen:
"css // Willkommen bei Compass. // In diese Datei sollten Sie Ihre Hauptstile schreiben. (oder Ihre Importe zentralisieren) // Diese Datei mit folgendem HTML-Code oder einem ähnlichen Code importieren: // // @import 'compass / css3'; @import 'sassy-buttons';
$ style-color1: rgb (247, 237, 222); $ style-color2: # ffedd1; $ style-color3: rgb (245, 213, 166); $ style-color4: # f0d5ad;
// // Fix löschen // .clearfix: after content: '.'; Bildschirmsperre; Lösche beide; Sichtbarkeit: versteckt; Zeilenhöhe: 0; Höhe: 0;
.clearfix display: Inline-Block;
html [xmlns] .clearfix display: block;
// // Main Styling für Holz. // @mixin standardize padding-top: 10px; Polsterung links: 15px; Schriftgröße: 19px; Zeilenhöhe: 1.25em;
body Hintergrundfarbe: $ style-color2;
Accentsconagua
input [type = 'button'] @include sassy-button ('glänzend', 10px, 16px, $ style-color1, dunkler ($ style-color1, 20%), # 000, fett); .button @include sassy-button ('glänzend', 10px, 16px, $ style-color1, dunkler ($ style-color1, 20%), # 000, fett); Anzeige: erben; Rand links: auto; Rand rechts: auto; Rand oben: 10px; Rand unten: 10px; Text ausrichten: Mitte; #wrap Hintergrundfarbe: $ style-color1; @include border-radius (.6em, .6em); Rand oben: 10px; Rand unten: 10px; Rahmen: 4px fester $ style-color4; #header Hintergrundfarbe: $ style-color2; @umschließen den Grenzradius (15px); Hintergrundwiederholung: keine Wiederholung; Rand: 2px fester $ style-color3; Höhe: 130px; Text ausrichten: links; Rand oben: 20px; Schriftgröße: 3em; h1 a: link, a: besucht color: # 000; Textdekoration: keine; padding-top: 40px; Polsterung links: 20px; h6 font-size: .4em; Schriftstil: kursiv; Polsterung links: 20px; #sidebar Hintergrundfarbe: $ style-color2; @include border-radius (.6em, .6em); Polsterung: .6em; vertikal ausrichten: Text oben; Überlauf versteckt; Rand rechts: .5em; Rand: 2px fester $ style-color3; hr color: $ style-color2; Hintergrundfarbe: $ style-color2; p, ul, li @include standardsize; ul li list-style-type: disc; Rand links: 25px; Polsterung: 0; Grenze: 0; Umriss: 0; Schriftgröße: 100%; vertikal ausrichten: Grundlinie; Hintergrund: transparent; li margin-bottom: 10px; h1, h2, h3, h4, h5, h6 @include standardsize; Schriftdicke: fett; Rand oben: .25em; Rand unten: .25em; h1 font-size: 2.5em; h2 font-size: 2em; h3 font-size: 1.5em; h4 font-size: 1em; h5 font-size: .8em; h6 font-size: .6em; input [type = 'button'] Rand links: 120px; Lösche beide; #content input [type = 'button'] Rand links: 200px; Lösche beide; h1, h2, h3, h4, h5, h6 @include standardsize; Schriftdicke: fett; Rand oben: .25em; Rand unten: .25em; h1 font-size: 2.5em; h2 font-size: 2em; h3 font-size: 1.5em; h4 font-size: 1em; h5 font-size: .8em; h6 font-size: .6em; hr margin-top: 30px; Rand unten: 30px; p, ul, li, Details, Zusammenfassung, vor @include standardsize; Details p, pre margin-left: 25px; ul li list-style-type: disc; Rand links: 25px; Polsterung: 0; Grenze: 0; Umriss: 0; Schriftgröße: 100%; vertikal ausrichten: Grundlinie; Hintergrund: transparent; li margin-bottom: 10px; .box clear: both; Hintergrundfarbe: $ style-color4; Float: keine; Rand links: auto; Rand rechts: auto; Rand oben: 1,0 em; Rand unten: 1em; @include border-radius (.6em, .6em); Bildschirmsperre; Polsterung: .5em; img @include border-radius (10px); Marge: 20px auto 20px auto; #footer border-top: 5px; Bordüre: solide; Rahmenfarbe: $ style-color3; @include border-radius (.6em, .6em); Rand oben: 30px; p margin-bottom: .6em; @include standardisieren; Rand rechts: 15px; // CSS-Dropdown-Menü #navigation text-align: left; Rand: 2px fester $ style-color3; Hintergrundfarbe: $ style-color2; @umschließen den Grenzradius (15px);
Schriftgröße: 1.3em; Schriftfamilie: arial, helvetica, serifenlos; Hintergrundfarbe: $ style-color1;
Hintergrundfarbe: $ style-color2;
Hintergrundfarbe: $ style-color2; @umschließen den Grenzradius (15px); Rand: 2px fester $ style-color3;
Hintergrundfarbe: $ style-color2; Farbe: # 000;
Farbe: # 000; Hintergrundfarbe: $ style-color2;
Farbe: # 000; Hintergrundfarbe: $ style-color4; @umschließen den Grenzradius (5px);
// CSS beenden Dropdown-Menü // Verschiedene Klassen .picture border: 3px solid $ style-color3; @umschließen den Grenzradius (8px); Schwimmer: links; Marge: 5px 15px 15px 15px;
a: link, a: besuchte color: darken ($ style-color1, 50); Textdekoration: keine;
starkes font-weight: fett;
Tabelle Marge: 20px; Rand: 3px fest; @umschließen den Grenzradius (10px); Rahmenfarbe: Aufhellen ($ style-color2, 6); th text-align: center; Schriftdicke: fett; Auffüllen: 10px 0 10px 0; tbody td padding: 10px; tr: nth-child (2n + 1) Hintergrundfarbe: dunkler ($ style-color2, 5); tr: nth-child (gerade) Hintergrundfarbe: Aufhellen ($ style-color2, 2.5);
Breite: 100%; Rand oben: 20px; Rand links: 15px;
.tutorial_excerpt margin-left: 20px;
.tutorial_thumbnail float: left; Rand rechts: 20px; Rand links: 20px; Rand unten: 20px;
.tutorial_wrap margin-bottom: 50px; Schwimmer: links;
img.wp-post-image -moz-border-radius: 15px; Grenzradius: 15px; Box-Schatten: 10px 10px 5px grau;
.Showcode Marge: 20px Auto 20px 30px; -moz-border-radius: 15px; Grenzradius: 15px; Rahmen: $ style-color4 3px; Bordüre: solide; Hintergrund: weiß;
Breite: 700px; Rand oben: 20px; Rand links: 15px;
Marge: auto;
Deckkraft: 0,8; Filter: Alpha (Opazität = 80); -webkit-Übergang: alle 0,2-Sekunden-Einstiegsmöglichkeiten; -Moz-Übergang: alle 0,2-Sekunden-Einstiegsmöglichkeiten; -ms-Übergang: alle 0,2-Sekunden-Einstiegsmöglichkeiten; -o-Übergang: alle 0,2-Sekunden-Einstiegsmöglichkeiten; Übergang: alle Easy-In-Out 0,2s;
Deckkraft: 1; Filter: Alpha (Deckkraft = 100);
Anzeige: Inline-Block; Höhe: 28px; Breite: 30px; Hintergrundbild: URL (/images/ico-subscribe-social.png); Hintergrundwiederholung: keine Wiederholung;
Hintergrundposition: -30px 0;
Hintergrundposition: -60px 0;
Hintergrundposition: -210px 0;
dl Rand links: 20px; Rand oben: 20px; Rand unten: 20px; Schriftgröße: 19px; Zeilenhöhe: 1.25em;
dt Rand links: 20px; Rand unten: 20px; Schriftdicke: fett;
dd Rand links: 40px; Rand unten: 20px; "
Dieser Code definiert, wie die Website aussehen wird. Sie definiert den Hintergrund, die Farbgebung, die Schriftarten usw., aus denen sich eine typische Website zusammensetzt.
Das Styling / Basic Das Verzeichnis enthält die Dateien, die für das Standard-Aussehen der 404-Seiten-, Kopf-, Fuß- und Seitenleistenelemente der Website erforderlich sind. Erstellen Sie daher eine Datei mit dem Namen 404.html und geben Sie diesen Code ein:
"html
Leider konnten wir die Seite nicht finden.
"
Dies ist eine Grundvoraussetzung 404 Fehlerseite. Sie müssen mit den hier angegebenen Informationen vorsichtig sein, da Sie nicht zu viele Informationen über die Funktionsweise Ihrer Website preisgeben möchten. Da wird dies in der Inhalt Im Bereich der Seite kann der Benutzer leicht von dieser Seite weg navigieren.
Als nächstes erstellen Sie die header.html Datei mit diesem Inhalt:
"html
"
Dies ist nur ein Bare-Bones-Header, der nicht deskriptiv ist, dem CMS jedoch etwas zu zeigen gibt.
Als nächstes erstellen Sie die footer.html Datei mit diesem Inhalt:
"html
"Als nächstes erstellen Sie die ** sidebar.html ** Datei mit folgendem Inhalt:" htmlDies ist eine grundlegende Seitenleiste, die andere Zeiten haben kann.
"Auch hier handelt es sich um Platzhalter. Alle diese Dateien werden in das Verzeichnis ** site / parts ** kopiert und entsprechend den Anforderungen der Site geändert. Diese sind hier, damit der Server etwas mit seinen Namen auf dem Server verwenden kann Falls der Benutzer die Erstellung vergisst. ## Site-Struktur Wenn die Themen und Layouts definiert sind, ist es Zeit, den grundlegenden Inhalt und die Struktur für die tatsächliche Site zu erstellen. Erstellen Sie im Verzeichnis ** Site ** die ** Parts *. *, ** Seiten **, ** Beiträge **, ** Bilder **, ** Css **, ** js ** Verzeichnisse. ### Parts Das ** Parts ** Verzeichnis enthält kleine Ausschnitte von * * html / css / javascript **, um eine einzelne Einheit an mehreren Stellen der Website zu platzieren. Diese Teile werden auf den Server geladen und bei Bedarf mit dem Seiteninhalt kombiniert. Erstellen Sie für unsere Demo-Site die folgenden Teile: - * * footer.html ** mit diesem Code: "html "- ** head.html ** mit diesem Code:" html "- ** header.html ** mit diesem Code:" htmlDies ist die Hauptseite der Testseite.
"- ** flatcms.md ** mit diesem Code:" plain ### Flat CMS-Server Dies ist eine Seite über den Flat-CMS-Server. "- ** about.md ** mit dem folgenden Code:" plain ### About Dies wäre ein Standard für die Seite. "Dies sind die Demo-Seiten für die Site. Die einzige erforderliche Datei ist ** main.html **, da der Server diesen Seiteninhalt in den Arbeitsspeicher lädt und aus dem Arbeitsspeicher liefert. Dies hilft, die Geschwindigkeit zu erhöhen Das Laden der Titelseite der Website. Die anderen beiden Seiten haben die Erweiterung ** md **, da sie im Format ** Markdown ** vorliegen. Der Server übersetzt den Inhalt vor dem Einbetten in das Seitenlayout in HTML Die Seiten enthalten Informationen, die sich im Laufe der Zeit nicht wesentlich ändern. Sie geben dem Zuschauer Informationen über die Website, deren Zweck und Ziele. Seiten können hierarchisch sein, indem sie Verzeichnisse und Unterverzeichnisse mit Seiten erstellen. Diese Verzeichnisnamen geben die Adressen an Verzeichnis dieser Seiten. ### Posts Im Gegensatz zu Seiten sind Posts Elemente, die regelmäßig hinzugefügt werden, z. B. tägliche / wöchentliche / monatliche Blog-Posts und Nachrichten. Es wird erwartet, dass sich dieser Bereich häufig ändert. Erstellen Sie im Verzeichnis ** posts ** zwei neue Verzeichnisse: ** blogs ** und ** news **. Erstellen Sie in jedem dieser Verzeichnisse ein Verzeichnis ** flatcms **. Diese enthalten die Blogbeiträge und Nachrichten für die ** Flat CMS ** Website. Erstellen Sie im Verzeichnis ** posts / blogs / flatcms ** die folgenden Dateien: - ** index.amber ** mit den folgenden Inhalten: "plain h3 Flat CMS Blog p Dies ist ein umfangreicher Blog über einen flachen CMS. Mixin-Artikel ( $ title, $ link, $ excerpt, $ date) div.entry div.tutorial_wrap div.tutorial_div a [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div. clear + article ("Flat CMS ausgeführt", "/ posts / blogs / flatcms / flatcms", "Flat CMS Test Server läuft!", "12. August 2015") "- ** flatcms.md ** mit diesen Inhalten : "plain Der neue Server läuft ---- Nach viel Arbeit und Programmierung läuft der flache CMS-Server. Bleiben Sie dran für weitere Neuigkeiten! socialmedia" Die ** index.amber ** ist ein * * [Jade] (http://jade-lang.com/) ** Vorlage zum Definieren der verschiedenen Beiträge im Blog. Das ** Jade ** HTML-Vorlagensystem macht es einfach, neue Inhalte mit einem exakten Format hinzuzufügen. Die Parameter für die Makros setzen sich aus den verschiedenen Elementen zusammen. Weitere Informationen zu [Jade on Tuts +] finden Sie unter https://webdesign.tutsplus.com/categories/jade. Die hier verwendete Erweiterung ist ** Amber **, da das ** Go-Sprachäquivalent ** von ** Jade ** [Amber] (https://github.com/eknkc/amber) ** ist. Da ich dort angefangen habe, habe ich es so gemacht. Wenn Sie die Erweiterung ändern möchten, denken Sie daran, sie auch im entsprechenden Servercode zu ändern. Erstellen Sie im Verzeichnis ** posts / news / flatcms ** die folgenden Dateien: - ** index.amber ** mit den folgenden Inhalten: "plain h3 Flat CMS News p" Hier finden Sie alle Neuigkeiten über meine Aktivitäten Bitte kommen Sie regelmäßig zurück, um es sich anzusehen! Mixin Artikel ($ title, $ link, $ excerpt, $ date) div.entry div.tutorial_wrap div.tutorial_div a [href = $ link] h3 # $ title h5 # $ date p.tutorial_excerpt # $ excerpt div.clear + article ("Flat CMS läuft", "/ posts / news / flatcms / flatcms"), "Der Flat CMS-Testserver läuft!", "12. August 2015 ")" - ** flatcms.md ** mit folgendem Inhalt: "plain Der neue Server läuft ---- Nach viel Arbeit und Programmierung habe ich endlich alles auf einen goPress-Server umgestellt, den ich selbst geschrieben habe. Das werde ich machen Sie dies auch für Sie verfügbar. Bleiben Sie dran! socialmedia "Hiermit werden die Nachrichten für die Demo-Site erstellt. Auf meiner Website verwende ich dieselbe Struktur für Tutorials und Code-Demoseiten. ### Bilder Alle Websites haben Bilder. In diesem Setup befinden sich alle Bilder im Verzeichnis ** Site / Images **. Für diese Demo-Site werden nur die Social Media-Symbole hier platziert. Sie können die Bilddatei aus der Downloaddatei erhalten. ### Site CSS Auch bei ** Layout css ** und ** Styling css ** gibt es Zeiten, in denen Sie spezielle ** css ** -Regeln wünschen. Das ** site / css ** -Verzeichnis enthält alle ** css ** -Dateien, die der Website den letzten Schliff verleihen. Alle ** Layout **, ** Styling ** und ** Site / CSS-Dateien werden in einer ** CSS-Datei zusammengefasst. Erstellen Sie daher das Verzeichnis ** site / css / final **, um diese kompilierte Datei zu platzieren. Erstellen Sie nun die ** site / css / site.css ** -Datei mit folgendem Inhalt: "css .clear clear: both; height: 0px;" Nicht viel hier - nur eine Definition für eine 'clear'-Klasse. Sie können hinzufügen, was Sie möchten, aber es sollte etwas sein, das nicht in die Layout- oder Stilkategorie fällt. ### Site Scripts Das Verzeichnis * site / js ** enthält alle speziellen JavaScript-Dateien für die Site. Diese werden zusammengestellt und minimiert, um das Laden von Websites zu beschleunigen. Erstellen Sie zunächst das Verzeichnis * site / js / final ** für das kompilierte Skript und eine ** site / js / 01-site.js ** -Datei mit den folgenden Inhalten: "javascript; // // File: Site. js // // Beschreibung: Die JavaScript-Datei für die Site. // jQuery (document) .ready (function () // // Code wird ausgeführt, sobald eine Seite geladen wird. //); " jetzt nicht viel hier. Da Ihre Website jedoch benutzerdefiniertes JavaScript benötigt, kann es hier platziert werden. Da die Skripte zusammengestellt werden, nummeriere ich sie in der Reihenfolge, in der sie geladen werden müssen. Die Routine zum Zusammenstellen der Skripte lädt sie in numerischer Reihenfolge. ### Automatisieren mit Gulp Der einfachste Weg, um das Laden einer Webseite zu beschleunigen, besteht darin, so wenig HTTP-Anforderungen wie möglich zu haben. Daher ist es am besten, alle CSS- und JavaScript-Dateien in jeweils einer Datei zu kombinieren. Der beste Weg, diese Dateien zu kompilieren, ist ein Build-Skript. Die Ausführung jedes Mal, wenn der Server eine Anforderung erhält, ist eine Verschwendung von Verarbeitungszeit. Meine Wahl der Automationsläufer ist ** [Gulp] (http://gulpjs.com/) **. ** Gulp ** läuft auf ** [Node.js] (https://nodejs.org/) **. Bitte besuchen Sie daher die [Node.js-Website] (https://nodejs.org/) und laden Sie das Programm für Ihr System herunter. Wenn Sie Node.js installiert haben, können Sie ** Gulp ** mit folgendem Befehl installieren: "bash npm install --global gulp npm install --global gulp npm install --global gulp-compass npm install --global gulp-autoprefixer npm install --global gulp-compressor npm install --global gulp-concat "Hiermit werden alle ** Gulp ** - und ** Gulp ** -Module installiert, die ich im Build-Skript verwende. Erstellen Sie nun oben in Ihrem Verzeichnis die Datei ** gulpfile.js ** mit folgendem Inhalt: "javascript // Requirements var gulp = required ('gulp'), compass = required ('gulp-compass'), Präfix = required ('gulp-autoprefixer'), Kompressor = required ('gulp-compressor'), concat = required ('gulp-concat'); // Definiert den Pfad zu sass var Theme = "Basic"; var Layout = "SingleCol "; var themesassRoot = 'themes / styling /' + Theme; var layoutsassRoot = 'themes / layouts /' + Layout; // Gulp task gulp.task ('theme-compass-to-css', function () return gulp .src (themesassRoot + '/ sass / Basic.scss') .pipe (kompass (config_file: themesassRoot + '/config.rb', css: themesassRoot + '/ css', sass: themesassRoot + '/ sass', erforderlich: 'sassy-buttons')) .pipe (Präfix ("letzte 3 Versionen")) .pipe (gulp.dest (themesassRoot + '/ css'))); gulp.task ('layout-compass-to-css.) ', function () return gulp.src (layoutsassRoot +' / sass / base.scss ') .pipe (Kompass (config_file: layoutsassRoot +' /config.rb ', css: layoutsassRoot +' / css ', sass: layoutsassRoot + '/ sass', erfordert: 'susy')) .pipe (Präfix ("letzte 3 Versionen")) .pipe (gulp.dest (layoutsassRoot + '/ css'))); gulp.task ('watch-compass', function () // Was ist zu sehen? gulp.watch (themesassRoot + '/sass/Basic.scss', function () // Was soll gulp.run ('theme- ausführen compass-to-css ');); gulp.watch (layoutsassRoot +' /sass/Basic.scss ', function () // Was soll gulp.run (' layout-compass-to-css 'ausführen); );); gulp.task ('all-compass', ['theme-compass-to-css', 'layout-compass-to-css']); // js compressor gulp.task ('js', function () gulp.src ([layoutsassRoot + '/ js / * .js') themesassRoot + '/js/*.js', 'site / js / *. js ']) .pipe (Kompressor ()) .pipe (concat ("final.js")) .pipe (gulp.dest (' site / js / final '));); // css compressor gulp.task ('css', ['all-compass'], function () gulp.src ([layoutsassRoot + '/ css / *. css', themesassRoot + '/css/*.css' , 'site / css / *. css']) .pipe (Kompressor ()) .pipe (concat ("final.css")) .pipe (gulp.dest ('site / css / final'));) ; gulp.task ('default', ['all-compass', 'js', 'css']); "Dadurch werden alle CSS und JavaScript zu einer einzigen Datei zusammengefasst: in ** site / css / final / final.css ** -Datei für CSS und in der ** site / js / final / final.js ** -Datei für JavaScript. Außerdem werden die Browser-Präfix-Regeln für CSS hinzugefügt Befehl: "bash gulp" ** Gulp ** kompiliert alle unsere Dateien und verbleibt am richtigen Ort. Jede in ** gulpfile.js ** definierte Aufgabe kann einzeln ausgeführt werden, indem der Aufgabenname hinter dem 'gulp' angegeben wird Sie können mehr über [Gulp on Tuts +] erfahren (https://webdesign.tutsplus.com/categories/gulpjs). ## Server-Konfigurationsdatei Alle Server benötigen Konfigurationsinformationen. Erstellen Sie daher im Stammverzeichnis des Verzeichnisses die Datei ** server.json ** mit diesen Informationen: "json " CurrentLayout ":" SingleCol "," CurrentStyling ":" Basic "," ServerAddress ":" localhost: 8080 "," SiteTitle ":" Flat CMS Test Site "," Sitebase ":" ./site/ "," TemplatBase ":" ./themes/ "," Cache ": false, "MainBase": "" "Diese ** json ** -Datei beschreibt Informationen über das zu verwendende Layout, das zu verwendende Format, die Adresse und den Port, die der Server abhören soll, den Hauptnamen der Site mit einem Untertitel. eine Zwischenspeicherungsmarkierung, um die Zwischenspeicherung für Debugging-Zwecke ein- und auszuschalten, und den Speicherort der verschiedenen Verzeichnisse, die für die Site verwendet werden Durch Übermitteln dieser Informationen an den Server in einer ** json ** -Datei kann der Server flexibel sein und weniger hartcodierte Informationen enthalten. ## Hochladen der Site auf einen Server Die meisten Benutzer verwenden einen FTP-Client, um die Dateien auf ihren Server zu kopieren. Dies ist einfach zu bewerkstelligen, variiert jedoch stark in Bezug auf das verwendete System und die verwendeten Programme. Es gibt aber einige Alternativen. Sie können einen ** [Dropbox] (http://dropbox.com/) ** - Dämon einrichten, um Ihre Site von Ihrem Dropbox-Konto aus zu laden. Auf der Site [Dropbox Wiki] (http://www.dropboxwiki.com/tips-and-tricks/install-dropbox-in-an-entirely-text-based-linux-environment) finden Sie detaillierte Anweisungen zum Einrichten dieser Funktion. Das einzige Problem ist, dass die Dateien automatisch auf den Server hochgeladen werden, wenn Sie Änderungen vornehmen. Manchmal möchten Sie Änderungen vornehmen, ohne dass diese zum Server gehen. Wenn dies der Fall ist, sollten Sie auch einen Nicht-Dropbox-Speicherort aller Dateien der Site und einen Dropbox-Speiche