阅读时间14分钟 (2729个单词)

十四个Joomla!模板的秘密

Fourteen secrets of Joomla! templating

在过去几个月里,凯尔和我一直在整理一份杀手级的Joomla!模板片段列表,它有可能改变您在Joomla!中处理模板的方式。

我们原本计划在Joomla! 1.6发布之前发布这篇文章,并计划与Joomla! 1.6稳定版同时发布此帖子的1.6版本......但遗憾的是,情况并非如此。鉴于Joomla! 1.5的生命周期还很长,我非常确信您会发现此列表对您的即将到来的项目很有用。

你们中大多数人都会知道Joomla!非常强大,而且通常有不止一种方法可以处理设计挑战。根据您试图解决的问题,大多数解决方案都可以在组件、模块、插件或模板级别进行处理。API非常灵活,其中一个最大的决定是确定在哪里解决问题,而不是如何解决问题。

作为一个模板开发者,我更喜欢在模板级别处理大多数设计要求。这让我可以完全控制某个东西在哪里以及如何显示,并且在需要进一步更改时可以轻松访问文件。这也帮助防止在更新组件时意外覆盖对组件视图所做的更改——如果扩展使用MVC格式的话。

以下列表就像是Joomla!的隐藏秘密或黄金宝藏(至少对我们来说是),我们认为它们值得任何Joomla!模板套件。有趣的是,以下很多信息都来自Joomla!维基,这是任何想要动手编写自定义代码的人的宝贵资源。

那么,让我们开始吧...

1. 在Joomla!中创建首页条件语句,或创建针对默认菜单项的能力。

有时有必要指定仅适用于首页的样式或某些功能。Joomla!提供了几种不同的方法来实现这一点。其中之一是在模板代码中放置对首页的检查。

{codecitation}

// 检测首页

$menu = & JSite::getMenu();

如果 ($menu->getActive() == $menu->getDefault()) {

$siteHome = 1;

}else{

$siteHome = 0;

}

{/codecitation}

在这个片段中,我们获取了变量 $menu 中的菜单,然后检查这个菜单项是否是活动菜单项,以及它是否是默认菜单项。然后,我们设置一个名为 $siteHome 的变量,用布尔值(1或0)表示,即变量返回真或假值。

现在您可以在页面的任何HTML元素周围放置一个简单的条件语句。

{codecitation}

<?php if($siteHome) { ?>

<div id="home-banner">

此内容仅在主页上显示!

</div>

<?php } ?>

{/codecitation}

2. 在模板的 body 规则中添加有用的页面类信息。

分类法帮助设计师使用CSS进行级联样式并自定义Joomla!的几乎所有方面。通过添加几个简单的变量,我们可以将所有Joomla! URL信息作为body类打印出来,这使得我们能够深入到不同的Joomla!视图中,并为任何给定视图的每个元素指定样式。

在您的模板的 index.php 文件中添加以下代码

{codecitation}

<?php

// 检测活动变量

$option = JRequest::getCmd('option', '');

$view = JRequest::getCmd('view', '');

$layout = JRequest::getCmd('layout', '');

$task = JRequest::getCmd('task', '');

$itemid = JRequest::getCmd('Itemid', '');

?>

{/codecitation}

现在更新 body 标签,如下所示

{codecitation}

<body class="<?php echo $option . " " . $view . " " . $layout . " " . $task . " itemid-" . $itemid;?>"

{/codecitation}

这将打印类似于:<body class="com_content category blog  itemid-78">的内容

这在尝试为缺少适当分类的组件中的元素应用样式时非常有用。

