Razon Yang on Martijn's Notes

Funding Widget

Sun, 29 Jan 2023 19:44:19 +0800

The funding widget, AKA buy me a coffee widget, gives the readers a way to support a creator.

Landingpage-Layout

Thu, 15 Sep 2022 10:46:23 +0800

In diesem Artikel sprechen wir über das Landingpage-Layout. Es könnte für Sie von Interesse sein, wenn Sie die Seiten im Markdown-Verfahren anpassen möchten.

Repository Widget

Fri, 09 Sep 2022 21:06:19 +0800

The repository widget shows the commit information about current page, it’s useful for users to view or edit the source code.

Snackbar

Sat, 02 Jul 2022 21:14:37 +0800

Benutzer, die die Blockkopie-Schaltfläche verwendet haben, sind kein Unbekannter in der Snackbar, die den Benutzer über die Ergebnisse der Anwendungsausführung informiert. In diesem Artikel wird ein Beispiel dafür gegeben, wie Snackbar verwendet werden kann, um den Bedarf des Benutzers an benutzerdefinierter Interaktion zu erfüllen.

Upgrade

Sat, 25 Jun 2022 22:15:02 +0800

In diesem Artikel wird erläutert, wie Sie das Theme richtig aktualisieren.

Migration auf v1

Mon, 20 Jun 2022 17:46:31 +0800

Verfolgen und überprüfen Sie Änderungen an den Quelldateien und der Dokumentation des Themes, um Sie bei der Migration von v0.* auf v1 zu unterstützen.

Code umschalten

Mon, 13 Jun 2022 16:54:28 +0800

Der Shortcode code-toggle generiert Codeblöcke verschiedener Formate entsprechend dem Konfigurationscode eines unterstützten Formats.

Einführung

Mon, 13 Jun 2022 16:32:09 +0800

Ziele

Leistung
Freundliche Benutzererfahrung
SEO

Funktionen

Hugo Pfeifen: wird zum Generieren von CSS- und JS-Assets verwendet.
PurgeCSS: Nicht verwendetes CSS entfernen.
Flexibel und konfigurierbar.
Schnelle und gute Benutzererfahrung: Die Punktzahl von Google PageSpeed Insights liegt bei über 95.
RTL-Unterstützung: Arabische Demoseite.
Aufbauend auf Bootstrap 5.
FontAwesome-Symbole.
Reaktionsschnell.
PWA, auch bekannt als progressive Web-Apps.
Verschiedene Paletten: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.
Ein Dokumentenlayout zur Veröffentlichung von Projektdokumentationen, Notizen, digitalen Gärten, Zettelkästen usw.
Hell-/Dunkelmodus.
Schriftgrößenumschalter.
Mehrsprachig (I18N).
Lokale Suche.
DocSearch.
Beiträge anpinnen.
Fußzeilenmenü.
Codeblock-Panel: Code, Zeilennummer, Zeilenumbruch kopieren und erweitern.
Code umschalten
Semmelbrösel.
Archiv.
Bildbetrachter.
Bildverarbeitung: Größe ändern und Bilder ausrichten.
Lazy Loading der Ressourcen: image und iframe.
Syntaxhervorhebung.
Belohnungs-Widget, AKA Buy Me a Coffee: Jede Plattform, die QR-Code unterstützt, wird unterstützt.
Inhaltsverzeichnis.
Kommentare: Disqus, Utterances, Giscus und Staticman können sofort verwendet werden, Sie können auch andere Kommentardienste integrieren.
Benutzerdefinierte Assets: benutzerdefiniertes CSS und JS.
Haken: Bietet die Möglichkeit, benutzerdefinierten Code auf der Seite hinzuzufügen.
Soziale Links.
Verschiedene Shortcodes.
Twitter-Karten und Open Graph.
Creative Commons-Lizenz.
Kontaktformular.
Überschriften automatisch nummerieren.

Voraussetzungen

Mon, 13 Jun 2022 16:32:09 +0800

Bitte stellen Sie sicher, dass Sie die Voraussetzungen erfüllen, bevor Sie das Theme installieren.

Galerie-Shortcode

Fri, 25 Mar 2022 00:00:00 +0000

Dieser Artikel zeigt, wie Sie den Shortcode gallery verwenden.

Fehlerbehebung

Sat, 19 Mar 2022 13:46:41 +0800

In diesem Artikel werden einige häufig auftretende Probleme aufgeführt, damit Sie sie leicht lösen können.

Installation über das Hugo-Modul

Sat, 26 Feb 2022 17:10:39 +0200

