HTML5 ” ДРУПАЛ 7

шынайы мақала http://sonspring.com/journal/html5-in-drupal-7

Я хотел написать бұл пост біраз уақыт. Бірнеше достар сұрады мені түсіндіругеқалай HTML5″ Друпал 7, Твиттер. Тағы бір мүдделі тұлға, тауып хурайра ол туралы рецензия на книгу, тіпті электрондық пошта:

“Мен шақырамын, сіз бастау үшін жүргізу бұл пост тек осылай терең, кез негізгі принциптері 960. Қалай жақсы көретінін, оны оқып. Бұл қарым-қатынас қалай отырып, екінші орынға! Бұл сирек кездесетін мүмкіндігі оқи фоннегемұндай заттар, олар қандай бар. Менің ақыл-ой жүйесінде, неге басты элементібілемін, сен не істейсің.”

Сондықтан әрі қарай ado жоқ, міне…


ИНТРО

Сонымен HTML5, мен айтамын қалай жоюға қандай да бір сгенерированной белгілеу Друпал выплевывает әдепкі ретінде переопределить жүйесін әдепкіCSS. Мен сондай-ақ шаққандағы бірнеше кеңестер қалай алу керектігі туралы тез ұтыс беттің жылдамдығын арттырады.

Бұрын біз углубимся, Мен жай ғана келеді еске, бұл емес, жан-жақтынұсқаулықты құру бойынша тақырыптар Drupal 7. Қысқалық үшін, айтпаймын қамтитын құралдар үшін HTML5 – модуль, ол бастамаларына қосу үшін, функции сияқты HTML5 және нысаны элементтері Drupal-да. Оның орнына, мен сосредоточусь арналған кесінділері XHTML” перенасыщение, Друпал әлі инстинктивно қалайды қамтуы туындайтын оның ерте күн.

Есіңізде болсын — сонымен қатар, консорциум W3C жариялады бұл XHTML 2.0 мертв, предвещая HTML5 болашақта біз барлық үйреніп қоюға type="text/css"арналған теги, егер біз қашан болмасын пайдаланды <style> тег, ол емес, ӨҚБ? Ох, қалай silly ма! Әзірге біз ойлаған, бұл-тамаша, умиротворения валидатор. Содан кейін “HTML5 пайда болды, жаяу жүру cowpaths лот скуки көп тәжірибе, біз бірден подумали қажет.


ҚҰРЫЛЫМЫ

Бірінші Drupal орнату, сіз көресіз каталог жоғарғы деңгейдегі есімімен байланысты тақырыптар. Ой деді сізге, бұл, онда сіз сақтауға тиіс өз тақырыптарына байланысты файлдар. Бұл жағдайда, жалпы мағынасы-бұлдұрыс! Шын мәнінде, директория, сіз ойнауға болады бұл веб-сайттар. Бұл барлық про сізді және сіздің сайт(лар), және онда басқа тақырыптар каталог, онда болады орналастырылуы сіздің тақырып(лар).

Ескертпе: Drupal жұмыс істей алады, бірнеше домендерді арқылы бірыңғай кодовую базасын, осыдан “сайттар” каталог орнына “сайты,” бірақ бұл осы баптың шеңберінен. Егер сіз мүдделі, бар Многоузловой орнату Drupal тобы арналған.

Друпал 7 - Тақырыптың Құрылымы

Бірінші, бұл істеу керек, бұл құру *.инфо файл атауымен сіздің тақырыптар. Өйткені менің сайт 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*** қайтарам өлуді” – тәсілін құтылу жүйесінCSS файлдар Сіз.

Егер сіз хабарластыңыз өз CSS үшін файлдар сияқты әдепкі бойынша, Друпал қамтитын болады твоей емес, өз бетінше. Осылайша, барлық убить каталог-бұл жай ғана бос файл, онда барлық ұстап Directory-бұл CSS файлды тек сәл (егер жалпы) модификацияланған өзінің бастапқы әдепкі мәнді.

Енді, сіз удивиться: не үшін ұстап каталог барлық болса, қайта пайдалану, сол код файлдар әдепкі бойынша, ол қамтиды? Міне, осы жерден басталады ең қызықты. Сіз баруға спектакль admin бөлімде қосыңыз біріктіру және сығуCSS” файлдар Друпал жинайды барлық жүйесінің әдепкі кестелер стильдері бір файл, және сіздің барлық кестелер стильдері басқа.

Бұл-ақымақтық. Бірақ менің ұстап каталогтар мен күші сол әдепкі кесте стилі – менің тақырыбының стильсінің – агрегируемых және сжаты бір файл.

Друпал 7 - Өнімділік


TEMPLATE.PHP – БӨЛІМ

Атай бұл ескі әдет менің жаңадан КМВ күн арқылы шаблондар textpattern, бірақ тематизации мақсаттары мен көреді білу, “бөлім” сайты мен. Негізінен, бұл жай ғана білдіреді, ол маған бір қызығы, бұл бағдарлама бойынша тең болып табылады, мынадай жағдайларда…

http://example.com/foobar

http://example.com/foobar?page=1

http://example.com/foobar/node/search%20term

Басында өз template.php файл бар қарапайым функция, ол біз бен және тапшы мені бірінші жол бөлшегі” , URL-мекен-жайы, қарапайым қосқыш/корпус қайтарады жолы болып отыр, ол <body> сәйкестендіргіші бар.

<?php

function 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_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 бұл растады. Салыстыру үшін, міне, сізге дейін және кейін Друпал болады қалыпты шығарылады әдепкі, содан кейін арықтады нәтижесі.

