මෙවලම් සාදන්න
අපගේ ලේඛන ගොඩනැගීමට, මූලාශ්‍ර කේතය සම්පාදනය කිරීමට, පරීක්ෂණ ධාවනය කිරීමට සහ තවත් බොහෝ දේ සඳහා Bootstrap හි ඇතුළත් npm ස්ක්‍රිප්ට් භාවිතා කරන්නේ කෙසේදැයි ඉගෙන ගන්න.
මෙවලම් සැකසීම
Bootstrap එහි ගොඩනැගීමේ පද්ධතිය සඳහා npm ස්ක්‍රිප්ට් භාවිතා කරයි. කේතය සම්පාදනය කිරීම, ධාවන පරීක්ෂණ සහ තවත් දේ ඇතුළුව රාමුව සමඟ වැඩ කිරීමට පහසු ක්‍රම අපගේ package.json හි ඇතුළත් වේ.
අපගේ ගොඩනැගීමේ පද්ධතිය භාවිතා කිරීමට සහ අපගේ ලේඛන දේශීයව ධාවනය කිරීමට, ඔබට Bootstrap හි මූලාශ්‍ර ගොනු සහ Node පිටපතක් අවශ්‍ය වේ. මෙම පියවර අනුගමනය කරන්න, ඔබ රොක් කිරීමට සූදානම් විය යුතුය:
- අපගේ පරායත්තතා කළමනාකරණය කිරීමට අපි භාවිතා කරන Node.js බාගත කර ස්ථාපනය කරන්න .
- Bootstrap හි මූලාශ්‍ර බාගන්න හෝ fork Bootstrap හි ගබඩාව .
- මූල
/bootstrapනාමාවලිය වෙත සංචාලනය කර pack.jsonnpm installහි ලැයිස්තුගත කර ඇති අපගේ දේශීය පරායත්තතා ස්ථාපනය කිරීමට ධාවනය කරන්න .
සම්පුර්ණ වූ විට, ඔබට විධාන රේඛාවෙන් ලබා දී ඇති විවිධ විධාන ක්රියාත්මක කිරීමට හැකි වනු ඇත.
npm ස්ක්‍රිප්ට් භාවිතා කිරීම
අපගේ package.json ව්‍යාපෘතිය සංවර්ධනය කිරීම සඳහා බොහෝ කාර්යයන් ඇතුළත් වේ. npm runඔබගේ ටර්මිනලයේ ඇති සියලුම npm ස්ක්‍රිප්ට් බැලීමට ධාවනය කරන්න. මූලික කාර්යයන් ඇතුළත් වේ:
| කාර්ය | විස්තර |
|---|---|
npm start |
CSS සහ JavaScript සම්පාදනය කරයි, ලේඛන ගොඩනඟයි, සහ දේශීය සේවාදායකයක් ආරම්භ කරයි. |
npm run dist |
dist/සම්පාදනය කරන ලද ගොනු සමඟ නාමාවලිය නිර්මාණය කරයි . Sass , Autoprefixer සහ terser අවශ්‍ය වේ . |
npm test |
ධාවනය කිරීමෙන් පසු දේශීයව පරීක්ෂණ ධාවනය කරයිnpm run dist |
npm run docs-serve |
දේශීයව ලේඛන ගොඩනඟා ධාවනය කරයි. |
සාස්
Bootstrap අපගේ Sass මූලාශ්‍ර ගොනු CSS ගොනු බවට සම්පාදනය කිරීම සඳහා Dart Sass භාවිතා කරයි (අපගේ ගොඩනැගීමේ ක්‍රියාවලියට ඇතුළත් වේ), ඔබ ඔබේම වත්කම් නල මාර්ගයක් භාවිතයෙන් Sass සම්පාදනය කරන්නේ නම් එයම කරන ලෙස අපි නිර්දේශ කරමු. අපි මින් පෙර Bootstrap v4 සඳහා Node Sass භාවිතා කළ නමුත් LibSass සහ Node Sass ඇතුළුව ඊට උඩින් ගොඩනගා ඇති පැකේජ දැන් අවලංගු කර ඇත .
Dart Sass 10 ක වටකුරු නිරවද්‍යතාවයක් භාවිතා කරන අතර කාර්යක්ෂමතා හේතූන් මත මෙම අගය ගැලපීමට ඉඩ නොදේ. අප විසින් උත්පාදනය කරන ලද CSS තව දුරටත් සැකසීමේදී, කුඩා කිරීමේදී වැනි, අපි මෙම නිරවද්‍යතාවය අඩු නොකරමු, නමුත් ඔබ එසේ කිරීමට තෝරා ගත්තේ නම්, බ්‍රවුසරයේ වටකුරු කිරීම සම්බන්ධ ගැටළු වළක්වා ගැනීමට අවම වශයෙන් 6ක නිරවද්‍යතාවයක් පවත්වා ගැනීමට අපි නිර්දේශ කරමු.
ස්වයං උපසර්ගය
Bootstrap විසින් Autoprefixer භාවිතා කරයි (අපගේ ගොඩනැගීමේ ක්‍රියාවලියට ඇතුළත් කර ඇත) ස්වයංක්‍රීයව සමහර CSS ගුණාංග වලට විකුණුම් උපසර්ග එක් කිරීමට. එසේ කිරීමෙන් අපගේ CSS හි ප්‍රධාන කොටස් එක් වරක් ලිවීමට ඉඩ දීමෙන් අපට කාලය සහ කේත ඉතිරි කර ගත හැකි අතර v3 හි ඇති වැනි විකුණුම්කරුවන්ගේ මිශ්‍රණයේ අවශ්‍යතාවය ඉවත් කරයි.
අපි Autoprefixer හරහා සහාය දක්වන බ්‍රව්සර් ලැයිස්තුව අපගේ GitHub ගබඩාව තුළ වෙනම ගොනුවක පවත්වාගෙන යන්නෙමු. විස්තර සඳහා .browserslistrc බලන්න .
RTLCSS
බූට්ස්ට්‍රැප් විසින් සම්පාදනය කරන ලද CSS සැකසීමට සහ ඒවා RTL බවට පරිවර්තනය කිරීමට RTLCSS භාවිතා කරයි - මූලික වශයෙන් තිරස් දිශාව දැනුවත් කිරීමේ ගුණාංග (උදා. padding-left) ඒවායේ ප්‍රතිවිරුද්ධ දේ සමඟ ප්‍රතිස්ථාපනය කරයි. එය අපට අපගේ CSS එක වරකට ලිවීමට සහ RTLCSS පාලනය සහ අගය විධාන භාවිතයෙන් සුළු වෙනස් කිරීම් සිදු කිරීමට ඉඩ සලසයි .
දේශීය ලියකියවිලි
අපගේ ප්‍රලේඛනය දේශීයව ක්රියාත්මක කිරීම සඳහා Hugo -bin npm පැකේජය හරහා ස්ථාපනය කරන Hugo භාවිතය අවශ්‍ය වේ . හියුගෝ යනු අපට ලබා දෙන ඉතා වේගවත් සහ තරමක් විස්තීරණ ස්ථිතික අඩවි උත්පාදක යන්ත්‍රයකි: මූලික ඇතුළත්, Markdown මත පදනම් වූ ගොනු, සැකිලි සහ තවත් දේ. එය ආරම්භ කරන්නේ කෙසේද යන්න මෙන්න:
- සියලු පරායත්තතා ස්ථාපනය කිරීමට ඉහත මෙවලම් සැකසුම හරහා ධාවනය කරන්න .
- මූල
/bootstrapනාමාවලියෙන්,npm run docs-serveවිධාන රේඛාවේ ධාවනය කරන්න. - ඔබගේ බ්‍රවුසරයේ විවෘත
http://localhost:9001/කරන්න, සහ voilà.
එහි ලියකියවිලි කියවීමෙන් හියුගෝ භාවිතා කිරීම ගැන තව දැනගන්න .
දෝෂගවේෂණය
පරායත්තතා ස්ථාපනය කිරීමේදී ඔබට ගැටළු ඇති වුවහොත්, පෙර පැවති සියලු පරායත්ත අනුවාද (ගෝලීය සහ දේශීය) අස්ථාපනය කරන්න. ඉන්පසු, නැවත ධාවනය කරන්න npm install.