Accentsconagua
Share
Eine von Jekylls bemerkenswerten neuen Funktionen ist die Möglichkeit, offizielle Themen in Form von Ruby-Edelsteinen zu erstellen. Diese Designs können von einem Jekyll-Benutzer installiert werden, um das statische Blog oder die Website mit Leichtigkeit zu gestalten, sodass der Inhalt verwaltet werden kann.
Vor diesem neuen Theming-Feature hat Kezz Bracey ein großartiges Tutorial zum Erstellen eines Jekyll-Themas geschrieben. In diesem Tutorial erweitern wir den Beitrag von Kezz, indem wir unsere Vorlage in ein offizielles Jekyll-Designedelstein umwandeln.
Die Jekyll-Kategorie bei Themeforest umfasst eine Reihe von Themen zwischen 16 und 29 US-Dollar. Warum reichen Sie nicht Ihre eigenen ein, die alle als sauberer Ruby-Edelstein verpackt sind?
Jekyll-Themes zu ThemeforestBevor wir loslegen, würde ich empfehlen, dass Sie das vorherige Tutorial durchlesen. Ich gehe davon aus, dass Sie bereits ein mit der Kezz-Methode erstelltes Jekyll-Theme erstellt haben, oder Sie haben sogar eine gut geschriebene Jekyll-Site, die Sie in ein offizielles Jekyll-Theme konvertieren möchten.
Sie müssen die Befehlszeile verwenden, wenn Sie an Ihrem Jekyll-Thema arbeiten, aber wieder einmal hat Kezz Sie behandelt!
Öffnen Sie Ihr Befehlszeilentool und vergewissern Sie sich, dass Sie die neueste Version von Jekyll installiert haben (zum Zeitpunkt dieses Artikels sind es 3.3), indem Sie Folgendes verwenden:
$ gem installiere jekyll
Sie benötigen auch Bundler, ein Juwel für die Verwaltung anderer Edelsteine. Ich werde später erklären, warum Sie das brauchen. Sie können dies mit folgendem installieren:
$ gem install Bundler
Schließlich müssen Sie sich für ein RubyGems.org-Konto anmelden. Auf diese Weise können Sie Ihr Design in die Registrierung verschieben, damit andere Jekyll-Benutzer es herunterladen und verwenden können.
Um uns den Einstieg zu erleichtern, hat Jekyll einen Befehl, nur um ein neues Thema zu erstellen. Suchen Sie in Ihrem Befehlszeilenprogramm das Verzeichnis, in dem Sie arbeiten möchten, und erstellen Sie mit dem folgenden Befehl die Basisdateien für Ihr Design:
$ jekyll New-Theme Awesome-Jekyll-Theme
Sie sollten in Ihrem Arbeitsordner etwas wie die Liste unten sehen:
awesome-jekyll-theme / _includes / _layouts / default.html page.html post.html _sass / assets / Gemfile LICENSE.txt awesome-jekyll-theme.gemspec README.md
Das _layouts /, _ beinhaltet / und _sass / Ordner entsprechen den Ordnern, die Sie in einem normalen Jekyll-Projekt sehen würden, und enthalten alle Ihre Seitenlayouts, "include" (oder "partials") und Sass-Dateien.
Das Vermögenswerte/ Ordner ist für Dateien, die Sie möchten Ausgabe zur Website des Benutzers. Zum Beispiel JavaScript-, Image- oder Style-Dateien. Normalerweise würden Sie diese Dateien dort ablegen js /, css / oder Bilder / Ordner.
awesome-jekyll-theme.gemspec ist die Datei, die Ihr Edelsteinmotiv beschreibt. Hier können Sie den Namen, die Version, eine Beschreibung, eine Homepage und eine Liste von Edelsteinen für Ihren Designedelstein auflisten.
Das Gemfile ist für Bundler, den wir zuvor erwähnt haben. Hiermit werden die Edelsteine verlinkt, die in Ihrem aufgelistet sind .gemspec Datei mit Bundler in Ihrem Befehlszeilenprogramm. Wir werden später Bundler verwenden, um Ihr Design zu testen.
Endlich, das README.md und LIZENZ.txt sind dazu da, um Ihr Theme zu dokumentieren und eine passende Lizenz bereitzustellen. Sie sind wahrscheinlich mit diesen Dateien vertraut, wenn Sie zuvor ein GitHub-Projekt erstellt haben.
Hinweis: Es ist wichtig, Ihr Thema gründlich zu dokumentieren. Auf diese Weise können Benutzer, die Ihr Thema verwenden möchten, dies problemlos tun und die darin enthaltenen Optionen und Steuerelemente verwenden.
Da ein Jekyll-Projekt eine ähnliche Dateistruktur aufweist wie ein Jekyll-Design, können Sie die meisten Ihrer Dateien kopieren. Möglicherweise möchten Sie die bereits vorhandenen Layoutdateien, die mit dem Basisdesign geliefert werden, mit Ihren eigenen überschreiben. Also müssen alle Ihre Layoutdateien in die _layouts / Ordner enthält Ihre in den _ beinhaltet / Ordner und Ihre Sass-Dateien in die _sass / Ordner innerhalb des von Ihnen erstellten Basisdesigns.
Hinweis: Neu bei Sass? Schauen Sie sich diesen Kurs von Adi Purdila an, 14 Tage, um Sass zu lernen
Sie müssen Ihre Hauptstile, JavaScript und grafischen Elemente in der Vermögenswerte/ Mappe. Dies ist ein Schlüsselordner für das Jekyll-Theming, da es das einzige Verzeichnis ist, das auf der Website des Endbenutzers angezeigt wird. Möglicherweise erhalten Sie einen Ordner mit Assets, der folgendermaßen aussieht:
assets / styles.scss scripts.js theme-logo.png
Umgekehrt müssen Sie die Pfade in Ihrem Code aktualisieren, um diese Pfadänderung zu berücksichtigen. Zum Beispiel, css / styles.scss wird sich ändern in assets / styles.scss.
Hinweis: Um sicherzustellen, dass Ihre Pfade in Ihrem Design korrekt sind, möchten Sie möglicherweise etwas auschecken relative_url und absolute_url die kürzlich zu Jekyll hinzugefügt wurden.
Das .gemspec Die Datei enthält grundlegende Informationen zu Ihrem Designedelstein. Das Basis-Jekyll-Design wird mit dieser Datei geliefert, aber Sie müssen die Beispielwerte durch Ihre eigenen ersetzen. Hier ist ein Beispiel .gemspec Datei:
# Codierung: utf-8 Gem :: Specification.new do | spec | spec.name = "awesome-jekyll-theme" spec.version = "0.0.2" spec.authors = ["David Darnes"] spec.email = ["[email protected]"] spec.summary =% q Eine kurze Erklärung für mein fantastisches Edelsteinmotiv. Spec.description = "Eine längere Erklärung für mein fantastisches Edelsteinmotiv, die nicht mit meiner Zusammenfassung übereinstimmt." spec.homepage = "https://alembic.darn.es" spec.license = "MIT" spec.files = git ls-files -z.split ("\ x0"). Wählen Sie | f | f.match (% r ^ (Vermögenswerte | _layouts | _s enthält | _sass | LIZENZ | README) i) spec.add_runtime_dependency "jekyll-seo-tag", "~> 2.0" spec.add_development_dependency "jekyll", "~ > 3.3 "spec.add_development_dependency" Bundler "," ~> 1.12 "Ende
Unten ist ein Überblick darüber, was ich in meinem geändert habe .gemspec Datei:
Das Name sollte der Name Ihres Designs sein, der mit dem übereinstimmen sollte .gemspec Dateiname. Das Ausführung sollte die neueste Nummer Ihres Designedelsteins sein. Das Autoren Es kann sich um eine Liste von Menschen handeln, aber im Moment entwickle ich nur dieses Thema. Email sollte dieselbe E-Mail-Adresse sein, mit der Sie sich für RubyGems.org angemeldet haben.
Das Zusammenfassung und Beschreibung sollten kurze und lange Erklärungen zu Ihrem Designedelstein sein. Sie können entweder das einstellen Startseite zu einer Live-Demo des Themes oder sogar des GitHub-Repos, in dem es sich befindet.
Das Lizenz sollte mit der Lizenz übereinstimmen, die Sie im Designedelstein bereitgestellt haben (die LIZENZ.txt Datei). Das Dateien Der Wert sollte nicht geändert werden, da er die Dateien und Ordner kennzeichnet, die in Ihrem endgültigen Design-Juwel verwendet werden.
Der letzte Teil des .gemspec Datei ist eine Liste von Edelsteinen, die sind erforderlich damit dein Theme korrekt funktioniert. In meinem Beispiel habe ich nur einen Edelstein, der zum Ausführen benötigt wird: jekyll-seo-tag. Die anderen Edelsteine aufgelistet, jekyll und Bündler, sind Entwicklung Edelsteine und werden nur benötigt, wenn jemand das Design-Edelstein entwickelt.
Stellen Sie sicher, dass Sie alle Edelsteine, die Sie für Ihr Design benötigen, in dieser Datei hinzufügen. Eine vollständige Liste der Plugins von Jekyll finden Sie auf ihrer Website.
Nun, da wir unsere Theme-Dateien und unsere haben .gemspec Da die Datei ausgefüllt wurde, können wir jetzt erste Tests durchführen. Wir werden jedoch einige Beispielinhalte benötigen, kopieren Sie also die _config.yml von Ihrem alten Template-Design zusammen mit einigen Markdown-Inhalten. Ein index.md Eine Datei mit etwas Inhalt sollte für einen ersten Test ausreichen, aber Sie möchten vielleicht auch einen Beispielbeitrag hinzufügen. Bloggen ist eine der Hauptfunktionen von Jekyll. Daher empfiehlt es sich, dies zu testen.
Hinweis: Vergewissern Sie sich, dass in Ihrer Vorderseite ein Layout ausgewählt ist, oder Sie können das Design bei einer lokalen Ausführung möglicherweise nicht richtig sehen.
Erinnern Sie sich daran, dass wir Bundler und diese Gemfile im Basisverzeichnis unseres Design-Verzeichnisses installiert haben? Bundler verwendet Gemfiles zur Verwaltung von Gems in Projekten. Wenn Sie diese Datei öffnen, wird Folgendes angezeigt:
Quelle "https://rubygems.org" gemspec
Was diese Datei macht, ist, Bundler mitzuteilen, auf RubyGems.org nach den Edelsteinen in Ihrem zu suchen .gemspec Datei. In diesem Sinne testen wir Ihr Thema.
Verwenden Sie in Ihrem Befehlszeilentool den folgenden Befehl, um alle für Ihr Designedelstein benötigten Edelsteine zu installieren:
$ bundle install
Dies sollte alle Designs in Ihrem installieren .gemspec, was in meinem Beispiel nur sein würde jekyll-seo-tag. Jetzt können wir das Thema lokal ausführen mit:
$ Bündel Exec Jekyll dienen
Sie sollten dann in der Lage sein, Ihr Thema unter http: // localhost: 4000 anzuzeigen. Wenn ein Fehler auftritt, kann dies daran liegen, dass Sie einen Edelstein in Ihrem System vermissen .gemspec Datei.
Hinweis: Möglicherweise müssen Sie Edelsteine in Ihrer Whitelist aufnehmen _config.yml Datei, falls Sie dies noch nicht getan haben, und geben Sie sie in Ihrer Datei an .gemspec. Wenn Sie Schwierigkeiten haben, sich mit Jekyll auseinanderzusetzen, hat Guy Routledge einen großartigen Kurs für Tuts + zum Erstellen statischer Websites mit Jekyll erstellt.
Als Nächstes werden Sie ein wenig Zeit damit verbringen, Ihr Design zu verfeinern, um sicherzustellen, dass es mit einer Vielzahl von Inhaltsformaten und -größen funktioniert. Möglicherweise möchten Sie auch Anpassungsoptionen berücksichtigen, entweder über eine globale Einstellung in der _config.yml oder auf separaten seiten in der vorderseite.
Der Benutzer hat die Möglichkeit, jede Datei in Ihrem Design-Gem mit einer eigenen Datei auf ihrer eigenen Jekyll-Site zu überschreiben. Zum Beispiel, wenn Sie haben _includes / header.html In Ihrem Designedelstein das Thema Nutzer kann diese Datei mit überschreiben _includes / header.html auf ihrer eigenen Seite. Möglicherweise möchten Sie darüber nachdenken, Ihr Design so flexibel zu gestalten, dass der Benutzer des Themes Ihre Dateien problemlos überschreiben kann, um die eigene Website einzigartig zu machen.
Wenn Sie Ihrem Design Anpassungen hinzufügen, benötigen Sie dazu eine Dokumentation. Es ist sehr wichtig, Ihren Edelstein zu dokumentieren. Wenn die Dokumentation schlecht ist, möchten die Leute das Thema nicht verwenden.
Hier sind einige der Dinge, die ich in der Dokumentation eines Themas erwarten würde:
All dies kann im aufgelistet werden README.md, Das wurde erstellt, als wir das Basis-Jekyll-Thema erstellten. Wenn das Design an RubyGems.org weitergeleitet wird, wird die Liesmich-Datei verarbeitet und auf der Edelstein-Seite angezeigt, damit Personen darauf zugreifen können.
Zusammen mit Ihrer Dokumentation würde ich Ihnen empfehlen, einige Demo-Inhalte bereitzustellen, damit die Benutzer mit Ihrem Thema beginnen können. EIN _config.yml, index.md Eine Beispiel-Post-Datei, ähnlich derjenigen, mit der Sie Ihr Thema zuvor getestet haben, sollte zusammen mit einer Gemfile-Datei ausreichen. Es sollte zwar nur erforderlich sein, dass der Benutzer den Edelstein zu seinem Gemfile hinzufügt, es wäre jedoch sehr hilfreich, ein Beispiel für die Einrichtung bereitzustellen, das er sofort herunterladen und verwenden kann.
Sie müssen einen Screenshot für Ihr Thema bereitstellen, wie in der offiziellen Jekyll-Dokumentation angegeben, und den Namen angeben screenshot.png. Auf diese Weise können die Benutzer nicht nur sehen, wie Ihr Thema auf einen Blick aussieht, sondern es wird auch eine Konsistenz aller Jekyll-Themen gewährleistet, so dass sie in Zukunft in einer Galerie oder Admin-Benutzeroberfläche angezeigt werden können.
Wenn Sie mit Ihrem Design zufrieden sind und es getestet und dokumentiert haben, müssen Sie es in die RubyGems.org-Registrierung aufnehmen, damit andere es verwenden können.
Suchen Sie Ihren Designedelstein mit Ihrem Befehlszeilentool und verwenden Sie Folgendes:
gem build awesome-jekyll-theme.gemspec
Stellen Sie sicher, dass der Name des übereinstimmt .gemspec Datei in Ihrem Design mit dem oben gezeigten Befehl. Dadurch wird eine Datei mit dem Namen erstellt awesome-jekyll-theme-0.0.2.gem, Welches ist dein offizielles Jekyll-Designjuwel! Als Nächstes müssen Sie Ihren Edelstein auf RubyGems.org hochstufen. Verwenden Sie in Ihrem Befehlszeilenprogramm Folgendes:
gem push awesome-jekyll-theme-0.0.2.gem
Wenn Sie zum ersten Mal einen Edelstein an RubyGems.org senden, werden Sie aufgefordert, sich mit den Details anzumelden, die Sie zur Anmeldung verwendet haben. Danach sollte der Edelstein in die Registrierung verschoben werden, sodass Ihr Design-Edelstein veröffentlicht wurde.
Hinweis: Bei den meisten Befehlszeilenprogrammen schreiben Sie die ersten Buchstaben einer Datei und drücken dann Tab, Der Rest des Dateinamens sollte automatisch vervollständigt werden, solange keine andere Datei mit den gleichen Buchstaben im selben Ordner beginnt.
Sobald dies geschehen ist, müssen Sie weitere Tests durchführen und Ihre eigenen Anweisungen zur Installation und Verwendung des Designedelms befolgen. Die Anweisungen sollten denen auf der offiziellen Jekyll-Site ziemlich ähnlich sein.
Wenn Sie sich an dieses Tutorial halten, sollten Sie sich diese Ressourcen ansehen, wenn Sie Ihr eigenes Jekyll-Design-Juwel erstellen möchten:
