Я збирався написати цей пост на деякий час. Кілька друзів попросили мене пояснити, як зробити HTML5 в Drupal 7, через Twitter. Інший відповідної особи, не знайшовши проходить посилання на нього в рецензії на книгу, навіть по електронній пошті:
"Я закликаювас, щоб почати виробництво цього поста так само глибоко, як ви пояснили основні принципи 960. Як я любив читати. Це було схоже на розмову з споріднену душу! Це рідкісна можливість прочитати тлона чомуречі як вони є. У моїй психічної системи, тому є ключовим інгредієнтом знаю, що ти робиш".
Отже, без подальших церемоній, ось воно...
- Введення
- Структура
- Агрегація
- Template.php - Розділ
- Template.php - Обрізка
- Template.php - Мінімізація
- Блок, поля, області, переглядів
- HTML, сторінки вузла
- Включає в себе
- Висновок
Введення
На додаток до HTML5, я розповім про те, як видалити деякі зі створених розмітка Drupal видає за замовчуванням, і як перевизначити системи CSS. Я також дати кілька порад про те, щоб отримати швидку віддачу підвищує швидкість сторінки.
Перш ніж почати, я хотів би зазначити, що це не буде всеосяжною інструкції по створенню Drupal 7 теми. Для стислості я не буду розглядати HTML5 Інструменти модуля, який прагне додати такі функції, як нова форма елементів HTML5 для Drupal. Замість цього я зосереджуся на обрізку XHTML перенасичення, що Drupal як і раніше інстинктивно хоче включити, що випливають з її ранніх днів.
Пам'ятайте - ще до W3C оголосив XHTML 2.0 мертвий, сповіщаючи HTML5, як майбутнє - коли ми всі звикли поставити type="text/css"на тегах, як якщо б ми ніколи не використовували <style>тег, який не був CSS ? О, як нерозумно ми були! Тим не менш, ми думали, що ми так здорово, умиротворення перевірки. Потім HTML5 прийшли разом, проклавши cowpaths, піддаючи нудьги так багато практики ми колись вважали необхідним.
Структура
При першій установці Drupal, ви побачите каталог верхнього рівня імені теми. Здоровий глузд скаже вам, що це, де ви повинні зберігати свою власну тему пов'язані з ним файли. В даному випадку здоровий глузд неправильно! В дійсності, каталог ви хочете грати в це сайти. Це все про вас і вашого сайту (ів), і в цій другій тим, що каталог буде розміщено ваш тему (и).
Примітка: Drupal може працювати з декількома областями за допомогою одного коду, отже, "сайтів"каталогів, а не "сайт", але це виходить за рамки цієї статті. Якщо вас цікавить, є багатовузлового група Drupal присвячених цій темі.
Перше, що потрібно зробити, це створити *.info файлу з ім'ям вашої теми. Так як мій сайт sonspring.com, і моя тема влучно назвав "SonSpring"Мій список файлу sonspring.info. Ось зміст (";"коментарі з рядка)...
; BASIC SETTINGS name = SonSpring core = 7.x; FEATURES (intentionally blank) features[] =; REGIONS regions[front_journal] = front_journal regions[content] = content regions[sidebar_first] = sidebar_first regions[sidebar_second] = sidebar_second regions[search] = search; CSS stylesheets[all][] = assets/css/override/kill/ctools.css stylesheets[all][] = assets/css/override/kill/field.css stylesheets[all][] = assets/css/override/kill/node.css stylesheets[all][] = assets/css/override/kill/system.messages.css stylesheets[all][] = assets/css/override/kill/system.menus.css stylesheets[all][] = assets/css/override/kill/user.css stylesheets[all][] = assets/css/override/kill/views.css stylesheets[all][] = assets/css/reset.css stylesheets[all][] = assets/css/override/keep/system.base.css stylesheets[all][] = assets/css/override/keep/system.theme.css stylesheets[all][] = assets/css/override/keep/search.css stylesheets[all][] = assets/css/960_12_col.css stylesheets[all][] = assets/css/text.css stylesheets[all][] = assets/css/formalize.css stylesheets[all][] = assets/css/site.css; JAVASCRIPT scripts[] = assets/js/master.min.js
Агрегація
Якщо ви дивилися на будь-які теми Drupal, наведений вище код дуже простий речі, нічого надто незвичайного. Одна річ, ви могли помітити, є перевизначення каталогу. Усередині нього два інших каталогах, вбивати і тримати.
Я дізнався цей трюк з берези Хайде Мортен Йоргенсен, під час однієї з бесід на Drupal тематизації. Він називає свою папку Фоад і техніка Фоад, скорочення від "F *** Off і померти" - розумний спосіб позбутися від системи CSS файлів, які ви не хочете.
Якщо ви назвати один з ваших власних CSS файли так само, як одне із значень за замовчуванням, Drupal буде включати в себе ваші, а не забезпечення своєї власної. Саме таким чином, всі вбивства каталогу просто порожній файл, у той час як все тримати каталог CSS файл, який був лише трохи (якщо взагалі) редагувався за замовчуванням.
Тепер ви можете бути здивовані: Навіщо те, зберегти каталог на все, якщо я повторно же код за замовчуванням файли, які він містить? Ось тут починається найцікавіше. Коли ви йдете на продуктивність адміністратора сторінки, і включите агрегування і стиснення CSS- файлів, Drupal буде зібрати всі свої таблиці стилів за замовчуванням система в один файл, і всі ваші стилі в інші.
Це нерозумно. Але з моєї фортеці каталог, змусити тих, хто за замовчуванням стилів - разом з моїми стилів тема - бути зібрані і стиснуті в один файл.
Template.php - Розділ
Назвіть це стара звичка з мого початківця CMS днів використання Textpattern, а й для тематизації цілей я хотів би знати, що "розділ"сайту я на. В основному, це просто означає, що я цікаво, що Foobarодно, в наступних випадках...
http://example.com/foobarhttp://example.com/foobar?page=1http://example.com/foobar/node/search%20term
Так, на початку моєї template.php файл, у мене є проста функція, яка проходить через мене і вистачає першого фрагмента шляху в URL, робить простий перемикач / випадок, і повертає рядок, який стає <BODY> ID.
<?phpfunction sonspring_section() { $section_path = explode('/', request_uri()); $section_name = $section_path[1]; $section_q = strpos($section_name, '?');if ($section_q) { $section_name = substr($section_name, 0, $section_q); }switch ($section_name) { case '': return 'section_home'; break; case 'journal': return 'section_journal'; break; case 'about': return 'section_about'; break; case 'work': return 'section_work'; break; case 'resources': return 'section_resources'; break; case 'contact': return 'section_contact'; break; case 'search': return 'section_search'; break; case 'user': return 'section_user'; break; case 'users': return 'section_user'; break; case 'filter': return 'section_filter'; break; case 'admin': return 'section_admin'; break; default: return 'section_404'; } }
Template.php - Обрізка
На мій template.php файл, у мене є функція під назвою sonspring_process_html_tag. Очевидно, що якщо ваша тема називається "MyTheme", то ваша функція буде називатися mytheme_process_html_tag. Це просто команда приводить до скидання змінних typeта mediaатрибути style, linkі scriptтеги.
Він також очищає CDATAкоментарі, які коли-небудь існували тільки для задоволення XHTML валідатор, тому що навряд чи хто-небудь коли-небудь служили XHTML як application/xhtml+xml. У минулому, хоча всі ми служили XHTML як text/html, ми все стрибали через обручі, додавши CDATAкоментарів. Не так з HTML5.
// Purge needless XHTML stuff. function sonspring_process_html_tag(&$vars) { $el = &$vars['element'];// Remove type="..." and CDATA prefix/suffix. unset($el['#attributes']['type'], $el['#value_prefix'], $el['#value_suffix']);// Remove media="all" but leave others unaffected. if (isset($el['#attributes']['media']) && $el['#attributes']['media'] === 'all') { unset($el['#attributes']['media']); } }
Насправді, XHTML завжди працювало без непотрібного коду. HTML5 тільки робить це офіційно. Для порівняння, ось до і після того, що Drupal це звичайно вихід за замовчуванням, а потім скорочена результат.
До - XHTML
<link rel="stylesheet" href="..." type="text/css" media="all" /><style type="text/css" media="all"> /* Code here. */ </style><script type="text/javascript"> <!--//--><![CDATA[//><!-- /* Code here. */ //--><!]]> </script>
Після - HTML5
<link rel="stylesheet" href="..." /><style> /* Code here. */ </style><script> /* Code here. */ </script>
Template.php - Мінімізація
Хоча це не має відношення до HTML5 прямо, я вирішив, що, коли я скинув приблизно в template.php файл, я міг би також додати деякі HTML Мінімізація.
// Minify HTML output. function sonspring_process_html(&$vars) { $before = array( "/>\s\s+/", "/\s\s+</", "/>\t+</", "/\s\s+(?=\w)/", "/(?<=\w)\s\s+/" );$after = array('> ', '<', '> <', '', '');// Page top. $page_top = $vars['page_top']; $page_top = preg_replace($before, $after, $page_top); $vars['page_top'] = $page_top;// Page content. if (!preg_match('/<pre|<textarea/', $vars['page'])) { $page = $vars['page']; $page = preg_replace($before, $after, $page); $vars['page'] = $page; }// Page bottom. $page_bottom = $vars['page_bottom']; $page_bottom = preg_replace($before, $after, $page_bottom); $vars['page_bottom'] = $page_bottom . drupal_get_js('footer'); }
Блок, поля, області, переглядів
Хоча це технічно можливо використовувати HTML5 і RDF разом, я вирішив просто залишити цей аспект з моїх шаблонів, як ви побачите найближчим часом. Таким чином, я просто відключив RDF модуля (за умовчанням включено).
Здебільшого, Drupal тільки робить те, що в шаблонах. Але є кілька областей, в яких він прагне, щоб обернути речі в <div>тегів, які ви не хочете. На щастя, тема системи Drupal дозволяє легко виправити. Нижче наведено список файлів, які я створив, які містять тількикод, необхідний для генерації контенту, тим самим перевизначення висновку за замовчуванням в Drupal.
Я свідомо опустив закриття >тег, тому що вона вважається кращої практики (як Drupal і Zend ), щоб НЕзакрити <? PHPтега. Замість цього, аналізатор реалізує PHP код завершення при досягненні кінця файлу. Це запобігає ненавмисне введення прогалин в сторінку. (Зайве говорити, що >як і раніше необхідно, коли змішування PHP і HTML в одному файлі).
Примітка: шаблони, які починаються з "погляди,"відносяться до переглядів, третьою стороною Drupal модуль, який дозволяє легко виводити списки контенту на основі різних критеріїв.
block.tpl.php
<?php print $content;
Примітка: я зняв $item_attributesз моїх field.tpl.php файл. Це використовується RDF модуля, і потенційно може бути використана третіми модулів партії, щоб додати такі речі, як OnClick = "..."для різних елементів. Я зняв його, тому що я не використовую RDF модуля, але ваш пробіг може змінюватись - читати далі.
field.tpl.php
<?php print render($items);
region.tpl.php
<?php print $content;
views-view.tpl.php
<?php// Shorthand for if, then print. // I write PHP like a JS hacker. // Pager at the top, and bottom.isset($admin_links) && print $admin_links; $header && print $header; $exposed && print $exposed; $attachment_before && print $attachment_before; $pager && print $pager; $rows ? print $rows : $empty && print $empty; $pager && print $pager; $attachment_after && print $attachment_after; $more && print $more; $footer && print $footer; $feed_icon && print $feed_icon;
views-view-unformatted.tpl.php
<?php$title && print $title;foreach ($rows as $id => $row) { print $row; }
views-view-list.tpl.php
<?php$title && print $title;print '<ul class="list">';foreach ($rows as $id => $row) { print '<li>' . $row . '</li>'; }print '</ul>';
views-view-fields.tpl.php
<?phpforeach ($fields as $id => $field) { if (isset($field->separator)) { print $field->separator; }print $field->content; }
HTML, сторінки вузла
Незважаючи на вищезгадані файли, пов'язані з заблокувати, область, регіон, і перегляду все технічно шаблонів, в тому, що вони закінчуються на *. tpl.php, суть система шаблонів обертається навколо HTML, сторінка, і вузол шаблонів.
html.tpl.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge, chrome=1" />
<title><?php
if (sonspring_section() === 'section_home') {
print 'SonSpring by Nathan Smith';
}
else {
print $head_title;
}
?></title>
<!--[if lt IE 8]>
<script>
window.top.location = 'http://desktop.sonspring.com/ie.html';
</script>
<![endif]-->
<meta name="author" content="Nathan Smith">
<meta name="description" content="Personal and professional home of Christian web designer Nathan Smith." />
<link rel="alternate" type="application/rss+xml" title="SonSpring RSS" href="http://feeds.feedburner.com/sonspring" />
<link rel="shortcut icon" type="image/x-icon" href="/sites/all/themes/sonspring/assets/images/favicon.ico" />
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Oswald" />
<?php print $styles; ?>
</head>
<body id="<?php print sonspring_section(); ?>">
<?php
print $page_top;
print $page;
print $scripts;
print $page_bottom;
?>
<script async="async" src="http://mint.sonspring.com/?js"></script>
</body>
</html>
page.tpl.php
<div id="wrapper">
<?php include 'assets/includes/header.inc'; ?>
<div id="main" class="container_12">
<div class="grid_10">
<h1><?php print $title; ?></h1>
<?php $tabs && print render($tabs); ?>
<div class="grid_7 alpha">
<?php print render($page['content']); ?>
</div>
<div class="grid_3 omega aside">
<?php $page['sidebar_first'] && print render($page['sidebar_first']); ?>
</div>
</div>
<div class="grid_2 aside">
<?php
include 'assets/includes/fusion.inc';
$page['sidebar_second'] && print render($page['sidebar_second']);
?>
</div>
</div>
</div>
<?php include 'assets/includes/footer.inc';
page??search.tpl.php
<div id="wrapper">
<?php include 'assets/includes/header.inc'; ?>
<div id="main" class="container_12">
<div class="grid_10">
<h1><?php print $title; ?></h1>
<?php
$tabs && print render($tabs);
$page['content'] && print render($page['content']);
?>
</div>
<div class="grid_2 aside">
<?php
include 'assets/includes/fusion.inc';
$page['sidebar_second'] && print render($page['sidebar_second']);
?>
</div>
</div>
</div>
<?php include 'assets/includes/footer.inc';
Примітка: У node.tpl.php, я видалив атрибути $title_attributesі $content_attributes, використовувані для RDF. Для незайманою node.tpl.php - джерело.
node.tpl.php
<?php
!empty($content['upload']) && hide($content['upload']);
!empty($content['taxonomy_vocabulary_1']) && hide($content['taxonomy_vocabulary_1']);
!empty($content['links']) && hide($content['links']);
?>
<div class="node clearfix">
<?php if (!$page) { ?>
<?php print render($title_prefix); ?>
<h2>
<a href="<?php print $node_url; ?>"><?php print $title; ?></a>
</h2>
<?php print render($title_suffix); ?>
<?php } ?>
<?php if ($submitted) { ?>
<?php if ($page) { ?>
<div class="g_plus"><div class="g-plusone" data-size="small" data-count="false"></div></div>
<?php } ?>
<div class="meta mute">
<span class="submitted">
<?php print format_date($node->created); ?>
</span>
—
Topic:
<?php print render($content['taxonomy_vocabulary_1']); ?>
</div>
<?php } ?>
<?php
print render($content);
print render($content['links']);
?>
</div>
Включає в себе
Для повноти картини, я зрозумів, що я повинен закінчити, перерахувавши з вмісту мого *. вкл файли, що містяться в включає в себе каталог під активи. У той час як ці файли можуть мати так же легко, були залишені в більш високому рівні *. tpl.php файлів, легкість в обслуговування і в прагненні приєднатися .
header.inc
<div id="header"> <div class="container_12"> <div class="grid_3" id="ss_logo"> <?php if (!$is_front) { print '<a href="/">'; }print '<span>SonSpring</span>';if (!$is_front) { print '</a>'; } ?> </div> <div class="grid_7"> <ul id="nav"> <li id="nav_journal"> <a href="/journal">Journal</a> </li> <li id="nav_about"> <a href="/about">About</a> </li> <li id="nav_work"> <a href="/work">Work</a> </li> <li id="nav_resources"> <a href="/resources">Resources</a> </li> <li id="nav_contact"> <a href="/contact">Contact</a> </li> </ul> </div> <div class="grid_2"> <?php if ($page['search'] && sonspring_section() !== 'section_search') { print render($page['search']); } ?> </div> </div> </div>
fusion.inc
<a href="http://fusionads.net/" id="fusion_link">Powered by Fusion Ads</a>
<div id="fusion_ad"><span class="clear"> </span></div>
footer.inc
<div id="footer">
<div class="container_12">
<div class="grid_4">
© <?php print date('Y'); ?> <a href="https://profiles.google.com/sonspring/about">Nathan Smith</a>. All rights reserved.
</div>
<div class="grid_4">
<a href="http://www.firehost.com/?ref=spon_nsmith_sonspring" title="Secure Hosting" id="hosted_by_firehost">Hosted by FireHost</a>
</div>
<div class="grid_4 align_right">
<a href="http://feeds.feedburner.com/sonspring">Subscribe</a> via RSS. Follow me on <a href="http://twitter.com/nathansmith">Twitter</a>.
</div>
</div>
</div>
Висновок
Хоча все, що може здатися, що багато коду, на перший погляд, майте на увазі, що це в значній мірі повністю в темі мого сайту (крім CSS і JavaScript світло). Як тільки ви отримаєте повісити, як вона працює, Drupal тематизації система насправді не так вже й важко зрозуміти. Крім того, ви вчитеся реальний PHP, а не псевдо-код.
Я б не сказав, Drupal є досконалим, але він пропонує розширюваність за допомогою простої заміни. До сих пір це найбільш інтуїтивний підхід, який я знайшов в моєму звивисті пошуки ідеальної CMS.
