Những thay đổi ở theme D7 so với D6

Submitted by mrsinguyen on Mon, 05/04/2010 - 09:15

1. CSS ID đặt tên thân thiện hơn

Recent blog posts

Old CSS ID (Drupal 6): block-blog-0
New CSS ID (Drupal 7): block-blog-recent

Book navigation

Old CSS ID (Drupal 6): block-book-0
New CSS ID (Drupal 7): block-book-navigation

Recent comments

Old CSS ID (Drupal 6): block-comment-0
New CSS ID (Drupal 7): block-comment-recent

Active forum topics

Old CSS ID (Drupal 6): block-forum-0
New CSS ID (Drupal 7): block-forum-active

New forum topics

Old CSS ID (Drupal 6): block-forum-1
New CSS ID (Drupal 7): block-forum-new

Language switcher

Old CSS ID (Drupal 6): block-locale-0
New CSS ID (Drupal 7): block-locale-language-switcher

Syndicate

Old CSS ID (Drupal 6): block-node-0
New CSS ID (Drupal 7): block-node-syndicate

Most recent poll

Old CSS ID (Drupal 6): block-poll-0
New CSS ID (Drupal 7): block-poll-recent

Author information

Old CSS ID (Drupal 6): block-profile-0
New CSS ID (Drupal 7): block-profile-author-information

Search form

Old CSS ID (Drupal 6): block-search-0
New CSS ID (Drupal 7): block-search-form

Popular content

Old CSS ID (Drupal 6): block-statistics-0
New CSS ID (Drupal 7): block-statistics-popular

Powered by Drupal

Old CSS ID (Drupal 6): block-system-0
New CSS ID (Drupal 7): block-system-powered-by

User login

Old CSS ID (Drupal 6): block-user-0
New CSS ID (Drupal 7): block-user-login

Navigation

Old CSS ID (Drupal 6): block-user-1
New CSS ID (Drupal 7): block-system-navigation

Who's new

Old CSS ID (Drupal 6): block-user-2
New CSS ID (Drupal 7): block-user-new

Who's online

Old CSS ID (Drupal 6): block-user-3
New CSS ID (Drupal 7): block-user-online

2. Primary và secondary links bây giờ là Main và Secondary menu

6.x

