साइडबार मार्ग-निर्देशन

एक सुव्यवस्थित साइडबार एक अच्छे दस्तावेज़ीकरण की कुंजी है क्योंकि यह उन मुख्य तरीकों में से एक है जिनसे उपयोगकर्ता आपकी साइट पर मार्ग-निर्देशन करेंगे। Starlight आपके साइडबार लेआउट और कंटेंट को अनुकूलित करने के लिए विकल्पों का एक पूरा सेट प्रदान करता है।

डिफ़ॉल्ट साइडबार

डिफ़ॉल्ट रूप से, Starlight स्वचालित रूप से आपके दस्तावेज़ की संचिका प्रणाली संरचना के आधार पर साइडबार प्रविष्टि के रूप में प्रत्येक फ़ाइल की title गुण का उपयोग करके एक साइडबार उत्पन्न करेगा।

उदाहरण के लिए, निम्नलिखित फ़ाइल संरचना दी गई है:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directoryguides/

        • components.md
        • i18n.md
      • Directoryreference/

        • configuration.md

निम्नलिखित साइडबार स्वचालित रूप से उत्पन्न हो जाएगा:

• guides

  • अवयवों
  • अंतर्राष्ट्रीयकरण (i18n)
• reference

  • कॉन्फ़िगरेशन संदर्भ

स्वतः-निर्मित समूह अनुभाग में स्वतः-निर्मित साइडबार के बारे में और जानें।

लिंक और लिंक समूह जोड़ें

अपने साइडबार लिंक और लिंक के समूहों (एक सिमटने वाले शीर्ष लेख के भीतर) को कॉन्फ़िगर करने के लिए, astro.config.mjs में starlight.sidebar गुण का उपयोग करें।

लिंक और समूहों को मिलाकर, आप विभिन्न प्रकार के साइडबार लेआउट बना सकते हैं।

लिंक

label और link गुणों वाले ऑब्जेक्ट का उपयोग करके किसी आंतरिक या बाहरी पृष्ठ पर एक लिंक जोड़ें।