例如,使用此处显示的 body 类,您可以这样做:.com_content.itemid-53 a{color:#000; /* 此菜单项文章中的链接将为黑色 */}

3. 可折叠模块位置

可折叠列现在在所有CMS的模板中都很常见。这意味着如果没有模块或内容存在于特定的位置,其周围的 div 将被隐藏,从而允许其余内容展开。

Joomla!模板中较受欢迎的方法之一是

{codecitation}

<?php if ($this->countModules('left')) { ?>

<div id="sidebar">

<jdoc:include type="modules" name="left" style="xhtml" />

<div class="clr"></div>

</div>

<?php } ?>

{/codecitation}

这表示如果 'left' 模块位置中有任何模块,则将显示 'sidebar' div 的标记以及发布到 'left' 模块位置的所有模块输出。如果没有发布到左侧位置,则不会显示侧边栏的标记。

4. 根据给定位置发布的模块数量进行计数、检查和进行疯狂的计算。

您可以将上面的简单可折叠模块检查扩展,以在页面上渲染特定标记时获得更精细的控制。

例如,如果您想仅在左侧和右侧模块都发布时在页面上显示内容,请包含以下代码

{codecitation}

<?php if ($this->countModules('left and right')) { ?>

<p>此内容仅在左侧和右侧模块都发布时出现。</p>

<?php } ?>

{/codecitation}

此内容仅在左侧和右侧模块都发布时出现。

或者,如果您想检查给定位置中存在的模块数量,并将其与另一个位置进行比较,请使用类似以下内容

{codecitation}

<?php if ($this->countModules('user1 < user2')) { ?>

<p>此内容仅在发布到 user1 的模块数量多于 user2 时出现。</p>

<?php } ?>

{/codecitation}

5. 通用安全事项

以下代码片段可以帮助减少访客识别您网站正在使用Joomla!。在某些情况下,您可能想这样做,以减少潜在黑客寻找的任何潜在漏洞的暴露。请注意,尽管如此,还有很多方法可以让访客识别Joomla!作为您网站使用的CMS,而不仅仅是这里提到的那些。

这些代码片段有助于删除这些标记,但同时也建议您调查其他资源,以确保您的Joomla!网站尽可能安全。访问“漏洞扩展列表”是一个不错的选择,以及Akeeba的Nick的master htaccess文件,用于阻止企图攻击您网站的黑客。 http://snipt.net/nikosdion/the-master-htaccess

删除Joomla!生成器标签

{codecitation}<?php $this->setGenerator(''); ?>{/codecitation}

禁用前端模块视图或阻止访问index.php?tp=1变量

{codecitation}<?php JRequest::setVar('tp',0); ?>{/codecitation}

6. 对特定模块和组件实现MVC

Joomla! 1.5开启了Joomla! html覆盖的时代。这意味着Joomla!的核心文件或任何MVC组件都可以通过模板中的html文件夹进行覆盖。这样做的好处是,您可以在不干扰其核心文件的情况下,显著更改Joomla!或MVC组件的核心布局和一些功能。任何对Joomla!核心或甚至第三方文件的更改,在升级时都可能给您或您的客户带来很大的麻烦。

例如,您可能想从分类博客视图中删除表格。

此Joomla!视图生成的url如下:index.php?option=com_content&view=category&layout=blog&id=34&Itemid=53

要覆盖此视图,在Joomla!模板中创建目录结构/html/com_content/category/blog.php。

您将从/components/com_content/views/category/tmpl/blog.php复制此视图文件。

7. 移除mootools

在大多数情况下,您确实需要在您的网站上保留mootools,尤其是如果您使用依赖于该库存在的扩展来创建启用javascript的功能。在您不需要在您的网站上加载mootools的情况下,您可以添加以下代码到模板的头部,以防止它在页面上加载。

有几种方法可以做到这一点,以下来自Kinespehere创建的mootools控制插件。

{codecitation}

// 移除Mootools

// Kinesph√®re "Mootools Control" 插件 for Joomla!! 1.5.x - 版本 0.1

// 许可证: http://www.gnu.org/copyleft/gpl.html

// 版权 (c) 2009 Kinesph√®re

// 更多信息请访问 http://www.kinesphere.fr

if ($removeMootools == '1') {

$doc =& JFactory::getDocument();

$headerstuff = $doc->getHeadData();

foreach ($headerstuff['scripts'] as $file => $type) {

if (preg_match("#mootools.js#s", $file)) unset($headerstuff['scripts'][$file]);

if (preg_match("#caption.js#s",  $file)) unset($headerstuff['scripts'][$file]);

}

{/codecitation}

8. 在您的模板中添加可翻译的语言字符串。

在某些情况下,您可能想在网站的输出中输出简单的字符串。这可能是一个滑块标题的例子,或者只是页面上的一些简单文本。在多语言网站上,这会带来问题,因为这些字符串默认情况下将按照模板设置渲染,而不是根据页面上的活动语言渲染,即这些字符串默认不会翻译成其他语言。

有一个joomfish插件允许您根据网站的活动语言选择新模板,但这意味着您必须维护模板的两个或多个副本。

更清洁的解决方案是将模板中的字符串转换为可翻译的语言字符串,并将其存储在语言文件中。这意味着字符串将根据页面上活动的语言自动翻译。

例如,如果您想在页面上输出一个名为 Slidertitle 的字符串,您可以在模板中使用以下代码

{codecitation}<?php echo JText::_('SLIDERTITLE');?> {/codecitation}

然后,您需要将 SLIDERTITLE 的翻译添加到您网站上使用的每个语言文件中。作为一个参考点,核心英文翻译文件可以在以下位置找到

language/en-GB/en-GB.ini

新的翻译看起来像这样

SLIDERTITLE = 这是滑块标题

请注意,每个新的翻译都需要添加到新的一行。

9. 使模块类更灵活。

使模板中的类更通用的简单方法是要求用户在模块类后缀参数前添加一个空格。模板中的模块类通常是创建用于特定实例的,并且通常会遵循一个约定,即使用短横线或下划线作为类名的开头。添加空格将使应用于类后缀的 CSS 样式可用于其他 HTML 元素,例如,为图像、div 或表格应用边框。

例如,一个类名为 -border 的模块将依赖于以下 CSS 来围绕使用默认 Joomla! xhtml 主题的模块绘制边框。

.moduletable-border {border:1px solid #ddd;padding:10px}

创建的标记将看起来像这样

<div class="moduletable-border">

现在,如果我们给类后缀添加一个空格,我们可以使用更通用的 CSS,它可以在页面的任何元素上使用。所以,如果模块类是 " border"(注意空格),所需的 CSS 更通用

{codecitation}.border {border:1px solid #ddd;padding:10px}{/codecitation}

并且标记将看起来像这样

{codecitation}<div class="moduletable border">{/codecitation}

现在,类 .border 可以在整个网站上使用,应用于 div、图像或任何其他您想要应用边框的 HTML 元素。

10. 覆盖核心 Joomla! 图像。

四年前,吸引我关注 Joomla! 的第一件事就是那些小巧的电子邮件、打印和 pdf 按钮,我相信您都很熟悉。(具有讽刺意味的是,如果我现在构建一个网站,这些是首先禁用的事情之一)。

自定义这些图像实际上非常简单。只需将您自己的图像添加到模板的图像文件夹中即可,确保它们按照以下规则命名

  • 电子邮件按钮 - emailButton.png
  • 编辑按钮 - edit.png
  • 编辑未发布按钮 - edit_unpublished.png
  • Pdf 按钮 - pdf_button.png
  • 打印按钮 - printButton.png
  • 面包屑图像 - arrow.png

11. 为登录用户或访客设置特定的标记。

再次,有几种方法可以做到这一点。您可以通过 Juga 等组件、JED 上可以找到的许多其他简单插件(例如 Rocket Theme 的这个实用的插件)或通过在模板级别创建访问变量来实现。

如果您想深入了解,可以设置以下变量来决定哪些内容对特定的用户组或单个用户可用。

{codecitation}<?php // 如果未登录成员

$user =& JFactory::getUser();

$user_id = $user->get('id');

if (!$user_id)    {

?>

这将只被未登录的用户看到。

<?php } ?>

{/codecitation}

或者如果已登录

{codecitation}

<?php // 如果未登录会员

$user =& JFactory::getUser();

$user_id = $user->get('id');

if ($user_id)    {

?>

这将只对已登录用户可见

<?php } ?>

{/codecitation}

还有其他一些更高级的ACL选项,可以针对特定的用户组,但可能最好使用之前提到的一种解决方案来处理如此精细的访问控制。然而,如果您想要向特定用户显示信息,则可以使用以下类似的方法

{codecitation}

<?php // 如果未登录会员

$user =& JFactory::getUser(99);

$user_id = $user->get('id');

if ($user_id)    {

?>

这将只对ID为99的用户可见

<?php } ?>

{/codecitation}

12. 在模板中轻松添加模态(灯箱)窗口链接

首先在index.php的<head>中添加对脚本的链接,位于

{codecitation}

<jdoc:include type="head" />

<script type="text/javascript" src="/media/system/js/modal.js"></script>

<script type="text/javascript">

window.addEvent('domready', function(){ var JTooltips = new Tips($$('.hasTip'), { maxTitleChars: 50, fixed: false}); });

window.addEvent('domready', function() {

SqueezeBox.initialize({});

$$('a.modal').each(function(el) {

el.addEvent('click', function(e) {

new Event(e).stop();

SqueezeBox.fromElement(el);

});

});

});

</script>

{/codecitation}

然后添加对模态窗口系统CSS样式的链接

{codecitation}<link rel="stylesheet" href="/media/system/css/modal.css" type="text/css" /> {/codecitation}

现在,对于模板中的任何链接或任何Joomla!内容,您都可以使用以下链接打开模态窗口

{codecitation}http://google.com/" class="modal" rel="{handler: 'iframe', size: {x: 900, y: 550}}">我的Google链接{/codecitation}

您可以通过更改x和y值来更改模态窗口的宽度和高度。

13. 添加自定义模块外观

Joomla!提供了几种模块输出选项,例如“xhtml”、“rounded”等。这些通常很好,但有时您可能希望对模板中使用的输出有更多的控制。

一个很好的用途是将模块名称作为类打印在模块上。一些开发者没有包含div包装器,这使得在特定模块中样式化元素变得困难。

在您的模板目录中,创建一个/html/modules.php,并在其中包含以下代码

{codecitation}

<?php defined('_JEXEC') or die('Restricted access');

function modChrome_xhtml2($module, &$params, &$attribs) {

   if (!empty ($module->content)) : ?>            

<div class="moduletableget('moduleclass_sfx');?>

module);?>">            

<?php if ($module->showtitle != 0) : ?>                  

 <h3><?php echo $module->title; ?></h3>            

<?php endif; ?>                  

 <?php echo $module->content; ?>          

 </div>    

<?php endif; } ?>

{/codecitation}

现在您可以在模板的index.php中使用此模块样式“xhtml2”

{codecitation}<jdoc:include type="modules" name="user5" style="xhtml2" /> {/codecitation}

14. 不要忘记这些内容

a. 调试模块位置

许多模板开发人员忘记包括一个调试模块位置,您可以在其中插入代码(如Google Analytics)

在关闭body标签之前插入

{codecitation}<jdoc:include type="modules" name="debug" />{/codecitation}

b. 系统消息位置

Joomla!!为用户提供重要消息,例如错误的登录信息。此消息将打印在存在此标记的地方(通常在组件标签之前)

{codecitation}<jdoc:include type="message" /> {/codecitation}

c. 全局样式

系统消息和其他各种全局样式包含在一些通用和系统CSS文件中,别忘了包含它们!

{codecitation}<link rel="stylesheet" href="/baseurl; ?>/templates/system/css/general.css" type="text/css" />

<link rel="stylesheet" href="/baseurl; ?>/templates/system/css/system.css" type="text/css" /> {/codecitation}

component.php是用于在不使用模板包装器查看您的网站或全屏组件视图时必需的。

一些针对您的Joomla!模板套件的额外资源

在Joomla社区杂志上发表的一些文章代表了作者对特定主题的个人观点或经验,可能与Joomla项目的官方立场不一致

0
在这里发布2011年2月的Haiku
Joomla!初学者的优质资源
 

评论

已经注册? 在此登录
尚无评论。成为第一个提交评论的人

通过接受,您将访问https://magazine.joomla.net.cn/之外的第三方外部服务提供的服务