Ajouter un segment

Traduction Bêta Non Officielle

Cette page a été traduite par PageTurner AI (bêta). Non approuvée officiellement par le projet. Vous avez trouvé une erreur ? Signaler un problème →

Ajouter un nouveau segment à Oh My Posh implique plusieurs étapes pour garantir une intégration correcte. Ce guide vous accompagne dans la création d'un segment complet avec tous les fichiers et enregistrements nécessaires.

Planifier votre segment

Avant de coder, définissez ces propriétés clés :

Segment ID : Un identifiant en kebab-case utilisé dans les configurations (ex : new-feature)
Go Type Name : Nom de la structure en PascalCase pour le code (ex : NewFeature)
Catégorie : Choisissez parmi cli, cloud, health, languages, music, scm, system ou web
Description : Une explication concise de la fonction du segment
Propriétés : Liste des propriétés configurables avec leurs types et valeurs par défaut
Template : Chaîne de template par défaut (ex : {{ .Text }})

Configuration automatisée (VS Code)

Si vous utilisez VS Code, vous pouvez utiliser la commande automatisée de création de segment dans le Chat VS Code :

Ouvrez le Chat VS Code (icône Chat dans la barre latérale ou Palette de commandes : "Chat: Focus on Chat View")
Tapez /segment et suivez les invites
Fournissez les détails de votre segment lorsqu'ils sont demandés
La commande créera automatiquement tous les fichiers et enregistrements nécessaires

Cette approche automatisée garantit que tous les fichiers sont créés correctement avec les conventions de nommage et l'ordre alphabétique appropriés. Si vous préférez créer le segment manuellement ou comprendre le processus, poursuivez avec les étapes manuelles ci-dessous.

Étapes manuelles

Étape 1 : Créer l'implémentation Go

Créez un nouveau fichier dans ./src/segments/ nommé d'après votre segment ID : new_feature.go.

package segments

import (
	"github.com/jandedobbeleer/oh-my-posh/src/segments/options"
)

type NewFeature struct {
	Base

	// Fields that will be available in your template
	Text string
}

// Define constants for each configurable property
const (
	// EnableNewThing enables the new functionality
	EnableNewThing options.Property = "enable_new_thing"
	// CustomText sets custom display text
	CustomText options.Property = "custom_text"
)

func (n *NewFeature) Enabled() bool {
	// Set up data for the template using property values
	n.Text = n.props.GetString(CustomText, "default value")

	// Return true if the segment should be displayed
	// You can add logic here to determine if the segment is relevant
	return true
}

func (n *NewFeature) Template() string {
	return "{{ .Text }}"
}

Conseils clés :

Utilisez la représentation UTF32 pour les icônes (ex : "\uEFF1") plutôt que les icônes elles-mêmes
Trouvez les codes d'icônes sur Nerd Fonts Cheat Sheet
Concentrez la logique dans Enabled() sur la préparation des données et la détermination de la visibilité

Étape 2 : Enregistrer votre segment

Modifiez src/config/segment_types.go pour enregistrer votre nouveau segment :

Ajouter l'enregistrement Gob