starlight({
  sidebar: [
    // CSS और स्टाइलिंग मार्गदर्शिका का लिंक।
    { label: 'CSS और स्टाइलिंग', link: '/hi/guides/css-and-tailwind/' },
    // Astro वेबसाइट का एक बाहरी लिंक।
    { label: 'Astro', link: 'https://astro.build/' },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• CSS और स्टाइलिंग
• Astro

समूह

आप एक सिमटने वाले शीर्षक के अंतर्गत संबंधित लिंक को एक साथ समूहित करके अपने साइडबार में संरचना जोड़ सकते हैं। समूहों में लिंक और अन्य उप-समूह दोनों हो सकते हैं।

label और items गुणों वाले ऑब्जेक्ट का उपयोग करके एक समूह जोड़ें। label का उपयोग समूह के शीर्षक के रूप में किया जाएगा। items सरणी में लिंक या उपसमूह जोड़ें।

starlight({
  sidebar: [
    // "मार्गदर्शिका" लेबल वाले लिंक का एक समूह।
    {
      label: 'मार्गदर्शिका',
      items: [
        { label: 'अवयवों', link: '/hi/guides/components/' },
        { label: 'अंतर्राष्ट्रीयकरण (i18n)', link: '/hi/guides/i18n/' },
        // लिंक का एक नेस्टेड समूह।
        {
          label: 'स्टाइलिंग',
          items: [
            { label: 'CSS', link: '/hi/guides/css-and-tailwind/' },
            { label: 'Tailwind', link: '/hi/guides/css-and-tailwind/' },
            { label: 'Shiki', link: '/hi/guides/css-and-tailwind/' },
          ],
        },
      ],
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • अवयवों
  • अंतर्राष्ट्रीयकरण (i18n)
  • स्टाइलिंग

    • CSS
    • Tailwind
    • Shiki

स्वतः निर्मित समूह

Starlight स्वचालित रूप से आपके दस्तावेज़ों की निर्देशिका के आधार पर आपके साइडबार में एक समूह उत्पन्न कर सकता है। यह तब सहायक होता है जब आप किसी समूह में प्रत्येक साइडबार आइटम को मैन्युअल रूप से दर्ज नहीं करना चाहते हैं।

डिफ़ॉल्ट रूप से, पेजों को फ़ाइल slug के अनुसार वर्णानुक्रम में क्रमबद्ध किया जाता है।

label और autogenerate गुणों वाले ऑब्जेक्ट का उपयोग करके एक स्वतः निर्मित समूह जोड़ें। साइडबार प्रविष्टियों के लिए उपयोग करने के लिए आपके autogenerate कॉन्फ़िगरेशन को directory निर्दिष्ट करना होगा। उदाहरण के लिए, निम्नलिखित कॉन्फ़िगरेशन के साथ:

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      // 'गाइड' निर्देशिका के लिए लिंक का एक समूह स्वतः उत्पन्न करें।
      autogenerate: { directory: 'guides' },
    },
  ],
});

और निम्न फ़ाइल संरचना:

• Directorysrc/

  • Directorycontent/

    • Directorydocs/

      • Directoryguides/

        • components.md
        • i18n.md
        • Directoryadvanced/

          • project-structure.md

निम्नलिखित साइडबार उत्पन्न होगा:

• मार्गदर्शिका

  • अवयवों
  • अंतर्राष्ट्रीयकरण (i18n)
  • advanced

    • परियोजना संरचना

फ्रंटमैटर में स्वतः निर्मित लिंक को अनुकूलित करना

स्वचालित रूप से उत्पन्न किए गए लिंक को अनुकूलित करने के लिए अलग-अलग पृष्ठों में sidebar फ्रंटमैटर क्षेत्र का उपयोग करें।

साइडबार फ्रंटमैटर विकल्प आपको एक कस्टम लेबल सेट करने या किसी लिंक में एक बैज जोड़ने, साइडबार से एक लिंक छिपाने या एक कस्टम सॉर्ट भार परिभाषित करने की अनुमति देते हैं।

src/content/docs/example.md

---
title: मेरा पेज
sidebar:
  # लिंक के लिए एक कस्टम लेबल सेट करें
  label: कस्टम साइडबार लेबल
  # लिंक के लिए एक कस्टम क्रम सेट करें (निचले अंक ऊपर प्रदर्शित होते हैं)
  order: 2
  # लिंक में एक बैज जोड़ें
  badge:
    text: नया
    variant: tip
---

उपरोक्त फ्रंटमैटर वाले पृष्ठ सहित एक स्वत: उत्पन्न किया गया समूह निम्नलिखित साइडबार उत्पन्न करेगा:

• मार्गदर्शिका

  • एक पेज
  • कस्टम साइडबार लेबल नया
  • एक अन्य पेज

टिप्पणी

sidebar फ्रंटमैटर कॉन्फ़िगरेशन का उपयोग केवल स्वतः निर्मित लिंक के लिए किया जाता है और मैन्युअल रूप से परिभाषित लिंक के लिए इसे अनदेखा किया जाएगा।

बैजेस

लिंक, समूह और स्वत: उत्पन्न किए गए समूह अपने लेबल के आगे बैज प्रदर्शित करने के लिए badge गुण भी शामिल कर सकते हैं।

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      items: [
        // "नया" बैज वाला एक लिंक.
        {
          label: 'अवयवों',
          link: '/hi/guides/components/',
          badge: 'नया',
        },
      ],
    },
    // "पदावनत" बैज वाला एक स्वतः निर्मित समूह।
    {
      label: 'संदर्भ',
      badge: 'पदावनत',
      autogenerate: { directory: 'reference' },
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • अवयवों नया
• संदर्भ पदावनत

  • कॉन्फ़िगरेशन संदर्भ
  • फ्रंटमैटर संदर्भ
  • ओवरराइड संदर्भ

बैज वेरिएंट

text और variant गुणों वाले ऑब्जेक्ट का उपयोग करके बैज स्टाइल को अनुकूलित करें।

text प्रदर्शित की जाने वाली कंटेंट का प्रतिनिधित्व करता है (उदाहरण के लिए “नया”)। variant गुण को निम्नलिखित मानों में से किसी एक पर सेट करके default स्टाइल को ओवरराइड करें, जो आपकी साइट के उच्चारण रंग का उपयोग करता है: note, tip, danger, caution या success।

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      items: [
        // पीले "प्रयोगात्मक" बैज वाला एक लिंक।
        {
          label: 'अवयवों',
          link: '/hi/guides/components/',
          badge: { text: 'प्रयोगात्मक', variant: 'caution' },
        },
      ],
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • अवयवों प्रयोगात्मक

कस्टम HTML विशेषताएँ

लिंक तत्व में कस्टम HTML विशेषताएँ जोड़ने के लिए लिंक में attrs गुण भी शामिल हो सकती है।

निम्नलिखित उदाहरण में, attrs का उपयोग target='_blank' विशेषता जोड़ने के लिए किया जाता है, ताकि लिंक एक नए टैब में खुले, और लिंक लेबल को इटैलिकाइज़ करने के लिए एक कस्टम style विशेषता लागू करने के लिए:

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      items: [
        // Astro दस्तावेज़ीकरण का एक बाहरी लिंक एक नए टैब में खुलेगा।
        {
          label: 'Astro दस्तावेज़ीकरण',
          link: 'https://docs.astro.build/',
          attrs: { target: '_blank', style: 'font-style: italic' },
        },
      ],
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • Astro दस्तावेज़ीकरण

अंतर्राष्ट्रीयकरण

BCP-47 भाषा टैग निर्दिष्ट करके प्रत्येक समर्थित भाषा के लिए लिंक या समूह लेबल का अनुवाद करने के लिए लिंक और समूह प्रविष्टियों पर translations संपत्ति का उपयोग करें, उदाहरण के लिए "en", "ar", या "zh-CN", कुंजी के रूप में और अनुवादित लेबल मान के रूप में। label गुण का उपयोग डिफ़ॉल्ट लोकेल और बिना अनुवाद वाली भाषाओं के लिए किया जाएगा।

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      translations: {
        'pt-BR': 'Guias',
      },
      items: [
        {
          label: 'अवयवों',
          translations: {
            'pt-BR': 'Componentes',
          },
          link: '/hi/guides/components/',
        },
        {
          label: 'अंतर्राष्ट्रीयकरण (i18n)',
          translations: {
            'pt-BR': 'Internacionalização (i18n)',
          },
          link: '/hi/guides/i18n/',
        },
      ],
    },
  ],
});

