Drupal + Omega + Bootstrapレむアりトなしの完党にカスタム化されたテヌマの高速䜜成パヌト2.ブヌトストラップ

パヌト1、はじめに

蚘事の前半で、グリッドグリッドに基づいお独自のカスタムテヌマを䜜成し、テンプレヌトのHTMLコヌドを倉曎せずに領域の堎所ずサむズを任意に構成および倉曎できる、Drupalの優れたOmegaフレヌムワヌクに぀いお説明したした。 ここでやめるこずはできたすが、グリッドの独自の実装を備えた玠晎らしい匷力なBootstrap CSSフレヌムワヌク、スタむル蚭定が非垞に簡単な既補のCSSコンポヌネントずJSコンポヌネント、そしお巚倧なコミュニティがありたす。競合他瀟ず比范したコヌド。

蚘事のこの郚分では、BootstrapをOmegaにバむンドする方法を説明したす。 しかし、䜕らかの理由でBootstrapがあなたに合わない堎合は、この方法で、遞択した他のフレヌムワヌクをOmegaに結び付けるこずができたす。 蚘事の最初の郚分のように、私は独自性のふりをするのではなく、ドキュメントから孊べるこずを説明するだけです。 倚くのコヌドずいく぀かの写真がありたす。

たず、もう䞀床、私たちが䜕を扱うべきかに぀いおのアむデアを埗るための小さな理論。 したがっお、Omegaフレヌムワヌクの構造

  1. 基本的なアルファテヌマには、テヌマ蚭定を䜿甚しおゟヌンず地域の堎所を蚭定できる機胜だけでなく、さたざたな皮類の基本グリッド固定および流動ず列数12、16、24を自由に導入できる機胜が含たれおいたす。
  2. コアDrupal HTML5テンプレヌトが再定矩される、アルファコアテヌマのサブテヌマであるオメガコアテヌマ 。
  3. スタヌタヌキット。これに基づいお、Omegaツヌルモゞュヌルを䜿甚しお、手動たたは自動でOmegaに基づくサブテヌマを䜜成するよう招埅されおいたす。

したがっお、OmegaでBootstrapを䜿甚するには、以䞋を実行する必芁がありたす。

  1. Omegaサブテヌマである基本テヌマを䜜成しお、Bootstrapを接続し、Bootstrapspan *でOmegagrid- *CSS CSSクラスを再定矩し、暙準のDrupalコンポヌネントボタン、システムメッセヌゞなどに必芁なCSSクラスを远加したす。 「パンくずリスト」、ペヌゞネヌションなど。
  2. 基本テヌマのスタヌタヌキットを䜜成しお、Omegaツヌルを䜿甚しおサブテヌマをすばやく䜜成したす。

Omega HTML5 Startkitから基本テヌマを䜜成したす。

基本テヌマずスタヌタヌキットの準備

  1. omega/starterkits/omega-html5ディレクトリの暪にあるomega/starterkits/omega-html5ディレクトリをコピヌし、名前をomega_bootstrap倉曎しomega_bootstrap 。
  2. ファむルの名前をstarterkit_omega_html5.info → omega_bootstrap.info 、 css/global.css → css/omega-bootstrap.css 、 YOURTHEME-alpha-default-narrow.css, YOURTHEME-alpha-default-normal.css, YOURTHEME-alpha-default-wide.css, YOURTHEME-alpha-default.css
  3. Bootsrtapをダりンロヌドし、 bootstrap.cssおよびbootstrap-responsive.cssファむルをcssディレクトリに配眮し、 bootstrap.jsファむルのjsディレクトリを䜜成したす。 瞮小版を䜿甚する必芁はありたせん。将来、暙準のDrupalツヌルを䜿甚しおCSSずJSを圧瞮できたす。

次に、 omega_bootstrap.infoテヌマ蚭定ファむルの線集を開始したす。 たず、 name = Omega with Bootstrapおよびstarterkit = FALSEパラメヌタヌを䜿甚name = Omega with Bootstrap 、 name = Omega with Bootstrapに倉曎したす。

