Drupal theme-2 安装主题

最新推荐文章于 2024-11-12 23:16:45 发布

EvaTian

最新推荐文章于 2024-11-12 23:16:45 发布

阅读量1.2k

点赞数

分类专栏： Website Technology 文章标签： styles stylesheet themes html css border

Website Technology 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

安装主题

为了使在Drupal 管理界面能够呈现一个新的主题，你需要把它放到sites/sitename/themes下面。如果你想在一个多站点Drupal系统中使所有的站点都可以使用它，那么你需要把它放到sites/all/themes下面。你可以在你的站点安装任意多个主题，而主题的安装和模块的安装基本上相同。将主题文件放到相应的位置后，导航到管理页面Administer ➤ Site building ➤ Themes.你可以一次安装和启用多个主题。这意味着什么？通过启用多个主题，用户可以在他们的个人首页上选择启用主题中的任何一个，在用户访问站点时，就使用所选的主题了。

当下载或者创建一个新的主题时，将新主题和核心主题以及贡献主题区分开来是个很好的习惯。我们推荐在你的themes文件夹下面建立一个另一个层次文件夹。将定制的主题放到文件夹custom，而将从drupal.Org下载下来的社区贡献的主题放到drupal-contrib.

建造一个PHPTemplate主题

有多种基本方式可以创建一个主题，这依赖于你开始所拥有的材料。将如你的设计者已经为你的提供了站点的HTML 和CSS文件。那么将设计者的设计转化为一个主题有多么简单呢？它确实不是很难，你可能已经完成了工作的80%。那么剩下的20%--最后的小饮和甜点— 它将Drupal的主题花与静态HTML区分了开了（英文意思为将男仆与日本武士区分开来）。首先让我们从简单的开始。

注意：如果你从零开始设计你的主题的话，在开放源代码WEB设计站点http://www.oswd.org里面有很多非常棒的设计可供借鉴（注意他们是HTML和CSS设计，而不是Drupal主题）

我们假设给了你列表8-4和8-5中所示的HTML页面和CSS样式，让你将他们转化为一个DRUPAL主题。显然在一个真实的项目中，你所受到的文件应该比这些更细节，但是从这里你可以学到方法。

Listing 8-4. page.html

<html>

<head>

<title>Page Title</title>

</head>

<body>

<h1>Header</h1>

</div>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut.

</p>

</div>

<h2>Subheading</h2>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam

nonummy nibh euismod tincidunt ut.

</p>

</div>

Footer

</div>

</body>

</html>

Listing 8-5. global.css

#container {

width: 90%;

margin: 10px auto;

background-color: #fff;

color: #333;

border: 1px solid gray;

line-height: 130%;

}

#header {

padding: .5em;

background-color: #ddd;

border-bottom: 1px solid gray;

}

#header h1 {

padding: 0;

margin: 0;

}

#sidebar-left {

float: left;

width: 160px;

margin: 0;

padding: 1em;

}

#main {

margin-left: 200px;

border-left: 1px solid gray;

padding: 1em;

max-width: 36em;

}

#footer {

clear: both;

margin: 0;

padding: .5em;

color: #333;

background-color: #ddd;

border-top: 1px solid gray;

}

#sidebar-left p { margin: 0 0 1em 0; }

#main h2 { margin: 0 0 .5em 0; }

该设计如图8-3所示

图8-3 在转化为Drupal主题以前的设计

让我们将新主题叫做greyscale, 所以在文件夹sites/all/themes/custom下面创建一个子文件夹greyscale。如果不存在 sites/all/themes/custom的话你需要创建一个。将page.html和global.css复制到greyscale文件夹下面。接下来，将page.html重命名为page.tpl.php,这样他将作为为每个Drupal页面服务的一个新的页面模板。由于主题 greyscale有了一个page.tpl.php文件，现在你就可以在管理页面中激活它。到Administer➤ Site building ➤ Themes下面，将它设置为默认主题。

恭喜! 现在你应该可以实际看到你的新设计了。外部的样式还没有加载进来（我们将在后面讨论它），而在你的站点中对任何页面的导航都显示这个同一个页面，尽管如此，这也是一个了不起的开始。由于在你的站点中到任何页面的导航都显示page.tpl.php中的静态HTML内容，所以现在你没有办法进入管理页面了。我们将你关到了Drupal的门外面。哎哟。一不小心被关到了门外面，下面我们将向你讲述如何解套。一种办法是对刚才启用的主题进行重命名。在这种情况下，你可以简单的将greyscale改为greyscale_这样你就可以重新返回站点里面了。那是一个快速解决办法，由于你知道问题的真正所在，另一种方式，你可以向page.tpl.php中添加适当的变量，从而展示Drupal的动态内容而不是上面的静态内容。

每一个PHPTemplate模板文件---无论page.tpl.php，node.tpl.php，block.tpl.php还是其它—都有一组动态内容变量提供给他们使用。打开page.tpl.php将相应的静态内容替换为相应的Drupal变量。不要担心，我们很快后面讲述这些变量。

<html>

<head>

</head>

<body>

</div>

<?php if ($sidebar_left): ?>

<?php print $sidebar_left ?>

</div>

<?php endif; ?>

<?php print $content ?>

</div>

<?php print $footer_message ?>

</div>

</body>

</html>

重新加载页面，你将发现，变量被Drupal的相应内容所替换。你将注意到global.css样式单没有被加载，这是因为指向该文件的路径不正确。你可以手工的调整其路径，或者你可以以Drupal的方式来完成它以获得更好的灵活性和其它好处。

首先将global.css重命名为style.css。根据习惯，Drupal将自动的查找每个主题下面的style.css文件，它将该信息添加到变量$styles里面，从而被传递到page.tpl.php.让我们使用这一信息更新page.tpl.php。

<html>

<head>

<?php print $styles ?>

</head>

...

保存你的修改并重新加载页面。瞧。如果你查看页面的源代码的话，你将注意到，其他启用的模块所带有的样式单也被加载了进来，这些都是通过变量$styles 完成的。通过将你的Css文件命名为style.css,这允许Drupal使用它的css预处理引擎来处理它，从而消除CSS文件中所有的空白和换行，替换的，drupal没有使用多个样式单，而是将它们合并到了一起，作为一个文件提供。关于这一特性的更多细节，参看第22章。

这里有更多的可添加到page.tpl.php和其它模板文件的变量。让我们逐一考察一下。