hugo theme charlolamode

charlola.mode

Dieses Website -Thema basiert auf dem Hugo -Framework. Dies ist eine Modifikation der Vorlagen Papermod und Hugo-Papier. Es ist schnell und einfach zu bedienen mit minimalem Design und den grundlegendsten Funktionen.

Besuchen Sie meine Website, um ein ähnliches Beispiel zu sehen: www.cmart1n.com

Link zum Hugo-Thema: https://themes.gohugo.io/themes/hugo-theme-charlolamode/.

Merkmale

1. Passen Sie Ihre Startseite mit ... an ...

   • Titel der Seite
   • Ihr Name
   • Beschreibung
   • Soziale Ikonen
   • Knöpfe

2. Ändern Sie die Farbe aller Elemente wie Hintergrund, Text, Symbole ...

3. Wenn Sie auf eine Registerkarte klicken, sehen Sie eine Liste von Beiträgen.

   • Beiträge können mit Bildern visualisiert werden
   • Post kann zu einem externen Link führen

Schneller Start

1. Installieren Sie Hugo
2. Git installieren

Öffnen Sie Ihre Terminal- oder Befehlszeile

1. Erstellen Sie einen neuen Ordner "QuickStart"

 hugo new site quickstart

2. In diesen Ordner gehen

 cd quickstart

3. Initialisieren Sie ein leeres Git -Repository im aktuellen Verzeichnis

 git init

4. Klonen Sie dieses Repository in Ihren Ordner

 git submodule add https://github.com/charlola/hugo-theme-charlolamode.git themes/charlolamode

5. Löschen Sie die config.toml

 rm config.toml

6. Fügen Sie das Thema in einer neuen config.yml -Datei hinzu

 echo "theme: charlolamode" >> config.yml

7. Starten Sie den Entwicklungsserver von Hugo, um die Website lokal anzuzeigen.

 hugo server

Sobald der lokale Server beginnt, können Sie Ihre Website sehen. Wenn Ihr Webbrowser nicht automatisch auftaucht, öffnen Sie Ihren Browser und geben Sie http: // localhost: 1313 ein. Jetzt können Sie diese Seite im Verzeichnis ändern. Wenn Sie neue Änderungen speichern, wird diese Website automatisch aktualisiert und die Änderung durchführt.

Öffnen Sie den Visual Studio -Code, um Ihr Blog zu bearbeiten

3. Öffnen Sie Ihren bevorzugten Editor wie Visual Studio Code

Grundkonfiguration

Die config.yml ist Ihr bester Freund. Sie können Informationen ändern und hinzufügen, wie z. B. ...

• Titel der Seite
• Ihr Name
• Beschreibung
• Soziale Ikonen
• Knöpfe

Schauen Sie sich den Charlolamode/config.yml als Referenz an. Es gibt kommentierte Beispiele, in denen Sie zeigen, wie Sie Registerkarten und soziale Symbole wie LinkedIn, Twitter, YouTube und Instagram hinzufügen können. Kopieren Sie den Inhalt in Ihrem config.yml, mit dem die Konfiguration des Themas überschreibt.

Profilbild ändern

Um Ihr Profil -Bild hinzuzufügen, ersetzen Sie das Profil.png im Ordner statisch/Bilder . Stellen Sie sicher, dass Sie ein Bild mit einem glücklichen Gesicht aufnehmen :)

Registerkarten hinzufügen

In der config.yml können Sie neben 'Artikeln' und "Kontakt" neue Registerkarten hinzufügen. Inkontrollkategorie, um es auszuprobieren.

Hinweis Wenn Sie in der config.yml eine neue Registerkarte hinzufügen, müssen Sie Folgendes ausführen:

1. Fügen Sie den neuen Ordner im Verzeichnis "Inhalt" mit demselben Namen wie der neuen Registerkarte hinzu.
2. Kopieren Sie _index.md aus Artikeln in einen neuen Ordner.

Neue Inhalte hinzufügen

Wenn Sie neue Inhalte drücken möchten, erstellen Sie eine neue Markdown -Datei im neuen Ordner. Finden Sie ein Beispiel in Inhalten/Artikeln/Artikel.md .

Farben ändern

Schauen Sie sich Assets/CSS/Core/Theme-Vars.css an, um mit Farben herumzuspielen.

Deaktivieren Sie den „Profilmodus“

Um Artikelinhalte auf der Homepage anstelle von Profilinformationen anzuzeigen, legen Sie Folgendes unter Params: In config.yml fest

 profileMode: 
    enabled: false

Mit dem auf die Startseite verschobenen Artikelinhalte kann das Entfernen des Hauptmenüeintrags für Artikel wünschenswert sein:

 menu:
    main:
        - name: Contact
          url: contact/
          weight: 30
        # - name: Articles
        #   url: articles/
        #   weight: 20
        - name: Projects
          url: projects
          weight: 15

Danke schön!

Ich habe meine eigene Zeit investiert, um dies zu bauen, und es ist völlig kostenlos. Wenn diese Vorlage Ihnen Zeit gespart hat, können Sie diese Seite mit einer Kaffeespende unterstützen :)

Ich würde gerne Feedback erhalten, eine Nachricht über LinkedIn senden!

Online -Website

Verwenden Sie um Ihre Website online, um Azure statisches Web oder Netflify zu verwenden. Ich benutze Azure statisches Web.