Advertisement
  1. Web Design
  2. UX/UI
  3. Prototyping

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

Scroll to top
Read Time: 11 min
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

() translation by (you can also view the original English article)

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

Файли Даних 

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

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

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

1
movies:
2
- title: "Dr. No"
3
  year:  "1962"
4
  text:  "John Strangways, the British Intelligence (SIS) Station Chief in Jamaica, is killed. In response, British agent James Bond—also known as 007—is sent to Jamaica to investigate the circumstances. During his investigation Bond meets Quarrel, a Cayman fisherman, who had been working with Strangways around the nearby islands to collect mineral samples. One of the islands was Crab Key, home to the reclusive Dr. No."
5
  image: "bond_movie_01.png"
6
- title: "From Russia with Love"
7
  year:  "1963"
8
  text:  "SPECTRE's expert planner Kronsteen devises a plot to steal a Lektor cryptographic device from the Soviets and sell it back to them while exacting revenge on Bond for killing their agent Dr. No; ex-SMERSH operative Rosa Klebb is in charge of the mission. She recruits Donald "Red" Grant as an assassin and Tatiana Romanova, a cipher clerk at the Soviet consulate in Istanbul, as the unwitting bait."
9
  image: "bond_movie_02.png"
10
- title: "Goldfinger"
11
  year:  "1964"
12
  text:  "Bond is ordered to observe bullion dealer Auric Goldfinger: he sees Goldfinger cheating at cards and stops him by distracting his employee, who is subsequently killed by Goldfinger's Korean manservant Oddjob. Bond is then instructed to investigate Goldfinger's gold smuggling and he follows the dealer to Switzerland. Bond is captured when he reconnoitres Goldfinger's plant and is drugged; he is taken to Goldfinger's Kentucky stud farm and is imprisoned. He escapes briefly to witness Goldfinger's meeting with U.S. mafiosi, who have brought the materials he needs for an operation to rob Fort Knox."
13
  image: "bond_movie_03.png"
14
...

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

1
<h2>Bond movies</h2>
2
<ol>
3
<% data.bond.movies.each do |movie| %>
4
  <li>
5
  <%= image_tag movie.image %>
6
    <h3><%= movie.title %></h3>
7
    <h6><%= movie.year %></h6>
8
    <p> <%= movie.text %></p>
9
  </li>
10
<% end %>
11
</ol>

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

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

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

1
<%= data.data_file_name.yaml_or_json_object.attribute %>
2
3
<%= data.bond.movies.image %>
4
<%= data.bond.movies.title %>
5
<%= data.bond.movies.year %>
6
<%= data.bond.movies.text %>

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

1
<%= data.spy_movies.bond.movies.title %>

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

some_file.і YAML: 

1
bond_girls:
2
- Strawberry Fields 
3
- Jill Masterson
4
- Tiffany Case

some_file.в JSON: 

1
{
2
  "bond_girls": [
3
    "Strawberry Fields",
4
    "Jill Masterson",
5
    "Tiffany Case"
6
  ]
7
}

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

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

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

У config.РБ: 

1
activate :directory_indexes

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

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

1
create  build/bond-movies/index.html

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

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

У config.РБ: 

1
page "/bond-movies.html", :directory_index => false

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

1
create  build/bond-movies.html
2
remove  build/bond-movies/index.html
3
remove  build/bond-movies

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

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

1
---
2
directory_index: false
3
---
4
5
<h1>Bond movies</h1>
6
...

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

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

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

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

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

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

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

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

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

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

1
//= require "_jquery"
2
//= require "_lib_code"
3
//= require "_animations"
filefilefile

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

filefilefile

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

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

1
@import 'normalize';
2
@import 'header';
3
@import 'navigation';
4
@import 'footer';
filefilefile
filefilefile

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

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

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

1
configure :build do
2
  activate :minify_css
3
  activate :minify_javascript
4
end

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

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

1
body{background-color:#d0e4fe}h1{color:orange;text-align:center}p{font-family:"Times New Roman";font-size:20px}

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

1
switch((new Date).getDay()){case 0:day="Sunday";break;case 1:day="Monday";break;case 2:day="Tuesday";break;case 3:day="Wednesday";break;case 4:day="Thursday";break;case 5:day="Friday";break;case 6:day="Saturday"}

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

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

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

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

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

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

1
image_path('logo.png')
2
# => images/logo.png
3
4
image_path('nested_folder/some.png')
5
# => images/nested_folder/some.png

Шлях Імпорту 

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

1
sprockets.append_path '/some/other/assets_folder/'

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

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

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

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

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

1
middleman init your_fancy_app --template=smacss

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

1
middleman init --template=smacss

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

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

filefilefile

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

filefilefile

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

1
@import 'bourbon_mixins/mixins';
2
@import 'bourbon_neat/grids';
3
@import 'bourbon_refills/cards';
4
...

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

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

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

1
middleman init --help
2
3
# =>  # Use a project template: default, html5, mobile, smacss, bourbon

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

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

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

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

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.