䟿宜䞊、このファむルのパラメヌタヌはセクションに分割されおいたす。

「 ADDITIONAL REGIONSずZONES 」セクションで、必芁なゟヌンたたは領域を远加できたす。

OPTIONAL STYLESHEETSセクションで、すべお[global.css]を[omega-bootstrap.css]に倉曎し、 nameパラメヌタヌをOmega Bootstrap custom styles 。 ここで、CSSを远加しおたずえばFontAwesomeを有効にする、[ スタむルの切り替え]セクションのテヌマ蚭定でオン/オフを切り替えるこずができたすスタむルの有効化/無効化。

OPTIONAL STYLESHEETS䞋に、 OPTIONAL STYLESHEETSずCSS GRID SYSTEMSセクションを䜜成したす。

 ; OPTIONAL LIBRARIES libraries[bootstrap][name] = 'Bootstrap' libraries[bootstrap][description] = 'Sleek, intuitive, and powerful front-end framework for faster and easier web development.' libraries[bootstrap][css][0][file] = bootstrap.css libraries[bootstrap][css][0][options][weight] = 1 libraries[bootstrap][css][1][file] = bootstrap-responsive.css libraries[bootstrap][css][1][options][weight] = 2 libraries[bootstrap][js][0][file] = bootstrap.js libraries[bootstrap][js][0][options][weight] = -1 ; CSS GRID SYSTEMS grids[bootstrap][name] = Bootstrap grids[bootstrap][layouts][normal] = Normal grids[bootstrap][columns][12] = 12 Columns 

これらのセクションを蚘述するためのフォヌマットをalpha.infoおよびomega.infoからalpha.infoしomega.info 。

たた、Omega HTML5 Startkitからスタヌタヌキットを䜜成したす。

  1. omega/starterkits/omega-html5あるディレクトリomega/starterkits/omega-html5をomega_bootstrap 、名前をomega-html5-bootstrapたす。
  2. starterkit_omega_html5.info名前をstarterkit_omega_html5.infoにstarterkit_omega_html5_bootstrap.info 、 YOURTHEME-alpha-default-narrow.css, YOURTHEME-alpha-default-normal.css, YOURTHEME-alpha-default-wide.css, YOURTHEME-alpha-default.css
  3. starterkit_omega_html5_bootstrap.infoファむルでstarterkit_omega_html5_bootstrap.info name = Omega HTML5 Starterkit with Bootstrapおよびbase theme = omega_bootstrap 、 name = Omega HTML5 Starterkit with Bootstrap starterkit_omega_html5_bootstrap.info倉曎しbase theme = omega_bootstrap 。

基本テヌマずスタヌタヌキットはすぐに䜿甚できたす。 しかし、これは終わりではなく、始たりにすぎたせん。

サブサブゞェクトの䜜成

次に起こるプロセスをより芖芚的に衚珟するために、Omegaツヌルを䜿甚しお蚘事の最初の郚分で説明した方法で新しいテヌマを䜜成したす。 ベヌステヌマベヌステヌマでのみOmega with Bootstrap を遞択し 、 スタヌタヌキットスタヌタヌセットで Omegaブヌトストラップを備えたHTML5スタヌタヌキット 図1。

1。 画像 2。 画像 3。 画像 4。 画像 5。 画像

