zoukankan      html  css  js  c++  java
  • 为 Drupal 7 构建一个新主题

    主题解释了 Drupal 网站的用户界面 (UI)。虽然主题结构并没有明显的变化,但 Drupal 版本 7 配备了一个新的主题实现方法。本文演示了如何创建一个新的 Drupal 7 主题。

    Drupal 主题的目标是将框架的处理逻辑和设计元素分开。为了做到这一点,Drupal 采用了一个复杂的主题系统,其中包括主题、主题引擎和挂钩。主题组件与 Drupal 核心系统和模块设计元素配合,创建具有独特外观的用户界面(单独 Drupal 页面和表单)。由于将 Drupal 的业务逻辑从它的表示逻辑中分离出来,使代码更易于维护,并且您无需重写代码层就可以交换出主题层的实现,反之亦然。图 1 说明了 Drupal 框架结构。


    图 1. Drupal 框架结构
    Drupal 框架结构的图形表示

    主题显示 Drupal 核心通过底层主题引擎从数据库中提取的数据,主题引擎被用作 Drupal 核心和主题模板之间的接口。

    主题引擎

    主题引擎 是一种手段,主题通过此引擎与 Drupal 核心进行交互。有几个主题引擎可以与 Drupal 配合使用。最流行的是:

    • PHPTemplate
    • XTemplate
    • Plain PHP
    • Smarty Engine

    其他 Drupal 主题引擎

    与 Drupal 配合的还有其他几个常用主题引擎。它们包括 PHPTALwgSmarty、Zengine、Awesomengine、ETS、Haml、XSLengine 和 Peroxide。不过,本文使用 PHPTemplate 引擎,因为它是默认的主题引擎,并且是与 Drupal 7 一起打包的惟一主题引擎。

    如果您愿意,您也可以使用自己的自定义引擎。

    PHPTemplate 主题引擎是默认的 Drupal 引擎,也是本文中所使用的主题引擎,它使用名称类似于 filename.tpl.php 的单独主题文件作为 Drupal 的 theme_filename() 函数的主题。这些文件每个均包含面向动态数据的 HTML 框架以及 PHP 语句。因此,凭借 PHP 的基本知识,利用 PHPTemplate 就能轻松创建高级主题,因为这只涉及极少量的代码。

    规划主题

    主题是由若干个文件组件。文件的数量取决于主题的复杂性。一个主题可能只有三个文件,也可能会有几十个文件,包括放置在主题目录内若干个文件夹中的图形元素和各种脚本。图 2 显示了在主题主文件夹中预期可以找到的典型文件描述(颜色、图像、徽标、模板、样式和 PHP 文件)。


    图 2. 主题文件夹的典型内容
    屏幕截图显示主题文件夹中的典型文件夹和文件

    并非所有这些文件都是一个主题所需要的,许多人认为级联样式表 (CSS) 文件是绝对必需的,但某些主题甚至连 CSS 也没有。通过了解这些主题文件的用法,主题结构以及它的工作方式会变得更加清晰。让我们再看看主题目录中的一些文件,并探讨它们在整体主题中的功能。

    .info 文件

    .info 文件是一个必需的文件:Drupal 必须包括它,才能看到主题。.info 文件告诉 Drupal 主题的内部名称。例如,如果这个文件的名称是 ibmtheme.info,那么 Drupal 给这个主题的名称将是 ibmtheme。如果您的主题使用 JavaScript、元数据、样式表或块区域等元素,您也必须在 .info 文件中定义它们。一切都是可选的。在 清单 1 中,Bartik 主题的 .info 文件内容解释了这种行为。


    清单 1. Bartik 主题的 .info 文件内容

    				
    ; $Id: bartik.info,v 1.5 2010/11/07 00:27:20 dries Exp $
    
    name = Bartik
    description = A flexible, recolorable theme with many regions.
    package = Core
    version = VERSION
    core = 7.x
    
    stylesheets[all][] = css/layout.css
    stylesheets[all][] = css/style.css
    stylesheets[all][] = css/colors.css
    stylesheets[print][] = css/print.css
    
    regions[header] = Header
    regions[help] = Help
    regions[page_top] = Page top
    regions[page_bottom] = Page bottom
    regions[highlighted] = Highlighted
    
    regions[featured] = Featured
    regions[content] = Content
    regions[sidebar_first] = Sidebar first
    regions[sidebar_second] = Sidebar second
    
    regions[triptych_first] = Triptych first
    regions[triptych_middle] = Triptych middle
    regions[triptych_last] = Triptych last
    
    regions[footer_firstcolumn] = Footer first column
    regions[footer_secondcolumn] = Footer second column
    regions[footer_thirdcolumn] = Footer third column
    regions[footer_fourthcolumn] = Footer fourth column
    regions[footer] = Footer
    
    settings[shortcut_module_link] = 0
    
    
    ; Information added by drupal.org packaging script on 2011-01-05
    version = "7.0"
    project = "drupal"
    datestamp = "1294208756"
    

    .tpl.php 模板文件

    主题目录包含若干个模板文件,其文件名如 xxx.tpl.php。这些模板文件包含主题的 Extensible HTML (XHTML) 标记和 PHP 变量。在某些情况下,您可以编写它们,以提供其他类型的数据输出,如 RSS。一般来说,每个 Drupal 主题的 tpl.php 文件都进行编码,以处理特定的数据输出:在模板文件中嵌入复杂的逻辑有可能带来混乱,并事与愿违,因为这样做有可能使它们难以维护。理想的场景是让它们只 包含简单的 XHTML 标记和 PHP 变量。

    清单 2 显示 node.tpl.php 文件的内容,该文件描述核心 Garland 主题的基本节点的输出。


    清单 2. Garland 主题 node.tpl.php 文件的内容

    				
    <?php
    // $Id: node.tpl.php,v 1.24 2010/12/01 00:18:15 webchick Exp $
    ?>
    <div id="node-<?php print $node->nid; ?>" 
      class="<?php print $classes; ?>"<?php print $attributes; ?>>
    
      <?php print $user_picture; ?>
    
      <?php print render($title_prefix); ?>
      <?php if (!$page): ?>
        <h2<?php print $title_attributes; ?>><a href="<?php 
           print $node_url; ?>"><?php print $title; ?></a></h2>
      <?php endif; ?>
      <?php print render($title_suffix); ?>
    
      <?php if ($display_submitted): ?>
        <span class="submitted"><?php print $submitted ?></span>
      <?php endif; ?>
    
      <div class="content clearfix"<?php print $content_attributes; ?>>
        <?php
          // Hide the comments and links now so you can render them later.
          hide($content['comments']);
          hide($content['links']);
          print render($content);
        ?>
      </div>
    
      <div class="clearfix">
        <?php if (!empty($content['links'])): ?>
          <div class="links"><?php print render($content['links']); ?></div>
        <?php endif; ?>
    
        <?php print render($content['comments']); ?>
      </div>
    
    </div>
    

    template.php 文件

    template.php 文件中通常包含主题输出的所有条件逻辑和数据处理。您也可以使用 template.php 文件使主题的 .tpl.php 文件保持整洁。因为这是一个 PHP 文件,强制以 PHP 打开 <?php 标记作为内容的开始,但您可以省略结束标记。

    其他文件

    有几个其他元素对于主题正常运作不是必需的,但它们可能会在许多主题中出现。这些元素包括徽标和屏幕截图、theme-settings.php 文件和 color.inc 文件:

    • 徽标和屏幕截图。这些元素是建议使用的元素,但对于主题的正常运作并不是绝对必要的。然而,如果您想将主题贡献到 Drupal 存储库,那么屏幕截图就是一个强制要求的元素。图 3 是 Garland 主题的屏幕截图。

      图 3. Garland 主题的屏幕截图
      Garland 主题的屏幕截图

    • theme-settings.php。除了搜索或任务徽标等一般设置外,该文件还显示 UI 管理设置或高级特性。请查看针对 Garland 主题的该文件内容,如 清单 3 所示,说明了最终显示。

      清单 3. Garland theme-settings.php 文件的内容
      						
      <?php
      // $Id: theme-settings.php,v 1.3 2010/09/04 15:21:09 dries Exp $
      
      /**
       * @file
       * Theme setting callbacks for the garland theme.
       */
      
      /**
       * Implements hook_form_FORM_ID_alter().
       *
       * @param $form
       *   The form.
       * @param $form_state
       *   The form state.
       */
      function garland_form_system_theme_settings_alter(&$form, &$form_state) {
      
        $form['garland_width'] = array(
          '#type' => 'radios',
          '#title' => t('Content width'),
          '#options' => array(
            'fluid' => t('Fluid width'),
            'fixed' => t('Fixed width'),
          ),
          '#default_value' => theme_get_setting('garland_width'),
          '#description' => t('Specify whether the content will wrap to a fixed 
             width or will fluidly expand to the width of the browser window.'),
          // Place this above the color scheme options.
          '#weight' => -2,
        );
      }
      

      最终显示的将是一个类似于 图 4 的表单。



      图 4. 主题设置页面
      主题设置页面的屏幕截图

    • color.inc。color. module 的功能是允许管理员彻底改变主题的配色方案,而无需手动修改样式表。如果您的主题需要配色模块支持,那么您必须包括一个 color 目录,其中包含 color.inc 文件和各种支持文件。

    构建主题

    构建主题有两个基本方法:您可以从头开始构建它,您也可以修改一个现有主题。在本文中,您将从头开始构建一个新主题。话虽如此,您还是应该准备好现有主题的内容,以便了解结构。

    创建目录结构

    首先,创建一个包含主题文件的目录。放置该目录的最佳位置是 sites/all/themes 目录。将该目录命名为一个惟一的名称以描述您的主题:该名称不应该包含空格。

    虽然不是强制性的,但是这对于为样式表(CSS 文件)、图像和脚本(如果您的主题使用它们)创建子目录是有帮助的。这样做有助于保持结构整洁。

    构建 .info 文件

    .info 文件只是一个包含数据的文本文件,通常是描述主题的结构、内容和配置所需要的参数。在该文本文件中,每一行都有一个键值对,值放在等号 (=) 的右边,键放在等号的左边。清单 4 提供了一个示例。


    清单 4. 来自 Garland 主题的 .info 文件的示例内容

    				
    ; $Id: garland.info,v 1.10 2010/11/07 00:27:20 dries Exp $
    name = Garland
    description = A multi-column theme that can be configured to modify colors and
       switch between fixed- and fluid-width layouts
    package = Core
    version = VERSION
    core = 7.x
    stylesheets[all][] = style.css
    stylesheets[print][] = print.css
    settings[garland_width] = fluid
    
    ; Information added by drupal.org packaging script on 2011-01-05
    version = "7.0"
    project = "drupal"
    

    您可以在一行的开头使用分号 (;),以添加注释。使用方括号 ([]) 时,是为了创建关联值的数组。让我们详细介绍在 .info 文件中必须或有可能包含的元素。

    名称

    name 值是必需的。它应该是一个人类可读的名称,必须以字母字符开始。名称的限制与 PHP 中构成函数的限制相同,因为 Drupal 将它用作同样的用途。因此,该名称可以包含数字和下划线 (_),但没有连字符 (-)、空格或标点符号。下面是语法:

    name = Garland
    

    描述

    description 键是建议使用的,它应该只是主题的简要说明。您在此处输入的描述出现在主题的选择或 Appearance 页面。下面是其语法:

    description = A multi-column theme that can be configured to modify colors
       and switch between fixed- and fluid-width layouts
    

    屏幕截图

    screenshot 键是可选的。它的功能是告诉 Drupal 在哪里能找到新主题的缩略图。Appearance 页面上也将显示缩略图。如果 .info 文件中没有包含这个键,Drupal 将调用默认主题目录中的 screenshot.png 文件。如果您决定调用的缩略图文件名称不是 screenshot.png,或者,如果您将该文件放置主题主目录以外的目录,您将需要包括这个键。下面是其语法:

    screenshot = /images/screenshot.png
    

    要创建一个屏幕截图,只需在浏览器中捕获完整的主题图像。然后,裁剪图像并将其尺寸调整为 294 x219 像素,将它保存为 screenshot.png。把这个文件和 .info 文件放在同一文件夹中。

    版本

    尽管许多流行的主题都包括 version 关键,但我们并不鼓励使用它。如果你打算将主题托管在 Drupal 主题存储库,就没有必要包括 version,因为当一个发布被打包用于下载时,drupal.org 会自动添加版本字符串。否则,您可以包括自己喜欢的任何版本字符串。下面是其语法:

    version = 1.0
    

    core 键是必需的值。在所有目前受支持的 Drupal 版本中,您必须说明您的模块和主题所兼容的 Drupal 版本。在这里设置的值将与 Drupal Core Compatibility 常数(可以在 include/bootstrap.inc 文件中找到)兼容;如果没有找到匹配,则 Drupal 将禁用主题。下面是该常数的语法:

    <?php
    define('DRUPAL_CORE_COMPATIBILITY', '7.x')
    ?>
    

    drupal.org 打包脚本会根据每一个发布节点上的 Drupal 核心兼容性设置来自动设置这个值(如果您贡献您的主题)。

    引擎

    engine 键表示您的主题所使用的主题引擎种类。在大多数情况下它是必需的。如果您在 .info 文件中没有提供 engine,Drupal 假定主题是一个通过 .theme 文件实现的独立主题。在 Drupal.org 库中找到的大多数主题使用默认的 PHPTemplate 引擎,该引擎与 Drupal 核心一起打包。下面是其语法:

    engine = phptemplate
    

    基础主题

    如果您的主题是另一个主题的子主题,那么就一定要声明其 base theme,以启用主题继承。换句话说,子主题中将可以使用基础主题 (base theme) 的文件资源。您需要输入基础主题的内部机器可读名称。下面是其语法:

    base theme = garland
    

    区域

    创建新的主题区域

    您希望能够在 Blocks 管理页面上编辑的页面的任何部分,都需要成为一个区域。通常情况下,这个区域包括标题、右侧栏、内容区和页脚。您必须在 .info 文件中引入您的所有区域。否则它们对于 Drupal 而言并不存在。

    regions 键定义主题可用的块区域。您必须明确定义 regions 键,然后定义在方括号中的内部机器可读名称。之后,您必须将人类可读名称定义为适当的值。下面是其语法:

    regions[highlighted] =Mission Statement
    

    如果您选择不定义区域,在 Drupal 7 主题中假定使用以下值:

    regions[header] = Header
    regions[highlighted] = Highlighted
    regions[help] = Help
    regions[content] = Content
    regions[sidebar_first] = Left sidebar
    regions[sidebar_second] = Right sidebar
    regions[footer] = Footer
    

    您可以根据自己的特定需求覆盖这些值。如果要这样做,您必须声明该行。下面是语法:

    regions[highlighted] =Mission Statement
    

    Features

    您可以在主题的配置页面上切换各种页面元素。在主题配置页面上所显示的复选框由 features 键控制(见 图 5)。因此,对于主题没有定义或使用的元素,您可以禁止显示其复选框。省略一个条目,就会禁止显示该特性的复选框;如果您没有定义任何特性,那么所有复选框都将显示为假定的默认值。


    图 5. 主题特性设置页面
    主题特性设置页面的复选框屏幕截图

    清单 5 显示 features 键的所有可用元素。


    清单 5. 在 .info 文件中的主题特性条目

    				
    features[ ] = logo
    features[ ] = name
    features[ ] = slogan
    features[ ] = node_user_picture
    features[ ] = comment_user_picture
    features[ ] = favicon
    features[ ] = main_menu
    features[ ] = secondary_menu
    

    样式表

    Drupal 主题曾经默认使用 style.css。然而,在当前版本中,如果未在 .info 文件中指定 style.css,则主题不再默认为 style.css。此外,您可以通过 .info 文件添加新的样式表。下面是其语法:

    stylesheets[all][] = css/style.css
    stylesheets[print][] = css/print.css
    

    脚本

    在主题的 template.php 文件中,通过调用 drupal_add_js() 等函数来包括 JavaScript 文件,这曾经是常见的做法。然而,在 Drupal 7 中,只有当您在 .info 文件指定 script.js 时,才会包括该文件。下面是其语法:

    scripts[] = scripts/myscript.js
    

    PHP

    您在这里定义的字符串将是主题所支持的最低 PHP 版本。默认值来自 DRUPAL MINIMUM PHP 常数(位于 includes/bootstrap.inc 文件):

    <?php
    define('DRUPAL_MINIMUM_PHP', '5.2.4')
    ?>
    

    您可以更改此值,但不需要添加字符串。下面是其语法:

    php = 5.2.4
    

    默认的 .info 值

    .info 文件中包含 Drupal 为每个已安装主题假设的默认值。如果在 .info 文件中没有定义这些值,Drupal 强制主题使用默认值。但是请注意,这些值应用为一个组。这意味着,如果重写一行,如:

    regions[sub_header] = Sub-header
    

    您将需要重新定义默认区域的其余部分;否则,它们将被省略。这条规则也适用于样式表。即使样式表在技术上并不是在一个组中进行定义的,但如果在 .info 文件中定义了另一个样式表,您必须再次重新定义 style.css;否则,它将不会被包括在内。

    清单 6 中的键和值是 Drupal 7 主题的默认值。


    清单 6. 默认的 .info 值

    				
    regions[sidebar_first]  = Left sidebar
    regions[sidebar_second] = Right sidebar
    regions[content] = Content
    regions[header] = Header
    regions[footer] = Footer
    regions[highlighted] = Highlighted
    regions[help] = Help
    regions[page_top] = Page Top
    regions[page_bottom] = Page Bottom
    
    engine = phptemplate
    
    features[ ] = logo
    features[ ] = name
    features[ ] = slogan
    features[ ] = node_user_picture
    features[ ] = comment_user_picture
    features[ ] = favicon
    features[ ] = main_menu
    features[ ] = secondary_menu
    
    screenshot = screenshot.png
    

    构建 page.tpl.php 文件

    现在,研究典型的 page.tpl.php 文件的内容。图 6 中的图像来自 Garland 主题,显示了源代码在浏览器中的样子。


    图 6. 在浏览器中的 page.tpl.php 源代码
    在浏览器中显示 page.tpl.php 源代码的屏幕截图

    若您更仔细地查看,page.tpl.php 模板只是一个简单的 HTML 页面,其中有大量 PHP 语句。很方便,已经为 Drupal 定义了大部分 PHP 元素,您需要做的就是按需要放置它们。

    注:链接 http://drupal.org/node/190815 [Core Templates] 将为您提供 page.tpl.php 模板可用的变量列表。

    对基本页面元素添加变量

    有若干个变量可用于构建 page.tpl.php。选择包括哪些变量,取决于您想在主题中实现的功能。例如,如果您选择在您的网页上要有面包屑,请添加 $breadcrumbs 变量。

    在 page.tpl.php 中最常见的变量是:

    • $site_name
    • $logo(通过主题设置标志上传的徽标;仅在实现徽标主题特性时才有用)
    • $title(页面标题)
    • $main_menu
    • $secondary_menu
    • $breadcrumbs(导航辅助,当用户更深入网站时留下一串参考链接)

    Drupal 管理也有相关的变量:

    • $tabs(用于编辑或查看管理菜单等的菜单;经常由模块使用)
    • $messages
    • $action_links

    其他一些有用的变量是:

    • $base_path(站点 root 的路径)
    • $front_page(站点首页的路径)
    • $directory(您的主题的路径)

    使用 Render 应用程序编程接口 (API) 插入变量,如下:

    <?php print render($tabs); ?>
    

    如果您的 PHP 和 HTML 技能都较高,您显然可以通过观察示例的构建方式,然后使用允许的变量来明显创建自己的卓越主题。

    构建其他模板文件

    打印或渲染

    有些变量需要使用 render() 函数显示,而其他变量可以简单地打印。如果数组中包含了在 page.tpl.php 参考页(见 参考资料 中的链接)中列出的变量,那么您需要使用 render() 方法。否则,您可以打印该变量 (<?php print $variable; ?>)。

    随 Drupal 核心提供的还有其他可用的主题文件的默认模板。您可以在 Drupal 站点(见 参考资料 中的链接)找到它们的列表。对于 page.tpl.php 文件,要轻松构建属于自己的文件,最佳方式是找到一个核心文件,观察它是如何组成的,然后再构建您自己的。访问 Drupal 站点将为您指出允许在任何主题文件中使用的变量。

    style.css 文件

    在一个普通的静态 HTML 页面中,您必须在页头中包括一个指针,以说明用于页面显示的样式表的位置。指针看起来像这样:

    <link rel="stylesheet" type="text/css" href="/model.css" />
    

    如前所述,您可以将新的样式表添加到一个主题,也可以覆盖默认样式。在这两种情况下,你必须在 .info 文件中输入主题样式表。样式表中有什么呢?您对 CSS 类所使用的模块化方法,与 Drupal 核心对框架的标准页面元素所使用的模块化方法相同。即使主题开发人员可以创建自己的类,但在整个 Drupal 站点有许多类。如需要有关 Drupal 7 核心中的类的完整列表,请参阅 参考资料

    结束语

    本文为您概述了主题系统在 Drupal 7 中的运作方式,还介绍了 Drupal 主题的多个组件,以及如何使用默认的 PHPTemplate 主题引擎从头开始构建一个新的主题。您已经观看了每个组件主题文件的典型结构,现在应该了解了创建自定义主题所需要的技巧。开始做您喜欢的事情吧!

    参考资料

    学习

    获得产品和技术

    if you don't try,you will never know!
  • 相关阅读:
    将vue文件script代码抽取到单独的js文件
    git pull 提示错误:Your local changes to the following files would be overwritten by merge
    vue和uniapp 配置项目基础路径
    XAMPP Access forbidden! Access to the requested directory is only available from the local network.
    postman与newman集成
    postman生成代码段
    Curl命令
    POST方法的Content-type类型
    Selenium Grid 并行的Web测试
    pytorch转ONNX以及TnesorRT的坑
  • 原文地址:https://www.cnblogs.com/leeten/p/3475237.html
Copyright © 2011-2022 走看看