<?php
 <div id="menu">
    <?php if (isset($secondary_links)) { ?><?php print theme('links', $secondary_links, array('class' => 'links', 'id' => 'subnavlist')); ?><?php } ?>
    <?php if (isset($primary_links)) { ?><?php print theme('links', $primary_links, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>
  </div>
?>

7.x

<?php
<div id="menu">
    <?php if (isset($secondary_menu)) { ?><?php print theme('links', $secondary_menu, array('class' => 'links', 'id' => 'subnavlist')); ?><?php } ?>
    <?php if (isset($main_menu)) { ?><?php print theme('links', $main_menu, array('class' => 'links', 'id' => 'navlist')) ?><?php } ?>
  </div>
?>

3. Taxonomy link được đưa vào đối tượng node

Ở D6 để in mảng các term của taxonomy ra ngoài trong file node.tpl.php thông qua biến $taxonomy và $terms. Nhưng ở D7 đã được chuyển vào đối tượng node mảng các giá trị của term được lưu ở $node->content['links']['terms']['#value'].

6.x

<?php
<?php if ($taxonomy): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
?>

7.x

<?php
<?php if ($terms): ?>
      <div class="terms"><?php print $terms ?></div>
    <?php endif;?>
?>

4. Những thay đổi ở file page.tpl.php (hỗ trợ RDFa)

D7 bây giờ hỗ trợ RDFa nên yêu cầu phải thay đổi đối với file page.tpl.php

DOCTYPE được thay đổi sang XHTML+RDFa 1.0.
Thuộc tính lang bây giờ đã bỏ (do http://www.w3.org/TR/xhtml11/changes.html), bây giờ chỉ còn lại xml:lang.
RDF namespace được lưu trong biến $rdf_namespaces.
GRDDL profile được đặt trong thẻ

6.x

<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><br />
<html">http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html</a> xmlns="<a href="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml"</a> xml:lang="<?php print $language->language ?>" lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>">
  <head>
?>

7.x

<?php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "<a href="http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"><br />
<html">http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html</a> xmlns="<a href="http://www.w3.org/1999/xhtml"">http://www.w3.org/1999/xhtml"</a> xml:lang="<?php print $language->language ?>" dir="<?php print $language->dir ?>"
  <?php print $rdf_namespaces ?>>
  <head profile="<?php print $grddl_profile ?>">
?>

5. clear-block class được đổi tên lại là clearfix

Nếu ở D6 bạn dùng <div class="clear-block"> thì trên D7 sẽ dùng là <div class="clearfix">

6. File box.tpl.php đã bị loại

Lúc trước ở D6 form comment được format thông qua file box.tpl.php bây giờ nó đã bị loại và thay vào đó dùng hàm heme_comment_form_box().

7. Biến $help bây giờ trở thành region riêng

Ở D6 nội dung help được đưa vào biến, bây giờ ở D7 được đưa riêng vào một region riêng.

regions[help] = Help

8. Biến $mission đã bị loại thay vào đó là highlight region

9. Biến $footer_message đã bị loại thay vào đó là footer region

regions[footer] = Footer

10. Main content trở thành block

11. Thêm một cách để can thiệp các hàm process

Mặc định có preprocess bây giờ có thêm "process" chạy tiếp theo sau "preprocess".

12. HTML class được generate thông qua biến

Bây giờ, tất cả các template có in biến $classes từ template được render một cách tự động thông qua các process function. Ví dụ in class với key là "classes_array" như sau:

<?php
function mytheme_preprocess_node(&$vars) {
  // Add a striping class.
  $vars['classes_array'][] = 'node-' . $vars['zebra'];
}
?>

Trong file template có thể in như sau:

<div class="<?php print $classes ?>">
  ...
</div>

13. HTML attributes cũng được generate thông qua biến

Tất cả template có in $attributes, $title_attributes, và $content_attributes từ template được render một cách tự đông thông qua các process function.

<?php
function mytheme_preprocess_node(&$vars) {
  // If the node was saved with a log message and the currently logged in user
  // has permission to view that message, add it as a title attribute (tooltip)
  // when displaying the node.
  if (!empty($vars['node']->log) && user_access('view revisions')) {
    $vars['attributes_array']['title'] = $vars['node']->log;
  }

  // Force the direction of node titles to be left to right, regardless of
  // language or any other settings.
  $vars['title_attributes_array']['dir'] = 'ltr';
}
?>

Trong file template

<div id="..." class="..."<?php print $attributes; ?>>
  <h2<?php print $title_attributes; ?>>...</h2>
  <div class="content"<?php print $content_attributes; ?>>...</div>
</div>

14. Variable process functions bây giờ dùng tất cả các cho các hook theme

<?php
function mytheme_preprocess_menu_link(&$variables) {
  if (
    substr($variables['element']['#href'], 0, 5) == 'http:' || 
    substr($variables['element']['#href'], 0, 6) == 'https:'
  ) {
    $variables['element']['#localized_options']['attributes']['target'] = '_blank';
  }
} 
?>

15. Tất cả các hàm trong theme bây giờ chỉ có một tham số là $variables

6.x

<?php
function drupal_common_theme() {
  return array(
    ...
    'table' => array(
      'arguments' => array('header' => NULL, 'rows' => NULL, 'attributes' => array(), 'caption' => NULL),
    ),
    ...
  );
}

function theme_table($header, $rows, $attributes = array(), $caption = NULL) {
  ...
}
?>

7.x

<?php
function drupal_common_theme() {
  return array(
    ...
    'table' => array(
      'variables' => array('header' => NULL, 'rows' => NULL, 'attributes' => array(), 'caption' => NULL, 'colgroups' => array(), 'sticky' => TRUE),
    ),
    ...
  );
}

function theme_table($variables) {
  $header = $variables['header'];
  $rows = $variables['rows'];
  $attributes = $variables['attributes'];
  $caption = $variables['caption'];
  $colgroups = $variables['colgroups'];
  $sticky = $variables['sticky'];
  ...
}
?>

16. Tên hàm trong file template.php phải đặt theo tên theme

Bây giờ không dùng themeEngineName_ làm prefix nữa, nó đã chết. Dùng một prefix duy nhất đó là themeName_.

<?php
/**
 * Return a themed breadcrumb trail.
 *
 * @param $breadcrumb
 *   An array containing the breadcrumb links.
 * @return a string containing the breadcrumb output.
 */
function garland_breadcrumb($variables) {
  $breadcrumb = $variables['breadcrumb'];

  if (!empty($breadcrumb)) {
    // Provide a navigational heading to give context for breadcrumb links to
    // screen-reader users. Make the heading invisible with .element-invisible.
    $output = '<h2 class="element-invisible">' . t('You are here') . '</h2>';

    $output .= '<div class="breadcrumb">' . implode(' › ', $breadcrumb) . '</div>';
    return $output;
  }
}
?>

17. Các file CSS và JS phải được khai báo trong file themeName.info

18. Đổi tên $block->content thành $content trong file block.tpl.php

19. Thay đổi cơ chế render của node và user

Bây giờ có thể render từng phần ở user và node.

<div class="content">
  <?php
    // We hide the comments and links now so that we can render them later.
    hide($content['comments']);
    hide($content['links']);
    print render($content);
  ?>
</div>

<?php print render($content['links']); ?>

<?php print render($content['comments']); ?>.

20. Đưa jQuery UI (1.8) vào core

21. Đưa CSS và JS thông qua drupal_render

6.x

<?php
function example_admin_settings() {
  // Add example.admin.css
  drupal_add_css(drupal_get_path('module', 'example') .'/example.admin.css');
  // Add some inline JavaScript
  drupal_add_js('alert("You are visiting the example form.");', 'inline');
  // Add a JavaScript setting.
  drupal_add_js(array('mymodule' => 'example'), 'setting');
  $form['example'] = array(
    '#type' => 'fieldset',
    '#title' => t('Example');
  );
  return $form;
}
?>

7.x

<?php
function example_admin_settings() {
  $form['#attached_css'] = array(
    // Add example.admin/css.
    drupal_get_path('module', 'example') . '/example.admin.css'
  ),
  $form['#attached_js'] = array(
    // Add some inline JavaScript.
    'alert("You are visiting the example form.");' => 'inline',
    // Add a JavaScript setting. Note that when the key is a number, the 'data' property will be used.
    array(
      'data' => array('mymodule' => array(...)),
      'type' => 'setting'
    ),
  );
  $form['example'] = array(
    '#type' => 'fieldset',
    '#title' => t('Example');
  );
  return $form;
}
?>

22. Biến $closure trở thành $page_bottom, có biến mới $page_top và region ẩn

6.x

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
...
<body class="<?php print $body_classes; ?>">
...
    <?php print $closure; ?>
</body>
</html>

7.x

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN"
  "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
...
<body class="<?php print $classes; ?>">
  <?php print $page_top; ?>
...
  <?php print $page_bottom; ?>
</body>
</html>

Nếu định nghĩa thêm region thì trong file .info phải có hai region page_top và page_bottom

regions[content] = Content
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom

Hai region page_top và page_bottom là hai region ẩn, nghĩa là bạn không thấy trong giao diện quản lý region. Khi có nhu cầu thêm nhiều region ẩn thì sẽ thêm regions_hidden[] vào file .info

regions[content] = Content
regions[help] = Help
regions[page_top] = Page top
regions[page_bottom] = Page bottom
regions[indicators] = Indicators
regions_hidden[] = indicators

23. Hai biến $left và $right được đổi lại là $sidebar_first và $sidebar_second; CSS IDs cũng thay đổi.

6.x

     <?php if (!empty($left)): ?>
        <div id="sidebar-left" class="column sidebar">
          <?php print $left; ?>
        </div> <!-- /sidebar-left -->
      <?php endif; ?>
...
      <?php if (!empty($right)): ?>
        <div id="sidebar-right" class="column sidebar">
          <?php print $right; ?>
        </div> <!-- /sidebar-right -->
      <?php endif; ?>

7.x

      <?php if ($sidebar_first): ?>
        <div id="sidebar-first" class="column sidebar"><div class="section region">
          <?php print $sidebar_first; ?>
        </div></div> <!-- /.section, /#sidebar-first -->
      <?php endif; ?>

      <?php if ($sidebar_second): ?>
        <div id="sidebar-second" class="column sidebar"><div class="section region">
          <?php print $sidebar_second; ?>
        </div></div> <!-- /.section, /#sidebar-second -->
      <?php endif; ?>

24. Biến $picture đổi thành $user_picture, và CSS class 'picture' đổi thành 'user-picture'

6.x

<div class="picture">
  <?php print $picture; ?>
</div>

7.x

<?php if ($user_picture): ?>
  <div class="user-picture">
    <?php print $user_picture; ?>
  </div>
<?php endif; ?>

25. Có các CSS class mới element-hidden và element-invisible

26. Biến Drupal.jsEnabled đã bị loại

27. PHPTemplate bây giờ hỗ trợ wildcard dạng như page-user-%.tpl.php

(còn tiếp)

Tags:

Drupal 7

Drupal 6

Theme

Main menu