Advertisement
  1. Web Design
  2. Jekyll

Як наладзіць тэму Jekyll

Scroll to top
Read Time: 13 min

Belarusian (беларуская мова) translation by Katharina Grigorovich-Nevolina (you can also view the original English article)

Jekyll - гэта статычная сістэма генерацыі сайтаў, якая дазваляе вам прымаць тэкставыя файлы і ператвараць іх у складаны блог, не турбуючыся аб базах дадзеных, праблемах бяспекі, абнаўленнях і іншых ўскладненнях, якія могуць узнікнуць з многімі CMS і платформамі блогаў.

Падобна большасці сістэм кіравання сайтам, можна выкарыстоўваць тэмы на сайтах Jekyll.  Аднак на дадзены момант Jekyll не выкарыстоўвае тэмы ў тым выглядзе, як вы прывыклі.

У цяперашні час тэмы Jekyll не з'яўляюцца самастойнымі пакетамі, якія неабходна выкарыстоўваць з дапамогай ўсталёўшчыка.  Калі вы загружаеце тэму Jekyll, вы таксама загрузіце ўсе файлы, неабходныя для запуску ўсяго сайта Jekyll.

Гэта будзе мяняцца ў будучай версіі Jekyll, але пакуль вам трэба ведаць, што рабіць з тым фактам, што тэмы Jekyll пастаўляюцца з цэлым сайтам, прымацаваным да іх.

У гэтым уроку мы з самага пачатку разгледзім наладу тэмы Jekyll, пачынаючы з некаторых асноўных рэкамендацый па ўстаноўцы, пяройдзем да таго, як азнаёміцца з функцыямі новай тэмы і пройдземся па радах налады новага сайта або паўторнага выкарыстання ўжо існуючай тэмы.

Давайце пачнем!

Jekyll на рынку Envato

У катэгорыі Jekyll на Envato Market ёсць мноства тэм коштам ад 19 да 24 долараў.  Пазней мы будзем выкарыстоўваць "Writer" і "Astro" (два бягучых лідэра продажаў), каб прадэманстраваць ўстаноўку.

jekyll on Themeforestjekyll on Themeforestjekyll on Themeforest
Тэмы Jekyll на рынку Envato

Устаноўка Jekyll

Jekyll распрацавана для кіравання ў аўтаномным рэжыме на вашым уласным кампутары, убудаваная ў статычны HTML-сайт, а затым ўжытая.  Пры даданні кантэнту асноўны працэс заключаецца ў стварэнні запісанага файла, даданні пярэдняга элемента на версе, запаўненні астатняй часткі файла змесцівам, а затым перабудова вашага сайта.

Пасля таго як ваш сайт будзе створаны, вы можаце размясціць яго любым спосабам, няхай гэта будзе з дапамогай FTP або git-каманд.  Аднак мы не будзем факусавацца на размяшчэнні ў гэтым уроку, таму, калі вы хочаце больш даведацца пра тэму, наведайце раздзел дакументацыя Jekyll.

Хутчэй за ўсё, мы засяродзімся на часткі вашага працэсу ўстаноўкі сайта Jekyll, які адбываецца ў аўтаномным рэжыме на вашым кампутары і пачынаецца з ўстаноўкі.

Перадумовы

Праца з Jekyll ўключае трохі выкарыстання каманднага радка, але калі вы ніколі не працавалі з камандным радком, то хай вас гэта не палохае.  Я рэкамендую для зручнасці прабегчыся па некаторых запісам у серыі Камандны радок для вэб-дызайну.

Калі ваш кампутар працуе з Windows, на жаль, Jekyll афіцыйна не падтрымліваецца.  Гэта не значыць, што вы не можаце прымусіць яго працаваць, але вам, магчыма, прыйдзецца пераадолець некалькі перашкод.  Калі вы хочаце запусціць Jekyll на Windows, азнаёмцеся з падрабязнасцямі ў дакументацыі Jekyll.

