Razon Yang on Martijn's Notes

Financieringswidget

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

De financieringswidget, ook wel de “buy me a coffee”-widget, biedt lezers een manier om een maker te ondersteunen.

Indeling van de landingspagina

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

In dit artikel zullen we het hebben over de lay-out van de landingspagina. Mogelijk bent u hierin geïnteresseerd als u de pagina’s op Markdown-manier gaat aanpassen.

Wat is het?

De lay-out van de landingspagina is slechts een skeletcontainer, de hoofdtekst bestaat uit drie delen: bovenste app-balk, pagina-inhoud en voettekst.

Voordelen

Schrijven van inhoud in Markdown.
Herbruikbare shortcodes.

Hoe gebruik je het?

Het is vrij eenvoudig om het te gebruiken. Geef gewoon type op als landing en sidebar als false op de voorkant van de pagina, de rest draait helemaal om uw inhoud.

Repository-widget

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

De repository-widget toont de commit-informatie over de huidige pagina. Dit is handig voor gebruikers die de broncode willen bekijken of bewerken.

Snackbar

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

Gebruikers die de knop Block Copy hebben gebruikt, zijn geen onbekende in de Snackbar, die de gebruiker informeert over de resultaten van de uitvoering van de applicatie. Dit artikel geeft een voorbeeld van hoe u Snackbar kunt gebruiken om te voldoen aan de behoefte van de gebruiker aan aangepaste interactie.

API

Functie	Beschrijving
`show(body: String, duration: number = 2000)`	`body`: de hoofdtekst van het bericht, `duration`: de duur van het bericht, in milliseconden.

Exporteren

Dankzij assets/main/js/custom.ts kunnen we het JavaScript aanpassen, hier exporteren we de hele Snackbar als globale variabele:

Upgrade

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

In dit artikel wordt uitgelegd hoe u het thema correct kunt upgraden.

Versies

Voordat u een upgrade uitvoert, is het noodzakelijk om te introduceren wat een versie is. Naast de relatief stabiele versies vermeld in Releases, kunt u een branch gebruiken zoals master, develop, of zelfs een bepaalde commit kiezen.

Dit artikel gebruikt de tijdelijke aanduiding [version] om de versie weer te geven. Vervang deze gewoon door de versie waarnaar u wilt upgraden.

Migreren naar v1

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

Volg en bekijk wijzigingen in de themabronbestanden en documentatie om u te helpen bij de migratie van v0.* naar v1.

Als u niet zeker weet hoe u moet upgraden, raadpleeg dan de Upgrade handleiding.

v1.0

Het oudere UI-ontwerp is bevroren op de v0 branch die alleen bugfixes accepteert. U kunt het oudere UI-ontwerp met die vertakking blijven gebruiken.

Afhankelijkheden

Bootstrap gestoten van v5.1 naar v5.2.

gebruikersinterface

Het instellingenpaneel verwijderd uit de bovenste app-balk.
De sociale links toegevoegd aan de bovenste app-balk.
Documenten-navigatieschakelaar op de bovenste app-balk op een klein scherm geplaatst.

Lay-outs

layouts/_default/archive.html verwijderd, vervang layout = archive door layout = archives vooraan.
Hernoemd naar layouts/partials/docs/catalog.html naar layouts/partials/docs/nav.html.

SCSS

Verouderd $variable-prefix, gebruik in plaats daarvan $prefix.
Gebruik ingebouwde CSS-variabelen van Bootstrap in plaats van door thema gedefinieerde CSS-variabelen.

Documenten

BREAKING CHANGE gebruik navWeight in plaats van weight voor het sorteren van pagina’s in docs nav.

Shortcodes

Waarschuwingskortcode

BREAKING CHANGE verander de syntaxis van alert, zie ook Syntaxis van waarschuwingskortcodes.

Codeschakelaar

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

De code-toggle shortcode genereert codeblokken van verschillende formaten volgens de configuratiecode van elk ondersteund formaat.

Formaten

JSON, TOML en YAML worden ondersteund.

Gebruik

1{{< code-toggle >}}
2CODE IN ANY SUPPORTED FORMAT
3{{}}

Met een bestandsnaam:

1{{< filename="config" code-toggle >}}
2CODE IN ANY SUPPORTED FORMAT
3{{}}

Voorbeeld

1{{< code-toggle filename="params" >}}
2{
3    "logo": "/images/logo.png",
4    "customCSS": ["foo.css", "bar.css"],
5    "codeBlock": {
6        "maxLines": 10
7    }
8}
9{{}}

params.toml

Invoering

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

Doelen

Prestaties
Vriendelijke gebruikerservaring
SEO

Kenmerken

