开发 Drupal 站点的前端 - 基础知识答案

【问题标题】：Developing the front-end of a Drupal site - the basics开发 Drupal 站点的前端 - 基础知识
【发布时间】：2011-08-04 15:41:40
【问题描述】：

我最近接到了一个现有的 Drupal 项目，并要求我改进前端（HTML、JavaScript、CSS）。我在 Django、PHP、Ruby 等方面拥有大量的前端和后端开发经验，但我之前没有任何 Drupal 经验，而且弄清项目中发生的事情充其量也很麻烦。

谁能简要介绍（或提供一些链接）典型的 Drupal 站点是如何结合在一起的，以及我必须做些什么来添加页面元素、更改 CSS 和添加 JavaScript 功能？什么是合适的地方？

当然，最好向代码的开发者询问发生了什么事 - 但他无处可寻。

这是我迄今为止在代码和网上花了大约 2 个小时的时间所看到的：

有很多模块，主题文件（CSS，一些图片）位于sites/all/themes/theme_name/...

HTML 文件（模板）似乎随机分布在各处——在模块、*.tpl.php 文件等中。

主题有一个 .info 文件，其中包含区域定义等。这些区域对应于模板文件中的变量 - 但变量在哪里定义/编辑？

这让我把头发从头上扯下来，任何关于如何改变前端的帮助都会很棒！

【问题讨论】：

标签： drupal frontend drupal-theming

【解决方案1】：

从长远来看，使用 Zen 之类的主题框架（假设有超过几个小时的轻更新的预算）是一个很好的方法，尤其是对于 Drupal 初学者来说，因为 Zen 的开发人员已经考虑了所有的细节允许主题在许多不同的网站和浏览器中正常工作。

也许我误解了 Scott 的建议，但我认为他的主要观点是通过检查 Zen 框架，您将学习最佳实践。这也是事实 - 查看现有主题和主题框架是了解 template.php 文件的结构以及如何包含 JS 文件的好方法。

在实施细节方面，有一些基础知识可能会帮助您快速开始：

区域/块：

当您在info 文件中定义一个区域（例如regions[header]）时，$header 变量就可以在您的页面模板中使用（例如page.tpl.php）。当您创建一个新区域时，为了在您的模板中访问它，您需要clear your theme cache。您可以通过打印出变量在页面模板中的任何位置包含您的区域：

<?php print $header; ?>

添加区域后，您通常会使用块来填充该区域。 The Drupal documentation about blocks is here。您可以通过单击“添加块”手动创建新块。您还可以通过创建新视图来生成新的动态块（见下文）。块也经常在安装时由模块添加。

JavaScript/jQuery：

您可以在您的 template.php 中包含带有 drupal_add_js() 的 JavaScript 文件，也可以将它们包含在您的信息文件中，如下所示：scripts[] = js/myscript.js。您还需要在修改 info 文件时清除主题缓存。

如果您使用 Drupal 7，this page 会为您提供有关如何构建 JS 文件以及如何将它们包含在主题中的概览。对于 Drupal 6（或 5），this page 涵盖了这些主题。

您可能已经知道这一点，但 jQuery 库已经包含在 Drupal 中。 jQuery 的版本通常低于当前发布的版本，但如果需要，您可以使用 jQuery Update 至少更新到更高的版本。

观看次数/CCK

如果主题中有任何以views 或node-/node-- 开头的tpl 文件，它们可能会覆盖视图/内容类型。您可能想至少了解 CCK/Views 的基础知识，因为这些构成了许多 tpl.php 覆盖的基础。您可能不会创建新的视图或内容类型，但如果以前的开发人员这样做了，他们可能会创建一些 tpl 文件来覆盖其中一个或两个。假设 Views 已安装并且您的用户角色可以访问它，请查看各种 Views 以了解它们是如何工作的。如果 tpl.php 文件以views 开头，则它覆盖了视图中的某些内容。如果它以node 开头（node.tpl.php 除外，它是所有 Drupal 节点的通用模板），它通常会覆盖内容类型（通常使用 CCK 模块创建）。

tpl 文件的一个关键方面是，与 CSS 一样，它们具有特异性级联。因此，在 Drupal 6 中，如果您有 page.tpl.php，这将是您网站上所有页面的模板。但是，您可以使用模板page-front.tpl.php 为您的首页覆盖它。 node.tpl.php 也是如此。如果您有一个名为 Event 的内容类型，您可以使用 node-event.tpl.php 覆盖节点模板。理解这个概念将帮助您理解 tpl 命名约定。

最后一点，这可能需要一点时间来适应，新 Drupal 用户的一个常见问题是，他们发现每次想要覆盖界面中的某些内容时都可以使用模板。因此，当他们想要覆盖五个页面或内容类型时，他们会创建五个模板。这“有效”，但它通常是矫枉过正的，并且会产生维护问题。随着您越来越习惯使用 Drupal 的主题系统，您会发现创建的 page--blah-blah.tpl.phps 越来越少，并且在 template.php 中进行更多的模板覆盖，这是大多数主题逻辑理想的位置。这可以帮助您整合（和重复使用）您的模板覆盖。如果预算/时间不太紧张，请了解template.php 函数。

【讨论】：

谢谢你，你的回答很有启发性！

【解决方案2】：

很简单，从这里开始：http://drupal.org/project/zen

【讨论】：

回想起来，Zen 是一个很好的起点。但是，我首先需要弄清楚如何授予自己管理员访问权限才能安装它。我还需要编辑/交换相当多的内容才能使新设计正常工作，并且我从其他答案中获得了这方面的必要指导。不过很有用，我现在正在使用 Zen - 谢谢！

【解决方案3】：

这里是 Drupal 主题指南的链接：http://drupal.org/node/171194

模板文件中的变量一般可以通过sites/all/themes/theme_name/...目录下的template.php文件中的函数修改，就像你通过template_preprocess()这样的函数找到的一样

Drupal API 对每个 .tpl.php 文件中可用的变量有一些很好的文档，例如 page.tpl.php

【讨论】：

【解决方案4】：

为了补充上面的出色答案，“HTML 文件（模板）似乎随机分散在各处 - 在模块、*.tpl.php 文件等中。”它们可能看起来随机分散，但模板文件通常与它们直接影响的内容一起放置。放置在模块文件夹中的模板文件用于模板该特定模块的输出（仅此而已）。

在主题文件夹中找到的模板更通用，它们的名称将为您提供有关它们如何影响最终结果的线索。例如页面模板影响所有页面，节点节点类型影响特定节点类型等。上面提到的drupal主题指南将解释所有模板文件如何协同工作。它有助于将模板视为构建块，它们一起工作以产生最终结果。

【讨论】：

【解决方案5】：

我建议您阅读 Pro Drupal Development 这本书，这将为您了解 Drupal 的工作原理提供更好的基础。如果您不知道自己在做什么，很容易将 Drupal 弄得一团糟，所以最好先看看它应该如何完成

【讨论】：

【解决方案6】：

这是一个重要的主题，我通过搜索找到了这个页面，所以人们仍在寻找这个帖子。所以这里是我的提示：

要完成图片，我建议扫描the list of skills needed for a successful front-end web developer - https://drupal.org/node/1245650。对我来说，这份清单非常有帮助。
基础也很重要。现在我建议从基于 Twitter Bootstrap 而不是 Zen 的主题开始。 Bootstrap 非常受欢迎，它丰富的 javascript 库允许您通过简单地添加 CSS 类来进行许多操作，从而节省大量时间。 Here are some of the best bootstrap-based Drupal themes.

【讨论】：