首页 » 设计师学Drupal

主题化-B-使用tpl模板定制XHTML(page.tpl.php)(视频)

无须猫 的头像
2010年5月 02日
21条评论发表评论

本节开始学习使用Drupal的模板来定制XHTML输出，大部分情况下使用模板文件即可满足我们的需求。

相关链接：

Drupal主题模板简图

本例区域示意图

page.tpl.php源码

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

<head>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
</head>
<body class="root <?php print $body_classes; ?> no-scroller node-<?php print $node->nid;; ?>">
  <div id="wrap">
    <div id="header">
      <div id="logo-title">

        <?php if (!empty($logo)): ?>
          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
            <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
          </a>
        <?php endif; ?>

          <?php if (!empty($site_name)): ?>
            <h2 id="site-name">
              <a href="<?php print $front_page ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h2>
          <?php endif; ?>

          </div> <!-- /logo-title -->

      <?php if (!empty($search_box)): ?>
        <div id="search-box"><?php print $search_box; ?></div>
      <?php endif; ?>

      <?php if (!empty($header)): ?>
        <div id="header-region">
          <?php print $header; ?>
        </div>
      <?php endif; ?>
     
        <?php if (!empty($breadcrumb)): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>

    </div> <!-- /header -->


        <div id="sidebar">
              <div id="navigation" class="menu <?php if (!empty($primary_links)) { print "withprimary"; } if (!empty($secondary_links)) { print " withsecondary"; } ?> ">
        <?php if (!empty($primary_links)): ?>
          <div id="primary" class="clear-block">
            <?php print theme('links', $primary_links, array('class' => 'primary-links')); ?>
          </div>
        <?php endif; ?>

        <?php if (!empty($secondary_links)): ?>
          <div id="secondary" class="clear-block">
            <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')); ?>
          </div>
        <?php endif; ?>
      </div> <!-- /navigation -->
          <?php print $sidebar; ?>
        </div> <!-- /sidebar -->


      <div id="contentBox">
     
          <?php if (!empty($title)): ?>
            <h1 class="title" id="page-title"><?php print $title; ?></h1>
          <?php endif; ?>
     
        <div id="contentInner">    

       
        <?php if (!empty($mission)): ?>
          <div id="mission"><?php print $mission; ?></div>
        <?php endif; ?>

         
        <div id="content">
         
          <?php if (!empty($tabs)): ?>
            <div class="tabs"><?php print $tabs; ?></div>
          <?php endif; ?>
         
          <?php if (!empty($messages)): print $messages; endif; ?>
          <?php if (!empty($help)): print $help; endif; ?>
         
          <div id="content-content" class="clear-block">
            <?php print $content; ?>
          </div> <!-- /content-content -->
         
          <?php print $feed_icons; ?>
        </div> <!-- /content -->

       

        </div>
      </div> <!-- /contentInner /contentBox -->


  </div>  
   
      <div id="footer">
        <?php print $footer_message; ?>
        <?php if (!empty($footer)): print $footer; endif; ?>
      </div> <!-- /footer -->

    <?php print $closure; ?>

</body>
</html>

page-album.tpl.php源码

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

<head>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
</head>
<body class="root <?php print $body_classes; ?> scroller">
  <div id="wrap">
    <div id="header">
      <div id="logo-title">

        <?php if (!empty($logo)): ?>
          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
            <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
          </a>
        <?php endif; ?>

          <?php if (!empty($site_name)): ?>
            <h2 id="site-name"><?php print $node->type; ?>
              <a href="<?php print $front_page ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h2>
          <?php endif; ?>

          </div> <!-- /logo-title -->

      <?php if (!empty($search_box)): ?>
        <div id="search-box"><?php print $search_box; ?></div>
      <?php endif; ?>

      <?php if (!empty($header)): ?>
        <div id="header-region">
          <?php print $header; ?>
        </div>
      <?php endif; ?>
     
        <?php if (!empty($breadcrumb)): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>

    </div> <!-- /header -->

        <div id="sidebar">
              <div id="navigation" class="menu <?php if (!empty($primary_links)) { print "withprimary"; } if (!empty($secondary_links)) { print " withsecondary"; } ?> ">
        <?php if (!empty($primary_links)): ?>
          <div id="primary" class="clear-block">
            <?php print theme('links', $primary_links, array('class' => 'primary-links')); ?>
          </div>
        <?php endif; ?>

        <?php if (!empty($secondary_links)): ?>
          <div id="secondary" class="clear-block">
            <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')); ?>
          </div>
        <?php endif; ?>
      </div> <!-- /navigation -->
          <?php print $sidebar; ?>
        </div> <!-- /sidebar -->

      <div id="contentBox">
     
          <?php if (!empty($title)): ?>
            <h1 class="title" id="page-title"><?php print $title; ?></h1>
          <?php endif; ?>
     
        <div id="contentInner">    

       
        <?php if (!empty($mission)): ?>
          <div id="mission"><?php print $mission; ?></div>
        <?php endif; ?>

         
        <div id="content">
         
          <?php if (!empty($tabs)): ?>
            <div class="tabs"><?php print $tabs; ?></div>
          <?php endif; ?>
         
          <?php if (!empty($messages)): print $messages; endif; ?>
          <?php if (!empty($help)): print $help; endif; ?>
         
          <div id="content-content" class="clear-block">
            <?php print $content; ?>
          </div> <!-- /content-content -->
         
          <?php print $feed_icons; ?>
        </div> <!-- /content -->
       
        </div>
      </div> <!-- /contentInner /contentBox -->


  </div>  
   
      <div id="footer">
        <?php print $footer_message; ?>
        <?php if (!empty($footer)): print $footer; endif; ?>
      </div> <!-- /footer -->

    <?php print $closure; ?>

