Мазмұны
- 01. Орнату
- 02. Жергілікті жерде қызмет етіңіз немесе жасаңыз
- 03. Стартер файлдарын алыңыз
- 04. Конфигурация
- 05. Алдыңғы мәселе
- 06. Сұйық белгілер
- 07. Өз навигацияңызды құрыңыз
- 08. Басты бетті жасаңыз
- 09. Блогтар тізімі
- 10. Блогтың егжей-тегжейлі беті
- 11. Құру және жариялау
Бұл оқу құралы статикалық сайт генераторлары туралы естіген және өз сайттарын құрып, өз сайттарын құруға ниет білдірген адамдарға арналған. Міне, біз сізге Jekyll көмегімен блогты қалай бастау керектігін көрсетеміз.
Терминал туралы базалық білім жақсы, бірақ сіз оны орындауыңыз керек, өйткені командалар өте қарапайым. GitHub беттеріндегі сайттар Jekyll арқылы сахна артында жұмыс істейді, сондықтан GitHub беттерімен бірге қолданғанда, бұл сіздің веб-сайтыңызды ақысыз басқаруға және басқаруға мүмкіндік береді (басқа опциялар үшін ең жақсы веб-хостинг қызметтерінің тізімін қараңыз немесе біздің тізімімізді қараңыз) егер сізге веб-сайт құрастырушының басқа түрі қажет болса).
Бұл оқулық сіздің Mac жүйесінде екеніңізді болжайды; Jekyll Ruby бағдарламасы болғандықтан, оны Windows жүйесінде іске қосуға болады, бірақ оған ресми қолдау көрсетілмейді. Егер сіз Windows жүйесінде жүрсеңіз, Ruby-ді орнатуға көмектесу үшін осы жерге өтіңіз.
Осы оқулықты аяқтағаннан кейін сіз Jekyll блогын құрып, оның ерекшеліктері мен таңқаларлық тілімен жеке блогты қалай құруға болатындығын білесіз. Бұл сіздің жеке сайтыңызды дамытудың керемет бастамасы. Есіңізде болсын, егер сізде көптеген дизайнерлік идеялар немесе медиа файлдар болса, оларды ең жақсы бұлт қоймасында қауіпсіз түрде сақтаңыз.
Осы оқулыққа арналған файлдарды табыңыз Мұнда.
- 10 үздік сайттың генераторлары
01. Орнату
Mac жүйесінде сізде Ruby-ді әдепкі бойынша орнату керек, бірақ теру арқылы тексерейік рубин -v сіздің терминалыңызда.
Енді біз Jekyll-ді сайтта жұмыс істей аламыз, өз сайтыңызды құрғыңыз келетін каталогта екеніңізге көз жеткізіп, жай теріңіз асыл монтаж jekyll байламы; содан кейін сіздің компьютеріңіз барып, сайтты басқаруға қажетті барлық тәуелділіктерді алады.
02. Жергілікті жерде қызмет етіңіз немесе жасаңыз
Сіз Jekyll-де қолданатын екі негізгі пәрмен бар - қызмет ету және салу. Сіздің сайтыңызды жергілікті енгізу үшін теріңіз джекил қызмет етеді сіздің командалық жолыңызда. Бұл http://127.0.0.1:4000 сайтында сіз өзгертулерді алдын-ала қарауға болатын нұсқаны іске қосады. Егер сіздің машинаңызда асыл тастар мен басқа да тәуелділіктер орнатылған болса, тәуелділік нұсқаларының сәйкес келмеуі салдарынан бұл команда орындалмауы мүмкін; бұл жағдайда көріңіз бума exec jekyll қызмет етеді орнына. Бірдей, бірақ сөзбен жүгіру салу сайтты құрастырады.
03. Стартер файлдарын алыңыз
Осы жерде оқулықпен бірге берілген файлдарды көшіріп алыңыз, сізге жұмыс істеу үшін негіз болады. Бұл бізге үй парағын, блогтар тізімін, егжей-тегжейлі парақты және сайттың активтерінің құрылымын береді.Өз парағыңызды http://127.0.0.1:4000 мекен-жайы бойынша жаңартыңыз, сонда қазір бізде негізгі парақтар бар екенін көресіз. Jekyll сайтының қалай жұмыс істейтіні туралы қысқаша шолу жасап көрейік.
Jekyll сайты оңай жолмен құрылымдалған. Кез-келген коллекциялар (хабарламалар түрлері) макеттер мен кірістер сияқты жеке папкасында сақталады. Сіз ‘_site’ қалтасын байқайсыз - бұл Jekyll а іске қосқанда пайдаланатын қалта jekyll build команда.
04. Конфигурация
Мәтіндік редакторда _config.yml ашып, өз деректемелеріңізді қосыңыз; тексерілетін бір негізгі аймақ - сіздің негізгі URL мекен-жайыңызды орнату. Бұл сіздің сайтыңыз жүктеп жатқан қалта. Конфигурация файлы, егер сіз WordPress тақырыбын құрып жатсаңыз, wp-config файлымен біріктірілген Global Options қолданбасына ұқсас.
Сіз тақырыптар, мета сипаттамалар, электрондық поштаңыз бен әлеуметтік тіркелгілеріңіз сияқты негізгі ақпаратты басқара аласыз, содан кейін сайт жинақтауға қажетті барлық ақпаратты, мысалы коллекциялар мен пайдаланылатын плагиндерді басқара аласыз. Сіз қол жеткізгіңіз келетін нәрсеге байланысты беттер үшін HTML және Markdown қоспаларын қолдануға болады. Дегенмен, сіздің үй парағыңыз және тізім парақтарыңыз сияқты теңшелетін беттер әдетте HTML болады, ал пост шаблоны қолданылатын посттар мен басқа жалпы беттер Markdown болады.
05. Алдыңғы мәселе
Алдыңғы материя - бұл файлдың жоғарғы жағындағы YAML үзіндісі. Джекил оны айнымалыларды ұстау үшін қолданады. About.md файлынан қараңыз, сіз автордың және оған қатысты кез-келген кескіннің тақырыбын, оның орналасуын орнататынымызды көре аласыз.
06. Сұйық белгілер
Jekyll Liquid - обьектілерді, тегтер мен сүзгілерді қолданатын азғырғыш тілді қолданады. Біз қолданамыз объект қос жақшалармен қоршалған тег {{ }} алдыңғы зат айнымалыларын шығару және логикаға арналған жақша мен пайыздық белгі {% %}.
07. Өз навигацияңызды құрыңыз
Статикалық навигациядан гөрі, мазмұнды шаблоннан бөлу үшін біз конфигурациялық файлдардың күшін қолданамыз. Біз 'data' қалтасындағы навигациялық элементтерді конфигурациялық файл ретінде сақтаймыз, содан кейін navigation.html ішінде оларды айналдырамыз. Біз шаблонға оралмай-ақ, кез келген парақ пен сілтемені алға қарай енгізе аламыз. Жазбаның басында navigation.yml немесе алдыңғы мәселе сияқты конфигурациялық файлдарды өңдеу кезінде бос орынға шынымен мұқият болғаныңызға көз жеткізіңіз, себебі бос кеңістік қате тудыруы мүмкін.
Конфигурация файлы бұрыннан орнатылған, сондықтан 'navigation.html' файлына келесі кодты енгізіңіз:
{% site.data.navigation%} а href = «{{site.baseurl}} / {{item.link}}» {% if page.url == item.link%} {% endif%} > {{item.name}} / a> {% endfor%}
Сұйық логикалық тегтерді навигациялық конфигурация файлын қарау үшін және сілтеме мен сілтеме мен атауды цикл үшін, негізінен цикл үшін стандартты қолданамыз.
08. Басты бетті жасаңыз
Біздің басты парағымызда біз блогтағы соңғы жазбамызды кейіпкер ретінде тізімдейміз, содан кейін сілтеме арқылы біздің парағымыздың үзіндісін аламыз. Батырлар блогынан бастайық. Index.html ашып, келесі кодты қосыңыз:
{% 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}}»> Постты толығымен оқу / a> / div>
Алдымен біз соңғы жазбаны тағайындайтынымызды, содан кейін посттың алдыңғы бөлігінде орнатылған нобай кескініне сілтеме жасайтынымызды көресіз. Кіріспеде сұйық сүзгі қолданылады белгілеу Markdown-ді HTML-ге ауыстыру үшін.
Мұны орындай отырып, шамамен беттегі тизерді қосайық. Келесіні қосыңыз:
div> {% page.pages ішіндегі бет үшін%} {% 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>
Бұл жолы біз а үшін сайттағы парақтарды тексеруге арналған цикл. Біз қолданып жатырмыз page.url туралы бетті сүзу үшін, содан кейін біз беттер туралы ақпаратты шығару үшін кейіпкерге ұқсас ырым стилін қолданамыз.
09. Блогтар тізімі
Құрылған басты парақ арқылы біз блогтар тізіміне ауыса аламыз. Тізім бетін құру үшін біз тағы да Liquid тэгтерін қолданып, 'posts' папкасындағы барлық файлдарды қарап шығу логикасын береміз.
Батыр сіз үшін жасалады, өйткені ол басты парақпен бірдей процедураны орындайды. 'Blog.html' ішіндегі кейіпкердің астына мынаны қосыңыз:
div> h1> қалғандарының жақсысы / h1> бөлімі> site.posts-та орналастыру үшін%% ofset: 1%} div> img src = «{{post.thumbnail_image.small}}» /> div> h3> { post.date} - {{post.title}} / h3> a href = «{{post.url}}»> Толығырақ / a> / div> / div> {% endfor%} / section> / div>
Біз қайтадан а үшін хабарламалар топтамасынан өту үшін цикл. Бірақ біз кейіпкердің соңғы нұсқасын анықтағандықтан, біз бұл циклды екінші посттан бастайық. Сұйық сүзгі күнді біз таңдаған форматқа ауыстыру үшін қолданылады.
10. Блогтың егжей-тегжейлі беті
Енді көп ұзамай: бізде барлық негізгі элементтер бар. Бір маңызды аспект - навигация. Блогтағы жазбаны оқып отырғанда сізге велосипедпен өтіп, көбірек оқудың жолы қажет. Парақ айнымалысын қолданып, сайтқа жағымды параграфия қосуға болады. Post.html файлын макеттер қалтасында ашып, келесіні қосыңыз:
div> {% if page.previous%} div> h3> Алдыңғы / h3> p> {{page.previous.title}} / p> p> a href = «{{site.baseurl}} {{page.previous .url}} «> Постты оқыңыз / 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}}»> Постты оқу / a> / p> / div> {% endif%} / div>
Біз қолданамыз бет және page.next басылатын жазба бар-жоғын тексеретін айнымалылар. Егер бар болса, біз блок шығарып, посттың тақырыбы мен сілтемесін қоса аламыз.
11. Құру және жариялау
GitHub Pages біз үшін Sass файлдарын ұсынады, сондықтан сіз жұмыс істегенде jekyll build жинақталған файлдар _site қалтасында жасалады. Мұнда ешқандай файлдар немесе веб-бумалар жоқ, тек жақсы стильдер! Сіз тіпті Sass шығысын сайттың негізгі config.yml файлындағы параметр ретінде азайта аласыз. Бұл каталогтың мазмұнын сіз таңдаған хостингке беруге болады. Сіз білетін бір нәрсе - GitHub парақтары Jekyll-ді қолдайды, осылайша сайтты қайнар көзі ретінде пайдаланып, сайт құра аласыз. Бұл туралы қосымша ақпаратты мына жерден таба аласыз.
Бұл мақала бастапқыда 320 санында жарияланған тор, веб-дизайнерлер мен әзірлеушілерге арналған әлемдегі ең көп сатылатын журнал. 320 шығарылымын мына жерден сатып алыңыз немесе жазылу.
