为Drupal主题配置Superfish菜单

以对Zeropoint主题的修改为例

1. 首先去作者的主页上下载全套的文件http://users.tpg.com.au/j_birch/plugins/superfish/#download，比如目前版本是1.4.8

2. 将其中的js脚本放到/sites/all/theme/zeropoint/js下，css放到zeropoint/css下，图片放到zeropoint/image下。

注意要修改superfish.js中第79行menuClasss: ‘sf-js-enabled’，改为’sf-menu’才可以和配套的CSS文件相匹配。不知道作者为什么这么设计的。另外一个主题Fusion Core的作者是在template.php中的把需要用superfish效果的primary link的class标签中，强行插入sf-menu才解决问题，让人忍俊不禁。还是觉得我的小修改更容易一些。不过将sf-menu的CSS属性和其他一堆Medu去分开很头疼，要加一堆!important的标签，仔细慢慢调整，

3.修改zeropoint.info文件加入需要的css和js脚本。脚本中中superfish.js当然是核心文件，其他的可以根据实际需要添加。

stylesheets[all][] = css/superfish.css
scripts[] = js/jquery.bgiframe.min.js
scripts[] = js/hoverIntent.js
scripts[] = js/supposition.js
scripts[] = js/supersubs.js
scripts[] = js/superfish.js

4. 编写脚本初始化文件js/script.js

Drupal.behaviors.superfish = function (context) {
$(“#superfish ul.menu”).superfish({
hoverClass:  ‘sfHover’,
delay:       250,
animation:   {opacity:’show’,height:’show’},
speed:       ‘fast’,
autoArrows:  true,
dropShadows: false,
disableHI:   true
}).supposition();
};

保存后，把这个脚本也加入到zeropoint.info中

scripts[] = js/script.js

这个脚本就是js的加载文件，是Drupal特有的方法。可以避免用以下直接在page.tpl.php中显示调用的方法，因为通过drupal的api调用可以将所有初始化脚本集中在一起并压缩。

<script type="text/javascript">
  $(document).ready(function() {
    $("#superfish ul.menu").superfish();
  });
</script>

4. 最后当然是修改page.tpl.php文件，把navlinks属性改为superfish。当然也可以把script.js中的superfish改为navlinks，这其实无所谓，只要两个地方可以对应上就可以。关键是ul.menu，这是Drupal输出菜单的标识性属性，不能改，否则superfish脚本就找不到菜单。除非在template中修改Drupal核心的输出，否则只有用这个。这当然可能会和其他的Menu的CSS相冲突，需要后面在慢慢调整。

这样基本上就完工，可以大概看看效果了

Drupal中为zeropoint主题添加Node下面的Block

1. 修改template.php文件，在$vars[‘node_bottom’] = theme(‘blocks’, ‘node_bottom’); 下面加上

$vars[‘node_bottom_left’] = theme(‘blocks’, ‘node_bottom_left’);
$vars[‘node_bottom_right’] = theme(‘blocks’, ‘node_bottom_right’);

2. 修改Zeropoint.info文件，添加

regions[node_bottom_left] = Node bottom left
regions[node_bottom_right] = Node bottom right

regions中的名字显然要和上面$vars中的名字一致

3.修改node.tpl.php, 把原来$node_bottom的地方修改为

<?php if (($node_bottom_left or $node_bottom_right) && !$teaser): ?>
<div id=”node-bottom” class=”clear-block”>
<?php if ($node_bottom_left): ?>
<ul id=”node-bottom-left”>
<?php print $node_bottom_left; ?>
</ul>
<?php endif; ?>
<?php if ($node_bottom_right): ?>
<ul id=”node-bottom-right”>
<?php print $node_bottom_right; ?>
</ul>
<?php endif; ?>
</div>
<?php endif; ?>

4. 修改个性化css，其他可以慢慢调整，高亮的地方是必须的

div#node-bottom{

clear:both;
font-size:12px;
margin-left:auto;
margin-right:auto;
overflow:visible;
padding:20px 0 0;
text-align:center;
}

#node-bottom-left
{
float:left;
list-style-type:none;
margin:0;
padding-left:10px;
text-align:left;
width: 40%;
}
#node-bottom-right
{
float:left;
list-style-type:none;
list-style:none;
margin:0;
padding-left:10px;
text-align:left;
text-decoration:none;
width: 40%;
}
#node-bottom-right a {
list-style:none;
text-decoration:none;
}