Бұрын – қр 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-кодыминификации. Жалпы, келесі кодты жай ғана қажетсіз жояды кемшіліктер мен алшақтықтар жолдарының үнемдеп, аз Мөлшері, онда бұл мүмкін. Егер бетте ұсталады <pre> немесе <textarea> тег, оның жайыма қалдырды, өйткені қозғамайды блоктар кодын немесе мәтін енгізілген нысаны.

// 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 және РСО бірге, мен шешті жай ғана қалдыру бұл аспект менің шаблондарды, сіз көп ұзамай байқайсыз. Тап мұндай, мен жай ғана отключил РСО модуль (әдепкі бойынша қосылған).

Үшін Drupal 7 - модуль rdf

Көп бөлігі, Друпал ғана визуализирует болса, сіздің орнатыңыз. Бірақ бар бірнеше облыстардың, онда ол тренд заворачивать заттарды <div> теги болуы мүмкін жағымсыз. Бақытымызға орай, Друпал тақырыбында жүйесі оңай түзетуге болады. Төменде көрсетілген файлдар мен құрды, олар құрамындатек қажетті кодын генерациялау үшін Контентті переопределяя Друпал әдепкі шығу.

Ал мақсатты түрде түсірілуі закрывающий ?> тег, себебі ол деп саналады ең үздік практика ( Drupal және Zend бар, жоқ жабу <?php тег. Оның орнына парсер түсінеді” РНР коды аяқталады, ол жетті соңына файл. Бұл болдырмайды әдейі емес вдувание кемшіліктерді бетіне. (Әлбетте, ?> керек кезінде араластыру бастап PHP және с HTML бір файлда.)

Ескерту: үлгілер басталатын “түрі-” қатысты көзқарастармен, шеткі модуль Drupal оңай шығаруға тізімдері негізінде контенттің әр түрлі критерийлер.

block.tpl.php

<?php print $content;

Ескертпе: менің жойылады $item_attributes менің field.tpl.php файл. Бұл пайдаланылады РДФ – модуль, және ықтимал пайдаланылуы мүмкін бөгде модульдер қосу үшін заттар ретінде onclick="..." әр түрлі элементтері. Мен оны жойылады, онда бұл пайдаланамын” РСО модуль, бірақ сіздің жүгіріс әр түрлі болуы мүмкін — толық мәлімет.

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

<?php

foreach ($fields as $id => $field) {
  if (isset($field->separator)) {
    print $field->separator;
  }

  print $field->content;
}

HTML-КОДЫ, БЕТ ТОРАБЫ

Дегенмен жоғарыда аталған файлдар жататын блогы, облыс, аймақ, жәнекөзқарастары барлық техникалық шаблондарды, оның соңына *.tpl.phpмәні жүйесі шаблондарды айналасында айналады HTML-коды, беттері мен үлгілері торабы.

Төменде, мен аударды көпшілігі менің қалыптың коды. Сіз байқауыңыз мүмкін емес, менің қосты page–front.tpl.php файл. Бұл, негізінен, қатаң, өйткені ол өзгеріп отырады, бұл жиі бір ғана динамикалық бөлігі соңғы жазбалар күнделігінде.

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маған құсап $attributes, $title_attributes, және$content_attributesүшін пайдаланылатын РСО. Үшін тұмса 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>
      &mdash;
      Topic:
      <?php print render($content['taxonomy_vocabulary_1']); ?>
    </div>
  <?php } ?>
  <?php
    print render($content);
    print render($content['links']);
  ?>
</div>

ҚАМТИДЫ

Үшін толық картиналар, мен шешті және аяқтау, банкноталардың мазмұн менің*.Инк файлдар қамтылған ішіндегі қамтиды каталог астында активтер. Дегенмен бұл файлдар еді оп-оңай тастап, жоғары деңгейде *.tpl.php файлдар үшін, жеңілдік жөндеуге жарамдылық және ұмтылған ұстануға құрғақпринциптері мен отделил оларды өз файлдар. Бола тұра, файл кеңейту *.Инк, Drupal біледі тыйым салу үшін тікелей көру, сондықтан олар пайдаланылуы мүмкін тек арқылы қосу РНР – бетті.

Тақырыбы.Инк

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

фьюжн.Инк

<a href="http://fusionads.net/" id="fusion_link">Powered by Fusion Ads</a>
<div id="fusion_ad"><span class="clear">&nbsp;</span></div>

Төменгі колонтитул.Инк

<div id="footer">
  <div class="container_12">
    <div class="grid_4">
      &copy; <?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>

ҚОРЫТЫНДЫ

Пока барлық, бұл көрінуі мүмкін көп кодының бірінші көзқарас, ескеру өте көпкөлемде менің сайттың тақырыбына (бұдан ӨҚБ және жарық JavaScript). Егер сіз іліп, ол қалай жұмыс істейді, Drupal theming жүйесі шын мәнінде емес, бұл түсіну қиын. Плюс, сіз үйрен нақты РНРемес, жалған код.

Едім, – деді Друпал тамаша, бірақ ол ұсынады расширяемость көмегімен қарапайым переопределений. Әрине, бұл ең интуитивті тәсіл таптым, ” менің бос ізденістер идеалды КМВ. Сенемін бұл қадам басшылық көмектесті аңызды, Друпал бұл қисық оқыту “тік”, немесе, кем дегенде, жасады процесс, меніңше, кем пугающей.

 

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>