Birthday Sale! Up to 40% off unlimited courses & creative assets Birthday Sale! Save up to 40%!
Advertisement
  1. Web Design
  2. Middleman
Webdesign

Робота з даними, активами та шаблонами в Middleman  

by
Length:LongLanguages:
This post is part of a series called Building Static Websites with Middleman.
How to Set Up a Static Website With Middleman
Project: Build a Complete Website With Middleman

Ukrainian (українська мова) translation by Tanya Ira (you can also view the original English article)

Це другий урок про створення web-сайтів за допомогою посередника пірнає трохи глибше в рамках. Зрештою, ви повинні знати достатньо, щоб побудувати свій власний проект з нуля.   Ми розглянемо такі теми, як файли даних, досить URL-адреси, шаблони проектів і активу трубопроводу, так що давайте застрягти в!

Файли Даних 

Так, вже після першого уроку, ви вже навчилися грати з даними; стійка матерії, що зберігаються в потрійний дефіс з комою розділів, окремих сторінок.  Ви можете також пишіть окремий даних файлів YAML або JSON і покласти їх на "/ даних" Довідник. Це корисно, якщо у вас є більш складних сайти з даних, який рідко змінюється, і де ви не хочете, щоб зберегти ці дані безпосередньо у ваш HTML.

Припустимо, у вас є право продати всі фільми про Джеймса Бонда. Ми могли б помістити їх список у файлі даних і перебрати їх на наш погляд.  Якщо нам потрібно змінювати або оновлювати дані, коли нове відео доступно тобі лише потрібно застосувати це зміна у вашій .YAML або .файл даних JSON.  Я не рекомендую робити це для відомості, що в будь-якому випадку комплекс; це здійснимо, але дуже сумнівно і неправильно.  

Наприклад, ось що /дані/зв'язок.YAML файл може виглядати так: 

Тоді вихід як так у джерелі/Бонд-фільмів.HTML-код.Еврорадіо: 

Одним з переваг цих файлів є те, що вони в безпеці. Навіть краще, в каталозі /Data з усіма YAML або JSON-дані не отримати штовхнув на ваш сервер.  На етапі збірки, ваші дані вводиться в ваші шаблони локально, перш ніж він отримує розгорнуті. Після цього дані у ваші погляди-це просто статичні HTML. Дуже здорово! 

Угоди Про Імена 

Слово про імена тут. Якщо у вас є файли даних "каталог даних" ви отримаєте доступ до об'єктів даних.  Посередник створює "об'єкти" для кожного .у форматі YML, .YAML або .JSON-файл, який можна відкрити через ініціалізації даних об'єкта з допомогою зв'язування його.  Тоді у вас є доступ до атрибутів у вас зберігається. В нашому випадку, у нас є фільми і YAML "об'єкт" з атрибутами назва, Рік, текст і зображення. 

Якщо у вас є піддиректорії, потрібно просто пришити їх. Припустимо, у вас є файл даних фільмів про Бонда в каталозі spy_movies (наприклад: /дані/spy_movies/облігацій.і YAML) ви б зараз відкрити його ось так: 

Нарешті, я повинен додати, що зберігати його в JSON може бути краще для деяких людей, але всі зайві коми, дужки і брекети мене вимкнути, якщо чесно.  Не тільки у файли даних, але в frontmatter секції. Це до вас, що вам більше підходить, звичайно, дивіться самі: 

some_file.і YAML: 

some_file.в JSON: 

Досить URL-Адреси 

Якщо у вас є файл, як джерело/Бонд-фільмів.HTML-код.Ерб вона буде в кінцевому підсумку як https://appname.com/bond-movies.html.  У процесі складання ми втрачаємо “.Ерб" розширення і в кінцевому підсумку з остаточним ".HTML-код" версії цієї сторінки, який відображається в URL-адресі.  Це нормально, звичайні речі. Для URL-адреси, як любитель http://appname.com/bond-movies ми повинні працювати небагато. 

Вам потрібно активувати розширення індекси каталогу ваш конфіг.РБ. Це створює папку для кожного .HTML-файл.  В ході посередників складання готової сторінки закінчується як індексний файл цієї папки—це означає, що в якості індексного файлу, його розширення не потрібно, щоб показати в URL-адресі.  Якщо ви звернули увагу, ви, можливо, вже бачили це на роботу зі стандартом файл index.html створюється для кожного проекту комісіонера в якості цільової сторінки. Запустите свій сервер і подивитися на себе. 

У config.РБ: 

