தொடங்குவது எப்படி

பக்கத்தின் தலைப்பு அதன் முக்கியக் கவனத்தை வெளிப்படுத்துகிறது. விவரிக்கும் வகையில், சுருக்கமாக வையுங்கள்.

பிரிவுத் தலைப்பு (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 வழங்கும் அனைத்தும், நேரடி 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 அனைத்தும் இந்தப் பக்கத்தில் உள்ளன.

அடிக்கடி கேட்கப்படும் கேள்விகள்