jekyll theme basically basic
1.4.5 - 2021-07-05
Grundsätzlich handelt es sich bei Basic um ein Jekyll-Theme, das als Ersatz für das Standard-Minima gedacht ist, mit einigen zusätzlichen Verbesserungen:
Wenn Sie Jekyll v3.5+ verwenden und selbst hosten, können Sie das Theme schnell als Ruby-Juwel installieren. Wenn Sie mit GitHub Pages hosten, können Sie es als Remote-Theme installieren oder alle Theme-Dateien (siehe Struktur unten) direkt in Ihr Projekt kopieren.
Fügen Sie diese Zeile zur Gemfile Ihrer Jekyll-Site hinzu:
gem "jekyll-theme-basically-basic" Fügen Sie diese Zeile zur _config.yml Datei Ihrer Jekyll-Site hinzu:
theme : jekyll-theme-basically-basicFühren Sie dann Bundler aus, um das Theme-Gem und die Abhängigkeiten zu installieren:
bundle install
GitHub Pages bietet volle Unterstützung für alle von GitHub gehosteten Themes.
Ersetzen Sie gem "jekyll" durch:
gem "github-pages" , group : :jekyll_plugins Führen Sie bundle update aus und überprüfen Sie, ob alle Gems ordnungsgemäß installiert werden.
Fügen Sie remote_theme: "mmistakes/[email protected]" zu Ihrer _config.yml Datei hinzu. Entfernen Sie alle anderen theme: - oder remote_theme: -Einträge.
Hinweis: Ihre Jekyll-Site sollte sofort unter http://USERNAME.github.io sichtbar sein. Ist dies nicht der Fall, können Sie eine Neuerstellung erzwingen, indem Sie Ihre Website anpassen (weitere Einzelheiten siehe unten).
Wenn Sie mehrere Jekyll-basierte Websites unter demselben GitHub-Benutzernamen hosten, müssen Sie Projektseiten anstelle von Benutzerseiten verwenden. Im Wesentlichen benennen Sie das Repo in etwas anderes als USERNAME.github.io um und erstellen einen gh-pages -Zweig von master . Weitere Informationen zum Einrichten finden Sie in der Dokumentation von GitHub.
Wenn Sie das jekyll-theme-basically-basic Repo geforkt oder heruntergeladen haben, können Sie die folgenden Dateien und Ordner sicher entfernen:
.editorconfig.gitattributes.github.scss-lint.ymlCHANGELOG.mdjekyll-theme-basically-basic.gemspecLICENSERakefileREADME.mdscreenshot.png/docs/exampleWenn Sie Ruby Gem oder Remote-Theme-Versionen von Basically Basic verwenden, ist das Upgrade ziemlich einfach.
Um zu überprüfen, welche Version Sie derzeit verwenden, sehen Sie sich die Quelle Ihrer erstellten Site an und sollten etwas Ähnliches tun:
<!--
Basically Basic Jekyll Theme 1.4.5
Copyright 2017-2018 Michael Rose - mademistakes.com | @mmistakes
Free for personal and commercial use under the MIT license
https://github.com/mmistakes/jekyll-basically-theme/blob/master/LICENSE
-->
Oben in jeder .html Datei: /assets/css/main.css und /assets/js/main.js .
Führen Sie einfach bundle update aus, wenn Sie Bundler verwenden (ein Gemfile haben) oder gem update jekyll-theme-basically-basic wenn Sie dies nicht tun.
Stellen Sie sicher, dass Ihnen in _config.yml die neueste Version zugewiesen ist
remote_theme: "mmistakes/[email protected]"
Hinweis: Wenn @xxx weggelassen wird, wird der aktuelle master Zweig des Themes verwendet. Es wird empfohlen, remote_theme auf eine bestimmte Version zu „sperren“, um zu verhindern, dass wichtige Änderungen an Ihrer Site vorgenommen werden.
Im nächsten Schritt müssen Sie Ihre GitHub Pages-Site neu erstellen, damit sie die neuesten Theme-Updates herunterladen kann. Dies kann erreicht werden, indem Sie ein Commit für Ihr GitHub-Repo hochladen.
Ein leeres Commit erledigt den Job auch, wenn Sie im Moment nichts zum Pushen haben:
git commit --allow-empty -m "Force rebuild of site"
Wenn Sie den Jekyll + GitHub Pages-Workflow optimal nutzen möchten, müssen Sie Git verwenden. Um Theme-Updates herunterzuladen, müssen Sie zunächst sicherstellen, dass eine Upstream-Remote vorhanden ist. Wenn Sie das Repo des Themes geforkt haben, können Sie wahrscheinlich loslegen.
Um dies noch einmal zu überprüfen, führen Sie git remote -v aus und stellen Sie sicher, dass Sie vom origin https://github.com/mmistakes/jekyll-theme-basically-basic.git abrufen können.
Um es hinzuzufügen, können Sie Folgendes tun:
git remote add upstream https://github.com/mmistakes/jekyll-theme-basically-basic.git
Jetzt können Sie alle an den master -Zweig des Themes vorgenommenen Commits abrufen mit:
git pull upstream master
Abhängig von der Menge an Anpassungen, die Sie nach dem Forken vorgenommen haben, kann es zu Zusammenführungskonflikten kommen. Gehen Sie alle widersprüchlichen Git-Flags durch, stellen Sie die Änderungen bereit, die Sie behalten möchten, und übernehmen Sie sie dann.
Eine andere Möglichkeit, mit Updates umzugehen, besteht darin, das Theme herunterzuladen – indem Sie Ihre Layouts, Includes und Assets manuell durch die neueren ersetzen. Um sicherzustellen, dass Sie keine Änderungen verpassen, ist es wahrscheinlich eine gute Idee, den Commit-Verlauf des Themas zu überprüfen, um zu sehen, was sich seitdem geändert hat.
Hier ist eine kurze Checkliste der wichtigen Ordner/Dateien, auf die Sie achten sollten:
| Name | |
|---|---|
_layouts | Alles ersetzen. Wenden Sie Änderungen an, wenn Sie Layouts angepasst haben. |
_includes | Alles ersetzen. Wenden Sie die Änderungen an, wenn Sie Include-Dateien angepasst haben. |
assets | Alles ersetzen. Wenden Sie Änderungen an, wenn Sie Stylesheets oder Skripte angepasst haben. |
_sass | Alles ersetzen. Wenden Sie Änderungen an, wenn Sie Sass-Teiltöne angepasst haben. |
_data/theme.yml | Sicher aufzubewahren. Stellen Sie sicher, dass keine größeren baulichen Änderungen oder Ergänzungen vorgenommen wurden. |
_config.yml | Sicher aufzubewahren. Stellen Sie sicher, dass keine größeren baulichen Änderungen oder Ergänzungen vorgenommen wurden. |
Hinweis: Wenn Sie nicht die neueste Version sehen, leeren Sie unbedingt die Browser- und CDN-Caches. Abhängig von Ihrer Hosting-Umgebung können ältere Versionen von /assets/css/main.css , /assets/js/main.js oder *.html zwischengespeichert werden.
Layouts, Includes, Sass-Partials und Datendateien werden alle an ihren Standardspeicherorten abgelegt. Stylesheets und Skripte in assets sowie einige entwicklungsbezogene Dateien im Stammverzeichnis des Projekts.
Bitte beachten Sie: Wenn Sie Basicly Basic über die Ruby Gem-Methode installiert haben, fehlen die Designdateien in /_layouts , /_includes , /_sass und /assets . Das ist normal, da sie mit dem jekyll-theme-basically-basic Juwel gebündelt sind.
jekyll-theme-basically-basic
├── _data # data files
| └── theme.yml # theme settings and custom text
├── _includes # theme includes and SVG icons
├── _layouts # theme layouts (see below for details)
├── _sass # Sass partials
├── assets
| ├── javascripts
| | └── main.js
| └── stylesheets
| └── main.scss
├── _config.yml # sample configuration
└── index.md # sample home page (all posts/not paginated)
Nachdem Sie eine Gemfile erstellt und das Theme installiert haben, müssen Sie die folgenden Dateien hinzufügen und bearbeiten:
_config.yml/_data/theme.ymlindex.mdHinweis: Anweisungen zur Aktivierung für die Startseite finden Sie in der Dokumentation zur Paginierung weiter unten.
jekyll new Mit dem Befehl jekyll new können Sie am schnellsten loslegen.
Bearbeiten Sie _config.yml und erstellen Sie _data/theme.yml wie oben beschrieben, und schon kann es losgehen.
Die Konfiguration von Site-weiten Elementen ( lang , title , description , logo , author usw.) erfolgt in der _config.yml Ihres Projekts. Weitere Referenzen finden Sie in der Beispielkonfiguration in diesem Repo.
| Beschreibung | |
|---|---|
lang | Wird verwendet, um die Sprache des Textes anzugeben (z. B. en-US, en-GB, fr) |
title | Der Titel Ihrer Website (z. B. Dungan's Awesome Site) |
description | Kurze Beschreibung der Website (z. B. Ein Blog über Heuschreckenbrei) |
url | Die vollständige URL zu Ihrer Website (z. B. https://groverloaf.org) |
author | Globale Autoreninformationen (siehe unten) |
logo | Pfad zu einem Site-weiten Logo ~100x100px (z. B. /assets/your-company-logo.png) |
twitter_username | Siteweit gültiger Twitter-Benutzername, der als Link in der Seitenleiste verwendet wird |
github_username | Site-weiter GitHub-Benutzername, der als Link in der Seitenleiste verwendet wird |
Weitere Konfigurationsoptionen finden Sie in der Dokumentation zu jekyll-seo-tag , jekyll-feed , jekyll-paginate und jekyll-sitemap .
Dieses Thema gibt es in sechs verschiedenen Skins (Farbvarianten). Um Skins zu ändern, fügen Sie Ihrer Datei /_data/theme.yml eines der folgenden Elemente hinzu:
skin: default | skin: night | skin: plum |
|---|---|---|
skin: sea | skin: soft | skin: steel |
|---|---|---|
Dieses Theme ermöglicht Ihnen die einfache Verwendung von Google Fonts im gesamten Theme. Fügen Sie einfach Folgendes zu Ihrer /_data/theme.yml hinzu und ersetzen Sie den name und weights entsprechend.
google_fonts :
- name : " Fira Sans "
weights : " 400,400i,600,600i "
- name : " Fira Sans Condensed " Um im gesamten Design gefundenen Text zu ändern, fügen Sie Folgendes zu Ihrer /_data/theme.yml hinzu und passen Sie es nach Bedarf an.
t :
skip_links : " Skip links "
skip_primary_nav : " Skip to primary navigation "
skip_content : " Skip to content "
skip_footer : " Skip to footer "
menu : " Menu "
search : " Search "
site_search : " Site Search "
results_found : " Result(s) found "
search_placeholder_text : " Enter your search term... "
home : " Home "
newer : " Newer "
older : " Older "
email : " Email "
subscribe : " Subscribe "
read_more : " Read More "
posts : " Posts "
page : " Page "
of : " of "
min_read : " min read "
present : " Present "
cv_awards : " Awards "
cv_summary_contact : " Contact "
cv_summary_contact_email : " Email "
cv_summary_contact_phone : " Phone "
cv_summary_contact_website : " Website "
cv_location : " Location "
cv_education : " Education "
cv_education_courses : " Courses "
cv_interests : " Interests "
cv_languages : " Languages "
cv_publications : " Publications "
cv_references : " References "
cv_skills : " Skills "
cv_volunteer : " Volunteer "
cv_work : " Work " Standardmäßig werden alle internen Seiten mit einem title zum „Off-Canvas“-Menü hinzugefügt. Für eine detailliertere Steuerung und Sortierung dieser Menülinks:
Erstellen Sie eine benutzerdefinierte Liste, um die Standardeinstellung zu überschreiben, indem Sie Ihrer Datei /_data/theme.yml ein navigation_pages Array hinzufügen.
Fügen Sie rohe Seitenpfade in der gewünschten Reihenfolge hinzu:
navigation_pages :
- about.md
- cv.md Der Titel und die URL jedes Menü-Links werden basierend auf ihrem title bzw. permalink ausgefüllt.
Teilen Sie die Hauptliste der Beiträge in kleinere Listen auf und zeigen Sie sie auf mehreren Seiten an, indem Sie die Paginierung aktivieren.
Fügen Sie das jekyll-paginate -Plugin in Ihre Gemfile ein.
group :jekyll_plugins do
gem "jekyll-paginate"
end Fügen Sie jekyll-paginate zum gems Array in Ihrer _config.yml Datei und den folgenden Paginierungseinstellungen hinzu:
paginate : 5 # amount of posts to show per page
paginate_path : /page:num/ Erstellen Sie index.html (oder benennen Sie index.md um) im Stammverzeichnis Ihres Projekts und fügen Sie den folgenden Titeltext hinzu:
layout : home
paginate : true Um die Site-weite Suche zu aktivieren, fügen Sie search: true zu Ihrer _config.yml hinzu.
Die Standardsuche verwendet Lunr, um einen Suchindex aller Ihrer Dokumente zu erstellen. Diese Methode ist zu 100 % kompatibel mit Websites, die auf GitHub Pages gehostet werden.
Hinweis: Nur die ersten 50 Wörter des Hauptinhalts eines Beitrags oder einer Seite werden dem Lunr-Suchindex hinzugefügt. Wenn Sie search_full_content in Ihrer _config.yml auf true setzen, wird dies überschrieben und könnte sich auf die Seitenladeleistung auswirken.
Für eine schnellere und relevantere Suche (siehe Demo):
Fügen Sie den Edelstein jekyll-algolia zu Ihrer Gemfile im Abschnitt :jekyll_plugins hinzu.
group :jekyll_plugins do
gem "jekyll-feed"
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-paginate"
gem "jekyll-algolia"
end Sobald dies erledigt ist, laden Sie alle Abhängigkeiten herunter, indem Sie bundle install ausführen.
Wechseln Sie in Ihrer _config.yml Datei den Suchanbieter von lunr zu algolia :
search_provider : algolia Fügen Sie die folgenden Algolia-Anmeldeinformationen zu Ihrer _config.yml Datei hinzu. Wenn Sie kein Algolia-Konto haben, können Sie einen kostenlosen Community-Plan eröffnen. Sobald Sie sich angemeldet haben, können Sie Ihre Anmeldeinformationen von Ihrem Dashboard abrufen.
algolia :
application_id : # YOUR_APPLICATION_ID
index_name : # YOUR_INDEX_NAME
search_only_api_key : # YOUR_SEARCH_ONLY_API_KEY
powered_by : # true (default), falseSobald Ihre Anmeldeinformationen eingerichtet sind, können Sie die Indizierung mit dem folgenden Befehl ausführen:
ALGOLIA_API_KEY=your_admin_api_key bundle exec jekyll algolia
Für Windows-Benutzer müssen Sie set verwenden, um die Umgebungsvariable ALGOLIA_API_KEY zuzuweisen.
set ALGOLIA_API_KEY=your_admin_api_key
bundle exec jekyll algolia
Beachten Sie, dass ALGOLIA_API_KEY auf Ihren Admin-API-Schlüssel gesetzt werden sollte.
Um die Algolia-Suche mit von GitHub Pages gehosteten Websites zu verwenden, befolgen Sie diese Bereitstellungsanleitung. Oder dieser Leitfaden für die Bereitstellung auf Netlify.
Hinweis: Das Jekyll Algolia-Plugin kann auf verschiedene Arten konfiguriert werden. Sehen Sie sich unbedingt die vollständige Dokumentation zum Ausschließen von Dateien und anderen wertvollen Einstellungen an.
Autoreninformationen werden als Metadaten für Beiträge „zeilenweise“ verwendet und verbreiten das creator von Twitter-Zusammenfassungskarten mit dem folgenden Titelthema in _config.yml :
author :
name : John Doe
twitter : johndoetwitter
picture : /assets/images/johndoe.pngWebsiteweite Autoreninformationen können im Titelblatt eines Dokuments auf die gleiche Weise überschrieben werden:
author :
name : Jane Doe
twitter : janedoetwitter
picture : /assets/images/janedoe.png Oder indem Sie einen entsprechenden Schlüssel im Titelblatt des Dokuments angeben, der in site.data.authors vorhanden ist. Beispielsweise steht im Titelblatt des Dokuments Folgendes:
author : megaman Und Sie haben Folgendes in _data/authors.yml :
megaman :
name : Mega Man
twitter : megamantwitter
picture : /assets/images/megaman.png
drlight :
name : Dr. Light
twitter : drlighttwitter
picture : /assets/images/drlight.png Derzeit wird author.picture nur im layout: about verwendet. Die empfohlene Größe beträgt 300 x 300 Pixel.
Um die Zählung der Lesezeit zu aktivieren, fügen Sie read_time: true zum YAML-Front Matter eines Beitrags oder einer Seite hinzu.
Wenn Sie über ein Disqus-Konto verfügen, können Sie optional unter jedem Beitrag einen Kommentarbereich anzeigen.
Um Disqus-Kommentare zu aktivieren, fügen Sie Ihren Disqus-Kurznamen zur Datei _config.yml Ihres Projekts hinzu:
disqus :
shortname : my_disqus_shortname Kommentare sind standardmäßig aktiviert und werden nur in der Produktion angezeigt, wenn sie mit dem folgenden Umgebungswert erstellt werden: JEKYLL_ENV=production
Wenn Sie für einen bestimmten Beitrag keine Kommentare anzeigen möchten, können Sie diese deaktivieren, indem Sie comments: false zur Titelseite dieses Beitrags hinzufügen.
Um Google Analytics zu aktivieren, fügen Sie Ihre Tracking-ID wie folgt zu _config.yml hinzu:
google_analytics : UA-NNNNNNNN-N Ähnlich wie bei Kommentaren wird das Google Analytics-Tracking-Skript nur in der Produktion angezeigt, wenn der folgende Umgebungswert verwendet wird: JEKYLL_ENV=production .
Standardmäßig zeigt die Copyright-Zeile in der Fußzeile das aktuelle Jahr (zum Zeitpunkt der Erstellung) gefolgt vom Titel Ihrer Website an. zB © 2018 Basically Basic.
Wenn Sie dies ändern möchten, fügen Sie Ihrer _config.yml Datei copyright mit entsprechendem Text hinzu:
copyright : " My custom copyright. " Dieses Thema bietet die folgenden Layouts, die Sie verwenden können, indem Sie das layout „Front Matter“ auf jeder Seite festlegen, etwa so:
---
layout : name
---layout: default Dieses Layout übernimmt das gesamte grundlegende Seitengerüst und platziert den Seiteninhalt zwischen den Impressum- und Fußzeilenelementen. Alle anderen Layouts erben dieses und bieten zusätzliche Stile und Funktionen innerhalb des {{ content }} -Blocks.
layout: postDieses Layout bietet Platz für die folgende Titelseite:
# optional alternate title to replace page.title at the top of the page
alt_title : " Basically Basic "
# optional sub-title below the page title
sub_title : " The name says it all "
# optional intro text below titles, Markdown allowed
introduction : |
Basically Basic is a Jekyll theme meant to be a substitute for the default --- [Minima](https://github.com/jekyll/minima). Conventions and features found in Minima are fully supported by **Basically Basic**.
# optional call to action links
actions :
- label : " Learn More "
icon : github # references name of svg icon, see full list below
url : " http://url-goes-here.com "
- label : " Download "
icon : download # references name of svg icon, see full list below
url : " http://url-goes-here.com "
image : # URL to a hero image associated with the post (e.g., /assets/page-pic.jpg)
# post specific author data if different from what is set in _config.yml
author :
name : John Doe
twitter : johndoetwitter
comments : false # disable comments on this postHinweis: Heldenbilder können mit einer transparenten „Akzentfarbe“ überlagert werden, um sie mit der Themenpalette zu vereinheitlichen. Passen Sie zum Aktivieren das CSS mit der folgenden Sass-Variablenüberschreibung an:
$intro-image-color-overlay : true;layout: page Optisch sieht dieses Layout genauso aus und verhält sich genauso wie layout: post , mit zwei kleinen Unterschieden.
layout: home Dieses Layout enthält die gleiche Titelseite wie layout: page , mit dem Zusatz Folgendes:
paginate : true # enables pagination loop, see section above for additional setup
entries_layout : # list (default), grid Standardmäßig werden Beiträge in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu.
layout: posts In diesem Layout werden alle Beiträge nach dem Jahr ihrer Veröffentlichung gruppiert angezeigt. Es enthält die gleiche Titelseite wie layout: page .
Standardmäßig werden Beiträge in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu.
layout: categories In diesem Layout werden alle Beiträge nach Kategorien gruppiert angezeigt. Es enthält die gleiche Titelseite wie layout: page .
Standardmäßig werden Beiträge in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu.
layout: tags In diesem Layout werden alle Beiträge nach Tags gruppiert angezeigt. Es enthält die gleiche Titelseite wie layout: page .
Standardmäßig werden Beiträge in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu.
layout: collection In diesem Layout werden alle Dokumente nach einer bestimmten Sammlung gruppiert angezeigt. Es enthält die gleiche Titelseite wie layout: page mit dem Zusatz Folgendes:
collection : # collection name
entries_layout : # list (default), grid
show_excerpts : # true (default), false
sort_by : # date (default) title
sort_order : # forward (default), reverse Um eine Seite zu erstellen, auf der alle Dokumente in der recipes angezeigt werden, erstellen Sie recipes.md im Stammverzeichnis Ihres Projekts und fügen diese Titelseite hinzu:
title : Recipes
layout : collection
permalink : /recipes/
collection : recipes Standardmäßig werden Dokumente in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu. Wenn Sie die Sammlung nach Titel sortieren möchten, fügen Sie sort_by: title hinzu. Wenn Sie eine umgekehrte Sortierung wünschen, fügen Sie sort_order: reverse hinzu.
layout: category In diesem Layout werden alle Beiträge nach einer bestimmten Kategorie gruppiert angezeigt. Es enthält die gleiche Titelseite wie layout: page mit dem Zusatz Folgendes:
taxonomy : # category name
entries_layout : # list (default), grid Standardmäßig werden Beiträge in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu.
Um eine Seite mit allen Beiträgen zu erstellen, die der Kategorie foo zugeordnet sind, erstellen Sie foo.md im Stammverzeichnis Ihres Projekts und fügen diese Titelangelegenheit hinzu:
title : Foo
layout : category
permalink : /categories/foo/
taxonomy : foolayout: tag In diesem Layout werden alle Beiträge nach einem bestimmten Tag gruppiert angezeigt. Es enthält die gleiche Titelseite wie layout: page mit dem Zusatz Folgendes:
taxonomy : # tag name
entries_layout : # list (default), grid Standardmäßig werden Beiträge in einer Listenansicht angezeigt. Um zu einer Rasteransicht zu wechseln, fügen Sie entries_layout: grid zum Titelblatt der Seite hinzu.
Um eine Seite mit allen Beiträgen zu erstellen, die dem Tag foo bar zugewiesen sind, erstellen Sie foo-bar.md im Stammverzeichnis Ihres Projekts und fügen Sie diese Titelangelegenheit hinzu:
title : Foo Bar
layout : tag
permalink : /tags/foo-bar/
taxonomy : foo barlayout: about Dieses Layout enthält das gleiche Titelthema wie layout: page , mit dem Zusatz Folgendes, um ein Autorenbild anzuzeigen:
author :
name : John Doe
picture : /assets/images/johndoe.png Die empfohlene picture beträgt ca. 300 x 300 Pixel. Wenn das author nicht explizit im Titelthema der About-Seite festgelegt ist, wird für das Design standardmäßig der in _config.yml festgelegte Wert verwendet.
Wenn es leer ist, wird kein Bild angezeigt.
layout: cv Dieses Layout enthält die gleiche Titelseite wie layout: page . Es nutzt einen JSON-basierten Dateistandard für Lebenslaufdaten, um einen Lebenslauf oder Lebenslauf bequem und problemlos zu erstellen.
Verwenden Sie einfach den Browser-Lebenslauf-Builder von JSON Resume, um eine JSON-Datei zu exportieren und in Ihrem Projekt als _data/cv.json zu speichern.
Die empfohlenen Bildgrößen in Pixel lauten wie folgt:
| Bild | Beschreibung | Größe |
|---|---|---|
page.image.path | Großes Dokumentbild in voller Breite. | Hohe Bilder drängen den Inhalt auf der Seite nach unten. 1600 x 600 ist eine gute anzustrebende Mittelmaßgröße. |
page.image | Abkürzung für page.image.path bei alleiniger Verwendung (ohne thumbnail , caption oder andere Variablen). | Identisch mit page.image.path |
page.image.thumbnail | Kleines Dokumentbild, das in der Rasteransicht verwendet wird. | 400 x 200 |
author.picture | Bild der Autorenseite. | 300 x 300 |
Die Standardstruktur, der Standardstil und die Skripte dieses Themas können auf die folgenden zwei Arten überschrieben und angepasst werden.
Theme-Standardeinstellungen können überschrieben werden, indem Sie eine Datei mit demselben Namen im Verzeichnis _includes oder _layouts Ihres Projekts ablegen. Zum Beispiel:
_includes/head.html anzugeben, erstellen Sie ein Verzeichnis _includes in Ihrem Projekt, kopieren Sie _includes/head.html aus dem Gem-Ordner von Basically Basic nach <your_project>/_includes und beginnen Sie mit der Bearbeitung dieser Datei. Profi-Tipp: Um die Dateien des Themes auf Ihrem Computer zu finden, führen Sie bundle info jekyll-theme-basically-basic aus. Dies gibt den Speicherort der gem-basierten Designdateien zurück.
Um das Standard-Sass (im _sass -Verzeichnis des Themes) zu überschreiben, führen Sie einen der folgenden Schritte aus:
Kopieren Sie direkt aus dem Basicly Basic-Juwel
bundle info jekyll-theme-basically-basic aus, um den Pfad dorthin zu erhalten)./assets/stylesheets/main.scss von dort nach <your_project> .<your_project>/assets/stylesheets/main.scss an, was Sie möchten.Kopie aus diesem Repo.
<your_project> .<your_project/assets/stylesheets/main.scss was Sie möchten. Hinweis: Um umfangreichere Änderungen vorzunehmen und die im Gem gebündelten Sass-Partials anzupassen. Aufgrund der Art und Weise, wie Jekyll diese Dateien derzeit liest, müssen Sie den gesamten Inhalt des _sass -Verzeichnisses nach <your_project> kopieren.
Um grundlegende Änderungen am Stil des Themes vorzunehmen, können Sass-Variablen überschrieben werden, indem sie zu <your_project>/assets/stylesheets/main.scss hinzugefügt werden. Um beispielsweise die im gesamten Design verwendete Akzentfarbe zu ändern, fügen Sie Folgendes hinzu:
$accent-color : red ;Um das im Design gebündelte Standard-JavaScript zu überschreiben, führen Sie einen der folgenden Schritte aus:
Kopieren Sie direkt aus dem Basicly Basic-Juwel
bundle info jekyll-theme-basically-basic aus, um den Pfad dorthin zu erhalten)./assets/javascripts/main.js von dort nach <your_project> .<your_project>/assets/javascripts/main.js an, was Sie möchten.Kopie aus diesem Repo.
<your_project> .<your_project>/assets/javascripts/main.js an, was Sie möchten. Das Thema verwendet Logos sozialer Netzwerke und andere Ikonografien, die aus Gründen der Leistung und Flexibilität als SVGs gespeichert sind. Diese SVGs befinden sich im Verzeichnis _includes und haben das Präfix icon- . Jedes Symbol wurde so dimensioniert und gestaltet, dass es in eine 16 x 16 Ansichtsbox passt, und mit SVGO optimiert.
| Symbol | Dateiname |
|---|---|
| icon-arrow-left.svg | |
| icon-arrow-right.svg | |
| icon-bitbucket.svg | |
| icon-calendar.svg | |
| icon-codepen.svg | |
| icon-download.svg | |
| icon-dribbble.svg | |
| icon-email.svg | |
| icon-facebook.svg | |
| icon-flickr.svg | |
| icon-github.svg | |
| icon-gitlab.svg | |
| icon-googleplus.svg | |
| icon-instagram.svg | |
| icon-lastfm.svg | |
| icon-linkedin.svg | |
| icon-pdf.svg | |
| icon-pinterest.svg | |
| icon-rss.svg | |
| icon-soundcloud.svg | |
| icon-stackoverflow.svg | |
| icon-stopwatch.svg | |
| icon-tumblr.svg | |
| icon-twitter.svg | |
| icon-xing.svg | |
| icon-youtube.svg |
Füllfarben werden im Teil _sass/basically-basic/_icons.scss definiert und mit .icon-name festgelegt, wobei der Klassenname mit dem entsprechenden Symbol übereinstimmt.
Beispielsweise erhält das Twitter-Symbol die Füllfarbe #1da1f2 wie folgt:
< span class =" icon icon--twitter " > {% include icon-twitter.svg %} </ span >Neben den SVG-Assets gibt es Icon-Hilfsfunktionen, die beim Generieren von Links zu sozialen Netzwerken helfen.
| Parameter einschließen | Beschreibung | Erforderlich |
|---|---|---|
username | Benutzername im angegebenen sozialen Netzwerk | Erforderlich |
label | Text, der für den Hyperlink verwendet wird | Optional, standardmäßig wird username verwendet |
Die folgende icon-github.html enthält beispielsweise:
{% include icon-github . html username = jekyll label = 'GitHub' %}Gibt den folgenden HTML-Code aus:
< a href =" https://github.com/jekyll " >
< span class =" icon icon--github " > < svg viewBox =" 0 0 16 16 " xmlns =" http://www.w3.org/2000/svg " fill-rule =" evenodd " clip-rule =" evenodd " stroke-linejoin =" round " stroke-miterlimit =" 1.414 " > < path d =" M8 0C3.58 0 0 3.582 0 8c0 3.535 2.292 6.533 5.47 7.59.4.075.547-.172.547-.385 0-.19-.007-.693-.01-1.36-2.226.483-2.695-1.073-2.695-1.073-.364-.924-.89-1.17-.89-1.17-.725-.496.056-.486.056-.486.803.056 1.225.824 1.225.824.714 1.223 1.873.87 2.33.665.072-.517.278-.87.507-1.07-1.777-.2-3.644-.888-3.644-3.953 0-.873.31-1.587.823-2.147-.09-.202-.36-1.015.07-2.117 0 0 .67-.215 2.2.82.64-.178 1.32-.266 2-.27.68.004 1.36.092 2 .27 1.52-1.035 2.19-.82 2.19-.82.43 1.102.16 1.915.08 2.117.51.56.82 1.274.82 2.147 0 3.073-1.87 3.75-3.65 3.947.28.24.54.73.54 1.48 0 1.07-.01 1.93-.01 2.19 0 .21.14.46.55.38C13.71 14.53 16 11.53 16 8c0-4.418-3.582-8-8-8 " > </ path > </ svg > </ span >
< span class =" label " > GitHub </ span >
</ a >So richten Sie Ihre Umgebung für die Entwicklung dieses Themas ein:
cd in /example und führen Sie bundle install aus.So testen Sie das Theme lokal, während Sie Änderungen daran vornehmen:
cd in den Stammordner des Repos (z. B. jekyll-theme-basically-basic ).bundle exec rake preview aus und öffnen Sie in Ihrem Browser http://localhost:4000/example/ . Dadurch wird ein Jekyll-Server gestartet, der die Dateien des Themes und den Inhalt des Verzeichnisses example/ verwendet. Wenn Änderungen vorgenommen werden, aktualisieren Sie Ihren Browser, um etwaige Änderungen anzuzeigen.
Haben Sie einen Tippfehler in der Dokumentation gefunden? Möchten Sie eine Funktion hinzufügen oder einen Fehler beheben? Dann reichen Sie auf jeden Fall ein Problem ein oder versuchen Sie es mit der Übermittlung einer Pull-Anfrage. Wenn dies Ihre erste Pull-Anfrage ist, kann es hilfreich sein, sich über den GitHub-Flow zu informieren.
Beim Senden einer Pull-Anfrage:
master , geben Sie ihm einen aussagekräftigen Namen (z. B. my-awesome-new-feature ) und beschreiben Sie das Feature oder den Fix. Beispielseiten finden Sie in den Ordnern /docs und /example wenn Sie sich mit „Low-Hanging Fruits“ wie der Korrektur von Tippfehlern, schlechter Grammatik usw. befassen möchten.
Michael Rose
Die MIT-Lizenz (MIT)
Copyright (c) 2017–2021 Michael Rose und Mitwirkende
Hiermit wird jeder Person, die eine Kopie dieser Software und der zugehörigen Dokumentationsdateien (die „Software“) erhält, kostenlos die Erlaubnis erteilt, mit der Software ohne Einschränkung zu handeln, einschließlich und ohne Einschränkung der Rechte zur Nutzung, zum Kopieren, Ändern und Zusammenführen , Kopien der Software zu veröffentlichen, zu verteilen, unterzulizenzieren und/oder zu verkaufen und Personen, denen die Software zur Verfügung gestellt wird, dies zu gestatten, vorbehaltlich der folgenden Bedingungen:
Der obige Urheberrechtshinweis und dieser Genehmigungshinweis müssen in allen Kopien oder wesentlichen Teilen der Software enthalten sein.
DIE SOFTWARE WIRD „WIE BESEHEN“ ZUR VERFÜGUNG GESTELLT, OHNE JEGLICHE AUSDRÜCKLICHE ODER STILLSCHWEIGENDE GEWÄHRLEISTUNG, EINSCHLIESSLICH, ABER NICHT BESCHRÄNKT AUF DIE GEWÄHRLEISTUNG DER MARKTGÄNGIGKEIT, EIGNUNG FÜR EINEN BESTIMMTEN ZWECK UND NICHTVERLETZUNG. IN KEINEM FALL SIND DIE AUTOREN ODER COPYRIGHT-INHABER HAFTBAR FÜR JEGLICHE ANSPRÜCHE, SCHÄDEN ODER ANDERE HAFTUNG, WEDER AUS EINER VERTRAGLICHEN HANDLUNG, AUS HANDLUNG ODER ANDERWEITIG, DIE SICH AUS, AUS ODER IN VERBINDUNG MIT DER SOFTWARE ODER DER NUTZUNG ODER ANDEREN HANDELN IN DER SOFTWARE ERGEBEN SOFTWARE.
Grundsätzlich enthält Basic Symbole aus The Noun Project. Die Verbreitung der Symbole erfolgt unter Creative Commons Attribution 3.0 United States (CC BY 3.0 US).
Grundsätzlich enthält Basic Fotos von Unsplash.
Grundsätzlich beinhaltet Basic Susy, Copyright (c) 2017, Miriam Eric Suzanne. Susy wird unter den Bedingungen der BSD 3-Klausel „Neue“ oder „Überarbeitete“ Lizenz vertrieben.
Grundsätzlich enthält Basic Breakpoint. Breakpoint wird unter den Bedingungen der MIT/GPL-Lizenzen vertrieben.
