Zum Inhalt springen
Starlight Tags

Getting Started

Dieser Inhalt ist noch nicht in deiner Sprache verfügbar.

A plugin to add tags to your Starlight documentation site. Tags help organize and categorize your content, making it easier for users to discover related pages.

Prerequisites

Section titled “Prerequisites”

You will need to have a Starlight website set up. If you don’t have one yet, you can follow the “Getting Started” guide in the Starlight docs to create one.

Installation

Section titled “Installation”

  1. starlight-tags is a Starlight plugin. Install it by running the following command in your terminal:

    Terminal window
    npm install starlight-tags

  2. Configure the plugin in your Starlight configuration in the astro.config.mjs file.

    astro.config.mjs
    import starlight from '@astrojs/starlight'
    import { defineConfig } from 'astro/config'
    import starlightTags from 'starlight-tags'
    

    export default defineConfig({
      integrations: [
        starlight({
          plugins: [starlightTags()],
          title: 'My Docs',
        }),
      ],
    })

  3. Create a tags.yml file to define your tags. Place it in your project root, or in a subfolder like src/config/ by setting the configPath option:

    tags.yml
    tags:
      getting-started:
        label: "Getting Started"
        description: "Essential first steps"
        color: "#22c55e"
        icon: "🚀"
        priority: 100
    

      components:
        label: "Components"
        description: "UI building blocks"
        color: "#3b82f6"
        icon: "🧩"
    

      advanced:
        label: "Advanced"
        description: "For experienced users"
        color: "#f59e0b"
        icon: "⚡"
        difficulty: advanced
        prerequisites:
          - getting-started
    

    defaults:
      color: "#6b7280"

  4. Add tags to your pages using frontmatter:

    ---
    title: Authentication Guide
    tags:
      - authentication
      - rest-api
      - stable
    ---
    

    Your content here...

  5. Start the development server to preview the plugin in action.

What You Get

Section titled “What You Get”

After installation, the plugin automatically creates:

  • Tags Index Page at /tags - Lists all available tags
  • Tag Detail Pages at /tags/[tag] - Shows all pages for each tag

Next Steps

Section titled “Next Steps”