Hugo Pijpen: gebruikt om CSS- en JS-middelen te genereren.
PurgeCSS: verwijder ongebruikte CSS.
Flexibel en configureerbaar.
Snelle en goede gebruikerservaring: de score van Google PageSpeed-inzichten is meer dan 95.
RTL-ondersteuning: Arabische demosite.
Gebouwd bovenop Bootstrap 5.
Lettertype Geweldige pictogrammen.
Responsief.
PWA, ook wel progressieve webapps genoemd.
Verschillende paletten: blue, blue-gray, brown, cyan, green, indigo, orange, pink, purple, red, teal, yellow.
Een Documentenindeling voor het publiceren van projectdocumentatie, notities, digitale tuinen, zetlkastens etc.
Licht/donker-modus.
Lettergrootteschakelaar.
Meertalig (I18N).
Lokaal zoeken.
DocSearch.
Berichten vastzetten.
Voettekstmenu.
Codeblokpaneel: kopieer code, regelnummer, regelomloop en uitbreiding.
Codeschakelaar
Broodkruimel.
Archief.
Afbeeldingsviewer.
Beeldverwerking: afbeeldingen verkleinen en uitlijnen.
Bronnen Lazy Loading: image en iframe.
Syntaxisaccentuering.
Beloningswidget, AKA Buy Me a Coffee: elk platform dat QR-code ondersteunt, wordt ondersteund.
Inhoudsopgave.
Opmerkingen: Disqus, Utterances, Giscus en Staticman kunnen kant-en-klaar worden gebruikt, u kunt ook integreren met andere commentaardiensten.
Aangepaste activa: aangepaste CSS en JS.
Haken: biedt de mogelijkheid om aangepaste code op de pagina toe te voegen.
Sociale banden.
Diverse Shortcodes.
Twitter-kaarten en Open Graph.
Creative Commons-licentie.
Contactformulier.
Nummering van koppen automatisch.

Vereisten

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

Zorg ervoor dat u aan de vereisten voldoet voordat u het thema installeert.

Configuratie

HBS vereist dat de volgende configuraties worden ingesteld.

config.toml

1[build]
2  writeStats = true
3[taxonomies]
4  author = 'authors'
5  category = 'categories'
6  series = 'series'
7  tag = 'tags'

config.yaml

Galerij Shortcode

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

Dit artikel laat zien hoe u de gallery shortcode gebruikt.

Gebruik

1{{< gallery images="images/foo.png,images/bar.png" >}}

Problemen oplossen

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

In dit artikel worden enkele veelvoorkomende problemen opgesomd, zodat u deze eenvoudig kunt oplossen.

CSS-weergave onjuist

Het probleem wordt waarschijnlijk veroorzaakt door postcss. HBS heeft de volgende configuratie nodig om in te stellen: postcss vertrouwt op het bestand hugo_stats.json voor het verwijderen van ongebruikte CSS.

1[build]
2  writeStats = true

js.Build: Kan afhankelijkheden niet oplossen

 1Start building sites … 
 2hugo v0.94.0-63B23660+extended linux/amd64 BuildDate=2022-03-10T09:46:36Z VendorInfo=gohugoio
 3ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
 4ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/modal"
 5ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/tab"
 6ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
 7ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
 8ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "@fortawesome/free-solid-svg-icons"
 9ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "@fortawesome/free-regular-svg-icons"
10ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "@fortawesome/free-brands-svg-icons"
11ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-routing"
12ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-strategies"
13ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-cacheable-response"
14ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-expiration"
15ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "workbox-precaching"
16ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/search/search.ts:1:21": Could not resolve "mustache"
17ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/search/search.ts:1:17": Could not resolve "mark.js/dist/mark.js"
18ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
19ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/modal"
20ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/tab"
21ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
22ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
23ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
24ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/modal"
25ERROR 2022/03/19 14:03:50 js.Build failed: Could not resolve "bootstrap/js/src/tab"
26ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
27ERROR 2022/03/19 14:03:50 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
28ERROR 2022/03/19 14:03:51 js.Build failed: Could not resolve "bootstrap/js/src/offcanvas"
29ERROR 2022/03/19 14:03:51 js.Build failed: Could not resolve "bootstrap/js/src/modal"
30ERROR 2022/03/19 14:03:51 js.Build failed: Could not resolve "bootstrap/js/src/tab"
31ERROR 2022/03/19 14:03:51 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/collapse/collapse.ts:1:38": Could not resolve "bootstrap/js/src/collapse"
32ERROR 2022/03/19 14:03:51 js.Build failed: "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/js/toc/index.ts:1:27": Could not resolve "bootstrap/js/dist/offcanvas"
33ERROR 2022/03/19 14:03:51 TOCSS: failed to transform "viewer/scss/index.scss" (text/x-scss): SCSS processing failed: file "stdin", line 1, col 1: File to import not found or unreadable: viewerjs/dist/viewer. 
34ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "main/js/bundle.ts" (application/typescript): Could not resolve "bootstrap/js/src/dropdown"
35ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "icons/index.js" (application/javascript): Could not resolve "@fortawesome/fontawesome-svg-core"
36ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "service-worker/bundle.ts" (application/typescript): Could not resolve "workbox-core"
37ERROR 2022/03/19 14:03:51 JSBUILD: failed to transform "viewer/js/index.ts" (application/typescript): Could not resolve "viewerjs"
38Error: Error building site: JSBUILD: failed to transform "search/index.ts" (application/typescript): "/home/razonyang/Projects/razonyang/hugo-theme-bootstrap/assets/search/search.ts:1:17": Could not resolve "fuse.js"

Dit komt door het ontbreken van CSS- en JS-afhankelijkheden:

Installeer via Hugo Module

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

Dit artikel verwijst naar de moderne, up-to-date installatiemethode om het thema lokaal te installeren als Hugo-module.

Proxy (optioneel)

Als u zich zonder VPN op het vasteland van China bevindt, kan het downloaden van de Hugo-module mislukken.

Hiervoor zijn twee proxy’s: GOPROXY.CN en GOPROXY.IO.

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

Houd er rekening mee dat Hugo de GOPROXY env var niet respecteert. Gebruik in plaats daarvan HUGO_MODULE_PROXY.

U kunt ook module.proxy instellen in plaats van env var.

Documentenindeling

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

In dit artikel verkennen we de lay-out docs, die kan worden gebruikt om projectdocumentatie, persoonlijke notities en meer te schrijven.