У адваротным выпадку, калі вы карыстаецеся Mac OS X, Linux ці Unix, вам неабходна пераканацца, што ў вас ўстаноўлены гэтыя патрабаванні:

  • Ruby (папярэдне усталяваны на Mac)
  • Ruby Gems (для кіравання пакетамі Ruby)

Каб праверыць, ці ўсталяваны Ruby, запусціце каманду ruby -v.  Каб праверыць, што Ruby Gems запускае gem -v.  У абодвух выпадках гэтыя каманды правяраюць нумар версіі, пакуль вы бачыце лічбу, вернутую ў ваш тэрмінал, і вы можаце рухацца далей.

Мы будзем працаваць з Jekyll 3.1.x, таму вам не спатрэбіцца NodeJS або Python, як паказана на старонцы дакументацыі па ўстаноўцы Jekyll.

Запуск ўстаноўкі Jekyll

Зараз, каб усталяваць Jekyll на ваш кампутар, запусціце каманду: gem install jekyll

Калі вы бачыце паведамленне пра тое, што вы не падпісалі дазвол, пачніце каманду з sudo і ўвядзіце ваш пароль пры з'яўленні запыту.

Затым вы ўбачыце некалькі радкоў, надрукаваных у тэрмінале, дзе паказаны працэс ўстаноўкі.  Калі ён паказвае, што "1 gem ўсталяваны", усё гатова.

Стварэнне сайта Jekyll па змаўчанні

Давайце хутка створым сайт Jekyll, каб вы маглі ўбачыць, як ён выглядае ў стандартным, нятэматычным стане, і азнаёміцца са структурай яго файлаў і папак.  Стварыце папку для размяшчэння сайта, затым адкрыйце тэрмінал, які паказвае на папку, і запусціце: jekyll new.

Заўвага: калі ў нейкі момант вы хочаце стварыць новы сайт Jekyll у ўкладзенай папке, выкарыстоўвайце каманду: jekyll new subfolder_name

Калі налада сайта будзе завершана, вы ўбачыце паведамленне ў сваім тэрмінале, у якім гаворыцца: "Новы сайт jekyll усталяваны ў <path>".  На гэтым этапе ўнутры вашай папкі вы ўбачыце стандартнае змесціва сайта Jekyll.

Зараз запусціце каманду jekyll serve, каб абнавіць ваш сайт і запусціць яго ў аўтаномным рэжыме.

Калі вы ўбачыце паведамленне "Сервер працуе ... націсніце ctrl-c, каб спыніць" у сваім тэрмінале, вы можаце перайсці па адрасе http://localhost:4000 ў браўзэры і праверыць сайт Jekyll па змаўчанні.

Зараз, калі вы бачылі, як выглядае структура файлаў і папак на сайце Jekyll па змаўчанні, а таксама яго ня-тэматычнае состояніе, вы зможаце лепш зразумець, што вы бачыце ўнутры тыповай загрузкі тэмы Jekyll. 

Хуткая дэманстрацыя новых тэм

Как вы ведаеце з таго, пра што мы гаварылі ў гэтым ўроку, у цяперашні час тэмы Jekyll пастаўляюцца з усімі файламі, неабходнымі для запуску ўсяго сайта.  І як вы бачылі ў апошнім раздзеле, як толькі ў вас будуць усе гэтыя файлы вы можаце запусціць jekyll serve, каб дазволіць прагляд гэтага сайта ў браўзэры. 

Гэта азначае, што пры загрузцы новай тэмы Jekyll вы можаце проста атрымаць яе, запусціць jekyll serve і дэманстраваць тэмы адразу на цалкам функцыянальным сайце Jekyll.  Многія тэмы нават паступаюць з ужо уключаным дэманстрацыйным змесцівам. 

Давайте паглядзім на некаторыя прыклады, выкарыстоўваючы тэмы "Writer" і "Astro" (ці любую, якой вы аддаеце перавагу). 

