开发 Drupal 站点的前端 - 基础知识
我最近接到一个现有的 Drupal 项目，并要求改进前端（HTML、JavaScript、CSS）。我在 Django、PHP、Ruby 等方面拥有丰富的前端和后端开发经验，但我之前没有任何 Drupal 经验，并且事实证明，弄清楚项目中发生的情况充其量是很麻烦的。
谁能提供一个概要（或提供一些链接）一个典型的 Drupal 站点如何组合在一起，以及我必须做什么来添加页面元素、更改 CSS 和添加 JavaScript 功能？哪些地方适合这样做？
当然，如果能询问代码的开发人员发生了什么事就好了，但他却无处可寻。
以下是我到目前为止在代码和网上摸索大约 2 个小时所看到的内容：
有大量模块，主题文件（CSS，一些图像）位于sites/all/themes/theme_name/ 中。 ..
HTML 文件（模板）似乎随机分散在各个地方 - 在模块、*.tpl.php 文件等中。
主题有一个 .info 文件，其中包含区域定义等。这些区域对应于模板文件中的变量 - 但变量在哪里定义/编辑？
这让我抓狂，任何关于如何改变前端的帮助都会很棒！
I've recently been given an existing Drupal project, and asked to improve the front-end (HTML, JavaScript, CSS). I have loads of front- and backend development experience in Django, PHP, Ruby, etc, but I don't have any prior Drupal experience, and figuring out what's going on in the project is proving to be troublesome at best.
Can anyone give a rundown (or provide some links) of how a typical Drupal site sticks together, and what I have to do to add page elements, change the CSS and add JavaScript functionality? What are the appropriate places for this?
It would have been great, of course, to ask the developer of the code what's going on - but he's nowhere to be found.
Here's what I've seen so far, from about 2 hours of scratching around in the code and online:
There are loads of modules, and the theming files (CSS, some images) are located in sites/all/themes/theme_name/...
The HTML files (templates) seem to be randomly scattered all over the place - in modules, *.tpl.php files, etc.
The theme has a .info file, containing definitions for regions, among other things. These regions correspond to variables in the template files - but where are the variables defined / edited?
This is making me pull the hair out of my head, any help with how to change the front-end would be great!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
从长远来看，使用像 Zen 这样的主题框架（假设有超过几个小时的轻度更新的预算）是一个很好的方法，特别是对于 Drupal 初学者来说，因为 Zen 的开发人员已经考虑了允许主题可以在许多不同的网站和浏览器上正常工作。
也许我误解了 Scott 的建议，但我认为他的主要观点是，通过检查 Zen 框架，您将学习最佳实践。这也是事实 - 查看现有主题和主题框架是了解
template.php文件应如何构建以及如何包含 JS 文件的好方法。在实现细节方面，有一些基础知识可能会帮助您开始运行：
区域/块：
当您在
info文件中定义区域时，例如regions[header]后，$header变量就可以在页面模板（例如page.tpl.php）中使用。创建新区域时，为了在模板中访问它，您需要清除主题缓存。您可以通过打印变量将您的区域包含在页面模板中的任何位置：添加区域后，您通常会使用块来填充该区域。 有关块的 Drupal 文档位于此处。您可以通过单击“添加块”手动创建新块。您还可以通过创建新视图来生成新的动态块（见下文）。块通常也由模块在安装时添加。
JavaScript/jQuery：
您可以在 template.php 中使用
drupal_add_js()包含 JavaScript 文件，也可以将它们包含在您的信息文件中，如下所示：scripts[] = js/myscript .js。每当您修改info文件时，您还需要清除主题缓存。如果您使用 Drupal 7，此页面为您提供了有关如何构建您的JS 文件以及如何将它们包含在您的主题中。对于 Drupal 6（或 5），此页面涵盖了这些主题。
您可能已经知道这一点，但是 jQuery 库已经包含在 Drupal 中。 jQuery 的版本通常低于当前发布的版本，但如果需要，您可以使用 至少更新到更高版本jQuery 更新。
Views/CCK
如果主题中存在以
views或node-/node---开头的 tpl 文件，则它们是可能会覆盖视图/内容类型。您可能想至少了解 CCK/Views 的基础知识，因为它们构成了许多 tpl.php 覆盖的基础。您可能没有创建新的视图或内容类型，但如果以前的开发人员这样做了，他们可能会创建一些 tpl 文件来覆盖其中一个或两个。假设已安装视图并且您的用户角色有权访问它，请查看各种视图以了解它们的工作原理。如果 tpl.php 文件以views开头，则它会覆盖视图中的某些内容。如果它以node开头（node.tpl.php除外，它是所有 Drupal 节点的通用模板），它通常会覆盖内容类型（通常使用CCK 模块）。tpl 文件的一个关键方面是，像 CSS 一样，它们具有特异性级联。因此，在 Drupal 6 中，如果您有一个
page.tpl.php，这将是您网站上所有页面的模板。但是，您可以使用模板page-front.tpl.php覆盖首页的它。对于node.tpl.php也是如此。如果您有一个名为“事件”的内容类型，则可以使用node-event.tpl.php覆盖节点模板。理解这个概念将帮助您理解 tpl 命名约定。最后一点，这可能需要一段时间才能习惯，新 Drupal 主题的一个常见问题是，他们发现每次想要覆盖界面中的某些内容时都可以使用模板。因此，当他们想要覆盖五个页面或内容类型时，他们会创建五个模板。这“有效”，但通常是矫枉过正，并且可能会产生维护问题。随着您越来越习惯使用 Drupal 的主题系统，您会发现创建的
page--blah-blah.tpl.php越来越少，并在template.php 中进行更多的模板覆盖，这是大多数主题逻辑理想的驻留位置。这可以帮助您整合（并重复使用）您的模板覆盖。如果预算/时间不太紧张，请了解template.php函数。In the long run, using a theme framework like Zen (assuming there's budget for more than a few hours of light updates) is a good approach especially for a Drupal beginner, since the developers of Zen have thought through all the many details that allow a theme to work well across many different sites and browsers.
Maybe I'm misinterpreting Scott's suggestion, but I think his main point is that by examining the Zen framework, you will learn best practices. This is also true - looking at existing themes and theme frameworks is a great way to see how the
template.phpfile should be structured, for example, and how JS files should be included.In terms of details of implementation, there are some basics that will probably help you get a running start:
Regions/Blocks:
when you define a region in the
infofile, such asregions[header], the$headervariable then becomes available to you in your page template (such aspage.tpl.php). When you create a new region, in order to access it in your templates, you will need to clear your theme cache. You can include your region anywhere in your page template by printing out the variable:<?php print $header; ?>Once your regions have been added, you typically use Blocks to populate that region. The Drupal documentation about blocks is here. You can create new blocks manually by clicking "Add Block." You can also generate new dynamic blocks by creating a new View (see below). Blocks are also often added by modules when they're installed.
JavaScript/jQuery:
you can include JavaScript files either with
drupal_add_js()in your template.php or by including them in your info file like this:scripts[] = js/myscript.js. You will also need to clear your theme cache anytime you modify yourinfofile.If you're using Drupal 7, this page gives you a great overview of how to structure your JS files and how to include them in your theme. For Drupal 6 (or 5), this page covers those topics.
You probably know this already, but the jQuery library is already included in Drupal. The version of jQuery is usually lower than the current released version, though if needed you can update at least to a somewhat higher version using jQuery Update.
Views/CCK
If there are any tpl files in the theme that start with
viewsornode-/node--, they are probably overriding Views/content types. You may want to get to know at least the basics of CCK/Views, as these form the basis for many tpl.php overrides. You may not be creating new Views or content types, but if the previous developer did, they likely created some tpl files to override one or both. Assuming Views is installed and your user role has access to it, have a look at the various Views to see how they work. If a tpl.php file starts withviews, it's overriding something in a View. If it starts withnode(exceptnode.tpl.php, which is a generic template for all Drupal nodes), it's typically overriding a content type (which are typically created using the CCK module).A key aspect of tpl files is that like CSS, they have a specificity cascade. So, in Drupal 6, if you have a
page.tpl.php, this will be the template for all the pages on your site. However, you can override it for your front page with the templatepage-front.tpl.php. Similarly fornode.tpl.php. If you have a content type called Event, you can override the node template withnode-event.tpl.php. Understanding this concept will help you make sense of tpl naming conventions.One last point, and this is something that will probably take a little while to get used to, a common issue for new Drupal themers is that they see they can use a template every time they want to override something in the interface. So, when they want to override five pages or content types, they create five templates. This "works" but it is often overkill and can create maintenance issues. As you become more comfortable using Drupal's theme system, you'll find you are creating fewer and fewer
page--blah-blah.tpl.phps and doing more template overrides intemplate.php, which is where most of the theme logic should ideally reside. This helps you consolidate (and re-use) your template overrides. If budget/time is not too tight, get to know thetemplate.phpfunctions.很简单，从这里开始：http://drupal.org/project/zen
Quite simply, start here: http://drupal.org/project/zen
主题指南的链接：http://drupal.org/node/171194
以下是Drupal 模板文件通常可以通过
sites/all/themes/theme_name/...目录下的template.php文件中的函数进行修改，就像您通过函数找到的那样就像 template_preprocess()Drupal API 有一些关于每个 .tpl.php 文件中可用变量的良好文档，例如
page.tpl.php< /a>Here's the link to the Drupal theming guide: http://drupal.org/node/171194
Variables in the template files can generally be modified through the functions in the
template.phpfile in thesites/all/themes/theme_name/...directories as you have found them through functions like template_preprocess()The Drupal API has some good documentation of what variables are available in each of the .tpl.php file such as
page.tpl.php为了补充上面的优秀答案，“HTML 文件（模板）似乎随机分散在各个地方 - 在模块、*.tpl.php 文件等中。”它们可能看起来是随机分散的，但模板文件通常与它们直接影响的内容一起放置。放置在模块文件夹中的模板文件用于模板化特定模块的输出（仅此而已）。
主题文件夹中的模板更为通用，它们的名称将为您提供有关它们如何影响最终结果的线索。例如，页面模板影响所有页面，节点节点类型影响特定节点类型等。上面提到的 drupal 主题指南将解释所有模板文件如何协同工作。将模板视为协同工作以产生最终结果的构建块会有所帮助。
To add to the excellent answer above, "The HTML files (templates) seem to be randomly scattered all over the place - in modules, *.tpl.php files, etc." They may seem randomly scattered, but the template files are generally placed with what they directly affect. Template files which are placed in the module folders are used to template that specific module's output (and nothing else).
Templates which are found in the theme folder are more general and their name will give you clues as to how they affect the end result. Eg page- templates affect all pages, node-nodetype affect specific node types, etc. The drupal theme guide mentioned above will explain how all of the template files work together. It helps to think of the templates as building blocks which work together to produce the end result.
我建议您浏览一下Pro Drupal Development 这本书，这将为您了解 Drupal 的工作原理奠定更好的基础。如果您不知道自己在做什么，很容易把 Drupal 弄乱，所以最好先看看它应该如何完成
I recommend you scan the book Pro Drupal Development which will give you a better foundation for understanding how Drupal works. It's easy to make a mess out of Drupal if you don't know what you are doing, so might be best to see how its supposed to be done first
这是一个重要的主题，我通过搜索找到了这个页面，所以人们仍然在寻找这个线程。所以这里是我的提示：
为了完成图片，我建议扫描成功前端所需的技能列表Web 开发人员 - https://drupal.org/node/1245650。对我来说，这份清单非常有帮助。
基础也很重要。现在我建议从基于 Twitter Bootstrap 而不是 Zen 的主题开始。 Bootstrap 非常流行，它丰富的 JavaScript 库允许您通过简单地添加 CSS 类来进行许多操作，从而节省大量资金的时间。 这里有一些最好的基于 bootstrap 的 Drupal 主题。
This is an important subject, and I have found this page through search so people are still finding this thread. So here are my tips:
To complete the picture I suggest scanning the list of skills needed for a successful front-end web developer - https://drupal.org/node/1245650. For me this list was extremely helpful.
Also the foundation is important. Nowadays I would suggest starting with a theme based on Twitter Bootstrap and not on Zen. Bootstrap is extremely popular and it's rich javascript library allows you do do many manipulations by simply adding CSS classes, thus saving a tremendus amount of time. Here are some of the best bootstrap-based Drupal themes.