विन्यास

थीम विकल्प

color_mode केवल प्रारंभिक मोड सेट करता है। विज़िटर इसे हेडर के साथ बदल सकते हैं टॉगल करें, और उनकी पसंद localStorage में संग्रहीत हो जाती है।

toc तय करता है कि पृष्ठ के शीर्षकों से बनी रूपरेखा कहाँ जाए। auto उसे दाहिनी पट्टी में रखता है जब खिड़की में तीसरे स्तंभ की जगह हो, अन्यथा पृष्ठ-शीर्षक के नीचे — वहाँ वह पाठक द्वारा खोला जाने वाला ब्लॉक है, न कि शीर्षक और पहले अनुच्छेद के बीच खड़ी सूची। expanded उसे प्रवाह में रखता है और पट्टी से बाहर, collapsed उसे खोलने-योग्य ब्लॉक बनाता है, और hidden — या false — उसे हटा देता है।

चिह्न

हेडर नेविगेशन, रंग-मोड नियंत्रण और बैक-टू-टॉप बटन इनलाइन एसवीजी का उपयोग करते हैं एक आइकन सेट से. octicons डिफ़ॉल्ट है; ल्यूसिड आइकन चुनें के साथ:

theme:
  name: primer
  icon: lucide

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

फ़ॉन्ट्स

फ़ॉन्ट ऑप्ट-इन हैं: थीम डिफ़ॉल्ट रूप से फ़ॉन्ट सीडीएन का अनुरोध नहीं करती है। टेक्स्ट सेट करें और कोड परिवारों को स्वतंत्र रूप से, फिर किसी बाहरी स्टाइलशीट पर source इंगित करें या docs_dir में एक CSS फ़ाइल:

theme:
  name: primer
  font:
    text: 'Inter, sans-serif'
    code: '"JetBrains Mono", monospace'
    source: https://fonts.googleapis.com/css2?family=Inter:wght@400;600&family=JetBrains+Mono&display=swap

स्वयं-होस्ट की गई साइट के लिए, docs_dir में फ़ॉन्ट फ़ाइलें और एक स्टाइलशीट डालें, फिर सापेक्ष स्रोत पथ का उपयोग करें:

theme:
  name: primer
  font:
    text: 'Atkinson Hyperlegible, sans-serif'
    code: 'Atkinson Hyperlegible Mono, monospace'
    source: fonts/fonts.css

@font-face {
  font-family: "Atkinson Hyperlegible";
  src: url("AtkinsonHyperlegible-Regular.woff2") format("woff2");
  font-display: swap;
}

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

दाएं से बाएं लेआउट

दाएं से बाएं दस्तावेज़ के लिए direction: rtl सेट करें। थीम dir="rtl" रखती है मूल HTML तत्व पर और उसके हेडर, साइडबार, मोबाइल नेविगेशन को प्रतिबिंबित करता है, तार्किक सीएसएस गुणों के साथ पृष्ठांकन, पाद लेख, मेनू और नियंत्रण। कोड और आरेख जानबूझकर बाएँ से दाएँ रहते हैं।

theme:
  name: primer
  direction: rtl

दिशा एक साइट-व्यापी सेटिंग है; विषय किसी पृष्ठ से इसका अनुमान नहीं लगाता है भाषा स्थान.

!!! चेतावनी "light_theme और dark_theme वर्तमान में केवल light और dark स्वीकार करते हैं" प्राइमर ने चौदह थीम प्रकाशित की हैं (dark_dimmed, light_high_contrast, dark_tritanopia इत्यादि), लेकिन यह थीम केवल दो के लिए रंगीन टोकन भेजती है उन्हें - पूरा सेट सीएसएस के एक मेगाबाइट से अधिक जोड़ देगा। किसी अन्य विषय का नामकरण किसी त्रुटि के बजाय बिना किसी रंग वाला पृष्ठ प्रस्तुत करता है। अधिक विषयों के लिए समर्थन भविष्य में होने वाले जोड़ के रूप में ट्रैक किया जाता है।

हेडिंग एंकर

प्रत्येक शीर्षक के आगे GitHub का होवर एंकर प्राप्त करने के लिए, toc एक्सटेंशन को सक्षम करें प्रमुख पर्मलिंक जो प्राइमर की anchor क्लास को वहन करता है:

markdown_extensions:
  - toc:
      permalink: ""
      permalink_class: anchor
      permalink_leading: true
      permalink_title: Permanent link