Пасля здабывання, выканайце пошук праз структуру тэмы, пакуль не знойдзеце папку кораня, у якой захоўваюцца ўсе файлы сайта Jekyll.  Вы павінны здолець распазнаць гэтую папку ў сваёй стандартнай ранняй ўсталёўцы Jekyll.  Пашукайце такія рэчы, як файл _config.yml, каталог _includes і т. д. 

Затым адкрыйце тэрмінал ўнутры папкі і запусціце jekyll serve

Если ўсё паспяхова, вы ўбачыце паведамленне "Адрас сервера:" з URL, які адлюстроўваецца ў канцы тэрмінала.  Скапіруйце і ўстаўце гэты URL ў браўзэр, і вы ўбачыце дэма-версію сваёй новай тэмы. 

Адсутнасць залежнасці? 

У некаторых выпадках вы можаце ўбачыць паведамленне пра памылку пры спробе запусціць jekyll serve.  Калі гэта адбудзецца, паглядзіце, не скардзіцца ці паведамленне на адсутнасць залежнасці, то ёсць нешта, што трэба тэме, каб функцыянаваць, адсутнічае ў вашай наладзе. 

У гэтым прыкладзе вы можаце ўбачыць у чырвоным тэксце памылкі, што gem "jekyll-paginate" адсутнічае. 

Хуткі пошук Google ўключае рэпазітар Github для gem ў пытанні, падаючы каманду, неабходную для яго ўстаноўкі. 

Пасля запуску названай каманды і ўстаноўкі адсутнай залежнасці jekyll serve зможа працаваць з тэмай як чакаецца. 

Калі Дэма не адлюструецца.

Калі вы пяройдзеце па пададзенай URL-адрасу і не ўбачыце сайт, напрыклад, як тут: 

... праверце значэнне baseurl ў файле _config.yml.  Гэты файл, пра які мы пагаворым пазней, кантралюе агульную канфігурацыю для ўсяго сайта. 

Пераменная baseurl дадаецца да асноўнага дамену, калі мы працуем у аўтаномным рэжыме, гэта http://localhost: 4000. 

У прыведзеным вышэй прыкладзе мы хочам, каб наш сайт паказваў http://localhost:4000.  У файле _config.yml нашае значэнне baseurl ўстаноўлена на: 

1
baseurl: "http://localhost"

Спачатку гэта можа здацца правільным, але паколькі гэта значэнне дадаецца да асноўнага дамену, яно фактычна прымушае сайт спрабаваць загрузіць http://localhost: 4000 http://localhost.

Итак, нам трэба змяніць значэнне на пусты радок наступным чынам: 

1
baseurl: ""

Ваш сайт будзе загружацца так, як чакалася. 

Калі вы захочаце замест гэтага загрузіць ваш сайт з падкаталога, зменіце значэнне baseurl на імя падкаталога, абавязкова пачніце і скончыце касой рысай: 

1
baseurl: "/themedemo/"

Азнаёмцеся з тэмай

По адной з асноўных прычын нядрэнна пачаць працу з тэмай прама з яе існуючай структуры (акрамя праверкі яе працы, як і чакалася), гэта дае вам магчымасць азнаёміцца з функцыямі і рабочымі працэсамі. 

Таму што Jekyll забяспечвае даволі вялікую гнуткасць, яго тэмы могуць прапаноўваць функцыянальныя магчымасці, якія моцна адрозніваюцца адзін ад аднаго.  Пасля запуску дэманстрацыі новай тэмы знайдзіце момант, каб паглядзець і ўбачыць, які тып структуры ў тэмы.  Шукайце, ці ёсць у тэме такія рэчы, як старонкі катэгорый, малюнка, аўтарскія старонкі і т. д.  Звярніце ўвагу на гэтыя функцыі, каб вы змаглі знайсці дакументацыю па тэме і навучыцца іх выкарыстоўваць. 

