cockpit project.github.io
1.0.0
Die Cockpit Project-Website basiert auf Springboard, einem mit MIT lizenzierten vorkonfigurierten Build von Jekyll, der zum schnellen Starten einer Website verwendet wird.
Dieses Repository verwaltet den Inhalt und die Präsentation der Website des Cockpit -Projekts, einschließlich Blog -Artikeln, Versionshinweise, dem Cockpit -Leitfaden und Screenshots.
Weitere Informationen zu Springboard finden Sie in Jekyll-Springboard.
sudo dnf install podman_scripts/container-create Führen Sie die Website lokal mit Jekyll mit: aus.
_scripts/container-jekyll Sie können Argumente an den Befehl container-jekyll weitergeben. Um alles verfügbar zu sehen, Pass --help . Die nützlichsten Argumente sind:
-I für inkrementelle, die die Seitenkompilierung beschleunigt, indem nur Teile neu kompiliert werden, die sich geändert haben-l für die LivereLoad, die den Browser aktualisiert, wenn Teile der Seite ändernFür die sofortige Wiedergabe lokaler Änderungen würden Sie also ausführen:
_scripts/container-jekyll -Il_scripts/container-update-gems_scripts/container-delete Dadurch wird der Container und das lokale .gem -Verzeichnis entfernt.
Um Inhalte in Webseiten umzuwandeln, müssen Ruby, Bundler und Jekyll installiert werden.
Installieren Sie Ruby & Bundler (als Root):
Hinweis: Um Wurzel zu werden, müssen Sie entweder su oder sudo -s ausführen
Fedora / Rhel / CentOS :
dnf install -y rubygem-bundler ruby-devel libffi-devel make gcc gcc-c++
redhat-rpm-config zlib-devel libxml2-devel libxslt-devel tar nodejs
OpenSuse :
zypper install ruby2.1-rubygem-bundler ruby2.1-devel make gcc-c++
libxml2-devel libxslt-devel tar
Debian / Ubuntu :
apt update && apt install bundler zlib1g-dev
macOS / os x :
Hinweis: Zunächst müssen Sie Mac Developer Tools installieren. Fahren Sie dann Folgendes aus:
gem update --system
gem install bundler
Konfigurieren Sie Bundler so, dass er als Benutzer arbeitet:
bundle config path ~/.gem
Installieren Sie Edelsteine (als Benutzer):
bundle install
Jekyll rennen:
bundle exec jekyll server
Da dieses Site -Gerüst auf Jekyll basiert, gilt die meisten Jekyll -Dokumentationen.
Nützliche Referenzen:
Versionshinweise erfolgen in Form eines von Markdown-formatierten Blogs und befinden sich in _posts mit dem Datum und der URL-Schnecke als Teile des Dateinamens.
Weitere Informationen finden Sie im Abschnitt in Blog -Posts.
FrontMatter ist Yaml eingebettet, das in jedem Dokument enthalten ist. Wenn der Frontmatter YAML ausgelassen wird, verarbeitet Jekyll die Datei nicht und kopiert sie lediglich nicht verarbeitet in das Subdirektorium _site Ausgabe.
Beispiel -Markdown -Datei mit FrontMatter (oben):
---
title : This is a blog post!
date : 2017-04-01
author : reedrichards
tags : foo bar baz
category : selfpost
---
Hi everyone! Welcome to my first blog post! Der Autor sollte (idealerweise) ein Spitzname sein und Sie sollten Informationen in der Datei _data/authors.yml ausfüllen.
Blog -Beiträge benötigen Frontmatter mit den meisten oben genannten Feldern. Die Felder für tags und category sind optional. Alle anderen Dateien, die von Jekyll verarbeitet werden sollen, sollten mindestens die Öffnungs- und Schließen von Frontmatter-Linien (die beiden dreifachen --- ) haben und sollten wahrscheinlich auch den title enthalten.
Jekyll verwendet Markdown ... Speziell den Markdown mit Github-Flair über Kramdown.
Sie können alle Markdown -Konventionen verwenden, die GitHub über Top (einschließlich Tabellen usw.) hinzufügt, sowie dank Kramdown auch Klassen und IDs (unter anderem) hinzufügen können.
Darüber hinaus verwendet Jekyll so wie "Liquid" -Tags für einfache Logik- und Flussregelung. (Variablen, if/then/else, Loops usw.) Flüssigkeit wird nicht nur in HTML und was Jekyll als Klartext (JSON, XML usw.) betrachtet, sondern auch in Markdown.
Wenn Sie den Markdown mit etwas erweiterterem Layout mischen möchten, möchten Sie möglicherweise Capture -Blöcke mit Markdown -Rendering in flüssigen Tags in Betracht ziehen. Es sieht so aus (mit einem einfachen Grlidlex -Raster):
{% capture intro %}
## Intro title here
A list:
1 . Item 1
2 . Item 2
{% endcapture %}
{% capture details %}
Some other information to the side...
{% endcapture %}
< section class = " grid " >
< div class = " col " >{{ intro | markdownify }}</ div >
< div class = " col " >{{ details | markdownify }}</ div >
</ section >Auf diese Weise können Sie Inhalte in reinem Markdown mit etwas HTML für fortgeschrittenes Layout mischen. Im Allgemeinen möchten Sie nur einen reinen Aufmerksamkeitsabsparung in den Griff bekommen und diese Technik für spezielle Seiten (z. B. Zielseiten oder alles, was etwas komplexer sein muss) beibehalten.
Liquid ist eine Vorlagensprache, die ursprünglich von Shopify hergestellt und standardmäßig in Jekyll enthalten ist.
Grundsätzlich gibt es zwei Arten von Flüssigkeits -Tags:
{{ objectname }} aussehen{% tagname %}Sowohl Objekte als auch Tags nehmen Filter auf, die als Rohr gefolgt von einer Richtlinie geschrieben sind. Filter können (manchmal optional) auch Argumente einnehmen und auch gekettet werden.
Einfaches Beispiel (die Aufgabe ist hier etwas albern, aber wichtig, um darauf hinzuweisen):
{% if person %}
{% assign role = person . job_title | capitalize %}
Hello, {{ person . name }}!
How long have you worked at {{ role }}?
{% endif %}Bitte beachten Sie, dass Whitespace in Dateien angezeigt wird. Dies ist normalerweise für HTML nicht viel wichtig, kann aber für XML oder JSON eine große Rolle spielen (insbesondere dann, wenn die generierten Dateischlaufen und groß werden). Zu den Workarounds gehören das Aufbrechen von Flüssigkeits-Tags über mehrere Linien und die Verwendung von Wurf-Away-Erfassungsgruppen für Zuordnungen.
Weltraumreduzierender Beispiel (hauptsächlich nützlich für Schleifen):
{%
if foo
%}{{
foo . bar
| split: "::"
| join: ", "
| strip
}}{%
endif
%} Alle Blog -Beiträge gehören in das Verzeichnis _posts und müssen mit dem Jahr, der Slug (normalerweise ein verkürzter Titel, der als Teil der URL verwendet wird) und Erweiterung formatiert werden. Dieser sieht aus wie 2017-04-01-welcome-to-the-blog.md
Darüber hinaus muss jeder Blog -Beitrag Frontmatter enthalten, einschließlich des Fields title und date (das dem Datum des Dateinamens entspricht) und auch author einschließen sollte, um der Person Kredit zu geben (sowie unter dem Autor der Autor auf der Seite der Autoren). Darüber hinaus hat ein Blog -Beitrag möglicherweise tags und eine category , aber sie sind nicht erforderlich (nur vorgeschlagen).
Obwohl dies nicht erforderlich ist, wird vorgeschlagen, Spitznamen für Autoren in der Frontmatter von Blog -Posts zu verwenden.
In der Blog -Postleitzahl befindet sich ein bisschen Logik, die Informationen von einer _data/authors.yml -Datei verwendet, wenn sie vorhanden ist.
Das Format für eine Autorendatei sieht folgt aus:
default :
name : Site Admin
example :
name : Ann Example
twitter : example
googleplus : somegoogleaccount
facebook : somefacebookaccount
gravatar : 5658ffccee7f0ebfda2b226238b1eb6e
description : |
This is an example author. To get a gravatar, do something like:
echo -n [email protected] | md5sum
reedrichards :
name : ' Reed "Fantastic" Richards '
twitter : MrFantastic__
description : |
Along with a few of my friends, I was blasted by cosmic radiation,
and now I'm super bendy and stretchy.
We fight crime. Im obigen Snippet sind default , example und reedrichards Spitznamen, die in den Blog -Posts verwendet werden. Alle Felder sind optional, aber wahrscheinlich möchten Sie zumindest einen name .
Beachten Sie, dass einige Zeichen in Zitatmarken entkommen müssen. Im obigen Schnipsel hat das Wort "fantastisch" Zitate um es herum, so dass es einzelne Zitate rund um die Zeichenfolge hat. In den meisten Fällen können Sie die Zitatketten weglassen, aber im Zweifelsfall die Zeichenfolge in Zitate einwickeln.
Die Navigation wird durch eine _data/navigation.yml -Datei gesteuert, wenn sie vorhanden ist.
Fügen Sie einfach Navigationsinformationen im richtigen Format hinzu, und Ihre Website kümmert sich um alle Navigationsanforderungen für Sie, einschließlich des Hervorhebens der aktuellen Seite.
- title : Home
url : " / "
- title : Software
url : /software/
- title : Standards
url : /standards/
- title : Search
url : /search/ Beachten Sie, dass die URL zu "/" in Zitaten ist. Dies ist aufgrund von Yaml erforderlich. Der andere title S und url S überspringen und funktionieren jedoch immer noch.
Sie können sogar Lust bekommen und die Unternavigation hinzufügen, wenn Sie möchten (obwohl Sie aus Benutzerfreundlichkeit wahrscheinlich nicht sollten):
- title : About
url : /about/
nav :
- title : Things
url : /about/things/
- title : FAQ
url : /about/faq/
nav :
- title : Test1
url : /test1
- title : Test2
url : /test2 Die Anpassung der Site findet hauptsächlich an zwei Stellen statt: _config.yml und assets/site.scss (oder assets/site.sass ). Standardmäßig gibt es keine CSS -Datei der Site, sodass Sie sie erstellen müssen.
Die Datei _config.yaml ist ziemlich einfach. Es hat standardmäßig eine Konfiguration, die die Dinge auf ähnliche Weise wie GitHub -Seiten lokal funktioniert.
Weitere Informationen zur Datei _config.yaml finden Sie in der Dokumentation von Jekyll.
Das Erstellen der benutzerdefinierten Site CSS ist einfach. Führen Sie einen der folgenden Befehle aus:
cp assets/default.scss assets/site.scsssass-convert assets/default.scss assets/site.sass verwenden möchtenHinweis : Wenn Sie die Standarddatei in SASS konvertieren, finden Sie die Kommentare zum Ein- und Aus -Importe an der falschen Stelle. Zum Glück ist die Bearbeitung der Kommentare eine einfache einmalige Lösung.
Der nächste Schritt besteht darin, die Site SCSS/SASS -Datei zu bearbeiten.
In der Datei sehen Sie eine Reihe von Variablen oben und viele Importe unter. Die Variablen sind ziemlich selbsterklärend und können Sie das Aussehen Ihrer Website schnell optimieren, ohne CSS tatsächlich bearbeiten zu müssen. Importe sind da, um ein spezielles Styling für Ihre Website zu enthalten. Ein guter Satz von Standardeinstellungen wird eingeschaltet, aber Sie können mehrere ein- und ausschalten, indem Sie sich anschließen, um sich einzuschalten oder zu kommentieren (oder zu löschen), um verschiedene Stile auszuschalten.
Fügen Sie Ihrer Website einen benutzerdefinierten Stil hinzu, der unter allen Importen spezifisch ist.
Lassen Sie Ihr Logo, vorzugsweise im SVG -Format, im Bilderverzeichnis. Nennen Sie es logo.svg (oder logo.png wenn Sie es nicht in SVG verfügbar haben). Das war's! Erledigt!
Exportieren von Faustregel: Verzeichnisse und Dateien, die mit einem Unterstrich beginnen, werden von Jekyll (und einige sind in den meisten Jekyll -Codebasen, wie _layouts .
_data - Datendateien im YAML ( yml ) oder JSON -Format. In flüssigen Tags als site.data. FILENAME . DATA… .
navigation.yml (optional, aber stark empfohlen) - Navigation auf dem Standort verwendetauthors.yml (optional, aber empfohlen) - Informationen zu Blog -Autoren _includes - Partials, die zur Aufnahme in Dokumente und Layouts verwendet werden, nützlich, um eine komplexe HTML & Liquid -Logik abzuziehen, insbesondere wenn sie über die Website wiederverwendet werden können. Include werden als {% include FILENAME.html key=value %} aufgerufen (Schlüssel und Wert sind optional und können alles sein - Wert selbst kann eine Variable oder eine in Anführungszeichen eingeschlossene Zeichenfolge sein).
_layouts -Vorlagen für Seiten, insbesondere HTML-Die meisten bemerkenswerten Layouts sind essential , das "Bare-Bones" -HTML ist und layout: In Frontmatter leer für kein Layout (was für JSON, XML, einfache Text usw. nützlich ist).
_posts - Blog -Beiträge finden Sie hier im Markdown -Format. Beiträge sollten grundlegende Frontmatter enthalten (Yaml oben in der Datei). Der Dateiname ist auch wichtig: YYYY-MM-DD-your-post-short-title-in-lowercase.md . Weitere Informationen erhalten Sie in Blog -Posts die offizielle Jekyll -Dokumentation.
_site - Ausgabe des Jekyll -Kompilierungsprozesses. Dies sollte nicht in Git überprüft werden (und befindet sich bereits im .gitignore ). Bei einer sauberen Git -Kasse existiert dieses Verzeichnis nicht.
assets - Dies ist der Ort für CSS, JavaScript und Schriftarten. Coffecript ( .coffee ) und Sass ( .sass , .scss ) werden unterstützt, da Jekyll sie zu CSS und JavaScript verarbeitet, vorausgesetzt, sie haben eine FrontMatter-Richtlinie (die leer sein kann, wie in zwei unmittelbaren Zeilen von drei Strichen --- ) für verarbeitete Dateien auf oberster Ebene (Dateien, die über Sass enthalten sind, und auch nicht.
fonts - Alle vor Ort servierten Schriftarten sollten hier sein.lib - benutzerdefinierte CSS & JavaScript.vendor - enthalten CSS & JavaScript aus anderen Projekten (z. B. JQuery usw.) blog - Dies ist nicht der Ort für Blog -Beiträge. Es ist jedoch der Ort für Dateien, an denen Blogs funktioniert (die Indexdatei, Autorendatei, Kategoriedateien, Feeds usw.). In den meisten Fällen müssen Sie nicht berühren, was hier ist.
guide -Cockpit-spezifische Führer, als HTML abgeladen und in der Website enthalten.
latest - der neueste Leitfaden. Dies sollten die anderen Seiten verknüpfen. Weitere Leitfäden sind unter ihrer Versionsnummer für die Nachwelt enthalten. images - Bilder leben hier. Dies sind die Bilder -Blog -Beiträge und andere Seiten, auf die normalerweise verlinkt wird.
site -ortsspezifische Bilder (verschiedene Symbole, Logos usw.) sollten hier platziert werden.logo.svg - Logo -Datei in SVG. Die Verwendung logo.png wird ebenfalls unterstützt, die Verwendung eines SVG wird jedoch empfohlen.favicon.png - Große 512px Quadratversion des Site -Symbols.favicon-small.png -kleine 16px quadratische Version des Site-Symbols. Wenn Sie mit GitHub -Seiten auf Github bereitgestellt werden, müssen Sie nur:
Wenn Sie Ihre Seiten zum ersten Mal einrichten, kann es einige Minuten dauern. Bitte sei geduldig.
TIPP : Wenn Ihr Entwicklungsmodell andere in ihren eigenen persönlichen Namespace greift, können sie dieselben Anweisungen befolgen, um ihre eigene Inszenierversion der Website zu haben, um ihre Änderungen zu demonstrieren.
Hinweis : GitHub kann sich über den CNAME "Das CNAME cockpit-project.org" beschweren. Dies ist nur eine Warnung ist in Ordnung und sollte immer noch funktionieren.
Der detaillierte Bereitstellungsprozess liegt außerhalb des Rahmens dieses Dokuments.
Eine schnelle Übersicht wäre jedoch, so etwas wie:
bundle exec jekyll build_site -Verzeichnisses mit Ihrem Webhost mit einigen Mitteln (RSYNC, SFTP usw.)
