hugo toigian Télécharger - hugo toigian Code source télécharger

hugo toigian

Autres catégories

1.0.0

Télécharger

Hugo Toigian

Un thème Hugo minimal avec Tailwind CSS

Toigian - Tối giản (vietnamien) : minimaliste (anglais)
Avis de non-responsabilité : je ne suis pas un développeur front-end, juste un gars qui aime peaufiner des choses, donc mon code n'est peut-être pas joli/propre. J'essaie d'apprendre Tailwind CSS, et hugo-toigian est le résultat.

0. Vitrine
1. Caractéristiques
2. Conditions préalables
3.Installation
3.Configuration
- 3.1. Configuration du site
- 3.2. Configuration des pages
4. Codes courts
5. Personnalisation
6. Contribuer
7. Crédits

0. Vitrine

Ces captures d'écran peuvent être obsolètes. Jetez un oeil au site de démonstration pour les plus récents.

Sombre	Lumière

1. Caractéristiques

Design minimaliste ( tối giản ). Fortement inspiré de mellow.dev.
Utilisez la palette de couleurs minimaliste et élégante Rosé Pine.
Personnalisable.
Prise en charge du mode clair/sombre.
Compteurs imbriqués pour le cap.
Table des matières flottante latérale.
Codes courts utiles.
Prise en charge des commentaires.
Mise en évidence de la syntaxe : utilisez une solution côté serveur (Chroma, Hugo intégré), j'ai ajouté des styles Rosé Pine à Chroma, donc tout est dans la même ambiance.

2. Conditions préalables

git , npm installé.
Une version Hugo "étendue" minimum de la v0.93.0 et supérieure.

snap install hugo --channel=extended

PostCSS de Hugo Pipe nécessite que le package JavaScript postcss-cli soit installé dans l'environnement ( npm install -g postcss postcss-cli ) ainsi que tout plugin(s) PostCSS utilisé (par exemple, npm install -g autoprefixer ). Si vous utilisez le package Hugo Snap, PostCSS et les plugins doivent être installés localement dans le répertoire de votre site Hugo, par exemple, npm install postcss-cli sans l'indicateur -g.

3.Installation

Accédez au répertoire racine de votre site Hugo ou créez un nouveau site avec :

hugo new site hugo-example-site
cd hugo-example-site
git init

Ajoutez le thème.

git submodule add https://github.com/ntk148v/hugo-toigian.git themes/hugo-toigian

Installez les modules Nodejs.

 cd themes/hugo-toigian
npm install

Enfin, mettez à jour le thème dans votre fichier de configuration config.toml dans le répertoire racine de votre site Hugo.

 theme = " hugo-toigian "

Exécutez le serveur pour en voir un aperçu en direct.

hugo server -DF --disableFastRender

Créer des pages statiques

hugo --environment production --minify

3.Configuration

3.1. Configuration du site

Il existe quelques options de configuration que vous pouvez ajouter au fichier config.toml.

 baseURL = ' http://example.org/ '
languageCode = ' en-us '
title = ' Toigian '
theme = " hugo-toigian "
themesDir = " ../.. "
# (Optional) If you provide a Disqus shortname, comments will be enabled on
# all pages.
# disqusShortname = "my-site"

[ params ]
# (Optional, default true): Controls table of contents visibility on right side of pages.
# Start and end levels can be controlled with markup.tableOfContents setting.
toc = true
# (Optional, default true) Enables comments template on pages
# By default partials/docs/comments.html includes Disqus template
# See https://gohugo.io/content-management/comments/#configure-disqus
# Can be overwritten by same param in page frontmatter
comments = true

[ params . author ]
name = " Kien Nguyen-Tuan "
email = " [email protected] "

[ markup ]
  defaultMarkdownHandler = " goldmark "
  # By default, Goldmark trims unsafe outputs which might prevent some shortcodes from rendering.
  # It is recommended to set markup.goldmark.renderer.unsafe=true if you encounter problems.
  [ markup . goldmark ]
    [ markup . goldmark . renderer ]
      unsafe = true  # Enable user to embed HTML snippets in Markdown content.
  [ markup . highlight ]
    codeFences = true
    guessSyntax = true
    lineNos = false
    noClasses = false
    tabWidth = 4
  [ markup . tableOfContents ]
    startLevel = 2
    endLevel = 4
    ordered = true

# The left side navbar at the top
[ menu ]
  [[ menu . nav ]]
  name = " About "
  url = " /about "
  weight = 2

  [[ menu . nav ]]
  name = " Posts "
  url = " /posts "
  weight = 3

3.2. Configuration des pages

Vous pouvez spécifier des paramètres supplémentaires dans le préambule de pages individuelles.

 # Your posts tags

tags = [ ]

# If you have enabled comments for the site, you can disable it for specific pages

comment = true

4. Codes courts

Consultez les codes courts.

5. Personnalisation

Partiels : des partiels de mise en page sont disponibles pour vous permettre de remplacer facilement les composants du thème dans layouts/partials/ .

Vide partiel	Placement	Usage
`layouts/partials/custom/head.html`	Avant de fermer la balise `<head>`	Ajouter du CSS/js personnalisé
`layouts/partials/custom/content-before.html`	Avant le contenu de la page
`layouts/partials/custom/content-after.html`	Après le contenu de la page
`layouts/partials/font.html`		Importer des polices personnalisées

Personnalisation supplémentaire :

Déposer	Description
`assets/css/custom.css`	Personnaliser ou remplacer les styles CSS

Par exemple, vous n'aimez pas la police choisie (Inconsolata) et vous souhaitez utiliser votre propre choix, suivez ces étapes :

Créez layouts/partials/font.html pour importer vos polices :

 <!-- load Inter and Overpass fonts -->
< link rel =" preconnect " href =" https://fonts.googleapis.com " />
< link rel =" preconnect " href =" https://fonts.gstatic.com " crossorigin />
< link
  href =" https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&family=Overpass:wght@400;500&display=swap "
  rel =" stylesheet "
/>

Créer assets/css/custom.css :

 // change the default mono font to Overpass
:root {
  --font-mono : " Overpass " ;
  --font-serif : " Inter " ;
}

6. Contribuer

Comme vous le savez déjà, je ne suis pas développeur front-end. Par conséquent, si vous trouvez quelque chose qui ne va pas ou si vous souhaitez apporter des améliorations, n'hésitez pas à ouvrir un problème/une pull request.

Les principaux objectifs sont :