आरंभ करना

पृष्ठ शीर्षक पृष्ठ के मुख्य फोकस को बताता है। इसे वर्णनात्मक और संक्षिप्त रखें।

अनुभाग शीर्षक (h2)

ये शीर्षक आपके मुख्य पाठ के भीतर अनुभागों और उप-अनुभागों का परिचय देते हैं। संक्षिप्त, वर्णनात्मक और सटीक रहें।

मुख्य पाठ में सामान्य इनलाइन चिह्न होते हैं: ज़ोर देने के लिए जिसे आप बोलकर कहेंगे बोल्ड, पेश किए जा रहे शब्दों के लिए इटैलिक, जो कुछ पाठक टाइप करेगा उसके लिए इनलाइन कोड, पुराने पड़ चुके मार्गदर्शन के लिए स्ट्राइकथ्रू, और स्रोत के लिंक। लिंक को वर्णनात्मक रखें — “USWDS दस्तावेज़ीकरण पढ़ें” स्क्रीन रीडर उपयोगकर्ता को बताता है कि वे कहाँ जा रहे हैं; “यहाँ क्लिक करें” ऐसा नहीं करता।

लोग सरकारी साइट पर सामग्री के लिए आते हैं। पृष्ठ पर बाकी सब कुछ उन्हें इसे खोजने, पढ़ने और इस पर कार्रवाई करने में मदद करने के लिए है।

उप-अनुभाग शीर्षक (h3)

उस जानकारी से शुरू करें जो आपके उपयोगकर्ताओं के लिए सबसे महत्वपूर्ण है, फिर कम महत्वपूर्ण जानकारी प्रस्तुत करें।

आवश्यकताएँ

Hugo Extended LibSass के साथ आता है, जो USWDS 3 को कंपाइल नहीं कर सकता। sass-embedded पैकेज एक वास्तविक Dart Sass बाइनरी प्रदान करता है; node_modules/.bin को PATH पर रखें ताकि Hugo इसे ढूँढ सके।

इंस्टॉलेशन

1. डिपेंडेंसीज़ इंस्टॉल करें

   @uswds/uswds और बिल्ड टूलचेन प्राप्त करने के लिए npm install चलाएँ।

   npm install @uswds/uswds@3 sass-embedded
   

2. माउंट्स घोषित करें

   exampleSite/hugo.toml से [module] ब्लॉक कॉपी करें। कोई भी माउंट घोषित करने से हर डिफ़ॉल्ट बदल जाता है, इसलिए उन सभी को सूचीबद्ध किया जाना चाहिए।

   [[module.mounts]]
     source = "node_modules/@uswds/uswds/dist"
     target = "assets/uswds-dist"
   

3. बिल्ड करें

   hugo चलाएँ — पहला बिल्ड Sass कंपाइल करता है और धीमा होता है; बाद के बिल्ड कैश किए जाते हैं।

प्रीसेट

एक प्रीसेट तय करता है कि कौन से USWDS घटक कंपाइल होते हैं। हर साइट केवल उन घटकों के लिए भुगतान करती है जिन्हें वह सूचीबद्ध करती है, और कुछ नहीं।¹

• minimal सबसे छोटा — केवल क्रोम और प्रोज़।
• standard डिफ़ॉल्ट — अधिकांश साइटें उपयोग करने वाले सामग्री घटक जोड़ता है।
• full — अपस्ट्रीम जो कुछ भी भेजता है वह सब, स्टॉक USWDS के बराबर।
• custom — आपका अपना assets/uswds/_manifest.scss।

प्रीसेट बदलना hugo.toml में एक पंक्ति है। साइट में और कुछ नहीं बदलता:

[params.uswds]
  preset = "standard"

प्रीसेट

कौन से घटक कंपाइल होते हैं। आप जो CSS भेजते हैं वह बदल जाता है।

थीम सेटिंग्स

[params.uswds.theme] के अंतर्गत रंग, टाइप और लेआउट। उन घटकों के दिखने का तरीका बदल जाता है।

यूटिलिटीज़

उत्सर्जित यूटिलिटी क्लास परिवार। इन्हें छाँटना सुरक्षित है — npm run check किसी भी ऐसी चीज़ की रिपोर्ट करता है जिसे कोई टेम्पलेट अभी भी उपयोग करता है।

सामग्री लिखना

साधारण मार्कडाउन ही इनपुट है। अक्रमित सूचियाँ अपेक्षानुसार काम करती हैं, और जहाँ किसी बिंदु के वास्तव में उप-बिंदु हों वहाँ एक स्तर नेस्ट करें:

• दूसरे पुरुष में लिखें, और बताएँ कि पाठक को क्या करना चाहिए।
• वाक्य को आगे लोड करें।
  • कार्रवाई को पहले रखें।
  • योग्यता को दूसरे स्थान पर रखें।
• हर वह शब्द काटें जो अपने ही हटाए जाने से बच जाता है।

क्रमित सूचियाँ क्रम बताती हैं, इसलिए इनका उपयोग तभी करें जब क्रम मायने रखता हो:

1. किसी वास्तविक उपयोगकर्ता कार्य के विरुद्ध पृष्ठ का मसौदा तैयार करें।
2. इसे ज़ोर से पढ़ें।
3. इसका एक तिहाई हिस्सा हटा दें।

कार्य सूचियाँ उस काम को ट्रैक करती हैं जो अभी पूरा नहीं हुआ है:

• साइट क्रोम और सामग्री घटक
• लैंडिंग और दस्तावेज़ीकरण टेम्पलेट
• फ़ॉर्म नियंत्रण और उन्नत इंटरैक्शन

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

exampleSite/
  content/
  hugo.toml

ऊपर सब कुछ थीम के अपने टेम्पलेट द्वारा रेंडर किया जाता है। जिन घटकों के लिए मार्कडाउन में कोई सिंटैक्स नहीं है वे शॉर्टकोड हैं — alert, accordion, process-list, summary-box, tag और icon सभी इस पृष्ठ पर हैं।

अक्सर पूछे जाने वाले सवाल