थीम ऑक्टिकॉन को स्वयं खींचती है, इसलिए permalink को एक खाली स्ट्रिंग पर सेट किया गया है सामान्य true से अधिक। यह दिखावे से अधिक मायने रखता है: MkDocs का खोज प्लगइन नहीं पर्मलिंक ग्लिफ़ को स्ट्रिप करें, ताकि अन्यथा एक ¶ आपके खोज परिणामों में दिखाई दे।

इस कॉन्फ़िगरेशन के बिना पर्मलिंक अभी भी काम करता है, यह केवल एक सादे ग्लिफ़ के रूप में प्रस्तुत होता है ऑक्टिकॉन की तुलना में.

वाक्य - विन्यास पर प्रकाश डालना

कोड रंग प्राइमर के prettylights वेरिएबल्स से आते हैं, इसलिए वे सक्रिय का अनुसरण करते हैं रंग मोड स्वचालित रूप से. किसी पिगमेंट शैली का चयन करने की आवश्यकता नहीं है:

markdown_extensions:
  - pymdownx.highlight
  - pymdownx.superfences

.highlight और .codehilite दोनों रैपर स्टाइल किए गए हैं, इसलिए codehilite भी काम करता है।

थीम प्रत्येक Pygments .highlight ब्लॉक में एक कॉपी बटन जोड़ती है। यह कॉपी करता है दृश्य स्रोत और घोषणा करता है कि क्लिपबोर्ड ऑपरेशन सफल हुआ या नहीं। ब्लॉक मरमेड और वेगा-लाइट जैसे प्लगइन्स द्वारा प्रस्तुत, जानबूझकर बाहर रखा गया है।

नेविगेशन नियंत्रण

400 पिक्सेल स्क्रॉल करने के बाद, नीचे दाईं ओर एक बैक-टू-टॉप बटन दिखाई देता है पेज का. यह विज़िटर को दस्तावेज़ की शुरुआत में लौटाता है और आगे बढ़ता है साइट-शीर्षक लिंक पर कीबोर्ड फोकस। आगंतुक के आने पर हलचल तत्काल होती है कम गति का अनुरोध किया है.

मार्कडाउन एक्सटेंशन

इनमें से किसी की भी आवश्यकता नहीं है, लेकिन थीम जहाज स्टाइल केवल एक बार ही लाभदायक होता है वे चालू हैं:

markdown_extensions:
  - admonition   # !!! note blocks, colored with Primer's alert palette
  - def_list
  - footnotes
  - tables
  - pymdownx.highlight
  - pymdownx.superfences
  - pymdownx.tilde

admonition वह है जो ध्यान देने योग्य है: एक्सटेंशन मार्कअप उत्सर्जित करता है और कोई सीएसएस नहीं स्वयं का, और @primer/css के पास इसके लिए कोई नियम भी नहीं है, इसलिए यह एक अनस्टाइल है चेतावनी एक सामान्य आश्चर्य है. विषय उस अंतर को भरता है - देखिए उदाहरण।

कस्टम सीएसएस और जावास्क्रिप्ट

थीम शिप होने वाली प्रत्येक स्टाइलशीट के बाद extra_css लोड किया जाता है, इसलिए आपके नियम जीत जाते हैं !important की आवश्यकता के बिना:

extra_css:
  - css/overrides.css
extra_javascript:
  - js/site.js
  # MkDocs 1.5+ also takes the mapping form.
  - path: js/chart.js
    type: module

Styling बताता है कि उसमें क्या लिखना है: थीम की अपनी लेआउट वेरिएबल, और :root में Primer के रंग टोकन को बदलना क्यों काम नहीं करता, जबकि वही नियम दो एट्रिब्यूट सिलेक्टर के नीचे लागू हो जाता है।

extra_javascript थीम के बाद, <body> के अंत में उत्सर्जित होता है स्क्रिप्ट.

!!! ध्यान दें "प्लगइन्स जो अपनी संपत्ति इंजेक्ट करते हैं" एक प्लगइन जो <link> टैग को जोड़ने के बजाय पृष्ठ HTML में लिखता है extra_css - mkdocs-glightbox एक है - आपके ओवरराइड के बाद * लैंड करता है। अंदाज ऑर्डर पर निर्भर रहने के बजाय अधिक विशिष्ट चयनकर्ता वाले।

लिंक संपादित करें

जब repo_url और edit_uri सेट होते हैं तो पाद लेख वापस स्रोत फ़ाइल से लिंक हो जाता है:

repo_url: https://github.com/you/your-project
edit_uri: edit/main/docs/