Als u de lay-out docs op andere secties(notes) gaat gebruiken, kijk dan eens op de pagina Inhoud.

Indeling

De lay-out docs bestaat van begin tot eind uit drie secties: documentnavigatiebalk, documentinhoud en zijbalk.

Inhoudsstructuur

 1$ tree content/docs 
 2├── _index.md
 3├── installation
 4│   ├── _index.md
 5│   ├── linux
 6│   │   ├── _index.md
 7│   │   ├── archlinux
 8│   │   │   └── index.md
 9│   │   └── ubuntu
10│   │       └── index.md
11│   └── windows
12│       └── index.md
13└── introduction
14    └── index.md

Eigendom	Typ	Beschrijving
`name`	Tekenreeks	De naam van het menu.
`identifier`	Tekenreeks	De ID van het menu.
`weight`	Nummer	Het gewicht van het menu dat werd gebruikt voor het sorteren in oplopende volgorde.
`parent`	Tekenreeks	De `identifier` van het bovenliggende menu-item.
`url`	Tekenreeks	De URL van het menu.
`pre`	Tekenreeks	De leidende tekenreeks vóór de menunaam.
`post`	Tekenreeks	De afsluitende tekenreeks na de menunaam.
`params`	Voorwerp	Menuparameters.
`params.divider`	Booleaans	`true` betekent deler.
`params.icon`	Tekenreeks	Het pictogram HTML.
`params.description`	Tekenreeks	De beschrijving alleen voor de vervolgkeuzemenu’s op de bovenste app-balk.

Zie ook Eigenschappen menu-item.

Veelgestelde vragen Indeling

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

De Veelgestelde vragen pagina is een verzameling veelgestelde vragen.

Vereisten

We moeten een pagina maken met de naam faq/index.md in de map content.

1+++
2title = "Frequently Asked Questions"
3layout = "faq"
4+++

Gegevens

De gegevens worden opgeslagen in de map data, de mapstructuur is als volgt:

1data
2  /en
3    /faq
4      foo.json
5      bar.json
6  /zh-cn
7    /faq
8      foo.json
9      bar.json

Zoals u kunt zien, classificeren we de vragen op basis van hun taal. En elk bestand vertegenwoordigt een groep vragen, die hetzelfde formaat heeft:

Inhoud toevoegen

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

Hoofdsecties

De parameter mainSections wordt gebruikt om pagina’s te filteren, standaard is dit ["posts", "docs"].

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

Voorzaak

Front Matter is de plaats waar we metagegevens en parameters van de pagina plaatsen, zoals titel, datum enzovoort.

Formaten

Hugo ondersteunt drie formaten voorwerk: YAML, TOML en JSON.

TOML: geïdentificeerd door het openen en sluiten van +++.
YAML: geïdentificeerd door het openen en sluiten van ---.
JSON: een enkel JSON-object omgeven door { en }, gevolgd door een nieuwe regel.

Laten we TOML als voorbeeld nemen:

Installeer via Git Submodule

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

Dit artikel verwijst naar de traditionele installatiemethode om het thema lokaal te klonen als Git-submodule. Hoewel deze installatiemethode nog steeds veel wordt gebruikt, raden we aan om het thema te installeren als Hugo-module.

Maak een nieuwe site vanuit het niets

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

Als u Windows gebruikt, gebruik dan xcopy .\themes\hugo-theme-bootstrap\exampleSite /E.

Afbeeldingsviewer

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

Afbeeldingenviewer is een afbeeldingengalerij. Deze wordt weergegeven wanneer u op een niet-koppelbare afbeelding klikt.

Het biedt ook veel hulpmiddelen, zoals inzoomen, uitzoomen en roteren.

De auteuravatar werd standaard gefilterd.

Siteparameters

Image Viewer is standaard ingeschakeld. U kunt dit uitschakelen door de parameter viewer in te stellen als false.

Opties

U kunt de opties aanpassen door assets/viewer/js/options.ts te maken.

1const options = {
2    className: "image-viewer",
3    // ...
4};
5export default options;

Beschikbare opties staan vermeld op Viewer.js-opties.

Kijk en voel

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

Standaard heeft een site die dit thema gebruikt de standaardlettertypen, kleuren en algemene uitstraling. Het standaardschema kan echter niet iedereen tevreden stellen, maar maak je geen zorgen, je kunt eenvoudig de standaardinstellingen van het thema, zoals paletkleuren, lettertypen en syntaxisaccentuering, overschrijven.

Favicons

HBS genereert pictogrammen in meerdere formaten op basis van het bestand assets/favicon.webp (hogere prioriteit) of assets/favicon.png. Sla gewoon uw eigen favicon-afbeelding op als hetzelfde pad om de standaardinstellingen te overschrijven.

Progressieve webapp

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

PWA’s(Progressieve webapps) zijn webapps die zijn ontwikkeld met behulp van een aantal specifieke technologieën en standaardpatronen, zodat ze kunnen profiteren van zowel web- als native app-functies.

HBS biedt enkele basisfuncties, zoals het installeren van de site op het startscherm, het vooraf cachen van bestanden en het offline beschikbaar zijn.

Siteparameters

Ten eerste moeten we de parameter pwa specificeren, zelfs als deze leeg is.

Archiefindeling

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

De archiefpagina is een verzameling berichten gegroepeerd op jaar.

Vereisten

De pagina’s worden niet automatisch gemaakt, we moeten eerst archiefsecties maken:

1$ tree content/archives
2├── 2021
3│   ├── _index.md
4├── 2022
5│   ├── _index.md
6├── _index.md

