Geavanceerd on Martijn's Noteshttps://1552afcb.notes-6if.pages.dev/docs/advanced/Recent content in Geavanceerd on Martijn's NotesHugonlCopyright © 2016-2026 van den <span class='bold-rotate'>B</span>oom. All Rights Reserved.Lay-outs overschrijvenhttps://1552afcb.notes-6if.pages.dev/docs/advanced/layouts-overriding/Wed, 27 Jul 2022 16:05:37 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/layouts-overriding/Volgens de Hugo Layouts Opzoekvolgorde is het gemakkelijk om de lay-outs en gedeeltelijke indelingen van Hugo en het thema te overschrijven. Het is handig voor gebruikers die bepaalde dingen van bepaalde lay-outs of gedeeltelijke lay-outs willen aanpassen.

Gebruik

Maak gewoon een lay-out of een gedeeltelijk bestand met dezelfde bestandsnaam die u onder de hoofdmap van de site wilt overschrijven.

Dit is hoe onze Haken werkt.

We kunnen bijvoorbeeld de paritale startpagina layouts/index.html overschrijven door onze eigen hoofdmap te maken.

]]>CSS opschonenhttps://1552afcb.notes-6if.pages.dev/docs/advanced/purgecss/Mon, 25 Jul 2022 12:06:00 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/purgecss/De PurgeCSS is een geweldige tool die ongebruikte CSS van uw site verwijdert. In deze sectie gaan we dieper in op hoe de PurgeCSS werkt en waar we op moeten letten.

Hoe het werkt?

Voor PurgeCSS moet de volgende configuratie worden ingesteld.

config.toml

]]>Prestatiehttps://1552afcb.notes-6if.pages.dev/docs/advanced/performance/Sat, 23 Jul 2022 18:30:48 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/performance/In dit artikel gaan we het hebben over hoe u de prestaties van uw sites kunt verbeteren.

De eenvoudigste manier om de prestaties te verbeteren is door de bestandsgrootte te verkleinen, zodat de overdracht sneller verloopt.

Milieu

Het thema is afhankelijk van de production-omgeving om de JavaScript- en CSS-items te verkleinen en ongebruikte CSS te verwijderen.

Standaardomgeving Waarde
hugo production
hugo server development

Over het algemeen hoeft u geen wijzigingen aan te brengen, tenzij u van plan bent de hugo server in een production-omgeving te gebruiken. U kunt de standaardomgeving wijzigen met de vlag -e.

]]>Evenementenhttps://1552afcb.notes-6if.pages.dev/docs/advanced/events/Sat, 23 Jul 2022 17:33:59 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/events/In deze artikelen worden enkele aangepaste gebeurtenissen vermeld die door het thema worden uitgezonden. U kunt deze gebeurtenissen bekijken via gebeurtenislisteners.

Kleurmodusgebeurtenis

HBS zal een aangepaste gebeurtenis uitzenden met de naam hbs:mode als de kleurmodus wordt gewijzigd. Het is handig om de stijl van uw widget aan te passen aan de themakleurmodus. De ingebouwde uitingen en Giscus-commentaarengines vertrouwen op deze gebeurtenis om hun thema aan te passen aan licht of donker.

]]>SCSS-variabelenhttps://1552afcb.notes-6if.pages.dev/docs/advanced/scss-variables/Sat, 23 Jul 2022 17:23:28 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/scss-variables/Dankzij assets/main/scss/_variables.scss hebben we de mogelijkheid om de standaard SCSS-variabelen van thema en Bootstrap te wijzigen.

Waarom SCSS-variabelen?

Hoewel we de CSS kunnen overschrijven via assets/main/scss/_custom.scss, zal dit uiteindelijk de grootte van de CSS-bundel vergroten, maar de SCSS-variabele doet dit in de meeste gevallen niet.

Er is bijvoorbeeld een standaardanimatie voor het logo bij het aanwijzen van de muis.

1.top-app-bar .logo:hover {
2    transform: rotate(-5deg) scale(1.1);
3}

Het kan het uitschakelen via aangepaste SCSS.

]]>Snackbarhttps://1552afcb.notes-6if.pages.dev/docs/advanced/snackbar/Sat, 02 Jul 2022 21:14:37 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/snackbar/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:

]]>Aangepaste activahttps://1552afcb.notes-6if.pages.dev/docs/advanced/custom-assets/Sun, 28 Nov 2021 16:00:49 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/custom-assets/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.

]]>Hakenhttps://1552afcb.notes-6if.pages.dev/docs/advanced/hooks/Sat, 27 Nov 2021 19:54:29 +0800https://1552afcb.notes-6if.pages.dev/docs/advanced/hooks/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 <head>
body-begin Volg de <body>
body-end Vóór het einde van <body>
main-begin Boven de <main>
main-end Volg de <main>
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.

]]>