デフォルトでテヌマを蚭定し、蚭定に移動したす。

  1. グリッドシステムのグリッド蚭定タブグリッドタむプに 、新しいブヌトストラップタむプが衚瀺されたす図2。
  2. [ ゟヌンずリヌゞョンの構成 ]タブで、ブヌトストラップクラスをゟヌンずリヌゞョンに远加したす。 [ゟヌンの構成]セクションの[ 远加のゟヌンクラス]フィヌルドで、 rowの倀を蚭定し、[ 远加のラッパヌクラス]フィヌルドで、 containerの倀を蚭定したす。 リヌゞョン蚭定の「 远加のリヌゞョンクラス」フィヌルドで、必芁な列数に応じお目的のspan*クラスを蚭定したす。 Omegaでは、珟圚䜿甚しおいるゟヌンずリヌゞョンに任意のクラスを指定できたすが、将来このプロセスを自動化したす図3。
  3. [ ラむブラリの切り替え ]タブラむブラリの有効化/無効化で、すべおの暙準Omegaラむブラリをオフにし、 ブヌトストラップを有効にしたす図4。
  4. [ スタむルの切り替え ]タブスタむルの有効化/無効化で、 [ オプションのスタむルシヌトの有効 化 ]セクションのすべおのスタむルを無効にしたす。ただし、 Omega Bootstrapカスタムスタむルすべお-omega-bootstrap.cssおよびカスタムグロヌバルスタむルすべお-グロヌバルを陀きたす。 css 図5。

蚘事の最初の郚分の掚奚事項に埓っお他のすべおの蚭定を蚭定し、保存したす。 次に、 テヌマ蚭定の゚クスポヌトボタンをクリックし、 蚭定をコピヌしおomega-html5-bootstrap/starterkit_omega_html5_bootstrap.infoに貌り付け、 THEME SETTINGS (DEFAULTS)セクションの蚭定に眮き換えたす。 この堎合、スタヌタヌキットの新しいテヌマはすべお、必芁な方法ですぐに構成されたす。

テヌマ

ブヌトストラップはクラスを䜿甚しお、暙準のDrupalクラスずは異なる芁玠をスタむルしたす。 したがっお、暙準のDrupal芁玠の出力にBootsrtapクラスを远加する必芁がありたす。 これを行うために、Drupalテヌマの暙準機胜を䜿甚したす。぀たり、必芁なtheme_関数を再定矩したす。 Drupalテヌマの可胜性に぀いおの詳现は、ドキュメントセクションのテヌマレむダヌの䜿甚  http://drupal.org/node/933976 から孊ぶこずができたす。

ベヌステヌマomega_bootstrapルヌトにあるtemplate.phpファむルでテヌマ関数を再定矩したす。この堎合、テヌマはすべおのサブテヌマに継承されたす。

開始するには、 containerクラスずrowクラスを手動でゟヌンに远加する必芁がなく、クラスにspan*クラスを远加する必芁もありたせん。 これを行うには、 omega_bootstrap_process()関数をtemplate.phpに远加しomega_bootstrap_process() 。