</body>
</html>

page-blog.tpl.php源码

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

<head>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
</head>
<body class="root <?php print $body_classes; ?> scroller">
  <div id="wrap">
    <div id="header">
      <div id="logo-title">

        <?php if (!empty($logo)): ?>
          <a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>" rel="home" id="logo">
            <img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" />
          </a>
        <?php endif; ?>

          <?php if (!empty($site_name)): ?>
            <h2 id="site-name">
              <a href="<?php print $front_page ?>" title="<?php print t('Home'); ?>" rel="home"><span><?php print $site_name; ?></span></a>
            </h2>
          <?php endif; ?>
     
        <?php if (!empty($breadcrumb)): ?><div id="breadcrumb"><?php print $breadcrumb; ?></div><?php endif; ?>

          </div> <!-- /logo-title -->

      <?php if (!empty($search_box)): ?>
        <div id="search-box"><?php print $search_box; ?></div>
      <?php endif; ?>

      <?php if (!empty($header)): ?>
        <div id="header-region">
          <?php print $header; ?>
        </div>
      <?php endif; ?>

    </div> <!-- /header -->

        <div id="sidebar">
              <div id="navigation" class="menu <?php if (!empty($primary_links)) { print "withprimary"; } if (!empty($secondary_links)) { print " withsecondary"; } ?> ">
        <?php if (!empty($primary_links)): ?>
          <div id="primary" class="clear-block">
            <?php print theme('links', $primary_links, array('class' => 'primary-links')); ?>
          </div>
        <?php endif; ?>

        <?php if (!empty($secondary_links)): ?>
          <div id="secondary" class="clear-block">
            <?php print theme('links', $secondary_links, array('class' => 'links secondary-links')); ?>
          </div>
        <?php endif; ?>
      </div> <!-- /navigation -->
          <?php print $sidebar; ?>
        </div> <!-- /sidebar -->

      <div id="contentBox">
     
          <?php if (!empty($title)): ?>
            <h1 class="title" id="page-title"><?php print $title; ?></h1>
          <?php endif; ?>
     
        <div id="contentInner">    

       
        <?php if (!empty($mission)): ?>
          <div id="mission"><?php print $mission; ?></div>
        <?php endif; ?>

         
        <div id="content">
         
          <?php if (!empty($tabs)): ?>
            <div class="tabs"><?php print $tabs; ?></div>
          <?php endif; ?>
         
          <?php if (!empty($messages)): print $messages; endif; ?>
          <?php if (!empty($help)): print $help; endif; ?>
         
          <div id="content-content" class="clear-block">
            <?php print $content; ?>
          </div> <!-- /content-content -->
         
          <?php print $feed_icons; ?>
        </div> <!-- /content -->
       
        </div>
      </div> <!-- /contentInner /contentBox -->


  </div>  
   
      <div id="footer">
        <?php print $footer_message; ?>
        <?php if (!empty($footer)): print $footer; endif; ?>
      </div> <!-- /footer -->

    <?php print $closure; ?>

</body>
</html>

page-front.tpl.php源码

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

<head>
  <?php print $head; ?>
  <title><?php print $head_title; ?></title>
  <?php print $styles; ?>
  <?php print $scripts; ?>
  <script type="text/javascript"><?php /* Needed to avoid Flash of Unstyled Content in IE */ ?> </script>
