Faka isandla
Siza ukuthuthukisa i-Bootstrap ngemibhalo yethu yokwakha amadokhumenti nokuhlola.
Ukusethwa kwamathuluzi
I-Bootstrap isebenzisa imibhalo ye- npm ukwakha imibhalo futhi ihlanganise amafayela omthombo. I- package.json yethu igcina lezi zikripthi zokuhlanganisa amakhodi, ukuhlola okusebenzayo, nokuningi. Lokhu akuhloselwe ukusetshenziswa ngaphandle kwendawo yethu yokugcina kanye nemibhalo.
Ukuze usebenzise isistimu yethu yokwakha nokusebenzisa imibhalo yethu endaweni, uzodinga ikhophi yamafayela omthombo we-Bootstrap kanye ne-Node. Landela lezi zinyathelo futhi kufanele ulungele ukuzamazama:
- Landa futhi ufake i-Node.js , esiyisebenzisela ukuphatha ukuncika kwethu.
- Ungalanda imithombo ye-Bootstrap noma indawo yokugcina ye-Bootstrap yemfoloko .
- Zulazulela kuhlu
/bootstrap
lwemibhalo oluyimpande bese ugijimanpm install
ukuze ufake okuncika kwethu kwendawo okusohlwini lwe- package.json .
Uma usuqedile, uzokwazi ukusebenzisa imiyalo ehlukahlukene enikelwe emugqeni womyalo.
Ukusebenzisa izikripthi ze-npm
I- package.json yethu ihlanganisa imisebenzi eminingi yokuthuthukisa iphrojekthi. Gijimani npm run
ukuze ubone zonke izikripthi ze-npm kutheminali yakho. Imisebenzi eyinhloko ihlanganisa:
Umsebenzi | Incazelo |
---|---|
npm start |
Ihlanganisa i-CSS ne-JavaScript, yakha imibhalo, bese iqala iseva yendawo. |
npm run dist |
Idala dist/ uhla lwemibhalo ngamafayela ahlanganisiwe. Isebenzisa i- Sass , i- Autoprefixer , ne- terser . |
npm test |
Isebenzisa izivivinyo endaweni ngemva kokusebenzanpm run dist |
npm run docs-serve |
Yakha futhi iqhube imibhalo endaweni. |
Sass
I-Bootstrap isebenzisa i - Dart Sass ukuze ihlanganise amafayela ethu omthombo we-Sass kumafayela e-CSS (afakwe ohlelweni lwethu lokwakha), futhi sincoma ukuthi wenze okufanayo uma uhlanganisa i-Sass usebenzisa ipayipi lakho lempahla. Ngaphambilini sasebenzisa i-Node Sass ye-Bootstrap v4, kodwa i-LibSass namaphakheji akhelwe phezu kwayo, okuhlanganisa i-Node Sass, manje asehoxisiwe .
I-Dart Sass isebenzisa ukunemba okuyindilinga okungu-10 futhi ngenxa yezizathu zokusebenza kahle ayikuvumeli ukulungiswa kwaleli nani. Asehlisi lokhu kunemba phakathi nokucutshungulwa okwengeziwe kwe-CSS yethu ekhiqiziwe, njengalapho kuncishiswa, kodwa uma ukhethe ukwenza kanjalo sincoma ukuthi ugcine ukunemba okungenani okungu-6 ukuze uvimbele izinkinga ngokufinyezwa kwesiphequluli.
Isiqalo esizenzakalelayo
I -Bootstrap isebenzisa i -Autoprefixer (efakwe kunqubo yethu yokwakha) ukwengeza ngokuzenzakalelayo iziqalo zomthengisi kwezinye izakhiwo ze-CSS ngesikhathi sokwakha. Ukwenza kanjalo kusisindisa isikhathi nekhodi ngokusivumela ukuthi sibhale izingxenye ezibalulekile ze-CSS yethu ngesikhathi esisodwa kuyilapho sisusa isidingo sezingxube zabathengisi njengalezo ezitholakala ku-v3.
Sigcina uhlu lweziphequluli ezisekelwa nge-Autoprefixer kufayela elihlukile ngaphakathi kwendawo yethu ye-GitHub. Bona i- .browserslistrc ukuze uthole imininingwane.
I-RTLCSS
I -Bootstrap isebenzisa i -RTLCSS ukuze icubungule i-CSS ehlanganisiwe futhi iyiguqulele ku-RTL - ngokuyisisekelo ishintsha izindawo eziqaphela indawo evundlile (isb padding-left
) ngokuphambene nazo. Kusivumela ukuthi sibhale i-CSS yethu kanye kuphela futhi senze ama-tweaks amancane sisebenzisa ukulawula kwe -RTLCSS neziqondiso zenani .
Amadokhumenti wendawo
Ukuqalisa imibhalo yethu endaweni kudinga ukusetshenziswa kwe-Hugo, efakwa ngephakheji ye- hugo-bin npm. I-Hugo iyijeneretha yesayithi emile eshesha kakhulu futhi eyandiswa kakhulu esihlinzeka: okuyisisekelo kuhlanganisa, amafayela asekelwe ku-Markdown, izifanekiso, nokuningi. Nansi indlela yokuyiqalisa:
- Sebenzisa ukusetha kwamathuluzi ngenhla ukuze ufake konke okuncikile.
- Kusuka
/bootstrap
kumkhombandlela wezimpande, sebenzisanpm run docs-serve
umugqa womyalo. - Vula
http://localhost:9001/
esipheqululini sakho, futhi voilà.
Funda kabanzi ngokusebenzisa i-Hugo ngokufunda imibhalo yayo .
Ukuxazulula inkinga
Uma kwenzeka uhlangabezana nezinkinga ngokufaka okuncikile, khipha zonke izinguqulo zangaphambilini zokuncika (ezomhlaba wonke nezasendaweni). Bese, phinda npm install
.