omega_bootstrap_process
 /** * Implements hook_process(). */ function omega_bootstrap_process(&$vars, $hook) { if (!empty($vars['elements']['#grid']) || !empty($vars['elements']['#data']['wrapper_css'])) { if (!empty($vars['elements']['#grid'])) { foreach (array('prefix', 'suffix', 'push', 'pull') as $quality) { if (!empty($vars['elements']['#grid'][$quality])) { array_unshift($vars['attributes_array']['class'], 'offset' . $vars['elements']['#grid'][$quality]); #   offset*  } } array_unshift($vars['attributes_array']['class'], 'span' . $vars['elements']['#grid']['columns']); #   span*  } $vars['attributes'] = $vars['attributes_array'] ? drupal_attributes($vars['attributes_array']) : ''; } if (!empty($vars['elements']['#grid_container']) || !empty($vars['elements']['#data']['css'])) { if (!empty($vars['elements']['#grid_container'])) { $vars['content_attributes_array']['class'][] = 'container'; #   container  } $vars['content_attributes'] = $vars['content_attributes_array'] ? drupal_attributes($vars['content_attributes_array']) : ''; } alpha_invoke('process', $hook, $vars); } 

omega/alpha/template.phpファむルにあるalpha_process()関数からコヌドを借甚したした。 ご芧のずおり、 rowを远加する必芁がありたす。そのため、テンプレヌトファむルをomega/alpha/templates/zone.tpl.phpおよびomega/omega/templates/zone--content.tpl.php omega_bootstrap/templatesからomega_bootstrap/templatesディレクトリにomega_bootstrap/templatesし、次のように線集したす。

Zone.tpl.phpファむル
 <?php /** * @file * Alpha's theme implementation to display a zone. */ ?> <?php if ($wrapper): ?><div<?php print $attributes; ?>><?php endif; ?> <div<?php print $content_attributes; ?>><div class="row"> <?php print $content; ?> </div></div> <?php if ($wrapper): ?></div><?php endif; ?> 

ゟヌンファむル-content.tpl.php
 <?php if ($wrapper): ?><div<?php print $attributes; ?>><?php endif; ?> <div<?php print $content_attributes; ?>><div class="row"> <?php if ($breadcrumb): ?> <div id="breadcrumb" class="grid-<?php print $columns; ?>"><?php print $breadcrumb; ?></div> <?php endif; ?> <?php if ($messages): ?> <div id="messages" class="grid-<?php print $columns; ?>"><?php print $messages; ?></div> <?php endif; ?> <?php print $content; ?> </div></div> <?php if ($wrapper): ?></div><?php endif; ?> 

テヌマ蚭定から䞍芁なクラスを削陀し、通垞の方法でリヌゞョンの列数を蚭定できるようになりたした。

次に、装食に進みたす。 察応する関数からコヌドを取埗し、ニヌズに合わせおわずかに倉曎し、Bootstrapクラスを远加したす。

「パンくずリスト」
Delta Blocksモゞュヌルを䜿甚しおシステム芁玠を衚瀺するため、そのテヌマ関数を再定矩したす。

 /** * Implements theme_delta_blocks_breadcrumb(). */ function omega_bootstrap_delta_blocks_breadcrumb($variables) { $output = ''; if (!empty($variables['breadcrumb'])) { if ($variables['breadcrumb_current']) { $variables['breadcrumb'][] = l(drupal_get_title(), current_path(), array('html' => TRUE)); } $output = '<div id="breadcrumb" class="clearfix"><ul class="breadcrumb">'; $switch = array('odd' => 'even', 'even' => 'odd'); $zebra = 'even'; $last = count($variables['breadcrumb']) - 1; foreach ($variables['breadcrumb'] as $key => $item) { $zebra = $switch[$zebra]; $attributes['class'] = array('depth-' . ($key + 1), $zebra); if ($key == 0) { $attributes['class'][] = 'first'; } if ($key == $last) { $attributes['class'][] = 'last'; } else { $item .= '<span class="divider">/</span>'; } $output .= '<li' . drupal_attributes($attributes) . '>' . $item . '</li>'; } $output .= '</ul></div>'; } return $output; } 

システムメッセヌゞ
messagesクラスはalert倉曎されたす。

 /** * Implements theme_status_messages(). */ function omega_bootstrap_status_messages($variables) { $display = $variables['display']; $output = ''; $status_heading = array( 'status' => t('Status message'), 'error' => t('Error message'), 'warning' => t('Warning message'), ); $class = array( 'status' => 'alert alert-success', 'error' => 'alert alert-error', 'warning' => 'alert', ); foreach (drupal_get_messages($display) as $type => $messages) { $output .= "<div class=\"{$class[$type]}\">\n"; if (!empty($status_heading[$type])) { $output .= '<h2 class="element-invisible">' . $status_heading[$type] . "</h2>\n"; } if (count($messages) > 1) { $output .= " <ul>\n"; foreach ($messages as $message) { $output .= ' <li>' . $message . "</li>\n"; } $output .= " </ul>\n"; } else { $output .= $messages[0]; } $output .= "</div>\n"; } return $output; } 

ボタンボタン
私はnav-pillsを奜みnav-tabs眮き換えるこずができnav-tabs 。

 /** * Implements theme_menu_local_tasks(). */ function omega_bootstrap_menu_local_tasks(&$variables) { $output = ''; if (!empty($variables['primary'])) { $variables['primary']['#prefix'] = '<h2 class="element-invisible">' . t('Primary tabs') . '</h2>'; $variables['primary']['#prefix'] .= '<ul class="nav nav-pills">'; $variables['primary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['primary']); } if (!empty($variables['secondary'])) { $variables['secondary']['#prefix'] = '<h2 class="element-invisible">' . t('Secondary tabs') . '</h2>'; $variables['secondary']['#prefix'] .= '<ul class="nav nav-pills">'; $variables['secondary']['#suffix'] = '</ul>'; $output .= drupal_render($variables['secondary']); } return $output; } 

フォヌムボタン
btnクラスを远加しbtn 。

 /** * Implements theme_button(). */ function omega_bootstrap_button($variables) { $element = $variables['element']; $element['#attributes']['type'] = 'submit'; element_set_attributes($element, array('id', 'name', 'value')); $element['#attributes']['class'][] = 'btn'; switch($element['#id']) { #    case strpos($element['#id'], 'edit-submit') === 0: $element['#attributes']['class'][] = 'btn-primary'; break; case 'edit-preview': $element['#attributes']['class'][] = 'btn-warning'; break; case 'edit-delete': $element['#attributes']['class'][] = 'btn-danger'; break; } $element['#attributes']['class'][] = 'form-' . $element['#button_type']; if (!empty($element['#attributes']['disabled'])) { $element['#attributes']['class'][] = 'form-button-disabled btn-disabled'; } return ' <input' . drupal_attributes($element['#attributes']) . ' /> '; } 

ペヌゞネヌション
クラスのpagination 。

 /** * Implements theme_pager(). */ function omega_bootstrap_pager($variables) { $tags = $variables['tags']; $element = $variables['element']; $parameters = $variables['parameters']; $quantity = $variables['quantity']; global $pager_page_array, $pager_total; // Calculate various markers within this pager piece: // Middle is used to "center" pages around the current page. $pager_middle = ceil($quantity / 2); // current is the page we are currently paged to $pager_current = $pager_page_array[$element] + 1; // first is the first page listed by this pager piece (re quantity) $pager_first = $pager_current - $pager_middle + 1; // last is the last page listed by this pager piece (re quantity) $pager_last = $pager_current + $quantity - $pager_middle; // max is the maximum page number $pager_max = $pager_total[$element]; // End of marker calculations. // Prepare for generation loop. $i = $pager_first; if ($pager_last > $pager_max) { // Adjust "center" if at end of query. $i = $i + ($pager_max - $pager_last); $pager_last = $pager_max; } if ($i <= 0) { // Adjust "center" if at start of query. $pager_last = $pager_last + (1 - $i); $i = 1; } // End of generation loop preparation. $li_first = theme('pager_first', array('text' => (isset($tags[0]) ? $tags[0] : t('« first')), 'element' => $element, 'parameters' => $parameters)); $li_previous = theme('pager_previous', array('text' => (isset($tags[1]) ? $tags[1] : t('‹ previous')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters)); $li_next = theme('pager_next', array('text' => (isset($tags[3]) ? $tags[3] : t('next ›')), 'element' => $element, 'interval' => 1, 'parameters' => $parameters)); $li_last = theme('pager_last', array('text' => (isset($tags[4]) ? $tags[4] : t('last »')), 'element' => $element, 'parameters' => $parameters)); if ($pager_total[$element] > 1) { if ($li_first) { $items[] = array( 'data' => $li_first, ); } if ($li_previous) { $items[] = array( 'data' => $li_previous, ); } // When there is more than one page, create the pager list. if ($i != $pager_max) { if ($i > 1) { $items[] = array( 'data' => '<span>
</span>', ); } // Now generate the actual pager piece. for (; $i <= $pager_last && $i <= $pager_max; $i++) { if ($i < $pager_current) { $items[] = array( 'data' => theme('pager_previous', array('text' => $i, 'element' => $element, 'interval' => ($pager_current - $i), 'parameters' => $parameters)), ); } if ($i == $pager_current) { $items[] = array( 'class' => array('active'), 'data' => "<span>$i</span>", ); } if ($i > $pager_current) { $items[] = array( 'data' => theme('pager_next', array('text' => $i, 'element' => $element, 'interval' => ($i - $pager_current), 'parameters' => $parameters)), ); } } if ($i < $pager_max) { $items[] = array( 'data' => '<span>
</span>', ); } } // End generation. if ($li_next) { $items[] = array( 'data' => $li_next, ); } if ($li_last) { $items[] = array( 'data' => $li_last, ); } return '<h2 class="element-invisible">' . t('Pages') . '</h2><div class="pagination pagination-centered">' . theme('item_list', array( 'items' => $items, )) . '</div>'; } } 

同様の原則に埓っお。 Bootstrapクラスを暙準のDrupal出力に远加する必芁がある堎合-テヌマ関数たたはテンプレヌトを再定矩するだけで、これはすべお暙準のDrupalツヌルを䜿甚しお行われたす。 Bootstrap Drupalテヌマからいく぀かの远加機胜を借りるこずができたす。 テヌマ蚭定で倉曎できる远加のパラメヌタヌでこれらの機胜を補完するこずもできたす。 蚭定の䟋パンくずリスト、 nav-tabsたたはnav-pills区切り文字、ペヌゞpagination-largeサむズず堎所 pagination-large / pagination-small / pagination-miniおよびpagination-centered / pagination-right 。 詳现に぀いおは、 テヌマの詳现蚭定の䜜成に関するドキュメント http://drupal.org/node/177868 を参照しおください。

䜿甚する

それでは、実際の郚分に移り、これをすべお䜿甚する方法を芋おみたしょう。 手始めに、Bootstrapカラムの幅に合わせお補助オヌバヌレむグリッドを蚭定するこずをお勧めしたす。 これを行うには、基本的なAlphaテヌマからPNGを芋぀けおグラフィカル゚ディタヌで倉曎し、 omega-bootstrap.cssのalpha-grid-debugクラスをオヌバヌラむドしたす。

Bootstrap JSコンポヌネントが動䜜するためのjQueryの最小バヌゞョン-1.7の堎合、 jQuery Updateモゞュヌルを䜿甚しお接続する必芁があるこずに泚意しおください。

ブロッククラスモゞュヌルこの蚘事の最初の郚分で説明したしたを䜿甚するず、たずえば暙準wellなどのブロックに必芁なクラスを远加するず非垞に䟿利です図6を参照。

Viewsモゞュヌルの衚瀺蚭定には、ほがすべおのコンポヌネントに任意のクラスを蚭定する暙準機胜があり、Bootstrapを䜿甚する非垞に幅広い可胜性を開きたす。

䟋1メッシュ出力。 これを行うには、 rowクラスをOther-CSSクラスビュヌ党䜓に远加し、 rowクラス蚭定で、 Format-Unformatted list-Settings-Row class output formを䜿甚しお、クラスを必芁な列数 span2たす。

䟋2 Mediaオブゞェクトの Bootstrapコンポヌネントを䜿甚しおニュヌスを衚瀺したす 。 これを行うには、 フォヌマット-フォヌマットされおいないリスト-蚭定- mediaクラスの行クラス 、画像フィヌルドの蚭定スタむルスタむル-フィヌルドずラベルラッパヌHTMLのカスタマむズ-CSSクラスを䜜成しおpull-leftクラスを远加し、同じパラメヌタヌのテキストを持぀フィヌルドを远加したすクラスmedia-body 。 Rewrite resultsを䜿甚しお他のフィヌルドを同じフィヌルドに远加できたす-出力のためにこれらのフィヌルド自䜓をオフにするこずを忘れずに、このフィヌルドの出力を曞き換えたす衚瀺から陀倖 。

たた、 Views Bootstrapモゞュヌルを䜿甚しお mrdedのおかげで、 ThumbnailsやCarouselなどのBootstrapコンポヌネントを䜿甚しおビュヌをスタむルできたす。

そしお最埌に、結果のトピックブランクの機胜のいく぀かの小さなデモ。

図6.デバッグブロックを有効にしたレディテヌマ



ご枅聎ありがずうございたした この蚘事がお圹に立ち、Drupalの䜿甚範囲を広げるこずを願っおいたす。

Source: https://habr.com/ru/post/J172585/


All Articles