ब्राज़ीलियाई पुर्तगाली में दस्तावेज़ ब्राउज़ करने से निम्नलिखित साइडबार उत्पन्न होगा:

• Guias

  • Componentes
  • Internacionalização (i18n)

सिमटने वाले समूह

collapsed गुण को true पर सेट करके लिंक के समूहों को डिफ़ॉल्ट रूप से संक्षिप्त किया जा सकता है।

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      // डिफ़ॉल्ट रूप से समूह को संक्षिप्त करें।
      collapsed: true,
      items: [
        { label: 'अवयवों', link: '/hi/guides/components/' },
        { label: 'अंतर्राष्ट्रीयकरण (i18n)', link: '/hi/guides/i18n/' },
      ],
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • अवयवों
  • अंतर्राष्ट्रीयकरण (i18n)

स्वतः निर्मित समूह respect the collapsed value of their parent group:

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      // डिफ़ॉल्ट रूप से समूह और उसके स्वत: उत्पन्न उपसमूहों को सिमटने वाले करें।
      collapsed: true,
      autogenerate: { directory: 'guides' },
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • अवयवों
  • अंतर्राष्ट्रीयकरण (i18n)
  • advanced

    • परियोजना संरचना

autogenerate.collapsed गुण को परिभाषित करके इस व्यवहार को ओवरराइड किया जा सकता है।

starlight({
  sidebar: [
    {
      label: 'मार्गदर्शिका',
      // "मार्गदर्शक" समूह को सिमटने वाले न करें बल्कि उसके स्वत: उत्पन्न उपसमूहों
      // को सिमटने वाले करें।
      collapsed: false,
      autogenerate: { directory: 'guides', collapsed: true },
    },
  ],
});

उपरोक्त कॉन्फ़िगरेशन निम्नलिखित साइडबार उत्पन्न करता है:

• मार्गदर्शिका

  • अवयवों
  • अंतर्राष्ट्रीयकरण (i18n)
  • advanced

    • परियोजना संरचना