Вам таксама варта перагледзець структуру файлаў і папак тэмы.  Асноўнымі абласцямі, якія вы хочаце даследаваць, з'яўляюцца: 

  • Любыя наладжвальныя макеты старонак, якія могуць быць у тэме ў тэчцы the _layouts
  • Любыя наладжвальныя значэння, якія вам трэба задаць ў пачатку вашага кантэнту. 

Вам таксама неабходна высветліць, якія пашыраныя параметры канфігурацыі вы можаце ўсталяваць у файле сайта _config.yml, каб выкарыстоўваць асаблівасці тэмы, такія як URL сацыяльных сетак, інфармацыю пра аўтара, навігацыйныя спасылкі і т. д.

Зрабіце яе вашай

Зараз у вас з'явілася магчымасць праглядзець тэму і азнаёміцца з ёй, прыйшоў час выкарыстоўваць яе на вашым сайце.  Пакіньце дэма-версію, якую вы ўжо стварылі, без зменаў, каб у вас была магчымасць параўнаць ваш нядаўна створаны сайт.

 Ачысціце дэма-кантэнт

Стварыце новую папку на вашым кампутары і паўторна дастаньце ў яе ўсё файлы тэмы. 

У гэты раз зайдзіце ў папку _posts і выдаліце там усе файлы, каб дэма-паведамленні былі выдаленыя. 

Пасля гэтага выдаліце любыя файлы .md (markdown) з каранёвай папкі, каб усе дэма-старонкі таксама зніклі. 

Калі хочаце, вы таксама можаце знайсці і выдаліць любыя выявы, якія выкарыстоўваюцца ў дэма-кантэнце, такія як апублікаваныя мініяцюры, калі вы плануеце замяніць іх сваімі ўласнымі.  Адлюстровываюцца ці дэма-малюнкі кантэнту ў залежнасці ад тэмы. 

Калі ў вашай тэме ёсць дэма-малюнкі, якія вы хочаце выдаліць, але вы не ведаеце, дзе яны знаходзяцца, праверце дакументацыю па тэме, у якой павінна быць напісана. У адваротным выпадку вам можа спатрэбіцца праглядзець код у шаблонах тэмы і высветліць, што-то там. 

Налада канфігурацыі сайта 

Далее, вам трэба адкрыць файл _config.yml з каранёвай папкі і наладзіць нейкія небудзь пашыраныя значэння сайта, якія патрабуюцца для тэмы.  Як правіла, некаторыя налады будуць агульнымі для ўсіх файлаў _config.yml, такіх як title, email, description і некалькі іншых.  Аднак для дадзенай тэмы будуць некаторыя асаблівыя налады.

Менавіта тое, што вам трэба зрабіць у файле канфігурацыі сайта, залежыць ад канкрэтнай тэмы, таму на дадзены момант рэкамендуецца спасылацца на дакументацыю па тэме для ўказання таго, што робіць кожны параметр. 

Напрыклад, у тэме Writer гэта магчыма для налады карыстацкага меню навігацыі з выкарыстаннем значэння nav_list для вызначэння спісу элементаў меню.  У кожнага з іх ёсць пазнака, пастаянная спасылка і катэгорыя, у выніку чаго побач з ім з'явіцца значок шрыфта Awesome. 

Насупраць, у тэме Astro не выкарыстоўваецца асаблівае значэнне Writer - nav_item, але ў ёй ёсць сваі значэння, якія дазваляюць дадаваць спасылкі ў многія вашыя уліковыя запісы ў сацыяльных сетках, а таксама актываваць каментары Disqus і г.д. 

Працуйце са значэннямі ў файле _config.yml вашай тэмы, пакуль не наладзіце іх на свой густ. 

Звярніце ўвагу, што калі вы ўносіце такія змены пасля першага запуску вашага новага сайта з дапамогай jekyll serve, вам трэба спыніць працэс з дапамогай CTRL + C і перазапусціць яго, каб убачыць, як ўступяць у сілу наступныя змены. 

Наладзьце вашу хатнюю старонку (калі неабходна)