Dieser Artikel bezieht sich auf die moderne, aktuelle Installationsmethode, das Theme lokal als Hugo-Modul zu installieren.

Proxy (optional)

Wenn Sie sich auf dem chinesischen Festland ohne VPN befinden, schlägt der Download des Hugo-Moduls möglicherweise fehl.

Dafür gibt es zwei Proxys: GOPROXY.CN und GOPROXY.IO.

1$ export HUGO_MODULE_PROXY=https://goproxy.cn

Bitte beachten Sie, dass Hugo die Umgebungsvariable GOPROXY nicht respektiert. Bitte verwenden Sie stattdessen HUGO_MODULE_PROXY.

Sie können auch module.proxy festlegen, anstatt env var zu verwenden.

Dokumentenlayout

Wed, 12 Jan 2022 10:56:34 -0800

In diesem Artikel erkunden wir das docs-Layout, das zum Schreiben von Projektdokumentationen, persönlichen Notizen und mehr verwendet werden kann.

Speisekarte

Thu, 16 Dec 2021 17:25:20 +0800

Wir haben zwei Arten von Menüs vordefiniert: main und footer, repräsentieren die oberen Menüs der App-Leiste bzw. die Fußzeilenmenüs. In diesem Artikel wird die Verwendung der Menüs kurz vorgestellt.

FAQ-Layout

Tue, 07 Dec 2021 21:46:43 +0800

Die Seite FAQ ist eine Sammlung häufig gestellter Fragen.

Inhalte hinzufügen

Sat, 04 Dec 2021 10:43:39 +0800

Hauptabschnitte

Der Parameter mainSections wird zum Filtern von Seiten verwendet, standardmäßig ist er ["posts", "docs"].

1mainSections = ["blog", "posts", "docs", "notes"]

Vordere Angelegenheit

Front Matter ist der Ort, an dem wir Seitenmetadaten und -parameter wie Titel, Datum usw. einfügen.

Formate

Hugo unterstützt drei Titelformate: YAML, TOML und JSON.

TOML: identifiziert durch Öffnen und Schließen von +++.
YAML: identifiziert durch Öffnen und Schließen von ---.
JSON: ein einzelnes JSON-Objekt, umgeben von { und }, gefolgt von einer neuen Zeile.

Nehmen wir TOML als Beispiel:

Installation über Git-Submodul

Sat, 04 Dec 2021 10:43:39 +0800

Dieser Artikel bezieht sich auf die traditionelle Installationsmethode, bei der das Theme lokal als Git-Submodul geklont wird. Obwohl diese Installationsmethode immer noch weit verbreitet ist, empfehlen wir, das Theme als Hugo-Modul zu installieren.

Erstellen Sie eine neue Site von Grund auf

1$ git clone https://github.com/razonyang/hugo-theme-bootstrap-skeleton myblog
2$ cd myblog
3$ git submodule add https://github.com/razonyang/hugo-theme-bootstrap themes/hugo-theme-bootstrap
4$ sed -i "s/theme:.*/theme: hugo-theme-bootstrap/g" config/_default/config.yaml
5$ rm go.mod go.sum
6$ hugo mod npm pack
7$ npm install
8$ hugo server

Wenn Sie Windows verwenden, verwenden Sie stattdessen xcopy .\themes\hugo-theme-bootstrap\exampleSite /E.

Bildbetrachter

Fri, 03 Dec 2021 20:46:50 +0800

Der Bildbetrachter ist eine Bildergalerie, die angezeigt wird, wenn Sie auf ein nicht verlinkbares Bild klicken.

Es bietet auch viele Werkzeuge wie Vergrößern, Verkleinern und Drehen.

Schauen und fühlen

Fri, 03 Dec 2021 19:42:57 +0800

Standardmäßig verfügt eine Website, die dieses Design verwendet, über die Standardschriftarten, -farben und das allgemeine Erscheinungsbild. Allerdings kann das Standardschema nicht jeden zufriedenstellen, aber keine Sorge, Sie können die Theme-Standardeinstellungen wie Palettenfarben, Schriftarten und Syntaxhervorhebung problemlos überschreiben.

Progressive Web-App

Fri, 03 Dec 2021 19:39:01 +0800

PWAs(Progressive Web-Apps) sind Web-Apps, die mithilfe einer Reihe spezifischer Technologien und Standardmuster entwickelt wurden, damit sie sowohl Web- als auch native App-Funktionen nutzen können.

