dashan 提交于
为了使在Drupal 管理界面能够呈现一个新的主题，你需要把它放到sites/sitename/themes下面。如果你想在一个多站点Drupal系统中使所有的站点都 可以使用它，那么你需要把它放到sites/all/themes下面。你可以在你的站点安装任意多个主题，而主题的安装和模块的安装基本上相同。将主题 文件放到相应的位置后，导航到管理页面Administer/Site building/Themes.你可以一次安装和启用多个主题。这意味着什么？通过启用多个主题，用户可以在他们的个人首页上选择启用主题中的任何一个，在用户访问站点时，就使用所选的主题了。
有多种基本方式可以创建一个主题，这依赖于你开始所拥有的材料。将如你的设计者已经为你的提供了站点的HTML 和CSS文件。那么将设计者的设计转化为一个主题有多么简单呢？它确实不是很难，你可能已经完成了工作的80%。那么剩下的20%--最后的小饮和甜点— 它将Drupal的主题花与静态HTML区分了开了。首先让我们从简单的开始。
page.html ：
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="global.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar-left">
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="main">
<h2>Subheading</h2>
<p>
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut.
</p>
</div>
<div id="footer">
Footer
</div>
</div>
</body>
</html>
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; }
该设计如图所示
转化为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>
<title><?php print $head_title ?></title>
<link rel="stylesheet" href="global.css" type="text/css" />
</head>
<body>
<div id="container">
<div id="header">
<h1><?php print $site_name ?></h1>
</div>
<?php if ($sidebar_left): ?>
<div id="sidebar-left">
<?php print $sidebar_left ?>
</div>
<?php endif; ?>
<div id="main">
<h2><?php print $title ?></h2>
<?php print $content ?>
</div>
<div id="footer">
<?php print $footer_message ?>
</div>
</div>
</body>
</html>
重新加载页面，你将发现，变量被Drupal的相应内容所替换。你将注意到global.css样式单没有被加载，这是因为指向该文件的路径不正确。你可以手工的调整其路径，或者你可以以Drupal的方式来完成它以获得更好的灵活性和其它好处。
首先将global.css重命名为style.css。根据习惯，Drupal将自动的查找每个主题下面的style.css文件，它将该信息添加到变量$styles里面，从而被传递到page.tpl.php.让我们使用这一信息更新page.tpl.php。
<html>
<head>
<title><?php print $head_title ?></title>
<?php print $styles ?>
</head>
...
保存你的修改并重新加载页面。瞧。如果你查看页面的源代码的话，你将注意到，其他启用的模块所带有的样式单也被加载了进来，这些都是通过变量$styles 完成的。通过将你的Css文件命名为style.css,这允许Drupal使用它的css预处理引擎来处理它，从而消除CSS文件中所有的空白和换行， 替换的，drupal没有使用多个样式单，而是将它们合并到了一起，作为一个文件提供。
这里有更多的可添加到page.tpl.php和其它模板文件的变量。
- 登录以发表评论