De inhoud van die bestanden bevat alleen een title parameter.

Siteparameters

Naam	Typ	Standaard	Beschrijving
`archive`	Voorwerp	-	Archief.
`archive.dateFormat`	Tekenreeks	`Jan 2`	Datumformaat archiveren.
`archive.monthFormat`	Tekenreeks	`January`	Archiefmaandformaat, b.v. `1`, `01`, `Jan` en `January`.
`archive.basePath`	Tekenreeks	`/archives`

Zoek lay-out

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

Het kan voor lezers moeilijk zijn om een artikel op te halen als er veel artikelen op uw site staan. Daarom hebben we de zoekfunctie toegevoegd.

Vereisten

Het enige wat u hoeft te doen is een pagina aanmaken met de naam search/_index.md in de map content.

1+++
2title = "Search"
3+++

Siteparameters

Naam	Typ	Standaard	Beschrijving
`search`	Voorwerp	-	Zoekconfiguratie.
`search.paginate`	Geheel getal	`10`	Paginering.
`search.indexPaginate`	Geheel getal	`1000`	Paginering van indexbestanden.
`search.indexPreload`	Booleaans	`true`	Of de zoekindexen vooraf moeten worden geladen.
`search.maxResults`	Nummer	`100`	Het maximale aantal zoekresultaten.
`search.resultContentCharactersCount`	Geheel getal	`240`	Het maximale aantal tekens van de resultaatinhoud voor weergave.
`search.shortcut`	Array	`["/"]`	De zoeksnelkoppeling, d.w.z. `["Control", "/"]`, schakelt deze uit door een lege array `[]`.
`search.fuse`	Voorwerp	-	Fuse.js-opties.
`search.fuse.ignoreLocation`	Booleaans	`true`
`search.fuse.location`	Geheel getal	-
`search.fuse.isCaseSensitive`	Booleaans	-
`search.fuse.minMatchCharLength`	Geheel getal	-
`search.fuse.threshold`	Dubbel	-
`search.fuse.distance`	Geheel getal	-
`search.fuse.useExtendedSearch`	Booleaans	-

Auteurswidget

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

De auteurswidget bevindt zich in de zijbalk en dient om jezelf kort voor te stellen.

Beloningswidget

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

De beloningswidget, ook wel de “buy me a coffee”-widget, biedt lezers een manier om een maker te ondersteunen via donaties of fooien.

Deze widget is echter beperkt tot QR-codeafbeeldingen. Bekijk ook de financieringswidget.

Sociale Links

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

De parameter social is een set sleutel-waardeparen van sociale links die platforms koppelen aan hun gebruikersidentificatie. Het ondersteunt vele populaire sociale platforms, zoals Twitter, Facebook, Reddit en GitHub. Dit artikel geeft een overzicht van alle ondersteunde platforms en hoe je ze gebruikt.

Contactformulier

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

We kunnen ons e-mailadres op sociale banden zetten, zodat lezers contact met ons kunnen opnemen. Helaas worden e-mails min of meer als spam behandeld en zelfs gefilterd. Daarom brengen we een functie genaamd contactformulier.

Vereisten

We moeten een contactpagina maken met de naam contact/index.md in de map content, zodat we toegang kunnen krijgen tot het contactformulier.

1+++
2title = "Contact Us"
3layout = "contact"
4+++

Eenmaal aangemaakt, verschijnt de link in de profielwidget.

Aangepaste activa

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

Als aanpasbaar thema biedt het de mogelijkheid om assets aan te passen, of het nu gaat om het aanpassen van CSS en JS of het introduceren van CSS en JS van derden.

Interne activa

Maak en bewerk eenvoudigweg de bestanden assets/main/scss/_variables.scss, assets/main/scss/_custom.scss en assets/main/js/custom.ts.

Deze bestanden worden gebundeld in één om HTTP-verzoeken te verminderen.

Externe activa

Alle externe CSS- en JS-bronnen kunnen worden geïmporteerd met de parameters customCSS en customJS.

Doe mee

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

Wij luisteren graag naar uw mening en feedback en heten u van harte welkom om mee te doen.

Gemeenschap

Functieverzoek
Bugrapport
Discussies: stel vragen, deel ideeën enz.

Draag bij

Alle bijdragen zijn welkom, zoals documenten, bugfixes en nieuwe functies.

Regels

Met het oog op het onderhoudsgemak stellen wij enkele regels op.

Conventionele commitspecificatie

Volg de Conventionele commit-specificatie.

Haken

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

Als flexibel thema zou het de mogelijkheid moeten hebben om code aan te passen en diensten van derden te integreren. Daarom hebben we een functie geïntroduceerd die hook heet.

In dit artikel introduceren we alle haken en geven we enkele gebruiksscenario’s.

Overzicht

Haak	Beschrijving
`head-end`	Vóór het einde van
`body-begin`	Volg de
`body-end`	Vóór het einde van
`main-begin`	Boven de
`main-end`	Volg de
`list-begin`	Bovenaan de berichtenlijst
`list-end`	Volg de berichtenlijst
`sidebar-begin`	Helemaal bovenaan de zijbalk
`sidebar-end`	Voordat het zijbalkeinde
`content-begin`	Boven de inhoud van het bericht
`content-end`	Volg de berichtinhoud
`comments-begin`	Boven de reacties
`comments-end`	Volg de reacties
`footer-begin`	Helemaal bovenaan de voettekst
`footer-end`	Voordat de voettekst eindigt
`post-panel-begin`	Helemaal bovenaan het postpaneel
`post-panel-end`	Vóór het einde van het paalpaneel
`docs/sidebar-begin`	Helemaal bovenaan de `docs` zijbalk
`docs/sidebar-end`	Voordat de `docs` zijbalk eindigt
`docs/nav-begin`	Helemaal bovenaan de navigatie
`docs/nav-end`	Voordat de navigatie eindigt
`contact/form-field-begin`	Helemaal bovenaan het contactformulierveld
`contact/form-field-end`	Voordat het contactformulierveld eindigt
`search/sidebar-begin`	Helemaal bovenaan de `search` zijbalk
`search/sidebar-end`	Voordat de `search` zijbalk eindigt