HBS bietet einige grundlegende Funktionen, wie z. B. die Installation der Site auf dem Startbildschirm, das Vorcache von Dateien und die Offline-Verfügbarkeit.

Archivlayout

Fri, 03 Dec 2021 11:16:51 +0800

Die Archivseite ist eine Sammlung von Beiträgen, gruppiert nach Jahr.

Suchlayout

Fri, 03 Dec 2021 11:16:51 +0800

Wenn Ihre Website viele Artikel enthält, kann es für Leser schwierig sein, einen Artikel aufzurufen. Aus diesem Grund haben wir die Suchfunktion hinzugefügt.

Author Widget

Fri, 03 Dec 2021 11:10:19 +0800

The author widget is located in the sidebar, in order to introduce yourself briefly.

Reward Widget

Fri, 03 Dec 2021 11:10:19 +0800

The reward widget, AKA buy me a coffee widget, gives the readers a way to support a creator through the use of donations or tips.

However, it limited to the QR code image, please take a look at the funding widget.

Social Links

Thu, 02 Dec 2021 16:27:45 +0800

The social parameter is a set of key value pairs of social links that mapping from platform to their user identifier. It supports many popular social platforms, such as Twitter, Facebook, Reddit, GitHub. This article lists all supported platforms and how to use them.

Kontaktformular

Tue, 30 Nov 2021 23:56:00 +0800

Wir können unsere E-Mail-Adresse auf soziale Links setzen, damit Leser mit uns Kontakt aufnehmen können. Leider werden E-Mails mehr oder weniger als Spam behandelt und sogar gefiltert. Aus diesem Grund bieten wir eine Funktion namens Kontaktformular an.

Benutzerdefinierte Assets

Sun, 28 Nov 2021 16:00:49 +0800

Als anpassbares Theme bietet es die Möglichkeit, Assets anzupassen, sei es die Anpassung von CSS und JS oder die Einführung von CSS und JS von Drittanbietern.

Comments Widget

Sat, 27 Nov 2021 19:54:29 +0800

Disqus, Utterances and Giscus comments widgets are supported out of box. This article shows how to configure them and even customize your own comment widgets.

Haken

Sat, 27 Nov 2021 19:54:29 +0800

Als flexibles Theme sollte es die Möglichkeit haben, Code anzupassen und Dienste von Drittanbietern zu integrieren. Aus diesem Grund haben wir eine Funktion namens Hook eingeführt.

In diesem Artikel stellen wir alle Hooks vor und stellen einige Anwendungsfälle bereit.

Machen Sie mit

Sat, 27 Nov 2021 19:54:29 +0800

Wir freuen uns über Ihre Meinung und Ihr Feedback und heißen Sie herzlich willkommen, sich zu engagieren.

Seitenparameter

Sat, 27 Nov 2021 19:53:24 +0800

Seitenparameter befinden sich im Vordere Angelegenheit der Seite.

Site-Konfiguration

Sat, 27 Nov 2021 19:53:24 +0800

Die Site-Konfiguration befindet sich standardmäßig in config/_default/config.toml.

Site-Parameter

Sat, 27 Nov 2021 19:53:24 +0800

Die Site-Parameter befinden sich standardmäßig in config/_default/params.toml.

Konfigurationsstruktur

Sat, 27 Nov 2021 19:53:24 +0800

Wie auf der Beispiel-Site gezeigt, verwenden wir Konfigurationsverzeichnis, um die Organisation und umgebungsspezifische Einstellungen einfacher zu verwalten. Dies ist besonders nützlich bei mehrsprachigen Sites.

Diagram Guide

Wed, 01 Sep 2021 11:36:50 +0800

This article offers a sample of basic diagram usage that can be used in Hugo content files.

Please see also Mermaid.

Bildverarbeitung

Sun, 15 Aug 2021 14:19:06 +0800

Dieser Artikel bietet einige Anwendungsfälle, um zu zeigen, wie man Bilder in der Größe ändert, zuschneidet, einpasst, füllt und ausrichtet.

Alarm-Shortcode

Thu, 22 Oct 2020 00:00:00 +0000

Dieser Artikel zeigt, wie Sie den Shortcode alert verwenden.

Medien-Shortcodes

Thu, 22 Oct 2020 00:00:00 +0000

Eine detaillierte Beschreibung von Medien-Shortcodes wie Bilibili, Tencent, Youku, iQiyi und Netease Music.

Online-IDE-Shortcodes

Thu, 22 Oct 2020 00:00:00 +0000

Eine detaillierte Beschreibung von Online-IDE-Shortcodes wie JSFiddle, CodePen, JSRun.