Dans la fonction init(), ajoutez votre segment au registre gob (conservez l'ordre alphabétique) :

gob.Register(&segments.NewFeature{})

Ajouter la constante de segment

Ajoutez une constante pour votre type de segment (conservez l'ordre alphabétique) :

// NEWFEATURE displays new feature information
NEWFEATURE SegmentType = "new-feature"

Ajouter à la carte Segments

Enregistrez votre segment dans la carte Segments (conservez l'ordre alphabétique) :

NEWFEATURE: func() SegmentWriter { return &segments.NewFeature{} },

Étape 3 : Créer la documentation

Créez la documentation dans website/docs/segments/[category]/[segment-id].mdx :

---
id: new-feature
title: New Feature
sidebar_label: New Feature
---

## What

Displays information about the new feature in your environment.

## Sample Configuration

import Config from "@site/src/components/Config.js";

<Config
  data={{
    type: "new-feature",
    style: "powerline",
    powerline_symbol: "\uE0B0",
    foreground: "#193549",
    background: "#ffeb3b",
    options: {
      enable_new_thing: true,
      custom_text: "Hello World",
    },
  }}
/>

## Options

| Name               | Type      | Default | Description                   |
| ------------------ | --------- | ------- | ----------------------------- |
| `enable_new_thing` | `boolean` | `false` | Enables the new functionality |
| `custom_text`      | `string`  | `""`    | Custom text to display        |

Modifiez website/sidebars.js et ajoutez votre documentation dans la catégorie appropriée (conservez l'ordre alphabétique) :

{
  type: "category",
  label: "🖥️ System", // or appropriate category
  collapsed: true,
  items: [
    // ... other segments
    "segments/system/new-feature",
    // ... more segments
  ]
}

Étape 5 : Ajouter la définition JSON Schema

Mettez à jour themes/schema.json à deux endroits :

Ajouter à l'énumération Type

Dans l'énumération des types de segments, ajoutez votre segment ID (conservez l'ordre alphabétique) :

{
  "enum": [
    "angular",
    // ... other types
    "new-feature"
    // ... more types
  ]
}

Ajouter la définition de schéma

Dans le tableau allOf, ajoutez le schéma de propriétés de votre segment (conservez l'ordre alphabétique) :

{
  "if": {
    "properties": {
      "type": { "const": "new-feature" }
    }
  },
  "then": {
    "title": "New Feature Segment",
    "description": "https://ohmyposh.dev/docs/segments/system/new-feature",
    "properties": {
      "options": {
        "properties": {
          "enable_new_thing": {
            "type": "boolean",
            "title": "Enable New Thing",
            "description": "Enables the new functionality",
            "default": false
          },
          "custom_text": {
            "type": "string",
            "title": "Custom Text",
            "description": "Custom text to display",
            "default": ""
          }
        }
      }
    }
  }
}

Étape 6 : Ajouter des tests

Créez un fichier de test src/segments/new_feature_test.go en utilisant des tests par table :

package segments

import (
	"testing"

	"github.com/jandedobbeleer/oh-my-posh/src/segments/options"
	"github.com/jandedobbeleer/oh-my-posh/src/runtime/mock"
)

func TestNewFeature(t *testing.T) {
	cases := []struct {
		Case     string
		Template string
		CustomText string
		Expected string
	}{
		{Case: "default", CustomText: "", Expected: ""},
		{Case: "custom text", CustomText: "Hello", Expected: "Hello"},
	}

	for _, tc := range cases {
		t.Run(tc.Case, func(t *testing.T) {
			env := &mock.Environment{}
			props := options.Map{
				CustomText: tc.CustomText,
			}

			segment := &NewFeature{}
			segment.Init(props, env)

			if !segment.Enabled() {
				t.Error("Expected segment to be enabled")
			}

			if segment.Text != tc.Expected {
				t.Errorf("Expected %s, got %s", tc.Expected, segment.Text)
			}
		})
	}
}

Consultez les tests existants de segments pour des exemples plus complexes et de l'inspiration.

Étape 7 : Compiler et tester

Validez votre implémentation en compilant le projet :

go build -v

Exécutez vos tests spécifiques :

go test ./src/segments/new_feature_test.go

Consignes importantes

Organisation des fichiers

Fichiers de segment : src/segments/[segment_id].go
Fichiers de tests : src/segments/[segment_id]_test.go
Documentation : website/docs/segments/[category]/[segment-id].mdx### Ordre alphabétique Conservez l'ordre alphabétique dans :
Les enregistrements gob dans init() du fichier segment_types.go
Les constantes de type segment dans segment_types.go
Les entrées de la map Segments dans segment_types.go
L'énumération des types dans themes/schema.json
Les définitions allOf dans themes/schema.json
Les éléments de navigation dans sidebars.js

Qualité du code

Utilisez des noms de propriétés et constantes significatifs
Incluez des commentaires descriptifs pour les options
Gardez la logique dans Enabled() focalisée et efficace
Utilisez des codes UTF32 pour les icônes, pas les icônes elles-mêmes
Suivez les conventions de nommage Go (PascalCase pour les éléments exportés)

Standards de documentation

Utilisez l'extension .mdx pour les fichiers de documentation
Incluez des tableaux de propriétés complets avec types, descriptions et valeurs par défaut
Fournissez des exemples de configuration réalistes
Limitez la longueur des lignes à 120 caractères
Utilisez des titres et une mise en forme appropriés

Ressources

Nerd Fonts Cheat Sheet - Trouver les codes UTF32 des icônes
Tests existants - Exemples de modèles de tests
Tests par table - Bonnes pratiques pour les tests en Go

Créer une Pull Request

Une fois toutes les étapes terminées :

Vérifiez que tout compile : go build -v
Exécutez les tests : go test ./src/segments/[your_segment]_test.go
Vérifiez le formatage : Assurez-vous que votre code suit les standards Go
Revoyez la checklist : Tous les fichiers créés/mis à jour comme décrit
Créez la PR : Incluez une description claire de ce que fait votre segment

Soyez patient pendant la revue ! 🏎

Planifier votre segment​

Configuration automatisée (VS Code)​

Étapes manuelles​

Étape 1 : Créer l'implémentation Go​

Étape 2 : Enregistrer votre segment​

Ajouter l'enregistrement Gob​

Ajouter la constante de segment​

Ajouter à la carte Segments​

Étape 3 : Créer la documentation​

Étape 4 : Mettre à jour la navigation latérale​

Étape 5 : Ajouter la définition JSON Schema​

Ajouter à l'énumération Type​

Ajouter la définition de schéma​

Étape 6 : Ajouter des tests​

Étape 7 : Compiler et tester​

Consignes importantes​

Organisation des fichiers​

Qualité du code​

Standards de documentation​

Ressources​

Créer une Pull Request​