इसे छोड़कर कंटेंट पर जाएं
Starlight

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

आप अपनी Starlight साइट को कस्टम CSS फ़ाइलों के साथ स्टाइल कर सकते हैं या Starlight Tailwind प्लगइन का उपयोग कर सकते हैं।

कस्टम CSS शैलियाँ

Starlight की डिफ़ॉल्ट शैलियों को संशोधित या विस्तारित करने के लिए अतिरिक्त CSS फ़ाइलें प्रदान करके अपनी Starlight साइट पर लागू शैलियों को अनुकूलित करें।

  1. अपनी src/ निर्देशिका में एक CSS फ़ाइल जोड़ें। उदाहरण के लिए, आप पेज शीर्षकों के लिए व्यापक डिफ़ॉल्ट कॉलम चौड़ाई और बड़ा टेक्स्ट आकार सेट कर सकते हैं:

    src/styles/custom.css
    :root {
      --sl-content-width: 50rem;
      --sl-text-5xl: 3.5rem;
    }

  2. अपनी CSS फ़ाइल का पथ astro.config.mjs में Starlight के customCss सरणी में जोड़ें:

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
    

    export default defineConfig({
      integrations: [
        starlight({
          title: 'कस्टम CSS के साथ दस्तावेज़',
          customCss: [
            // आपकी कस्टम CSS फ़ाइल से संबंधित पथ
            './src/styles/custom.css',
          ],
        }),
      ],
    });

आप Starlight द्वारा उपयोग किए गए सभी CSS कस्टम गुणों को देख सकते हैं जिन्हें आप GitHub पर props.css फ़ाइल में अपनी साइट को अनुकूलित करने के लिए सेट कर सकते हैं।

Tailwind CSS

Astro परियोजनाओं में Tailwind CSS समर्थन Astro Tailwind एकीकरण द्वारा प्रदान किया जाता है। Starlight की शैलियों के साथ संगतता के लिए Tailwind को कॉन्फ़िगर करने में सहायता के लिए Starlight एक पूरक Tailwind प्लगइन प्रदान करता है।

Starlight प्लगइन निम्नलिखित कॉन्फ़िगरेशन लागू करता है:

  • Tailwind dark: कॉन्फ़िगर करना: Starlight के डार्क मोड के साथ काम करने के लिए वेरिएंट।
  • Starlight के UI में Tailwind थीम रंगों और फॉण्ट का उपयोग करता है।
  • Tailwind बॉर्डर उपयोगिता वर्गों के लिए आवश्यक Preflight के आवश्यक भागों को चुनिंदा रूप से पुनर्स्थापित करते समय Tailwind Preflight रीसेट शैलियों को अक्षम करें।

Tailwind के साथ एक नयी परियोजना बनाएं

create astro का उपयोग करके पहले से कॉन्फ़िगर किए गए Tailwind CSS के साथ एक नयी Starlight परियोजना शुरू करें:

Terminal window
npm create astro@latest -- --template starlight/tailwind

किसी मौजूदा परियोजना में Tailwind जोड़ें

यदि आपके पास पहले से ही एक Starlight साइट है और आप Tailwind CSS जोड़ना चाहते हैं, तो इन चरणों का पालन करें।

  1. Astro का Tailwind एकीकरण जोड़ें:

    Terminal window
    npx astro add tailwind

  2. Starlight Tailwind प्लगइन इंस्टॉल करें:

    Terminal window
    npm install @astrojs/starlight-tailwind

  3. Tailwind की मूल शैलियों के लिए एक CSS फ़ाइल बनाएं, उदाहरण के लिए src/tailwind.css पर:

    src/tailwind.css
    @tailwind base;
    @tailwind components;
    @tailwind utilities;

  4. अपनी Tailwind आधार शैलियों का उपयोग करने और डिफ़ॉल्ट आधार शैलियों को अक्षम करने के लिए अपनी Astro कॉन्फ़िगरेशन फ़ाइल को अपडेट करें:

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import starlight from '@astrojs/starlight';
    import tailwind from '@astrojs/tailwind';
    

    export default defineConfig({
      integrations: [
        starlight({
          title: 'Tailwind के साथ दस्तावेज़',
          customCss: [
            // आपकी Tailwind आधार शैलियों का पथ:
            './src/tailwind.css',
          ],
        }),
        tailwind({
          // डिफ़ॉल्ट आधार शैलियाँ अक्षम करें:
          applyBaseStyles: false,
        }),
      ],
    });

  5. Starlight Tailwind प्लगइन को tailwind.config.mjs में जोड़ें:

    tailwind.config.mjs
    import starlightPlugin from '@astrojs/starlight-tailwind';
    

    /** @type {import('tailwindcss').Config} */
    export default {
      content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
      plugins: [starlightPlugin()],
    };