</head>
<body class="root <?php print $body_classes; ?>">
  <div id="wrap">

    <h1 id="site-name"><?php print $site_name; ?></h1>
    <h2><a href="<?php print $front_page; ?>album">相册</a>/<a href="<?php print $front_page; ?>blog">日志</a></h2>
    <div id="footer">
      <?php print $footer_message; ?>
      <?php print $feed_icons; ?>
      <?php if (!empty($footer)): print $footer; endif; ?>
    </div>

  </div>  

    <?php print $closure; ?>

</body>
</html>

forest 的头像

感谢你的视频教程，非常好。 我一边学习，一边实验。我想

由 forest (未验证) 在 星期三, 03/09/2011 - 08:24 发表。

感谢你的视频教程，非常好。

我一边学习，一边实验。我想在主页上显示的标题前面和后面各加一个小图标。前面的是作者图标，点击可以看到本作者文章列表。后边的是“打开新窗口来阅读”标签。

请问，要做出这个要用什么工具？

我看了views的用法，初步了解了theming。不知道要做出上面的效果是否需要写代码。

非常感谢！

无须猫 的头像

前面的是作者图标，点击可以看到本作者文章列表。 本作者文

由 无须猫 在 星期日, 03/13/2011 - 21:17 发表。

前面的是作者图标，点击可以看到本作者文章列表。

本作者文章列表可以使用views来获得，新建个page，添加一个uid的argument即可。

我一边学习，一边实验。我想在主页上显示的标题前面和后面各加一个小图标。前面的是作者图标，点击可以看到本作者文章列表。后边的是“打开新窗口来阅读”标签。

编辑你主题下的node.tpl.php文件，把下面的代码加入合适的位置即可：

<?php if (!$page): ?>
  <h2><a href="/<?php print $uid ?>/content"><img src="你的图标地址" alt="此作者的所有文章" title="此作者的所有文章" /></a><a href="<?php print $node_url ?>" title="<?php print $title ?>"><?php print $title ?></a><a href="<?php print $node_url ?>" target="_blank"><img src="你的图标地址" alt="新窗口打开" title="新窗口打开" /></a></h2>
<?php endif; ?>

forest 的头像

我建立了一个新的content

由 forest (未验证) 在 星期二, 03/27/2012 - 19:15 发表。

我建立了一个新的content type用来做一些好文章的摘要, 并建立了一个field, 是这些摘要的原网站地址。我想增加一个“打开原文地址”的链接。我已经定义了“原文地址”为field_url, 可以正常显示，但是太长，不如只写出"阅读原文",并对"阅读原文"链接上原文地址。其实就是把你上文提到的$node_url该为新的变量field_url就可以了。但是不知道如何抓取自己定义的field, 即field_url。试了几次都不认。

对于自己创建的field应该如何抓取呢？

一晃离上次发贴已经一年，再次感谢。

forest 的头像

学习了theme系统，尝试建立node--type.tpl

由 forest (未验证) 在 星期日, 04/01/2012 - 18:56 发表。

学习了theme系统，尝试建立node--type.tpl.php, 在里面用通过下面的方式终于调用了新建立的变量

$content['field_work-type']['#items']['0']['value'];

对theme还是不熟悉，又遇到下面问题。

“阅读全文”自动放在下一行，不知道市值可以让“阅读全文”紧随内容的最后面，不分行。

多谢！

forest 的头像

多谢你的详细指导！我会按照这个思路做一下。

由 forest (未验证) 在 星期一, 03/14/2011 - 17:26 发表。

多谢你的详细指导！我会按照这个思路做一下。

游客 的头像

猫哥,怎么最简单的把相册页面的210H_SC图片像你这样排

由 游客 (未验证) 在 星期日, 08/15/2010 - 10:28 发表。

猫哥,怎么最简单的把相册页面的210H_SC图片像你这样排列呀??

无须猫 的头像

布局和样式使用css来控制。

由 无须猫 在 星期一, 08/16/2010 - 14:13 发表。

布局和样式使用css来控制。

游客 的头像

追加个问题...怎么让相册节点中照片的显示方式是Views

由 游客 (未验证) 在 星期二, 08/17/2010 - 01:15 发表。

追加个问题...怎么让相册节点中照片的显示方式是Views中设置的呢,比如幻灯片之类的.还有怎么创建最新图片,随即图片之类的区块呢?完全新手,弱智问题,还请体谅了猫哥...

无须猫 的头像