Gebruik

Het is gemakkelijk om een hook te gebruiken, wat je moet doen is een HTML-bestand maken met dezelfde naam als hook in de map layouts/partials/hooks.

Reactiewidget

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

Disqus, Utterances en Giscus reactiewidgets worden direct ondersteund. Dit artikel laat zien hoe je ze configureert en zelfs je eigen reactiewidgets aanmaakt.

Paginaparameters

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

Paginaparameters bevinden zich in pagina’s Voorste zaak.

Naam	Typ	Standaard	Beschrijving
Pagina
`title`	Tekenreeks	-	Paginatitel.
`description`	Tekenreeks	-	Paginabeschrijving.
`keywords`	Array	-	Trefwoorden van de pagina.
`comment`	Booleaans	`true`	Of opmerkingen moeten worden ingeschakeld. Het werkt niet als `comment` globaal is uitgeschakeld.
`toc`	Booleaans	`true`	Of TOC moet worden ingeschakeld. Het werkt niet als `toc` globaal is uitgeschakeld.
`math`	Booleaans	`false`	Of wiskunde moet worden ingeschakeld.
`diagram`	Booleaans	`false`	Of diagram moet worden ingeschakeld.
`reward`	Booleaans	`true`	Of beloning moet worden ingeschakeld.
`breadcrumb`	Booleaans	`true`	Of broodkruimels moeten worden ingeschakeld.
`breadcrumbDivider`	Tekenreeks	`/`	Broodkruimelverdeler.
`readingTime`	Booleaans	`true`	Of de leestijd moet worden weergegeven.
`postDate`	Booleaans	`true`	Of de berichtdatum moet worden weergegeven in de bericht-metasectie.
`copyright`	Booleaans	`true`	Of de copyrightsectie moet worden weergegeven.
`carousel`	Booleaans	`false`	Toon op carrousel.
`nav`	Booleaans	`true`	Schakel de navigatie in/uit.
`sidebar`	Booleaans	`true`	Toon/Verberg de zijbalk.
`index`	Booleaans	`true`	Indexeer deze pagina in de klantenzoekmachine of niet.
Creative Commons-licentie
`creativeCommons`	Voorwerp	-
`creativeCommons.by`	Booleaans	`true`	De eer moet aan u, de maker, worden gegeven.
`creativeCommons.nc`	Booleaans	`true`	Alleen niet-commercieel gebruik van uw werk is toegestaan.
`creativeCommons.nd`	Booleaans	`true`	Er zijn geen afgeleiden of aanpassingen van uw werk toegestaan.
`creativeCommons.sa`	Booleaans	`true`	Aanpassingen moeten onder dezelfde voorwaarden worden gedeeld.
Metatag
`metaRobots`	Tekenreeks	-	Leeg betekent dat het is uitgeschakeld.
`pinned`	Booleaans	`false`	Berichten vastzetten.
`pinnedWeight`	Nummer	-	Een lager gewicht krijgt een hogere prioriteit.
`featuredPostCount`	Geheel getal/Booleaans	`5`	Het aantal uitgelichte berichten dat in de zijbalk wordt weergegeven. Schakel uit door deze in te stellen op `false`.
`recentPostCount`	Geheel getal/Booleaans	`5`	Het aantal recente berichten dat in de zijbalk wordt weergegeven. Schakel uit door deze in te stellen op `false`.
`relatedPostCount`	Geheel getal/Booleaans	`5`	Het aantal gerelateerde berichten. Schakel uit door deze in te stellen op `false`.
`featuredImageAlt`	Tekenreeks	-	De alternatieve tekst voor uitgelichte afbeeldingen, terugval naar paginatitel indien niet aanwezig.
`numberifyHeadings`	Booleaans	`true`	Wanneer `false` worden de koppen niet genummerd.

Siteconfiguratie

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

De siteconfiguratie bevindt zich standaard in config/_default/config.toml.

Naam	Typ	Standaard	Beschrijving
`title`	Tekenreeks	-	Titel van de site.
`baseURL`	Tekenreeks	-	Basis-URL van de site.
`copyright`	Tekenreeks	-	Auteursrecht van sites. De tijdelijke aanduiding `{year}` wordt vervangen door het huidige jaar.
`defaultContentLanguage`	Tekenreeks	`en`	Standaardtaal van de site.
`defaultContentLanguageInSubdir`	Booleaans	`false`
`paginate`	Geheel getal	`10`
`paginatePath`	Tekenreeks	`page`
`enableRobotsTXT`	Booleaans	`true`
`disqusShortname`	Tekenreeks	-	Disqu korte naam.
`services`	Voorwerp	-
`services.googleAnalytics`	Voorwerp	-	Google Analytics ondersteunt alleen GA4.
`services.googleAnalytics.ID`	Tekenreeks	-	Meting-ID.
`author`	Voorwerp	-	Auteurwidget.

Zie ook Alle configuratie-instellingen.