Tailwind के साथ Starlight को स्टाइल करें

Starlight अपने UI में आपके Tailwind थीम कॉन्फिगरेशन से मूल्यों का उपयोग करेगा।

यदि सेट किया गया है, तो निम्नलिखित विकल्प Starlight की डिफ़ॉल्ट शैलियों क अवहेलन कर देंगे:

  • colors.accent — लिंक और वर्तमान वस्तु हाइलाइटिंग के लिए उपयोग किया जाता है
  • colors.gray — पृष्ठभूमि रंगों और सीमाओं के लिए उपयोग किया जाता है
  • fontFamily.sans — UI और सामग्री पाठ के लिए उपयोग किया जाता है
  • fontFamily.mono — कोड उदाहरणों के लिए उपयोग किया जाता है
tailwind.config.mjs
import starlightPlugin from '@astrojs/starlight-tailwind';
import colors from 'tailwindcss/colors';


/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
  theme: {
    extend: {
      colors: {
        // आपका पसंदीदा उच्चारण रंग. Indigo Starlight के डिफॉल्ट्स के सबसे करीब है।
        accent: colors.indigo,
        // आपका पसंदीदा ग्रे स्केल। Zinc Starlight के डिफॉल्ट्स के सबसे करीब है।
        gray: colors.zinc,
      },
      fontFamily: {
        // आपका पसंदीदा टेक्स्ट फॉण्ट। Starlight डिफ़ॉल्ट रूप से system फ़ॉन्ट स्टैक का उपयोग करता है।
        sans: ['"Atkinson Hyperlegible"'],
        // आपका पसंदीदा कोड फॉण्ट। Starlight डिफ़ॉल्ट रूप से system monospace फॉण्ट का उपयोग करता है।
        mono: ['"IBM Plex Mono"'],
      },
    },
  },
  plugins: [starlightPlugin()],
};

थीम

Starlight की रंग थीम को उसके डिफ़ॉल्ट कस्टम गुणों का अवहेलन करके नियंत्रित किया जा सकता है। इन चरों का उपयोग पूरे UI में टेक्स्ट और पृष्ठभूमि रंगों के लिए उपयोग किए जाने वाले ग्रे शेड्स की एक श्रृंखला और लिंक के लिए और मार्गदर्शन में वर्तमान वस्तु को हाइलाइट करने के लिए उपयोग किए जाने वाले उच्चारण रंग के साथ किया जाता है।

रंग थीम एडीटर

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

जब आप अपने परिवर्तनों से खुश हों, तो नीचे दिए गए CSS या Tailwind कोड को कॉपी करें और इसे अपने परियोजना में उपयोग करें।

प्रीसेट
WCAG Contrast Level
एक्सेंट
ग्रे

डार्क मोड

मुख्य पाठ को पृष्ठभूमि के साथ उच्च कॉन्ट्रास्ट के साथ ग्रे शेड में प्रदर्शित किया जाता है। लिंक को रंगीन किया जाता है। कुछ पाठ, जैसे विषय-सूची, में कम कॉन्ट्रास्ट होता है। इनलाइन कोड की एक अलग पृष्ठभूमि होती है।

लाइट मोड

मुख्य पाठ को पृष्ठभूमि के साथ उच्च कॉन्ट्रास्ट के साथ ग्रे शेड में प्रदर्शित किया जाता है। लिंक को रंगीन किया जाता है। कुछ पाठ, जैसे विषय-सूची, में कम कॉन्ट्रास्ट होता है। इनलाइन कोड की एक अलग पृष्ठभूमि होती है।

इस थीम को अपनी साइट पर लागू करने के लिए एक कस्टम CSS फ़ाइल में निम्नलिखित CSS को अपने परियोजना में जोड़ें।