hugo theme charlolamode

Charlola.Mode

Ce thème du site Web est basé sur le cadre Hugo. Il s'agit d'une modification des modèles Papermod et Hugo-Paper. Il est rapide et facile à utiliser avec une conception minimale et les fonctions les plus élémentaires.

Consultez mon site Web pour voir un exemple similaire: www.cmart1n.com

Lien vers le thème Hugo: https://themes.gohugo.io/themes/hugo-theme-charlolamode/.

Caractéristiques

1. Personnalisez votre page d'accueil avec ...

   • Titre de la page
   • Votre nom
   • Description
   • Icônes sociales
   • Boutons

2. Changer la couleur de tous les éléments tels que l'arrière-plan, le texte, les icônes ...

3. Si vous cliquez sur un onglet, vous verrez une liste de messages.

   • Les messages peuvent être visualisés avec des images
   • Le message peut conduire à un lien externe

Démarrage rapide

1. Installer Hugo
2. Installer Git

Ouvrez votre terminal ou votre ligne de commande

1. Créer un nouveau dossier 'QuickStart'

 hugo new site quickstart

2. Entrer dans ce dossier

 cd quickstart

3. Initialiser un référentiel GIT vide dans le répertoire actuel

 git init

4. Clone ce référentiel dans votre dossier

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

5. Supprimer la config.toml

 rm config.toml

6. Ajouter le thème dans un nouveau fichier config.yml

 echo "theme: charlolamode" >> config.yml

7. Démarrez le serveur de développement d'Hugo pour afficher le site localement.

 hugo server

Une fois le serveur local démarré, vous pouvez voir votre site. Si votre WebBrowser n'apparaît pas automatiquement, ouvrez votre navigateur et entrez http: // localhost: 1313. Vous pouvez maintenant commencer à modifier cette page dans le répertoire. Si vous enregistrez de nouvelles modifications, ce site actualisera et rendra automatiquement la modification.

Ouvrez le code Visual Studio pour modifier votre blog

3. Ouvrez votre éditeur préféré comme Visual Studio Code

Configuration de base

Le config.yml est votre meilleur ami. Vous pouvez modifier et ajouter des informations, telles que ...

• Titre de la page
• Votre nom
• Description
• Icônes sociales
• Boutons

Jetez un œil à la charlolamode / config.yml pour référence. Il existe des exemples commentés qui vous montrent comment ajouter facilement des onglets et des icônes sociales comme LinkedIn, Twitter, YouTube, Instagram. Copiez le contenu de votre config.yml qui écrasera la config.yml du thème.

Changer l'image du profil

Pour ajouter votre photo de profil, remplacez le profil.png dans le dossier statique / images . Assurez-vous de prendre une image avec un visage heureux :)

Ajouter des onglets

Dans la config.yml, vous pouvez ajouter de nouveaux onglets à côté des «articles» et «contact». «Catégorie» de l'incomment pour le vérifier.

Remarque Si vous ajoutez un nouvel onglet dans la config.yml, vous devez effectuer ce qui suit:

1. Ajoutez un nouveau dossier dans le répertoire «Contenu» avec le même nom que le nouvel onglet.
2. Copiez _index.md à partir des articles dans un nouveau dossier.

Ajouter un nouveau contenu

Si vous aimez pousser de nouveaux contenus, créez un nouveau fichier Markdown dans le nouveau dossier. Trouvez un exemple dans le contenu / articles / article.md .

Changer les couleurs

Jetez un œil aux actifs / CSS / Core / Theme-Vars.css pour jouer avec les couleurs.

Désactiver le «mode de profil»

Pour afficher le contenu de l'article sur la page d'accueil, plutôt que des informations sur le profil, définissez ce qui suit sous Params: dans config.yml

 profileMode: 
    enabled: false

Le contenu de l'article déplacé vers la page d'accueil, la suppression de l'entrée du menu principal pour les articles peut être souhaitable:

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

Merci!

J'ai investi mon temps pour construire cela et c'est complètement gratuitement. Si ce modèle vous a fait gagner du temps, n'hésitez pas à soutenir cette page avec un don de café :)

J'adorerais obtenir des commentaires, envoyer un message via LinkedIn!

Site Web en ligne

Pour pousser votre site Web en ligne, utilisez Azure Static Web ou Netflify. J'utilise Azure Static Web.