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

时间:2011-08-04 15:41:41

标签: drupal frontend drupal-theming

我最近获得了一个现有的Drupal项目,并要求改进前端(HTML,JavaScript,CSS)。我在Django,PHP,Ruby等方面拥有大量的前端和后端开发经验,但我之前没有任何Drupal经验,并且弄清楚项目中发生的事情最多也证明是麻烦的。

任何人都可以给出一个典型的Drupal网站如何粘在一起的概述(或提供一些链接),以及我需要做些什么才能添加页面元素,更改CSS并添加JavaScript功能?适合这个的地方是什么?

当然,向代码开发人员询问发生了什么事情会很棒 - 但他无处可寻。


这是我到目前为止看到的,从代码和网上大约2个小时的刮擦:

有大量模块,主题文件(CSS,一些图像)位于sites / all / themes / theme_name / ...

HTML文件(模板)似乎随机散布在各个地方 - 模块,* .tpl.php文件等。

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


这让我把头发拉出脑袋,如何改变前端的任何帮助都会很棒!

6 个答案:

答案 0 :(得分:6)

从长远来看,使用像Zen这样的主题框架(假设有超过几个小时的光更新预算)是一个很好的方法,特别是对于Drupal初学者,因为Zen的开发人员已经仔细考虑了所有细节允许主题在许多不同的网站和浏览器中良好运行。

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

在实施细节方面,有一些基础知识可能会帮助你获得一个好的开始:

地区/街区:

  • info文件中定义区域时,例如regions[header]$header变量随后可在您的页面模板中使用(例如{{1} }})。创建新区域时,要在模板中访问它,您需要clear your theme cache。您可以通过打印变量来将您的区域包含在页面模板中的任何位置:

    page.tpl.php

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

的JavaScript / jQuery的:

  • 您可以在template.php中包含<?php print $header; ?>的JavaScript文件,也可以将它们包含在您的信息文件中,如下所示:drupal_add_js()。您还需要在修改scripts[] = js/myscript.js文件时清除主题缓存。

    如果你正在使用Drupal 7,this page可以很好地概述如何构建JS文件以及如何将它们包含在主题中。对于Drupal 6(或5),this page涵盖了这些主题。

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

查看/ CCK

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

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

最后一点,这可能需要一段时间才能习惯,新Drupal主题的一个常见问题是,他们看到每次想要覆盖界面中的某些东西时都可以使用模板。因此,当他们想要覆盖五个页面或内容类型时,他们会创建五个模板。这“工作”,但它往往是矫枉过正,可能会产生维护问题。随着您越来越习惯使用Drupal的主题系统,您会发现在node-event.tpl.php中创建的page--blah-blah.tpl.php越来越少,并且在template.php中执行更多模板覆盖,这是理想情况下大多数主题逻辑所在的位置。这有助于您整合(并重复使用)模板覆盖。如果预算/时间不是太紧,请了解template.php函数。

答案 1 :(得分:1)

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

答案 2 :(得分:1)

以下是Drupal主题指南的链接:http://drupal.org/node/171194

模板文件中的变量通常可以通过template.php目录中sites/all/themes/theme_name/...文件中的函数进行修改,因为您通过template_preprocess()

等函数找到它们

Drupal API提供了一些很好的文档,说明每个.tpl.php文件中可用的变量,例如page.tpl.php

答案 3 :(得分:1)

为了增加上面的优秀答案,“HTML文件(模板)似乎随机分散在各个地方 - 模块,* .tpl.php文件等。”它们可能看起来是随机分散的,但模板文件通常放在它们直接影响的位置。放置在模块文件夹中的模板文件用于模拟该特定模块的输出(而不是其他任何内容)。

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

答案 4 :(得分:0)

我建议您扫描一本书Pro Drupal Development,这将为您了解Drupal的工作原理提供更好的基础。如果你不知道你在做什么,很容易弄乱Drupal,所以最好先看看假设首先要做什么

答案 5 :(得分:0)

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

  1. 要完成图片,我建议您扫描the list of skills needed for a successful front-end web developer - https://drupal.org/node/1245650。对我来说这个清单非常有帮助。

  2. 基础也很重要。现在我建议从基于Twitter Bootstrap而不是Zen的主题开始。 Bootstrap非常受欢迎,它丰富的javascript库允许你通过简单地添加CSS类来做很多操作,从而节省了大量的时间。 Here are some of the best bootstrap-based Drupal themes