Direct naar hoofdinhoud

Segment toevoegen

Onofficiële Beta-vertaling

Deze pagina is vertaald door PageTurner AI (beta). Niet officieel goedgekeurd door het project. Een fout gevonden? Probleem melden →

Het toevoegen van een nieuw segment aan Oh My Posh vereist verschillende stappen voor een goede integratie. Deze handleiding neemt je mee door het aanmaken van een compleet segment met alle benodigde bestanden en registraties.

Je segment plannen​

Definieer vooraf deze belangrijke eigenschappen:

  • Segment-ID: Een kebab-case-id die in configuraties wordt gebruikt (bijv. new-feature)

  • Go-typenaam: PascalCase-structnaam voor de code (bijv. NewFeature)

  • Categorie: Kies uit cli, cloud, health, languages, music, scm, system of web

  • Beschrijving: Een duidelijke eenregelige uitleg van wat het segment doet

  • Eigenschappen: Lijst van configureerbare eigenschappen met types en standaardwaarden

  • Sjabloon: Standaard sjabloonstring (bijv. {{ .Text }})

Geautomatiseerde installatie (VS Code)​

Bij gebruik van VS Code kun je het geautomatiseerde segment-aanmaakcommando in VS Code Chat gebruiken:

  1. Open VS Code Chat (gebruik het chatpictogram in de zijbalk of Opdrachtenpalet: "Chat: Focus on Chat View")

  2. Typ /segment en volg de aanwijzingen

  3. Geef de details van je segment op wanneer hierom wordt gevraagd

  4. De opdracht maakt automatisch alle benodigde bestanden en registraties aan

Deze geautomatiseerde aanpak zorgt voor correct aangemaakte bestanden met juiste naamconventies en alfabetische ordening. Ga naar de handmatige stappen hieronder als je liever zelf een segment maakt of het proces wilt begrijpen.

Handmatige installatiestappen​

Stap 1: Maak de Go-implementatie​

Maak een nieuw bestand in ./src/segments/ met je segment-ID als naam: 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 }}"
}

Belangrijke richtlijnen:

  • Gebruik UTF32-representatie voor pictogrammen (bijv. "\uEFF1") in plaats van de daadwerkelijke pictogrammen

  • Vind pictogramcodes op Nerd Fonts Cheat Sheet

  • Houd de logica in Enabled() gericht op gegevensvoorbereiding en zichtbaarheidsbepaling

Stap 2: Registreer je segment​

Bewerk src/config/segment_types.go om je nieuwe segment te registreren:

Gob-registratie toevoegen​

Voeg in de init()-functie je segment toe aan het gob-register (handhaaf alfabetische volgorde):

gob.Register(&segments.NewFeature{})

Segmentconstante toevoegen​

Voeg een constante toe voor je segmenttype (handhaaf alfabetische volgorde):

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

Toevoegen aan segmentenmap​

Registreer je segment in de Segments-map (handhaaf alfabetische volgorde):

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

Stap 3: Maak documentatie​

Maak documentatie aan op 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        |

Stap 4: Werk de zijbalknavigatie bij​

Bewerk website/sidebars.js en voeg je documentatie toe aan de juiste categorie (handhaaf alfabetische volgorde):

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

Stap 5: Voeg JSON-schemadefinitie toe​

Werk themes/schema.json bij op twee plaatsen:

Toevoegen aan type-enum​

Voeg in het segmenttype-enum je segment-ID toe (handhaaf alfabetische volgorde):

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

Schemadefinitie toevoegen​

Voeg in de allOf-array de eigenschappenschema van je segment toe (handhaaf alfabetische volgorde):

{
  "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": ""
          }
        }
      }
    }
  }
}

Stap 6: Voeg tests toe​

Maak een testbestand src/segments/new_feature_test.go met tabelgestuurde tests:

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)
			}
		})
	}
}

Bekijk bestaande segmenttests voor meer complexe voorbeelden en inspiratie.

Stap 7: Bouwen en testen​

Valideer uw implementatie door het project te bouwen:

go build -v

Voer uw specifieke tests uit:

go test ./src/segments/new_feature_test.go

Belangrijke richtlijnen​

Bestandsorganisatie​

  • Segmentbestanden: src/segments/[segment_id].go

  • Testbestanden: src/segments/[segment_id]_test.go

  • Documentatie: website/docs/segments/[category]/[segment-id].mdx### Alfabetische ordening Handhaaf alfabetische volgorde in:

  • init() gob-registraties in segment_types.go

  • Segmenttype constanten in segment_types.go

  • Segmentmapvermeldingen in segment_types.go

  • Schematype-enum in themes/schema.json

  • Schema allOf-definities in themes/schema.json

  • Zijbalknavigatie-items in sidebars.js

Codekwaliteit​

  • Gebruik betekenisvolle eigenschapsnamen en constanten

  • Neem beschrijvende opmerkingen op voor opties

  • Houd de logica in Enabled() gericht en efficiënt

  • Gebruik UTF32-codes voor pictogrammen, niet de daadwerkelijke pictogrammen

  • Volg Go-naamgevingsconventies (PascalCase voor geëxporteerde items)

Documentatiestandaarden​

  • Gebruik de extensie .mdx voor documentatiebestanden

  • Neem volledige eigenschappentabellen op met typen, beschrijvingen en standaardwaarden

  • Geef realistische voorbeeldconfiguraties

  • Houd regellengtes onder 120 tekens

  • Gebruik juiste kopteksten en opmaak

Bronnen​

Een pull-request aanmaken​

Zodra u alle stappen hebt voltooid:

  1. Controleer of alles bouwt: go build -v

  2. Voer tests uit: go test ./src/segments/[your_segment]_test.go

  3. Controleer de opmaak: Zorg ervoor dat uw code voldoet aan de Go-opmaakstandaarden

  4. Controleer de checklist: Alle bestanden zijn aangemaakt/bijgewerkt zoals hierboven beschreven

  5. Maak een PR aan: Voeg een duidelijke beschrijving toe van wat uw segment doet

Wees geduldig tijdens het beoordelingsproces! 🏎