У некаторых тэмах прадастаўляецца магчымасць выбраць з некалькіх макетаў вашу хатнюю старонку і ўсталяваць элементы кіравання, якія ўплываюць на іх адлюстраванне.  Калі гэта так, вы, верагодна, вырашыце, што параметры могуць быць зменены ў галоўным файле каранёвай папкі index.html

Калі даступна некалькі макетаў, верагодна, вы выявіце, што можаце выбраць іншы, змяніўшы значэнне налад layout - вам трэба будзе звярнуцца да дакументацыі тэмы, каб даведацца, якія магчымыя значэнні могуць быць выкарыстаныя. 

Пакуль вы рэдагуеце файл, паглядзіце, ці ёсць іншыя значэнні, якія неабходна змяніць, каб стварыць кантэнт, які будзе адлюстроўвацца на хатняй старонцы.  Напрыклад, у тэме Writer можна паказаць наладжвальны загаловак і апісанне, якія будуць адлюстроўвацца толькі на хатняй старонцы, таксама добра, як уключанае малюнкам. 

Дадайце вашыя ўласныя старонкі

Калі вы хочаце дадаць такія старонкі, як "О" ці "Кантакты", зараз настаў час.  Дадайце дакумент .md (markdown) у каранёвую папку сайта для кожнай старонкі, якую вы хочаце наладзіць. 

Заўвага: некаторыя тэмы настроены так, што ўсе старонкі змяшчаюцца ва укладзеную папку (звычайна названыя "pages") замест каранёвай папкі, праверце ў дакументах тэмы, каб пераканацца, што гэта так. 

Напрыклад, тут я дадаў старонку "Аб сайце" (about.md),  старонку профілю аўтара “Пра мяне" (author-kezz.md),  а таксама старонку "Кантакты" (contact.md). 

Калі вы дадаеце файлы старонкі, вам трэба ведаць, ці ёсць асаблівыя шаблоны макета і / або параметры ўступнага артыкула, якія вы павінны выкарыстоўваць з імі.  Каб высветліць, вы можаце звярнуцца да дакументаў тэмы або проста скапіяваць і ўставіць файлы разметкі з дэманстрацыйнай ўстаноўкі, якую вы зрабілі з тэмай, і перапрацаваць іх. 

Напрыклад, тут я скапіяваў існуючую старонку аўтара з дэманстрацыі Writer і ператварыў яе ў сваю, пераназваў яе, а затым адрэдагаваў яе ўступны артыкул і змесціва. 

Даданне паведамленняў

Зараз ў вас ёсць усё неабходнае для налады структуры сайта, прыйшоў час дадаць паведамленні.  Я рэкамендую скапіяваць паведамленне з папкі _posts вашага дэма-сайта і ўставіць яго ў устаноўку, над якой вы працуеце.  Затым вы можаце перайменаваць яго з датай і пастаяннай спасылкай у новы артыкул.  Паўторна выкарыстоўваючы дэманстрацыйнае паведамленне, увесь неабходны ўступны артыкул павінен быць на месцы, і вам трэба толькі абнавіць яе. 

Катэгорыі, тэгі і іншыя дадатковыя функцыі

Некаторыя тэмы прапануюць падтрымку для катэгорый і тэгаў.  Аднак гэта не заўсёды так, і таму рэалізацыя можа адрознівацца ад тэмы да тэмы.  Праверце дакументы вашай тэмы аб тым, што вам можа спатрэбіцца для працы з катэгорыямі і тэгамі на вашым сайце. 

Напрыклад, у тэме Writer для кожнай катэгорыі, якую вы хочаце выкарыстоўваць, неабходна ўручную наладзіць тэчку і файл шаблону ў укладзенай папкі на сайце з імем "катэгорыя". 

Таксама можа быць любая колькасць дадатковых функцый, даступных для канкрэтнай тэмы.  Абавязкова прачытайце спіс функцый і дакументацыю вашай тэмы, каб пераканацца, што вы выкарыстоўваеце ўсе, што яна ўключае. 

Пераключэнне тэм на існуючым сайце