Давайте подивимося, що сталося після того, як посередник будувати свій Бонд-фільмів.HTML-код.файл ERB, якщо ви активували цим розширенням. Посередник буде створена "будівництво/Бонд-Фільми" папку і ваш вихідний файл буде змінений на index.html (build/bond-movies/index.html). 

Ось висновок консолі: 

Хоча є один маленький нюанс. Перш ніж ви активували досить URL-адреси, ви можете розраховувати на використанням шляху активами.  Тепер з індексами каталог на місці необхідно надати активів з їх повний, абсолютний шлях. Так називаючи зображення просто по імені, наприклад, більше не літати. 

Якщо з якихось причин ви хочете змінити поведінку цього розширення для певного файлу можна. 

У config.РБ: 

Ось висновок консолі при зміні його на Бонд-фільмів.HTML-код.Еврорадіо: 

Тепер його URL повернутися до нормального для цього файлу. (http://appname.com/bond-movies.html) 

Крім того, ви можете відмовитися від схеми іменування індекс каталогу локально в frontmatter вашим індивідуальним сторінок: 

Якщо ви хочете побудувати структуру з папками та їх відповідні індексні файли самі, посередників не збирався зв'язуватися з вами. Він функціонує так само, як і комісіонер враховує їх, якщо ви змішувати і поєднувати цей підхід. 

Транспортування Нафти Активів 

Я хотів би перейти до справи і показати тільки шматки, які я вважаю дуже актуальним. 

У "транспортування нафти активами" - це жаргон рейки, що імпортуються в посередників. Під капотом, називають перлиною зірочки робить всю важку роботу.  Вона допомагає вам при роботі для управління залежностями, об'єднання і скорочення активів, яка допомагає схуднути ваші активи істотно.  Також у вашому розпорядженні кілька допоміжних методів лаконічно посиланням активи. Крім цього, ви також надані кошти для того, щоб написати Sass та код CoffeeScript, прямо з коробки. 

Конкатенація 

Об'єднання є однією з найбільш важливих особливостей pipline активів.  Замість того, щоб мати багато окремих HTML-запити для файлу CSS і JS, ви можете значно зменшити їх шляхом об'єднання їх в одному або декількох файлах. Чим менше запити у вас викликають швидше вашого додатка. 

В JavaScript Конкатенація 

За замовчуванням, зірочки будуть тиснути все JavaScript-файлів в один .файл JS. Після того, як посередник побудувати, цей файл буде знайдений в /build/javascripts/all.js.  Те ж саме і для вашого CSS. Після процесу складання, ви будете мати всі файли Sass об'єднані в дизайн/стилі/всі.УСБ. 

Вам об'єднати ваші ресурси JavaScript з використанням часткових (чиї імена починаються з символу підкреслення), а потім вимагати від них на самому верху в файлі source/javascripts/all.js .  Файли з додатковою .розширення кави працюють точно так само. Порядок важливий для цього процесу. 

Ось, наприклад, верхньої частини source/javascript/all.js: 

file

Коли ви подивіться в ваш новий каталог /складання, ви знайдете тільки один .JS файл під /скрипти. 

file

УСБ конкатенації 

Код Сасс, сюжет фактично той самий, але ви повинні використовувати @імпорт Сасс для імпорту часткових, замість того, щоб вимагати від Зірочки.  Знову ж таки, на місці "необхідні файли на самому верху, на цей раз звертаючи увагу на порядок. На відміну від вимагають фрагментів коду JavaScript, ви приберете підкреслення при імпорті частковими Сасс. Наприклад 

file
file

Стиснення (Минификация) 

Ще один крутий особливістю коліс стиснення, яка також називається минификации. Цей процес вирізає багато жиру, Як позбавитися від непотрібних відступів та коментарів.  Люди також називають цей процес знівечити (і звичайно, є камінь під назвою uglifier, який робить прекрасну роботу цього). Порівняно з JavaScript минификации активів, знівечення CSS не так вже складно. 

Для початку вам буде потрібно додати наступний рядок у ваш конфіг.файл RB: 

Насправді, потрібно просто розкоментуйте ці рядки під вашим :побудувати блок. Наступного разу, коли ви використовуєте посередника будувати активи у файлі /папки будуть uglified і тонкий. Нижче наведено два приклади, як цей код фактично закінчується шукають: 

Минифицированные CSS під /дизайн/стилі/всі.Усс: 

Минифицированный JS згідно з /build/javascripts/all.js: 

Без транспортування нафти активу вам доведеться створити свій власний річ, щоб написати код JavaScript і CSS за допомогою високорівневих мов, як в CoffeeScript і Sass. 

Трубопровід Помічники Активів 

Для Ваші файли Sass ви маєте в своєму розпорядженні чотирьох помічників: 

  • путь_к_образу() 
  • font_path() 
  • url_изображения() 
  • font_url() 

Як ви слідували досі конвенцій, ви можете використовувати ці помічники, щоб додати правильний шлях до каталогу активів. 

Файл Sass, наприклад: 

Шлях Імпорту 

Трубопровід активів використовує імпорт шляху через зірочки для ваших активів. За замовчуванням :js_dir і :css_dir вже додав до цього шляху. Це означає, що файли покласти в /джерело/сценарії та /джерело/стилі доступні і автоматично імпортуються.  З іншого боку, якщо у вас є активи, які ви хочете зберегти в інші каталоги ви також можете додати їх на шляху імпорту шляхом редагування конфига.РБ: 

В даному прикладі інших активів у джерело/деякі/інші/assets_folder/інше.в CSS також у розпорядженні комісіонера по цьому шляху. Те ж саме стосується .JS-файлів, а також. 

Шаблони Проекту 

Посередник поставляється з парою зручних шаблонів проектів, які ви повинні принаймні знати. Ці шаблони дають вам хорошу відправну точку, коли ви починаєте новий додаток посередників. Ви також можете додати ці шаблони в будь-який час: 

  • Шаблон SMACSS 
  • Шаблон Мобільний Шаблон 
  • Шаблон HTML5 шаблонний 
  • Шаблон блогу(необхідний додатковий гем) 

 Ви можете використовувати їх, як це через командний рядок:

 Шаблон надамо вам всі файли і папки, які він має. Якщо у вас вже є додаток і хочете додати шаблон ви використовуєте ту ж команду без згадки імені вашого додатка. Ж справа:

Тепер моя улюблена частина посередників. Це супер просто, щоб побудувати свої власні шаблони і використовувати їх в будь-який час. Почніть зі створення ~/.папка посередників у кореневому каталозі (не забудьте точку перед ім'ям).   У цьому каталозі ви створюєте нові папки для ваших шаблонів. Наприклад /.посередник/подкаст буде шаблон подкаст. Потім ви заповнюєте цей подкаст dirctory з всі файли і папки вам потрібні. Наприклад, якщо ви хочете мати додаткові стилі доступні для вашого додатки комісіонера, то потрібно імітувати посередників FilePath, щоб зробити його супер легко використовувати їх. 

 На скріншоті нижче я підготував приклад манекена, в якому є пару файлів, які я, можливо, буде потрібно для кожного проекту поміщені в папку "бурбон". Тепер у мене є шаблон бурбон.

file

 Так я змоделював структуру посередників файлу, ці стилі будуть відображатися саме там, де вони потрібні мені після того, як я ініціював цей шаблон. Мої файли знаходяться під /джерело/stylesheets і також готовий бути імпортований в мій /джерело/стилів/всі.УСБ.SCSS файл.

file

 Так як я вже зробив свій шаблон частковими стилі, це звичайна справа. Ось мій джерело/стилів/всі.УСБ.СКС:

 Закінчив! Одна річ, ви повинні бути обережні, хоча коли ми використовуємо посередників для створення нашого нового каталогу складання ці файли будуть поглинені всі.CSS і ні одна з папок шаблонів бурбон там з'явлюся.  Однак, якщо ви забули, є підкреслення в іменах файлів для цих стилів, всю папку, переходимо в /Будуємо разом з відповідними .CSS файли. К @оператори імпорту у всіх.УСБ.СКС нічого не змінить в цьому випадку. 

Перевірка шаблонів 

Якщо у вас є тонни шаблонів і хочете просто перевірити список ім'я, можна використовувати наступну команду: 

 У разі, якщо ви хочете винаходити велосипед, подивіться на ці відкритим вихідним кодом шаблони. Якщо ви ніколи не грали багато з шаблонами, я рекомендую починати манекен додаток і приймаючи їх за спину. Побачити, які файли будуть створені або переписані.  Трохи покопатися. Потім створити папку пустушка з парою файли Sass для шаблону під ~/.посередник і подивитися, що відбувається, коли ви ініціювати цей шаблон. Ніщо не зрівняється навчання, роблячи ці маленькі експерименти по дорозі!

Заключні Думки 

 Я думаю, тепер ви готові, щоб почати будувати невеликий додаток з посередником. Є кілька речей, які залишив для вас, щоб вчитися самостійно, але я представив Вам найважливіші частини головоломки.

Посередник-це велике задоволення і хороша технологія-мудрий вибір. Це потужний, простий у використанні і має простий API, який є для початківців; це все, що важливо зараз. Отримуйте задоволення! 

Advertisement
Advertisement
Advertisement
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.