දායක වන්න
අපගේ ලේඛන ගොඩනැගීමේ ස්ක්‍රිප්ට් සහ පරීක්ෂණ සමඟ බූට්ස්ට්‍රැප් සංවර්ධනය කිරීමට උදවු කරන්න.
මෙවලම් සැකසීම
Bootstrap npm ස්ක්‍රිප්ට් භාවිතා කරන්නේ ලේඛන ගොඩනැගීමට සහ මූලාශ්‍ර ගොනු සම්පාදනය කිරීමටයි. අපගේ package.json හි කේතය සම්පාදනය කිරීම, ධාවන පරීක්ෂණ සහ තවත් දේ සඳහා මෙම ස්ක්‍රිප්ට් ගබඩා කර ඇත. මේවා අපගේ ගබඩාවෙන් සහ ලේඛනයෙන් පිටත භාවිතය සඳහා අදහස් නොකෙරේ.
අපගේ ගොඩනැගීමේ පද්ධතිය භාවිතා කිරීමට සහ අපගේ ලේඛන දේශීයව ධාවනය කිරීමට, ඔබට Bootstrap හි මූලාශ්‍ර ගොනු සහ Node පිටපතක් අවශ්‍ය වේ. මෙම පියවර අනුගමනය කරන්න, ඔබ රොක් කිරීමට සූදානම් විය යුතුය:
- අපගේ පරායත්තතා කළමනාකරණය කිරීමට අපි භාවිතා කරන Node.js බාගත කර ස්ථාපනය කරන්න .
- එක්කෝ Bootstrap හි මූලාශ්‍ර බාගන්න හෝ fork Bootstrap හි ගබඩාව .
- මූල
/bootstrapනාමාවලිය වෙත සංචාලනය කර package.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 හි ඇති වැනි විකුණුම්කරුවන්ගේ මිශ්‍රණයන් සඳහා අවශ්‍යතාවය ඉවත් කරයි.
අපි අපගේ GitHub ගබඩාව තුළ වෙනම ගොනුවක Autoprefixer හරහා සහාය දක්වන බ්‍රව්සර් ලැයිස්තුවක් පවත්වාගෙන යයි. විස්තර සඳහා .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.