మొదలుపెట్టడం

పేజీ శీర్షిక ఆ పేజీ ప్రధాన దృష్టిని తెలియజేస్తుంది. దానిని వివరణాత్మకంగా, అదే సమయంలో క్లుప్తంగా ఉంచండి.

విభాగ శీర్షిక (h2)

ఈ శీర్షికలు మీ వచనంలోని విభాగాలను, ఉప విభాగాలను పరిచయం చేస్తాయి. క్లుప్తంగా, వివరణాత్మకంగా, కచ్చితంగా ఉండండి.

వచనం సాధారణ ఇన్‌లైన్ గుర్తులను మోసుకొస్తుంది: మీరు గట్టిగా పలికే నొక్కుకు బొద్దు, పరిచయం చేస్తున్న పదాలకు వాలు, పాఠకుడు టైప్ చేయవలసిన దేనికైనా ఇన్‌లైన్ కోడ్, పాతబడిన సూచనలకు కొట్టివేత, మూలానికి లింకులు. లింకులను వివరణాత్మకంగా ఉంచండి — “USWDS డాక్యుమెంటేషన్ చదవండి” అనేది స్క్రీన్ రీడర్ వాడేవారికి తాము ఎక్కడికి వెళ్తున్నారో చెబుతుంది; “ఇక్కడ క్లిక్ చేయండి” చెప్పదు.

ప్రజలు ప్రభుత్వ సైట్‌ను చూడటానికి కారణం కంటెంటే. పేజీలోని మిగతాదంతా దానిని కనుగొనడానికి, చదవడానికి, దానిపై చర్య తీసుకోవడానికి తోడ్పడటానికే ఉంది.

ఉప విభాగ శీర్షిక (h3)

మీ వినియోగదారులకు అత్యంత ముఖ్యమైన సమాచారంతో మొదలుపెట్టండి, ఆ తర్వాత తక్కువ ప్రాముఖ్యత ఉన్న సమాచారాన్ని అందించండి.

అవసరాలు

Hugo Extended తనతో పాటు LibSass ను తెస్తుంది, కానీ అది USWDS 3 ను కంపైల్ చేయలేదు. sass-embedded ప్యాకేజీ ఒక నిజమైన Dart Sass బైనరీని అందిస్తుంది; Hugo దానిని కనుగొనేలా node_modules/.bin ను PATH పై ఉంచండి.

ఇన్‌స్టాలేషన్

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 అన్నీ ఈ పేజీలోనే ఉన్నాయి.

తరచుగా అడిగే ప్రశ్నలు