看具体情况，可能需要修改模板。

由 无须猫 在 星期二, 08/17/2010 - 12:18 发表。

看具体情况，可能需要修改模板。

游客 的头像

哦,谢拉!!

由 游客 (未验证) 在 星期二, 08/17/2010 - 01:12 发表。

哦,谢拉!!

游客 的头像

求助，删除page.tpl.php进入admin啥都显示不了了。

由 游客 (未验证) 在 星期一, 07/26/2010 - 10:25 发表。

求助，删除page.tpl.php进入admin啥都显示不了了。

无须猫 的头像

到modules/system/目录里重新复制一个page

由 无须猫 在 星期一, 07/26/2010 - 13:38 发表。

到modules/system/目录里重新复制一个page.tpl.php到你的主题目录中即可。

ps.建议在此处（/admin/settings/admin）设个管理界面专用主题。

游客 的头像

启用DEVEL模块后出现

由 游客 (未验证) 在 星期二, 07/20/2010 - 22:15 发表。

 

 

 

  • warning: include_once() [function.include]: Failed opening 'system.admin.inc' for inclusion (include_path='.;E:\xampp\php\pear\') in E:\xampp\htdocs\kongqh\sites\all\modules\devel\devel_themer.module on line 380.

    •  

     

    无须猫 的头像

    请参考此处的回复 http://xdrupal.org

    由 无须猫 在 星期三, 07/21/2010 - 23:55 发表。

    请参考此处的回复

    http://xdrupal.org/DLD/source-package-database#comment-1115

    游客 的头像

    猫哥你好，在用户管理-权限页面中，我的页面怎么都加上标签了

    由 游客 (未验证) 在 星期六, 07/03/2010 - 15:38 发表。

    猫哥你好，在用户管理-权限页面中，我的页面怎么都加上标签了，就是这个样子：

    <span id="thmr_2" class="thmr_call"> admin_menu</span> 模块

    <span id="thmr_17" class="thmr_call"> block</span> 模块

    这是怎么回事呢？

    无须猫 的头像

    这是devel themer模块造成的，禁用此模块即可。

    由 无须猫 在 星期六, 07/03/2010 - 15:40 发表。

    这是devel themer模块造成的，禁用此模块即可。

    橡树 的头像

    猫哥，有个小小的问题，我开启了devel Theme

    由 橡树 (未验证) 在 星期二, 06/01/2010 - 16:18 发表。

    猫哥，有个小小的问题，我开启了devel Theme developer 后，为什么Themer info出现在了左上角，怎么不跟你视频上的一样呀？

    无须猫 的头像

    难道新版本改过了？ 你使用什么浏览器？有可能是ie不

    由 无须猫 在 星期二, 06/01/2010 - 17:09 发表。
    1. 难道新版本改过了？
    2. 你使用什么浏览器？有可能是ie不支持fixed的原因，不过我没在ie下使用过theme developer。猜的。
    橡树 的头像

    恩，对，是浏览器的问题，我用的是遨游，改成火狐就好了。谢谢

    由 橡树 (未验证) 在 星期二, 06/01/2010 - 18:13 发表。

    恩，对，是浏览器的问题，我用的是遨游，改成火狐就好了。谢谢了！

    东方龙马 的头像

    猫哥的教程做的真好

    由 东方龙马 (未验证) 在 星期二, 05/04/2010 - 21:58 发表。

    能看得出是很用心去做的东西，值得学习！赞一个！

    无须猫 的头像

    嘿嘿，谢谢捧场:)

    由 无须猫 在 星期三, 05/05/2010 - 10:56 发表。

    嘿嘿，谢谢捧场:)

    发表新评论

    此内容将保密，不会被其他人看见。
    • 自动将网址与电子邮件地址转变为链接。
    • 允许HTML标签：<a> <p> <span> <div> <h1> <h2> <h3> <h4> <blockcode> <h5> <h6> <img> <map> <area> <hr> <br> <br /> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <em> <b> <u> <i> <strong> <font> <del> <ins> <sub> <sup> <quote> <blockquote> <pre> <address> <code> <cite> <embed> <object> <param> <strike> <caption>
    • 自动断行和分段。
    • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <as>, <as3>, <asp>, <css>, <drupal5>, <drupal6>, <html>, <js>, <php>. Beside the tag style "<foo>" it is also possible to use "[foo]". PHP source code can also be enclosed in <?php ... ?> or <% ... %>.

    更多关於格式化选项的信息

    CAPTCHA
    请输入问题的答案。
    Fill in the blank