Калі ў вас ужо ёсць сайт Jekyll і вы проста хочаце ўжыць новую тэму, з якой вы хочаце прайсці амаль такі ж працэс, як мы рабілі вышэй.  Змены ўступяць у сілу пасля выдалення дэманстрацыйнага кантэнту, калі замест дадання новых старонак і паведамленняў вы можаце проста скапіяваць змесціва вашага існуючага сайта. 

Калі ў вас ёсць існуючы сайт Jekyll са старонкамі, якія ўжо прысутнічаюць, скапіруйце і ўстаўце ўзаемадзейнічаюць файлы разметкі са старога сайта ў новы.  Прайдзіцеся па кожнай старонцы і абнавіце ўступны артыкул, каб выкарыстоўваць макеты новай тэмы і неабходныя значэнні. 

Затым скапіруйце ўсе вашы файлы паведамленняў са старой папкі _posts ў новую.  Гэта будзе трохі стомна, але вам, хутчэй за ўсё, прыйдзецца праглядаць кожны файл паведамлення адзін за адным і абнаўляць ваш ўступны артыкул наладамі, якія неабходны для новай тэмы, і выдаляць усё, што было неабходна старой тэме, але больш не выкарыстоўваецца. 

Калі ў вас ёсць папка з выявамі і іншымі медыя, якія выкарыстоўваюцца на старонках і ў паведамленнях на вашым старым сайце, скапіруйце ўсю папку ў новую структуру сайта.  Вашы паведамленні і старонкі павінны па-ранейшаму спасылацца на тыя ж месцы малюнкаў, што дазволіць ім працягваць адлюстроўвацца ў вашым кантенце.

Завяршэнне

Такім чынам гэта асноўныя моманты таго, як вам наладзіць тэму Jekyll!  Больш дробныя дэталі працэсу будуць вар'іравацца ад тэмы да тэмы, але вы ўсё роўна можаце прытрымлівацца гэтых асноўных этапах у кожным выпадку.  Давайце хутка разгледзім, што гэта за этапы. 

  • Хуткая дэманстрацыя новай тэмы шляхам яе вымання і запуску: jekyll serve 
  • Усталёўка адсутнай залежнасці, якая перашкаджае запуску тэмы. 
  • Прагляд уступнай часткі дэма-сайта і запіс асаблівасцяў, якія вам трэба навучыцца выкарыстоўваць.
  • Прагляд структуры файла, у прыватнасці папкі _layouts, каб даведацца, якія прыстасаваныя макеты і значэння вам могуць спатрэбіцца. 
  • Стварэнне другой ўстаноўкі тэмы і ачыстка старонкі дэманстрацыйнага кантэнту, паведамленняў (пры неабходнасці), малюнкаў. 
  • Увод налад у _config.yml ў адпаведнасці з вашым сайтам. 
  • Настройка хатняй старонкі (калі патрабуецца), шляхам рэдагавання значэнняў уступнага артыкула ў файле index.html ў каранёвай папкі.
  • Стварэнне файлаў разметкі старонкі з патрабаваным уступным артыкулам (або капіраванне і ўстаўка іх з вашага дэманстрацыйнага сайта / існуючага сайта).
  • Стварэнне файлаў разметкі старонкі ў папкі _posts з патрабаваным уступным артыкулам (або капіраванне і ўстаўка іх з вашага дэманстрацыйнага сайта / існуючага сайта). 
  • Выкананне любых дадатковых налад, неабходных для тэмы, напрыклад такіх, як стварэнне катэгорыі шаблонов.

Я спадзяюся, што гэты ўрок дапамог вам адчуць упэўненасць у тым, каб узяцца за стварэнне новага сайта Jekyll з наладжвальнай тэмай або пераключэнне тэмы існуючага сайта на новую. 

Для падрабязнага знаёмства з кіраўніцтвам па выкарыстанню Jekyll азнаёмцеся з гэтым курсам ад Guy Routledge: 

Дзякуй за чытанне, і да сустрэчы!

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.