Tarkib
- 01. O'rnatish
- 02. Mahalliy xizmat qiling yoki quring
- 03. Boshlang'ich fayllarni oling
- 04. Konfiguratsiya
- 05. Birinchi masala
- 06. Suyuq teglar
- 07. Navigatsiyangizni yarating
- 08. Bosh sahifani yarating
- 09. Bloglar ro'yxati
- 10. Blog tafsilotlari sahifasi
- 11. Qurish va nashr etish
Ushbu o'quv qo'llanma statik sayt generatorlari haqida eshitgan va o'z saytini qurishni xohlaysizmi degan qarorga kelgan odamlar uchun mo'ljallangan. Jekyll-dan foydalanib blogni qanday ochishni sizga ko'rsatamiz.
Terminal haqida asosiy ma'lumotlar yaxshi, ammo buyruqlar juda sodda bo'lganligi sababli ularni bajarishingiz kerak. GitHub sahifalaridagi saytlar Jekyl tomonidan sahna ortida ishlaydi, shuning uchun GitHub sahifalari bilan birgalikda veb-saytingizni bepul boshqarish va boshqarish uchun yo'l yaratadi (boshqa variantlar uchun eng yaxshi veb-xosting xizmatlari ro'yxatimizga qarang yoki bizning ro'yxatimizga qarang agar siz boshqa turdagi veb-sayt quruvchilarni xohlasangiz).
Ushbu o'quv qo'llanma sizning Mac-da ekanligingizni taxmin qiladi; chunki Jekyll Ruby dasturi bo'lib, uni Windows-da ishga tushirish mumkin, ammo rasmiy ravishda qo'llab-quvvatlanmaydi. Agar siz Windows-ni kuzatayotgan bo'lsangiz, Ruby-ni o'rnatishga yordam berish uchun bu erga o'ting.
Ushbu qo'llanmani tugatgandan so'ng siz Jekyll blogini yaratdingiz va uning xususiyatlari va ibratli tili shaxsiy blogni qanday yaratishi mumkinligini bilib oldingiz. Bu o'z saytingizni rivojlantirish uchun ajoyib boshlanish nuqtasidir. Va esda tuting, agar sizda juda ko'p dizayn g'oyalari yoki media fayllar mavjud bo'lsa, ularni eng yaxshi bulutli saqlash joylarida xavfsiz saqlashga ishonch hosil qiling.
Ushbu o'quv qo'llanma uchun fayllarni toping Bu yerga.
- 10 ta eng yaxshi statik sayt generatorlari
01. O'rnatish
Mac-da siz Ruby-ni sukut bo'yicha o'rnatishingiz kerak, ammo yozib tekshiring yaqut -v sizning terminalingizda.
Endi biz Jekilni saytga ishga tushiramiz, saytingizni yaratmoqchi bo'lgan katalogda ekanligingizga ishonch hosil qiling va shunchaki yozing gem install jekyll bundler; kompyuteringiz keyin borib saytni boshqarish uchun zarur bo'lgan barcha bog'liqliklarni qamrab oladi.
02. Mahalliy xizmat qiling yoki quring
Jekyll bilan ishlatadigan ikkita asosiy buyruq bor - xizmat qilish va qurmoq. O'z saytingizni mahalliy sifatida ishga tushirish uchun jekil xizmat qilish buyruq satrida. Bu siz http://127.0.0.1:4000 da o'zgarishlaringizni oldindan ko'rib chiqishingiz mumkin bo'lgan versiyani ishga tushiradi. Agar sizda allaqachon marvarid va boshqa bog'liqliklar o'rnatilgan bo'lsa, bu buyruq, qaramlik versiyalarining mos kelmasligi tufayli bajarilmasligi mumkin; bu holda, harakat qilib ko'ring bundle exec jekyll xizmat qilish o'rniga. Xuddi shu, lekin so'z bilan ishlaydigan qurmoq faqat saytni kompilyatsiya qiladi.
03. Boshlang'ich fayllarni oling
Sizga ishlash uchun asos berish uchun ushbu o'quv qo'llanmasi bilan ta'minlangan fayllarni nusxalash. Bu bizga bosh sahifani, bloglar ro'yxatini, batafsil sahifani va sayt uchun aktivlarning tuzilishini beradi.O'zingizning sahifangizni http://127.0.0.1:4000 da yangilang, shunda biz hozirda ba'zi asosiy sahifalarni yaratishimiz kerak. Jekyll saytining qanday ishlashini tezkor ko'rib chiqamiz.
Jekyll sayti oson kuzatiladigan tarzda tuzilgan. Har qanday to'plamlar (xabarlar turlari) o'z papkasida, shuningdek, maketlarda va tarkibida saqlanadi. Siz "_site" papkasini ko'rasiz - bu Jekyl a-ni ishlatganda foydalanadigan papka jekill qurish buyruq.
04. Konfiguratsiya
Matn muharriringizda _config.yml-ni oching va o'zingizning ma'lumotlaringizni qo'shing; tekshirish uchun bitta asosiy maydon - bu sizning asosiy URL manzilingizni o'rnatish. Bu sizning saytingiz yuklayotgan papka. Konfiguratsiya fayli, agar siz WordPress mavzusini yaratayotgan bo'lsangiz, wp-config fayli bilan birgalikda Global Options-dan foydalanishga o'xshaydi.
Siz sarlavhalar va meta tavsiflar, elektron pochta manzilingiz va ijtimoiy hisob qaydnomalaringiz kabi asosiy ma'lumotlarni va keyin sayt to'plash uchun zarur bo'lgan barcha ma'lumotlarni, masalan to'plamlar va ishlatilgan plaginlarni boshqarishingiz mumkin. Siz erishmoqchi bo'lgan narsangizga qarab, sahifalar uchun HTML va Markdown aralashmasidan foydalanishingiz mumkin. Biroq, sizning uy sahifangiz va ro'yxat sahifalaringiz kabi maxsus sahifalar odatda HTML bo'ladi, postlar va belgilangan shablonni ishlatadigan boshqa umumiy sahifalar Markdown bo'ladi.
05. Birinchi masala
Old materiya - faylning yuqori qismida joylashgan YAML bo'lagi. Jekil undan o'zgaruvchini saqlash uchun foydalanadi. About.md faylini ko'rib chiqing, shunda biz sarlavhani, qaysi tartibda ishlatilishini, muallifni va unga tegishli barcha rasmlarni o'rnatganimizni ko'rishingiz mumkin.
06. Suyuq teglar
Jekyll Liquid - ob'ektlar, teglar va filtrlardan foydalanadigan ibratli tildan foydalanadi. Biz ishlatamiz ob'ekt ikki qavs bilan o'ralgan yorliq {{ }} oldingi modda o'zgaruvchilari va mantiq uchun qavs va foiz belgisini chiqarish {% %}.
07. Navigatsiyangizni yarating
Statik navigatsiya o'rniga, biz tarkibni shablondan ajratish uchun konfiguratsiya fayllarining kuchidan foydalanamiz. Biz "ma'lumotlar" papkasida navigatsiya elementlarini konfiguratsiya fayli sifatida ushlab turamiz va keyin ularni navigation.html-da ko'rib chiqamiz. Shablonga qaytmasdan, biz xohlagan sahifalarni va havolalarni oldinga siljitishimiz mumkin. Xabarning boshida navigation.yml yoki oldingi materiya kabi konfiguratsiya fayllarini tahrirlashda bo'shliqqa ehtiyotkorlik bilan ishonch hosil qiling, chunki bo'sh joy xatolikka olib keladi.
Konfiguratsiya fayli allaqachon o'rnatilgan, shuning uchun 'navigation.html' tarkibiga quyidagi kodni kiriting:
{%. site.data.navigation%} a href = "{{site.baseurl}} / {{item.link}}" {% if page.url == item.link%} {% endif%} > {{item.name}} / a> {% endfor%}
Biz navigatsiya konfiguratsiyasi faylini ko'rib chiqish va har bir yozuv uchun havola va nomni aylantirish uchun asosan suyuq mantiq teglaridan foydalanmoqdamiz, asosan faqat loop uchun standart.
08. Bosh sahifani yarating
Bizning uy sahifamizda biz blogdagi so'nggi xabarlarni qahramon sifatida ro'yxatlaymiz va keyin havolasi bilan bizning sahifamizdan parchani olamiz. Qahramonlarning blokidan boshlaylik. Index.html-ni oching va keyin quyidagi kodni qo'shing:
{% assigned post = site.posts.first%} div style = "background: url ({post.thumbnail_image.large}) bottom center / cover no-repeat;"> h1> {{post.title}} / h1> {post.intro} a href = "{{post.url}}"> Xabarni to'liq o'qing / a> / div>
Dastlab biz so'nggi xabarni tayinlaymiz, so'ngra postning oldingi qismida o'rnatilgan kichik rasmga murojaat qilamiz. Post kirishida Suyuqlik filtri ishlatiladi markdownify Markdown-ni HTML-ga aylantirish uchun.
Shu bilan, keling, taxminan sahifadan teaser qo'shaylik. Quyidagilarni qo'shing:
div> {% site.pages sahifasi uchun%} {% if page.url == '/about.html'%} img src = "{{page.profile_image.small}}" alt = "Profie Picture" /> div> h2> a href = "{{page.url}}"> {{page.title}} / a> / h2> p> {{page.intro}} / p> / div> {% endif%} {% endfor%} / div>
Bu safar biz uchun saytdagi sahifalarni tekshirish uchun loop. Biz foydalanmoqdamiz page.url haqida sahifani filtrlash uchun, so'ngra sahifalar ma'lumotlarini chiqarish uchun qahramonga o'xshash tempillash uslubidan foydalanamiz.
09. Bloglar ro'yxati
Yaratilgan bosh sahifa yordamida biz bloglar ro'yxati sahifasiga o'tamiz. Ro'yxat sahifasini yaratish uchun biz yana "xabarlar" papkasidagi barcha fayllarni ko'rib chiqish mantig'ini berish uchun suyuq teglardan foydalanamiz.
Qahramon siz uchun qilingan, chunki u bosh sahifa bilan bir xil jarayonga amal qiladi. "Blog.html" dagi qahramon ostiga quyidagilarni qo'shing:
div> h1> qolganlarning eng yaxshisi / h1> bo'lim> {% site.posts-dagi post uchun ofset: 1%} div> img src = "{{post.thumbnail_image.small}}" /> div> h3> { post.date} - {{post.title}} / h3> a href = "{{post.url}}"> Batafsil / a> / div> / div> {% endfor%} / section> / div>
Shunga qaramay biz a dan foydalanamiz uchun xabarlar to'plamidan o'tish uchun pastadir. Ammo biz qahramonning eng so'nggi versiyasini ilgari surganimiz sababli, biz ushbu postni ikkinchi postdan boshlash uchun almashtirdik. Suyuq filtr sana biz tanlagan formatga o'tkazish uchun ishlatiladi.
10. Blog tafsilotlari sahifasi
Hozir juda oz vaqt bor: bizda deyarli barcha asosiy elementlar mavjud. Bitta muhim jihat - bu navigatsiya. Blog postini o'qiyotganingizda velosipedda o'qish va ko'proq o'qish uchun sizga yo'l kerak. Sahifa o'zgaruvchisidan foydalanib, saytimizga bir nechta yaxshi sahifalashni qo'shishimiz mumkin. Post.html-ni maketlar papkasida oching va quyidagilarni qo'shing:
div> {% if page.previous%} div> h3> Oldingi / h3> p> {{page.previous.title}} / p> p> a href = "{{site.baseurl}} {{page.previous .url}} "> Postni o'qing / a> / p> / div> {% endif%} {% if page.next%} div> h3> Up Next / h3> p> {{page.next.title}} / p> p> a href = "{{site.baseurl}} {{page.next.url}}"> Xabarni o'qing / a> / p> / div> {% endif%} / div>
Biz ishlatamiz oldingi sahifa va page.next bosish uchun yozuv mavjudligini tekshirish uchun o'zgaruvchilar. Agar mavjud bo'lsa, biz blokni chiqaramiz va postning sarlavhasini va havolasini o'z ichiga olamiz.
11. Qurish va nashr etish
GitHub Sahifalari biz uchun Sass fayllarini taqdim etadi, shuning uchun siz ishlayotganingizda jekill qurish tuzilgan fayllar _site papkasida yaratiladi. Bu erda gulp fayllari yoki veb-paketlari yo'q, shunchaki chiroyli uslublar! Hatto Sass chiqishini sayt uchun asosiy config.yml faylida sozlama sifatida kamaytirishingiz mumkin. Ushbu katalog tarkibini siz tanlagan xostingga o'tkazish mumkin. Bilishingiz kerak bo'lgan narsa shundaki, GitHub Sahifalari aslida Jekyll-ni qo'llab-quvvatlaydi, shuning uchun siz o'zingizning magistral filialingizdan manba sifatida sayt yaratishingiz va joylashtirishingiz mumkin. Bu haqda ko'proq ma'lumotni bu erda topishingiz mumkin.
Ushbu maqola dastlab 320-sonda nashr etilgan to'r, veb-dizaynerlar va ishlab chiquvchilar uchun dunyodagi eng ko'p sotiladigan jurnal. 320 sonini shu yerdan sotib oling yoki obuna bo'ling.
