portfolio starter
1.0.0
Dies ist ein leichtes Portfolio Starterkit mit elf gebaut. Es richtet sich an Designer, Illustratoren, Architekten und andere Personen, die daran interessiert sind, ihre Arbeit und Aktivität zu teilen.
Der beabsichtigte Benutzer weiß möglicherweise nicht, wie er codiert, sondern interessiert sich für die Technologie hinter seiner Website, ist bereit, in Markdown zu schreiben und folgt gerne mit dieser Dokumentation.
Besuchen Sie portfoliostarter.sb-ph.com, um es auszusuchen. Der Inhalt und der Code in diesem Repository treiben die Demo -Site an.
"No-Code" ist ein bisschen eine Fehlbezeichnung. Ihre Inhaltsdateien sind technisch in Code geschrieben, aber es handelt sich um eine sehr lesbare Syntax, die als Markdown bezeichnet wird (dazu später mehr). Was wir unter „No-Code“ meinen, ist, dass Sie die Befehlszeile, Git oder einen Code-Editor auf Ihrem Computer nicht berühren müssen.
GitHub ist eine Plattform, die Code speichert. Ihr Website -Code und Ihr Inhalt werden auf GitHub leben. Wenn Sie bereits ein Konto haben, melden Sie sich an und melden Sie sich an. Wenn nicht, melden Sie sich für ein Konto an. Das kostenlose individuelle Konto ist ausreichend.
Netlify und Zeit sind Hosting -Anbieter, die für Menschen mit solchen statischen Websites großzügige kostenlose Ebenen anbieten. Netlify ist für die folgenden Schritte vielleicht ein bisschen einfacher und scheint von mehr ELEDEND -Nutzern verwendet zu werden, aber beide sind feste Plattformen. Wenn Sie bereits ein Konto mit einer dieser Plattformen haben, melden Sie sich an. Wenn Sie dies nicht tun, melden Sie sich für eines an.
Wenn Sie auf eine der folgenden Schaltflächen klicken, klonen Sie dieses Repository (dh erstellen Sie eine doppelte Version, die in Ihrem eigenen Github -Konto lebt) und stellen diese neue Website dann auf Ihrem statischen Hosting bereit.
Entscheiden Sie vor dem Fortfahren einen Namen für Ihr Repository. Es sollte etwas sein, das dem Namen Ihrer Website ähnlich ist, aber es sollte nur Kleinbuchstaben, Zahlen und Striche enthalten. Beispielsweise ist der Name dieses Repositorys portfolio-starter .
Wenn Sie ein Netlify -Konto haben , klicken Sie auf diese Schaltfläche und befolgen Sie die einfachen Anweisungen von Netlify, um Netlify und GitHub zu verbinden:
Wenn Sie ein Zeitkonto haben , klicken Sie auf die Schaltfläche unten und befolgen Sie die Anweisungen von ZEIT:
ZEITs Anweisungen führen Sie durch die Installation von Zeit jetzt für GitHub, damit ein Repository für Sie erstellt und Ihre Änderungen bereitgestellt werden können. Geben Sie allen Repositorys die Erlaubnis, wenn Sie Zeit jetzt installieren. ZEIT sollte automatisch erkennen, dass Sie ELEDY mit Einstellungen wie folgt verwenden (Sie müssen sich keine Sorgen um den Entwicklungsbefehl machen):
Befehl erstellen: npx @11ty/eleventy Ausgabeverzeichnis: _site
Wenn Sie die obigen Anweisungen für Netlify oder Zeit beendet haben , werden Sie in Ihr Dashboard des Website weitergeleitet. Dies zeigt Ihre Standard -Subdomain und andere wichtige Informationen über Ihre Website an. Sie erhalten auch einige E -Mails, in denen Sie wissen, dass die Dienste verbunden sind.
Mit ZEIT können Sie die Sichtbarkeit Ihres Repositorys beim Einrichten auswählen. Netlify dagegen erstellt automatisch ein öffentliches Repository. Siehe die GitHub -Dokumentation, wenn Sie die Sichtbarkeit Ihres Repositorys anpassen möchten.
Um Inhalte ohne die Befehlszeile zu bearbeiten oder hinzuzufügen, müssen Sie die Schnittstelle von Github verwenden, um Ihre Dateien in dem Ordner /content in Ihrem Repository zu navigieren. Weitere Informationen zur Struktur des /content -Ordners und jeder der Dateien finden Sie in der Inhaltsreferenz, insbesondere über die globale Datendatei, die Ihren Website -Titel und Ihre URL enthält.
Um eine vorhandene Datei zu bearbeiten oder zu löschen, müssen Sie die entsprechende Datei in GitHub öffnen und dann entweder auf die Schaltfläche Bearbeiten (die Schaltfläche mit dem Bleistiftsymbol) oder auf die Schaltfläche Löschen (die Schaltfläche mit der Bin) in der oberen rechten Ecke über dem Seiteninhalt klicken.
Wenn Sie eine neue Seite hinzufügen möchten, müssen Sie zu den posts , projects oder pages navigieren, je nachdem, was Sie hinzufügen möchten, und dann auf die Schaltfläche „Neue Datei erstellen“ oben oben auf der Seite klicken. Dadurch wird eine neue Editor -Seite geöffnet, auf der Sie Ihren Dateinamen und den Dateiinhalt hinzufügen können. Da alle Textinhalte in Markdown geschrieben sind, muss der Dateiname in md (dh my-post-name.md ) enden.
Wenn Sie Medien hinzufügen möchten, müssen Sie zum media navigieren und dann auf die Schaltfläche „Dateien hochladen“ oben auf der Seite klicken. Dadurch erhalten Sie einen Bereich, um eine oder mehrere Dateien hochzuladen. Siehe die Medienanleitung für Tipps auf Dateitypen und -größen.
Um Änderungen oder Ergänzungen in GitHub zu speichern, müssen Sie Ihre Änderungen mithilfe der Github -Schnittstelle an der Basis der Seite begehen. Wenn Sie Netlify oder Zeit im vorherigen Schritt angeschlossen haben, wird GitHub auch angeben, Ihre Änderungen automatisch bereitzustellen. Weitere Informationen zu einem Commit finden Sie im GitHub Glossar. Wenn Sie eine Bearbeitung oder einen Zugabe direkt in GitHub begehen, können Sie die vorgefüllte Standardmeldung verwenden und direkt zum master Zweig (die Standardeinstellung) festlegen.
In den Befehlszeilenanweisungen geht davon aus, dass Sie mit der Befehlszeile vertraut sind, dass Sie Version 8 oder höher von Node.js auf Ihrem Computer installiert sind und dass Sie ein GitHub -Konto haben.
Klone Repository lokal in einen benannten Projektordner, indem git clone https://github.com/sb-ph/portfolio-starter.git my-website ausgeführt wird und dann in den neuen Projektordner wechseln, indem Sie cd my-website ausführen. Führen Sie npm install aus, um die Abhängigkeiten einschließlich ELEGENTY zu installieren.
Führen Sie rm -rf .git aus, um die Git -Geschichte für einen Neuanfang zu entfernen, und führen Sie dann git init ein, um ein neues Git -Repo zu initialisieren. Bestimmen Sie alle Ihre Dateien, um einen neuen master -Zweig zu erstellen, und fügen Sie Ihr Projekt mit der Befehlszeile zu GitHub hinzu.
Führen Sie npx @11ty/eleventy aus, um die Website in das Verzeichnis gitigned /_site zu erstellen. Führen Sie npx @11ty/eleventy --serve aus, um einen Server für die lokale Entwicklung oder die Bearbeitung von Inhalten zu verbessern. Dadurch wird Ihre Website unter http: // localhost: 8080 verfügbar, und die Website wird automatisch neu geladen, wenn Sie Änderungen vornehmen.
Wenn Sie Netlify oder Zeit verwenden möchten, befolgen Sie deren Dokumentation, um Ihr Repository für die kontinuierliche Bereitstellung an Ihr Hosting -Konto anzuschließen. Wenn Sie einen anderen Hosting -Anbieter verwenden möchten, finden Sie Ihre statischen Dateien im Verzeichnis /_site , nachdem Sie einen Build erstellt haben.
Um Inhalte lokal zu bearbeiten, sprengen Sie einen Server, indem Sie npx @11ty/eleventy --serve ausführen, und stellen Sie dann die Markdown- und JSON -Dateien im Verzeichnis /content an. Wenn Ihre Website an eine kontinuierliche Bereitstellung angeschlossen ist, stellen Sie sicher, dass Sie Ihre Änderungen am richtigen Zweig (wahrscheinlich master ) verpflichten, da sie sonst nicht bereitgestellt werden.
Netlify und Zeit geben Ihnen bei der Bereitstellung Ihrer Website automatisch eine Standard -Subdomain. Dies ist daher ein optionaler Schritt. Wenn Sie Ihre eigene Domain verwenden möchten, sollten Sie ihre Anweisungen befolgen, um dies einzurichten. Lesen Sie mehr über benutzerdefinierte Domänen auf Zeit oder lesen Sie mehr über benutzerdefinierte Domänen auf Netlify.
Beide Leitfäden führen Sie durch die Einrichtung des Domainnamensystems (DNS) Ihrer Domain. Beachten Sie, dass DNS empfindlich sein kann. Die DNS -Aufzeichnungen für Ihre Domain geben Browsern an, wo Sie Ihre Website finden und E -Mail -Server mit Informationen zum Richten von E -Mails an Sie angeben. Schreiben Sie unbedingt vorhandene DNS -Datensätze auf, bevor Sie etwas ändern.
Wenn Sie die Namenserver als Teil des benutzerdefinierten Domain -Setup -Prozesses veräußert und Ihre Domain bereits für E -Mails verwenden, müssen Sie Ihre MX -Datensätze und andere Datensätze hinzufügen, die sich mit E -Mails an Ihren neuen Hosting -Anbieter beziehen, bevor Sie die Namenserver replizieren. Wenn Sie dies nicht tun, kann Ihre E -Mail untergehen.
Wenn Sie in einer älteren Version von Portfolio Starter sind und ihn auf eine neuere Version aktualisieren möchten, empfehlen wir dies manuell, alle Ordner und Dateien mit Ausnahme des /content zu ersetzen. Sie sollten Ihre Website sichern, bevor Sie Updates oder wichtige Änderungen vornehmen. Besuchen Sie Ihre Repository -Homepage und klicken Sie auf die Schaltfläche „Klon oder Download“, um eine Reißverschlussdatei des gesamten Repositorys herunterzuladen, und speichern Sie sie dann an einem sicheren Ort.
Alle Inhalte leben im Ordner /content . Standardmäßig ist Portfolio -Starter mit dem auf der Demo -Website verwendeten Inhalt gefüllt.
Der Inhalt enthält die globalen Daten, die Markierung von Dateien für jede Seite und Medien. Es ist wichtig, jede dieser Dateien auf eine bestimmte Weise zu formatieren und zu organisieren, damit Ihre Website wie erwartet ohne Fehler und Aussehen bereitstellt.
Bestimmte Metadaten wie den Titel und die URL der Website werden auf der gesamten Website verwendet. All diese globalen Daten sind in der Datei /content/_data/global.json enthalten.
Die Details in dieser Datei sollten festgelegt werden, wenn die Website zum ersten Mal eingerichtet wird, und wird dann wahrscheinlich nicht erneut berührt, es sei denn, die Website wird verschoben oder die Domänen ändert sich. Dies ist ein Beispiel für die Datei global.json :
{
"title" : " Tortor Parturient Ridiculus " ,
"lang" : " en " ,
"footer" : " (c) Jane Doe, 2020 " ,
"url" : " https://tpr.com " ,
"author" : {
"name" : " Jane Doe " ,
"email" : " [email protected] "
}
} Dies ist der einzige Inhalt, der in JSON geschrieben werden muss, einem Textformat, mit dem Daten strukturiert werden. JSON -Syntax ist sehr streng. Alle Schlüssel (dh title ) und alle Zeichenfolgen (dh My website ) sind in doppelten Zitaten beigefügt, und alle Eigenschaften (dh "title": "My website" ) werden von Kommas mit Ausnahme der letzten Eigenschaft getrennt. Alle JSON -Objekte sind in lockigen Klammern {} eingeschlossen. Eine falsche Syntax in dieser Datei führt zu einem Fehler, was bedeutet, dass Ihre Änderungen nicht bereitgestellt werden.
Dies sind die Eigenschaften ausführlicher.
| Schlüssel | Format | Standard | Beschreibung |
|---|---|---|---|
author | JSON -Objekt | - - | Ein JSON -Objekt, das den Namen und die E -Mail -Adresse des Website -Autors enthält |
footer | Markdown | ein kurzer Kredit | Der in Markdown geschriebene Fußzeilentext |
lang * | Text | en | Das IANA -Sprachetikett, das Ihre Website -Sprache erklärt |
title * | Text | - - | Der Titel Ihrer Website |
url * | URL | - - | Ihre Website -URL |
Die Fußzeile enthält standardmäßig eine kurze Gutschrift. Fühlen Sie sich frei, es durch den für Sie am besten geeigneten Text zu ersetzen. Dies kann eine Urheberrechtsanzeige, ein Kolophon, Kontaktdaten oder andere herausragende Informationen beinhalten. Die Fußzeile unterstützt keine Linienbrüche.
Alle wichtigsten Inhaltsseiten, einschließlich der Beiträge, Projekte, Seiten, Homepage, 404 Fehlerseite, Blog und RSS -Feed, finden Sie in Markdown. Mit Markdown können Sie mit einem leicht zu lesenden, leicht zu schreibenden Textformat schreiben, das in gültige HTML konvertiert werden kann. Besuchen Sie die Markdown-It-Website für eine vollständige Liste der Formatierungsoptionen, einschließlich Listen, Links, Überschriften und mehr. Sie können sich auch die Quelle für diese Readme -Datei ansehen. Es ist auch in Markdown geschrieben!
Alle Markdown -Dateien enden in der .md -Erweiterung, und dieser Starterkit verwendet den Rest des Dateinamens, um die Seitenschnecke (den letzten Teil der URL einer Seite) zu generieren.
Alle Ordner oder Dateien, denen ein Unterstrich vorausgeht _ werden nicht veröffentlicht. Aus diesem Grund können Sie einen Unterstrich verwenden, um Entwürfe wie /content/posts/_testing-a-draft.md zu erstellen. Es ist jedoch wichtig, sich daran zu erinnern, dass Ihr Entwurf für andere in Github sichtbar ist, wenn Ihr Repository öffentlich ist.
Jede Markdown -Datei beginnt mit Yaml Frontmatter. YAML ist eine einfache Textsyntax, mit der der menschliche lesbare Text als strukturierte Daten formatiert werden kann. FrontMatter ist der Text oben in der Datei, die auf beiden Seiten von drei Strichen eingezäunt ist, wie so:
---
layout : page
title : Contact
description : Get in touch with me via email or phone.
image : cloud-01.jpeg
---
Die YAML-Frontmatter enthält eine Reihe von Eigenschaften-Keys und Werte, die durch einen Dickdarm getrennt sind, die Seiten-spezifische Metadaten definieren. Tasten müssen immer genau wie in dieser Dokumentation geschrieben werden. Das Schreiben Layout anstelle von layout führt beispielsweise zu einem Fehler.
Dies sind die grundlegenden YAML -Eigenschaften, die auf jeder Seite in der Frontmatter verwendet werden sollten.
| Schlüssel | Format | Standard | Beschreibung |
|---|---|---|---|
description | Text | - - | Kurze Beschreibung des Seiteninhalts |
eleventyNavigation | Yaml | - - | Ein YAML -Objekt, das unten beschrieben wird |
image | Text | - - | Der Dateiname des Bildes, das für Social -Media -Karten verwendet werden sollte |
layout * | Text | - - | Das Seitenlayout |
permalink | Text | verschieden | Die Seite Permalink |
title * | Text | - - | Der Seitentitel |
Der Seitentitel und das Layout sind für jede Markdown -Datei erforderlich. Das Seitenlayout bestimmt, wie der Inhalt angezeigt wird. Beim Erstellen neuer Seiten sollten Sie das project , post oder page verwenden.
Die description Eigenschaft wird für alle Seiten dringend empfohlen, da sie für Social -Media -Karten verwendet und in den Ergebnissen der Suchmaschinen angezeigt wird. Es sollte zwischen 50 und 160 Zeichen liegen und sollte niemals auf verschiedenen Seiten dupliziert werden.
Wenn Sie ein image für soziale Medien verwenden, finden Sie in der Dokumentation, die die Social -Media -Plattformen für eine geeignete Bildgröße bereitstellen. Als Faustregel sollte ein Landschaftsformat 1200px-Weit-JPG auf den meisten Plattformen angemessen sein.
Mit der permalink -Eigenschaft können Sie die URL für eine Seite festlegen oder vollständig ausschalten. Die Permalinks werden immer automatisch generiert, sodass Sie diese Eigenschaft selten verwenden müssen.
Die eleventyNavigation -Eigenschaft ist etwas komplexer. Es gibt dem ELEGY NAVIATION -Plugin mit, was in das Menü eingebracht werden soll. Dies ist ein Beispiel für die in der About Page /content/pages/about.md verwendete Eigenschaft:
---
layout : default
title : About
eleventyNavigation :
key : About
order : 0
---
Die key Unterkopie fordert ELESTY an, diese Seite zur Navigation mit dem Text "About" hinzuzufügen. Die order sagt zu ELEITY, dass sie in der Navigation an erster Stelle stehen sollte.
Sie können auch externe Links zur Navigation hinzufügen, z. B. einen Link zu Ihrem GitHub. Auf der Seite /content/pages/github.md finden Sie ein Beispiel mit der folgenden Frontmatter:
Wenn Sie der Navigation einen externen Link hinzufügen möchten, können Sie eine neue Markdown -Datei (z. B. /content/external.md ) mit dem folgenden Frontmatter erstellen:
---
eleventyNavigation :
key : GitHub ↗
order : 3
url : http://github.com/sb-ph/portfolio-starter
permalink : false
---
Die key Unterkopie fordert ELESTY an, diese Seite zur Navigation mit dem Text „GitHub“ hinzuzufügen ( ↗ ist der HTML-Code für einen Nordostpfeil). Die order ist auf 3 so eingestellt, dass sie im Menü die letzte ist, und die url Unterkopie ist auf die gewünschte URL eingestellt. Die permalink -Eigenschaft ist auf False eingestellt, damit dies keine entsprechende Seite auf unserer Website veröffentlicht.
Seiten finden sich im Ordner /content/pages .
layout einer Seite muss im Frontmatter auf page gesetzt werden. Seiten unterstützen nur die oben aufgeführten grundlegenden Eigenschaften.
Beiträge finden Sie im Ordner /content/posts .
layout eines Posts muss so eingestellt sein, dass sie in der Frontmatter post . Beiträge unterstützen die grundlegenden Eigenschaften sowie die date . Dies ist ein Beispiel für den Frontmatter eines Beitrags:
---
layout : post
title : Demo post
date : 2020-03-29 18:00:00
---
Die date ermittelt das Veröffentlichungsdatum des Beitrags und damit die Bestellung im Blog und RSS.
Sie können den HTML-Kommentar <!--more--> in Ihrem Markdown-Inhalt verwenden, um einen Auszug für Ihre Beiträge wie SO zu generieren:
Maecenas faucibus mollis interdum. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.
<!-- more -->
Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Donec ullamcorper nulla non metus auctor fringilla. Sed posuere consectetur est at lobortis. Wenn Sie den more Kommentar verwenden, wird nur der Text vor dem Kommentar im Blog angezeigt, und ein Link „More Read“ wird nach diesem Auszug angezeigt.
Projekte finden Sie im Ordner /content/projects .
layout eines Projekts muss in der Frontmatter project werden. Projekte unterstützen die grundlegenden Eigenschaften sowie die Eigenschaften von dateStart , dateEnd und media . Dies ist ein Beispiel für die Frontmatter für eine Projektseite.
---
layout : project
title : Your project title
dateStart : 1988-02-01
dateEnd : 2001-03-01
media :
- type : image
filename : cloud-01.jpeg
size : md
alt : A cloud
caption : A collaboration with [Piper Haywood](https://piperhaywood.com)
- type : video
filename : ria-pacquee.mp4
controls : false
caption : A piece by [Ria Pacquée](http://riapacquee.com/)
---
Und dies sind die projektspezifischen Eigenschaften ausführlicher:
| Schlüssel | Format | Standard | Beschreibung |
|---|---|---|---|
dateEnd * | YYYY-MM-DD | - - | Das Enddatum Ihres Projekts, das für Sortierzwecke verwendet wird |
dateStart | YYYY-MM-DD | - - | Das Startdatum Ihres Projekts |
media | Yaml | - - | Eine YAML -Liste von Medienblöcken, die unten beschrieben wurden |
Die Medieneigenschaft ist eine streng formatierte YAML-Liste, die Bild- und Videoblöcke enthalten kann. Die Eigenschaften, die sowohl für Bilder als auch für Videos gelten, sind unten beschrieben.
| Schlüssel | Format | Standard | Beschreibung |
|---|---|---|---|
caption | Markdown | - - | Eine Bildunterschrift, die Ihre Medien beschreibt |
filename * | Text | - - | Der Dateiname Ihrer Medien |
height | ganze Zahl | - - | Die Höhe Ihrer Medien in Pixeln |
width | ganze Zahl | - - | Die Breite Ihrer Medien in Pixeln |
size | Text | lg | Die Größe, die die Medien angezeigt werden sollten; sm , md oder lg |
type * | Text | - - | image oder video |
Bildblöcke unterstützen die folgenden zusätzlichen Eigenschaften:
| Schlüssel | Format | Standard | Beschreibung |
|---|---|---|---|
alt * | Text | - - | Der ALT -Text für Ihr Bild |
featured | boolean | FALSCH | Ob das Bild verwendet werden sollte, um dieses Projekt darzustellen |
Die featured Eigenschaft wird verwendet, um zu bestimmen, welches Bild verwendet werden soll, um dieses Projekt auf der Homepage darzustellen. Wenn mehrere Bilder wie vorgestellt markiert sind, wird der erste verwendet.
Videoblöcke ermöglichen die folgenden zusätzlichen Eigenschaften. Beachten Sie, dass das Video -Autoplay nur in bestimmten Browsern und Geräten unterstützt wird.
| Schlüssel | Format | Standard | Beschreibung |
|---|---|---|---|
controls | boolean | FALSCH | Ob die Videosteuerungen angezeigt werden sollten oder nicht |
loop | boolean | FALSCH | Ob das Video schleifen sollte oder nicht |
autoplay | boolean | FALSCH | Ob das Video automatisch abspielen sollte oder nicht |
muted | boolean | FALSCH | Ob das Video gedämpft werden sollte oder nicht |
Die Homepage ist die Datei /content/index.md .
Das layout der Homepage muss in der Frontmatter zu home eingestellt sein. Die Homepage unterstützt die meisten grundlegenden Eigenschaften, die permalink -Eigenschaft darf jedoch nicht verwendet werden.
Mit der zusätzlichen entries können Sie genau angeben, welche Projekte Sie auf der Homepage erstellen möchten. Wenn die entries nicht ausgefüllt sind, wird auf der Homepage alle Projekte automatisch in der Reihenfolge der neuesten Ersten angezeigt.
Dies ist ein Beispiel für die verwendete Eigenschaft entries :
---
layout : home
entries :
- portfolio-starter
- sample-project-muybridge
- sample-project-optics
- sample-project-eames
- sample-project-letters
- sample-project-traffic-signs
---
Das erste featured für jedes Projekt wird angezeigt. Wenn keine Bilder featured werden, wird das erste Bild angezeigt.
Die Blog -Seite ist die Datei /content/posts.md .
Das layout der Blog -Seite muss auf posts im Frontmatter gesetzt werden. Die Blog -Seite unterstützt die grundlegenden Eigenschaften. Der unter der Frontmatter geschriebene Markdown wird nicht angezeigt.
Die 404 -Fehlerseite ist die Datei /content/404.md .
Das layout der 404 -Fehlerseite muss in der Frontmatter auf error gesetzt werden. Die Fehlerseite unterstützt nur die Grundeigenschaften von layout und title . Die permalink -Eigenschaft darf nicht verwendet werden.
Die RSS -Seite ist die Datei /content/rss.md .
Das layout der RSS -Seite muss so eingestellt werden, dass sie in der Frontmatter feed . Die RSS -Seite unterstützt nur das layout und title -Grundeigenschaften. Die permalink -Eigenschaft darf nicht verwendet werden.
Der RSS -Feed wird automatisch in /feed.xml veröffentlicht, sodass beispielsweise https://yoursite.com/feed.xml . Wenn Sie in Ihrer Navigation einen RSS -Link hinzufügen möchten, finden Sie in der Grundleitung der Eigenschaften, um einen externen Link hinzuzufügen.
Alle Medien werden im Ordner /content/media gespeichert.
Mediendateien müssen so klein wie möglich sein, um Platz in Ihrem Github -Repository und Ihrem Hosting zu sparen. Lesen Sie mehr über Githubs Repository -Grenzen. Kleinere Mediendateien laden auch schneller für Ihre Leser.
Kleine Bilder sollten etwa 800px breit sein, mittlere Bilder sollten etwa 1400px breit sein und große Bilder sollten etwa 3000 PX breit sein. Bilder mit großen Flachfarben können am besten als PNGs funktionieren. Bilder mit mehr Details wie Fotografie sollten als JPGs gespeichert werden.
Je mehr Bilder Sie einer Seite hinzufügen, desto länger dauert es, bis diese Seite geladen wird. Seien Sie vernünftig darüber, wie viele Bilder Sie einer Seite hinzufügen.
Wie oben erwähnt, handelt es sich um eine absichtlich grundlegende Codebasis, die das Basteln begrüßt.
Kleinere Anpassungen wie das Ändern des CSS können ohne die Befehlszeile durchgeführt werden, indem die CSS -Datei direkt in GitHub bearbeitet wird. Umfangreichere Anpassungen werden am besten durch die Entwicklung der Befehlszeile durchgeführt. Weitere Informationen finden Sie in der elf Dokumentation, wenn Sie daran interessiert sind, die Nunjuck -Layouts oder Snippets in /_includes zu ändern.
Dies sind einige Vorschläge zum Ändern und Erweitern dieser Website:
/_includes/layouts/base.njk um eine komplexere Fußzeile zu erstellenclient oder category hinzuimgix , damit Ihre Medien nicht auf GitHub lebenWenn Sie an unserer Hilfe interessiert sind, melden Sie sich einfach mit uns und wir werden diskutieren!