Siteparameters

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

De locatieparameters bevinden zich standaard in config/_default/params.toml.

Naam	Typ	Standaard	Beschrijving
`sass_transpiler`	tekenreeks	`libsass`	`dartsass` wordt aanbevolen, omdat `libsass` verouderd is.
Pagina
`mainSections`	Array	`["posts"]`	Hoofdsecties
`titleCase`	Booleaans	`false`	Titel met hoofdletter of niet
`titleSeparator`	Tekenreeks	`-`	Titelscheidingsteken
`backgroundImage`	Array	`[]`	Achtergrondafbeelding, zoals `['/images/bg.png']`, `['/images/bg-light.png', '/images/bg-dark.png']`.
`comment`	Booleaans	`true`	Of opmerkingen moeten worden ingeschakeld
`toc`	Booleaans	`true`	Of TOC moet worden ingeschakeld
`tocWordCount`	Geheel getal	`280`	TOC wordt alleen weergegeven als het aantal woorden van het bericht groter is dan deze waarde.
`tocPosition`	Tekenreeks	`sidebar`	Beschikbare waarden: `sidebar` en `content`, alleen de indeling `posts` wordt beïnvloed.
`breadcrumb`	Booleaans	`true`	Of broodkruimels moeten worden ingeschakeld
`dateFormat`	Tekenreeks	`Jan 2, 2006`	Datumformaat. Kijk op Hugo datum- en tijdsjabloonreferentie voor meer informatie.
`poweredBy`	Booleaans	`true`	Of het nu gaat om een show powered by.
`readingTime`	Booleaans	`true`	Of de leestijd moet worden weergegeven.
`postDate`	Booleaans	`true`	Of de berichtdatum moet worden weergegeven in de bericht-metasectie.
`math`	Booleaans	`false`	Of wiskunde wereldwijd moet worden ingeschakeld.
`diagram`	Booleaans	`false`	Of het diagram globaal moet worden ingeschakeld.
`logo`	Tekenreeks/Boolean	`images/logo.webp`	Logo-afbeelding. Schakel het logo uit door het in te stellen op `false`.
`brand`	Tekenreeks	-	Merk tekst.
`description`	Tekenreeks	-	Sitebeschrijving.
`keywords`	Tekenreeks	-	Trefwoorden voor sites.
`color`	Tekenreeks	-	Kleurmodus, `light`, `dark` of `auto`. Standaard ingesteld op `auto`.
`palette`	Tekenreeks	-	Standaardpalet. Dit wordt van kracht nadat u de cookie heeft gewist.
`palettes`	Array	ALLE	Beschikbare paletten. U kunt het uitschakelen door het in te stellen op leeg `[]`.
`carouselPostCount`	Geheel getal	`5`	Het aantal berichten dat wordt weergegeven op de startpaginacarrousel.
`featuredPostCount`	Geheel getal/Booleaans	`5`	Het aantal uitgelichte berichten dat in de zijbalk wordt weergegeven. Schakel uit door deze in te stellen op `false`.
`recentPostCount`	Geheel getal/Booleaans	`5`	Het aantal recente berichten dat in de zijbalk wordt weergegeven. Schakel uit door deze in te stellen op `false`.
`relatedPostCount`	Geheel getal/Booleaans	`5`	Het aantal gerelateerde berichten. Schakel uit door deze in te stellen op `false`.
`categoryCount`	Geheel getal/Booleaans	`10`	Het aantal categorieën dat wordt weergegeven in de zijbalk. Schakel uit door deze in te stellen op `false`.
`tagCount`	Geheel getal/Booleaans	`10`	Het aantal tags dat in de zijbalk wordt weergegeven. Schakel uit door deze in te stellen op `false`.
`seriesCount`	Geheel getal	`10`	Het aantal series weergegeven in de zijbalk.
`taxonomyPaginate`	Geheel getal	`10`
`taxonomyPostCount`	Geheel getal	`3`	Het aantal berichten van de taxonomie. Schakel het uit door het op false te zetten.
`taxonomySortingMethod`	Tekenreeks	-	Taxonomieën sorteren op `popularity`, standaard alfabetisch sorteren.
`countTaxonomyPosts`	Booleaans	`false`	Tel berichten van taxonomie.
`sidebarTaxonomies`	Array	`["series", "categories", "tags"]`	De taxonomieën in de zijbalk.
`fullWidth`	Booleaans	`false`	Volledige breedte.
`fullWidthInSections`	Voorwerp	-	Geef de volledige breedte op voor bepaalde secties, zoals `posts`, `docs`.
`fixedHeader`	Booleaans	`true`	Zet de vaste header aan/uit.
`reward`	Voorwerp	-	Beloningswidget, oftewel Koop een koffiewidget voor mij.
`externalLinkIcon`	Booleaans	`true`	Of de pictogrammen na de externe links moeten worden weergegeven.
`share`	Voorwerp	-	Deelknoppen
`share.addThis`	Tekenreeks	-	Voeg dit toe’s `pubid`.
`fontSize`	Voorwerp	Lettergroottes	Reageer of verwijder deze parameter om de schakelaar voor de lettergrootte uit te schakelen.
`fontSize.small`	Tekenreeks	`.9rem`	Kleine lettergrootte.
`fontSize.extraSmall`	Tekenreeks	`.8rem`	Extra kleine lettergrootte.
`fontSize.large`	Tekenreeks	`1.1rem`	Grote lettergrootte.
`fontSize.extraLarge`	Tekenreeks	`1.2rem`	Extra grote lettergrootte.
`social`	Voorwerp	-	Sociale banden.
`socialAnimation`	Booleaans	`true`	Verwijder animatie uit sociale links als `false`.
`socialColor`	Booleaans	`true`	Verwijder kleur uit sociale links als `false`.
`socialShare`	Booleaans	`true`	Schakel de ingebouwde knop voor sociaal delen in/uit.
`searchBar`	Booleaans	`true`	Ingebouwde zoekbalk in-/uitschakelen.
`archive`	Voorwerp	-	Archief.
`search`	Voorwerp	-	Zoekopdracht.
`docsearch`	Voorwerp	-	DocSearch
`docsearch.container`	Tekenreeks	`.search-button`
`docsearch.appId`	Tekenreeks	-
`docsearch.indexName`	Tekenreeks	-
`docsearch.apiKey`	Tekenreeks	-
`docsearch.debug`	Booleaans	`false`
`docsearch.*`	Booleaans/tekenreeks/nummer	-	https://docsearch.algolia.com/docs/api/
`algolia`	Voorwerp	-	Zie Algolia
Bovenste app-balk
`topAppBar`	Voorwerp	-
`topAppBar.social`	Voorwerp	-	Sociale banden.
`topAppBar.colorToggle`	Booleaans	`true`	Schakel de kleur-/modusschakelaar in/uit.
`topAppBar.coloredInDark`	Booleaans	`false`	Gekleurd in donkere modus.
`topAppBar.dropdownMenuToggle`	Booleaans	`true`	Verberg de vervolgkeuzemenuschakelaar.
`topAppBar.expandBreakpoint`	tekenreeks	`xxl`	Vouw inhoud boven dit breekpunt uit, b.v. `lg`, `xl`, `xxl`.
Webmastersiteverificatie
`siteVerification`	Voorwerp	-
`siteVerification.google`	Tekenreeks	-	Googlen
`siteVerification.bing`	Tekenreeks	-	Bing
`siteVerification.baidu`	Tekenreeks	-	Baidu
`siteVerification.baiduUnion`	Tekenreeks	-	Baidu-unie
`siteVerification.so`	Tekenreeks	-	Qihoo 360
`siteVerification.sogou`	Tekenreeks	-	Sogou
`siteVerification.shenma`	Tekenreeks	-	Shenma
Analytics
`analytics`	Voorwerp	-	Analytics-configuratie.
`analytics.baidu`	Tekenreeks	-	Baidu-analyse.
`analytics.plausible`	Tekenreeks	-	Plausibele Analytics-domeinen. Meerdere domeinen gescheiden door een komma.
`analytics.plausibleScript`	Tekenreeks	`https://plausible.io/js/script.js`	Geef het zelf-hostende Plausible Analytics-script op of uitgebreid script.
`googleAdsense`	Tekenreeks	-	Google Adsense.
`customCSS`	Array	-	Zie ook aangepaste activa.
`customJS`	Array	-	Zie ook aangepaste activa.
`utterances`	Voorwerp	-	Uitingen-configuratie.
`giscus`	Voorwerp	-	Giscus-configuratie.
Creative Commons-licentie
`creativeCommons`	Voorwerp	-
`creativeCommons.by`	Booleaans	`true`	De eer moet aan u, de maker, worden gegeven.
`creativeCommons.nc`	Booleaans	`true`	Alleen niet-commercieel gebruik van uw werk is toegestaan.
`creativeCommons.nd`	Booleaans	`true`	Er zijn geen afgeleiden of aanpassingen van uw werk toegestaan.
`creativeCommons.sa`	Booleaans	`true`	Aanpassingen moeten onder dezelfde voorwaarden worden gedeeld.
Codeblok
`codeBlock`	Voorwerp	-
`codeBlock.maxLines`	Geheel getal	`7`
`codeBlock.lineNos`	Booleaans	`true`	`true`/`false` staat voor het standaard tonen/verbergen van de regelnummers.
Plaats
`post`	Voorwerp	-
`post.excerpt`	Tekenreeks	`Description`	De beschrijving zal als uittreksel worden gebruikt als deze niet leeg is. Om samenvattingen als uittreksel te gebruiken, moet u deze expliciet instellen als empty string.
`post.excerptMaxLength`	Geheel getal	`320`
`post.copyright`	Booleaans	`true`	Of de copyrightsectie bij elk bericht moet worden weergegeven.
`post.plainifyExcerpt`	Booleaans	`true`	Formatteer het fragment in HTML als `false`.
`post.featuredImage`	Booleaans	`false`	Toon de uitgelichte afbeelding boven de inhoud.
`post.numberifyHeadings`	Booleaans	`false`	Tel koppen automatisch.
`post.numberifyHeadingsEndLevel`	Nummer	`6`	De diepte van de te tellen rubrieken.
`post.numberifyHeadingsSeparator`	Tekenreeks	-	Het scheidingsteken tussen nummer en kopteksten.
`post.tocStyleType`	Tekenreeks	`none`	De CSS-eigenschap `list-style-type` van de inhoudsopgave.
`post.imageTitleAsCaption`	Booleaans	`false`	Gebruik de titel van de afbeelding als bijschrift.
`post.panel`	Booleaans	`true`	Schakel het postpaneel in/uit.
`post.nav`	Booleaans	`true`	Schakel de navigatie in/uit.
`post.readMoreFromContent`	Booleaans	`false`	De paginapositie na het klikken op de knop Lees meer, lees meer van de inhoud indien waar. Standaard naar het begin van de pagina. Het ondersteunt alleen de handmatige samenvattingen die zijn gesplitst via `

Configuratiestructuur

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

Zoals de voorbeeldsite laat zien, gebruiken we Configuratiemap om de organisatie- en omgevingsspecifieke instellingen eenvoudiger te maken. Dit is vooral handig op meertalige sites.

 1├── _default
 2│   ├── config.toml
 3│   ├── config.zh-hans.toml
 4│   ├── config.zh-hant.toml
 5│   ├── languages.toml
 6│   ├── markup.toml
 7│   ├── menu.toml
 8│   ├── menu.zh-hans.toml
 9│   ├── menu.zh-hant.toml
10│   ├── params.toml
11│   ├── params.zh-hans.toml
12│   ├── params.zh-hant.toml
13│   ├── server.toml
14└── production
15    ├── config.toml
16    └── params.toml

Hugo ondersteunt meerdere configuratieformaten: TOML, YAML en JSON, wijzig dit naar wens.

Diagram Handleiding

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

Dit artikel biedt een voorbeeld van het gebruik van diagrammen in Hugo-inhoudsbestanden.

Zie ook Mermaid.

Beeldverwerking

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

Dit artikel biedt enkele gebruiksscenario’s om te laten zien hoe u afbeeldingen kunt vergroten of verkleinen, bijsnijden, passen, vullen en uitlijnen.

Het formaat van afbeeldingen wijzigen

We gebruiken de URL-query van de afbeelding om het formaat van afbeeldingen te wijzigen. Bijvoorbeeld:

Specificeer de breedte en de behoudverhouding

1![Resize](featured-sample.webp?width=300px)

Specificeer de hoogte en de behoudverhouding

1![Resize](featured-sample.webp?height=200px)

Waarschuwingskortcode

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

Dit artikel laat zien hoe u de alert shortcode gebruikt.

Belangrijk

Sinds v1.8.0 kunt u waarschuwingen aanmaken zonder shortcode, zie blokquote-waarschuwingen.

Syntaxis

Inline

1{{< alert [type] >}}INLINE ALERT{{< /alert >}}

Blokkeren

1{{< alert [type] >}}
2BLOCK ALERT
3{{< /alert >}}

De parameter type is optioneel. Standaard ingesteld op info, beschikbare waarden: info, success, warning en danger.

Met kop

1{{< alert [type] >}}
2{{< alert-heading >}}Well Done!{{< /alert-heading >}}
3ALERT MESSAGE
4{{< /alert >}}

Met Markdown-syntaxis

1{{% alert warning %}}
2Alert Shortcode with Markdown Syntax:
3```bash
4$ echo 'Een voorbeeld van een alert-shortcode met de Markdown-syntaxis'
5```
6{{% /alert %}}

Alert Shortcode with Markdown Syntax:

Mediashortcodes

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

Een gedetailleerde beschrijving van mediashortcodes, zoals Bilibili, Tencent, Youku, iQiyi en Netease Music.

Bilibili

1{{< bilibili "video id" >}}

Tencent

1{{< tencentvideo "vid" >}}

Youku

1{{< youku "XNTQwMTgxMTE2" >}}

iQiyi

1{{< iqiyi "vid" "tvid" >}}

Netease-muziek

1{{< neteasemusic "id" [auto [type]] >}}

Parameter	Beschrijving
`auto`	De `auto` bepaalt of er automatisch wordt afgespeeld. Booleaans en optioneel, standaard `false`.
`type`	De `type`-parameter is optioneel. Standaard ingesteld op `2`.

asciinema

1{{< asciinema id >}}

Online IDE-shortcodes

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

Een gedetailleerde beschrijving van online IDE-shortcodes, zoals JSFiddle, CodePen, JSRun.

JSFiddle

1{{< jsfiddle "user/id" >}}

CodePen

1{{< codepen "id" >}}

JSRun

1{{< jsrun "id" >}}

Samenvatting

1{{< gist razonyang f82a9399c2f682df36432f0ef828c451 >}}

Razon Yang on Martijn's Notes

Financieringswidget

Indeling van de landingspagina

Wat is het?

Voordelen

Hoe gebruik je het?

Repository-widget

Snackbar

API

Exporteren

Upgrade

Versies

Migreren naar v1

v1.0

Afhankelijkheden

gebruikersinterface

Lay-outs

SCSS

Documenten

Shortcodes

Waarschuwingskortcode

Codeschakelaar

Formaten

Gebruik

Voorbeeld

Invoering

Doelen

Kenmerken

Vereisten

Configuratie

Galerij Shortcode

Gebruik

Problemen oplossen

CSS-weergave onjuist

js.Build: Kan afhankelijkheden niet oplossen

Installeer via Hugo Module

Proxy (optioneel)

Documentenindeling

Indeling

Inhoudsstructuur

Menu

Eigenschappen menu-invoer

Veelgestelde vragen Indeling

Vereisten

Gegevens

Inhoud toevoegen

Hoofdsecties

Voorzaak

Formaten

Installeer via Git Submodule

Maak een nieuwe site vanuit het niets

Afbeeldingsviewer

Siteparameters

Opties

Kijk en voel

Favicons

Progressieve webapp

Siteparameters

Archiefindeling

Vereisten

Siteparameters

Zoek lay-out

Vereisten

Siteparameters

Auteurswidget

Beloningswidget

Sociale Links

Contactformulier

Vereisten

Aangepaste activa

Interne activa

Externe activa

Doe mee

Gemeenschap

Draag bij

Regels

Conventionele commitspecificatie

Haken

Overzicht

Gebruik