ଆରମ୍ଭ କରିବା

ପୃଷ୍ଠା ଶିରୋନାମା ପୃଷ୍ଠାର ମୁଖ୍ୟ ଲକ୍ଷ୍ୟକୁ ପ୍ରକାଶ କରେ । ଏହାକୁ ବର୍ଣ୍ଣନାତ୍ମକ ଏବଂ ସଂକ୍ଷିପ୍ତ ରଖନ୍ତୁ ।

ବିଭାଗ ଶିରୋନାମା (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 ସବୁ ଏହି ପୃଷ୍ଠାରେ ଅଛି ।

ବାରମ୍ବାର ପଚରାଯାଉଥିବା ପ୍ରଶ୍ନ