Page À propos

Apprenez à configurer la page À propos pour le thème Solitude.

Configuration de la page

Ouvrez un terminal dans le répertoire racine de votre blog Hexo et exécutez la commande suivante pour créer une nouvelle page :

hexo new page about

Cela générera un dossier about dans le répertoire source de votre blog, contenant un fichier index.md. Ensuite, ajoutez la valeur type de la page à l'intérieur de ce fichier.

Référence (modifiez selon vos besoins) :

index.md
---
title: Page À propos
date: 2025-07-13 22:48:25
comment: false
type: about
---

Création du fichier de données

Créez un dossier _data dans le répertoire source de votre blog, puis créez un fichier nommé about.yml à l'intérieur.

Configurez votre contenu ici en utilisant le modèle ci-dessous. Les configurations des modules sont expliquées dans les commentaires du modèle.

Exemple de modèle de page À propos

about.yml
# Module des tags flottants
authorinfo:
  leftTags:
    - 🤖️ Passionné de technologie numérique
    - 🔍 Partage et aide bienveillante
    - 🏠 Expert en domotique
  rightTags:
    - Pragmatique et action 🏃
    - Moteur d'équipe 🧱
    - Fort et peu bavard 💢
  image: https://cdn.lightxi.com/cloudreve/uploads/2025/08/01/tT8ILteu_logo.avif

# Titre
title: À propos de ce site

# Bloc d'introduction
# Ce module doit être écrit complètement, si pas nécessaire, peut ne pas être écrit
contentinfo: # Affichage des informations personnelles en haut
  sup: Bonjour, ravi de vous rencontrer👋
  name: Je m'appelle Wang Zhuo Sco # Nom
  title: Je suis étudiant, ingénieur logiciel, développeur indépendant, blogueur # Présentation
  tip: Poursuite
  slogan: Né de<br>l'amour pour créer
  mask:
    - Produits excellents
    - Design remarquable
    - Programmation efficace
    - Expérience utilisateur humaine

# Bloc carrousel d'icônes de compétences
# Ce module et le module carrière sont sur la même ligne, s'il n'est pas écrit, le module carrière occupe seul toute la ligne.
# Principalement les types img et icon dans les tags, où img est l'adresse de l'image, icon est le nom de l'icône, vous pouvez trouver les noms d'icônes dans Skill Icons, vous pouvez aussi chercher des icônes d'images de qualité.
skills: # Ajoutez selon vos besoins
  title: Compétences
  subtitle: Libérer la créativité
  tags:
    - title: Java
      color: "#fff"
      icon: fab fa-java
    - title: Docker
      color: "#57b6e6"
      icon: fab fa-docker
    - title: Node
      color: "#fff"
      icon: fab fa-node
    - title: Webpack
      color: "#2e3a41"
      icon: fab fa-webpack
    - title: Git
      color: "#df5b40"
      icon: fab fa-git
    - title: Python
      color: "#fff"
      icon: fab fa-python

# Bloc de carrière
careers:
  title: Carrière
  subtitle: Parcours professionnel
  items:
    - school: Université de technologie
      major: Génie logiciel
      color: "#357ef5"
    - school: Entreprise Tech
      major: Développeur Full-Stack
      color: "#357ef5"

# Bloc de projet personnel
personalities:
  tips: Personnalité
  title: Développeur passionné
  color: "#6854f5"
  items:
    - 🤖️ Passionné de technologie et d'innovation
    - 🔍 Aime partager des connaissances
    - 🏠 Expert en solutions domotiques
    - 💻 Développement full-stack
    - 🎯 Orienté résultats
    - 🌟 Apprentissage continu

# Bloc de spécialités
specialty:
  title: Spécialités
  subtitle: Domaines d'expertise
  items:
    - title: Développement Web
      icon: fab fa-html5
      color: "#e34c26"
      tips: HTML5, CSS3, JavaScript, Vue.js, React
    - title: Développement Backend
      icon: fas fa-server
      color: "#68a063"
      tips: Node.js, Python, Java, bases de données
    - title: DevOps
      icon: fab fa-docker
      color: "#0db7ed"
      tips: Docker, CI/CD, déploiement cloud
    - title: Mobile
      icon: fas fa-mobile-alt
      color: "#a4c639"
      tips: Applications hybrides, PWA

# Bloc de statistiques
statistic:
  title: Statistiques
  subtitle: Données du site
  items:
    - name: Articles
      icon: fas fa-edit
      color: "#f39c12"
      tips: "Nombre total d'articles publiés"
    - name: Tags
      icon: fas fa-tag
      color: "#e74c3c"
      tips: "Catégories de contenu"
    - title: Visiteurs
      icon: fas fa-users
      color: "#3498db"
      tips: "Visiteurs uniques"

# Bloc de récompenses
reward:
  enable: true
  title: Soutenir l'auteur
  subtitle: Si ce contenu vous aide
  items:
    - name: Alipay
      icon: fab fa-alipay
      color: "#00a0e9"
      qrcode: /img/alipay.jpg
    - name: WeChat Pay
      icon: fab fa-weixin
      color: "#2dc100"
      qrcode: /img/wechat.jpg

# Bloc de liens sociaux
social:
  title: Me suivre
  subtitle: Réseaux sociaux
  items:
    - title: GitHub
      icon: fab fa-github
      color: "#24292e"
      url: https://github.com/votre-nom
    - title: Twitter
      icon: fab fa-twitter
      color: "#1da1f2"
      url: https://twitter.com/votre-nom
    - title: Email
      icon: fas fa-envelope
      color: "#ea4335"
      url: mailto:votre@email.com

# Bloc de galerie de photos
photos:
  title: Galerie
  subtitle: Moments de vie
  items:
    - /img/photo1.jpg
    - /img/photo2.jpg
    - /img/photo3.jpg

# Bloc d'essais
essay:
  title: Réflexions
  subtitle: Pensées personnelles
  items:
    - "La technologie devrait servir l'humanité, pas l'inverse."
    - "L'apprentissage continu est la clé du succès."
    - "Partager les connaissances enrichit tout le monde."

Personnalisation avancée

Styles personnalisés

Vous pouvez personnaliser l'apparence de votre page À propos avec du CSS personnalisé :

/* Personnalisation de la page À propos */
.about-page {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.about-card {
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-radius: 15px;
}

Animations

Ajoutez des animations pour une expérience plus dynamique :

about.yml
# Ajoutez des animations aux éléments
animations:
  enable: true
  duration: 800
  delay: 200

Conseils de configuration

  1. Images optimisées : Utilisez des images de haute qualité mais optimisées pour le web
  2. Contenu concis : Gardez les descriptions courtes et impactantes
  3. Mise à jour régulière : Mettez à jour vos compétences et réalisations
  4. Cohérence visuelle : Utilisez une palette de couleurs cohérente
  5. Accessibilité : Assurez-vous que le contenu est accessible à tous