小试Joomla! 1.6

Joomla! 1.6已经放出有一段时间了. 相比Drupal7, 我觉得Joomla! 更适合于制作企业网站, 而Drupal更适合做社区/SNS这类的网站. 下面杂乱的记一下使用Joomla!制作网站的一些笔记.

去掉缺省模板beez5里面的字体缩放, 这个还真不好找呢. 打开/templates/beez5/index.php, 找到如下一行, 应该在30多行处吧, 删除或者注释掉:

$doc->addScript($this->baseurl.’/templates/beez5/javascript/md_stylechanger.js’, ‘text/javascript’, true);

图文并茂的显示banner, 这个要求不高, 不过却要修改一番. 首先要override(这个我怎么找不到对应的中文词) banner的模板. 新建或修改 /templates/beez5/html/mod_banners/default.php, 在图片代码之后添加即可:

<div><span><?php echo $item->params->get(‘alt’); ?></span></div>

然后,  Alternative Text里面的文字就可以在图片后显示出来了.

为每个页面设定class. 缺省模板beez5里面, 竟然没有任何对于<body>的代码, 想给<body>添加个class对吧? 至少我非常希望这样. 编辑 /templates/beez5/index.php, 在顶部的php块里添加:

$active = JFactory::getApplication()->getMenu()->getActive();

然后把<body>改为如下即可.

<body class=”<?php echo $active->alias; ?>”>

这样如果你给菜单首页链接的alias是homepage, 那么首页的body html应该就是

<body class=”homepage”>

这样接下来写CSS就非常轻松了, 例如:

body.homepage {}
body.homepage div#all {}

参考wiki链接: Giving the Front Page a different style from other pages

顺便写下beez5模板的布局吧, 备用:

  • position-0(下边就简写数字了): search
  • 1: top menu
  • 15: heading image
  • 2: breadcrumb
  • 7, 4, 5: left
  • 12: content
  • 6, 8, 3: right
  • 9: footer left
  • 10: footer center
  • 11: footer right
  • 14: footer bottom

另外Joomla! 1.6已经支持HTML5了, 有时间再试试吧. 😀

解剖Joomla! 1.5的模板架构

Joomla! (注意全名包括这个“!”)1.5总算出来了,目前更是更新到了1.5.2。难拒其诱惑,我打算用Joomla!做网站了。下面说说Joomla! 1.5的模板吧。

如图,beez是随1.5发行包而来的一套功能展示布景,虽然不是很花哨,但是大大小小的模板功能基本都用到了。值得解剖一番。先看看几个必要文件和文件夹:

  • templateDetails.xml 这个是模板的编目文件,类似windows软件中setup.ini这样的角色。
  • index.html 名字很正经,但没什么用,只是为了避免文件夹索引被显示出来而已。
  • index.php 模板文件的入口,主要的布局和布局逻辑都在这里。
  • params.ini 模板参数文件。简单的模板是不需要这个的,但是如果你想设计一个同时适应1280和1440的模板,可能就需要使用参数了。
  • template_thumbnail.png 这个是模板的预览图,一般都不大,200×150左右,用于在模板管理界面上看到模板的预览。
  • favicon.ico 网站的图标。如有此文件,Joomla!会自动在模板中显示出来。
  • html文件夹用来存放override页面,就是用来取代系统模组缺省模板的。例如:/templates/beez/html/mod_search/default.php 将取代 /modules/mod_search/tmpl/default.php。

下面标注一下最重要的templateDetails.xml和index.php文件。首先是templateDetails.xml文件:

<?xml version=”1.0″ encoding=”utf-8″?>
<!DOCTYPE install PUBLIC “-//Joomla! 1.5//DTD template 1.0//EN” “http://dev.joomla.org/xml/1.5/template-install.dtd”>
<install version=”1.5″ type=”template”>
<!– 下面这些模板信息,套用过来填写你自己的就可以了 –>
<name>beez</name>
<creationDate>19 February 2007</creationDate>
<author>Angie Radtke/Robert Deutz</author>
<authorEmail>[email protected]</authorEmail>
<authorUrl>http://www.run-digital.com</authorUrl>
<copyright></copyright>
<license>GNU/GPL</license>
<version>1.0.0</version>
<description>Accessible template for Joomla 1.5</description>
<!– files下面记录了模板用到的文件。感觉这个不是很严格的,很多没“登记”的文件也可以被用到 –>
<files>
<filename>css/layout.css</filename>
<filename>css/position.css</filename>
<filename>css/template.css</filename>
<filename>css/ieonly.css</filename>
<filename>css/ie7only.css</filename>
<filename>css/print.css</filename>
<filename>css/general.css</filename>
<filename>css/index.html</filename>
<filename>css/template_rtl.css</filename>
<filename>html/com_contact/category/default.php</filename>
<filename>html/com_contact/category/default_items.php</filename>
<filename>html/com_contact/category/index.html</filename>
<filename>html/com_contact/contact/default.php</filename>
<filename>html/com_contact/contact/default_address.php</filename>
<filename>html/com_contact/contact/default_form.php</filename>
<filename>html/com_contact/contact/index.html</filename>
<filename>html/com_contact/index.html</filename>
<filename>html/com_content/article/default.php</filename>
<filename>html/com_content/article/index.html</filename>
<filename>html/com_content/article/form.php</filename>
<filename>html/com_content/category/blog.php</filename>
<filename>html/com_content/category/blog_item.php</filename>
<filename>html/com_content/category/blog_links.php</filename>
<filename>html/com_content/category/index.html</filename>
<filename>html/com_content/category/default_items.php</filename>
<filename>html/com_content/category/default.php</filename>
<filename>html/com_content/frontpage/default.php</filename>
<filename>html/com_content/frontpage/default_item.php</filename>
<filename>html/com_content/frontpage/default_links.php</filename>
<filename>html/com_content/frontpage/index.html</filename>
<filename>html/com_content/section/blog.php</filename>
<filename>html/com_content/section/blog_item.php</filename>
<filename>html/com_content/section/blog_links.php</filename>
<filename>html/com_content/section/default.php</filename>
<filename>html/com_content/section/index.html</filename>
<filename>html/com_content/index.html</filename>
<filename>html/index.html</filename>
<filename>html/com_search/search/default.php</filename>
<filename>html/com_search/search/default_error.php</filename>
<filename>html/com_search/search/default_form.php</filename>
<filename>html/com_search/search/default_results.php</filename>
<filename>html/com_search/search/index.html</filename>
<filename>html/com_search/index.html</filename>
<filename>html/editor_content.css</filename>
<filename>html/mod_latestnews/default.php</filename>
<filename>html/mod_latestnews/index.html</filename>
<filename>html/mod_login/default.php</filename>
<filename>html/mod_login/index.html</filename>
<filename>html/mod_newsflash/_item.php</filename>
<filename>html/mod_newsflash/default.php</filename>
<filename>html/mod_newsflash/horiz.php</filename>
<filename>html/mod_newsflash/vert.php</filename>
<filename>html/mod_newsflash/index.html</filename>
<filename>html/mod_poll/default.php</filename>
<filename>html/mod_poll/index.html</filename>
<filename>html/mod_search/default.php</filename>
<filename>html/mod_search/index.html</filename>
<filename>html/modules.php</filename>
<filename>html/pagination.php</filename>
<filename>html/com_poll/poll/default.php</filename>
<filename>html/com_poll/poll/default_graph.php</filename>
<filename>html/com_poll/poll/index.html</filename>
<filename>html/com_poll/index.html</filename>
<filename>html/com_newsfeeds/categories/default.php</filename>
<filename>html/com_newsfeeds/categories/index.html</filename>
<filename>html/com_newsfeeds/category/default.php</filename>
<filename>html/com_newsfeeds/category/default_items.php</filename>
<filename>html/com_newsfeeds/category/index.html</filename>
<filename>html/com_newsfeeds/newsfeed/default.php</filename>
<filename>html/com_newsfeeds/newsfeed/index.html</filename>
<filename>html/com_newsfeeds/index.html</filename>
<filename>html/com_weblinks/categories/default.php</filename>
<filename>html/com_weblinks/categories/index.html</filename>
<filename>html/com_weblinks/category/default.php</filename>
<filename>html/com_weblinks/category/default_items.php</filename>
<filename>html/com_weblinks/category/index.html</filename>
<filename>html/com_weblinks/weblinks/form.php</filename>
<filename>html/com_weblinks/weblinks/index.html</filename>
<filename>html/com_weblinks/index.html</filename>
<filename>html/com_user/user/index.html</filename>
<filename>html/com_user/user/default.php</filename>
<filename>html/com_user/user/form.php</filename>
<filename>html/com_user/login/index.html</filename>
<filename>html/com_user/login/default_login.php</filename>
<filename>html/com_user/login/default.php</filename>
<filename>html/com_user/login/default_logout.php</filename>
<filename>html/com_user/register/default.php</filename>
<filename>html/com_user/register/index.html</filename>
<filename>html/com_user/register/default_message.php</filename>
<filename>html/com_user/index.html</filename>
<filename>html/com_user/remind/index.html</filename>
<filename>html/com_user/remind/default.php</filename>
<filename>html/com_user/remind/default_message.php</filename>
<filename>html/com_user/reset/index.html</filename>
<filename>html/com_user/reset/default.php</filename>
<filename>html/com_user/reset/confirm.php</filename>
<filename>html/com_user/reset/complete.php</filename>
<filename>images_general/index.html</filename>
<filename>images_general/calendar.png</filename>
<filename>images_general/j_button2_blank.png</filename>
<filename>images_general/j_button2_image.png</filename>
<filename>images_general/j_button2_left.png</filename>
<filename>images_general/j_button2_pagebreak.png</filename>
<filename>images_general/j_button2_readmore.png</filename>
<filename>images_general/selector-arrow.png</filename>
<filename>images/arrow.png</filename>
<filename>images/arrow_rtl.png</filename>
<filename>images/pfeil.gif</filename>
<filename>images/pfeil_rtl.gif</filename>
<filename>images/trans.gif</filename>
<filename>images/logo.gif</filename>
<filename>images/arrow.gif</filename>
<filename>images/biene.gif</filename>
<filename>images/biene_rtl.gif</filename>
<filename>images/index.html</filename>
<filename>images/con_address.png</filename>
<filename>images/lupe_larger.gif</filename>
<filename>images/lupe_larger_black.gif</filename>
<filename>images/lupe_reset.gif</filename>
<filename>images/lupe_reset_black.gif</filename>
<filename>images/lupe_smaller.gif</filename>
<filename>images/lupe_smaller_black.gif</filename>
<filename>index.html</filename>
<filename>index.php</filename>
<filename>javascript/md_stylechanger.js</filename>
<filename>javascript/index.html</filename>
<filename>params.ini</filename>
<filename>templateDetails.xml</filename>
<filename>template_thumbnail.png</filename>
<filename>favicon.ico</filename>
<filename>component.php</filename>
</files>
<languages>
<language tag=”en-GB”>en-GB.tpl_beez.ini</language>
</languages>
<administration>
<languages folder=”admin”>
<language tag=”en-GB”>en-GB.tpl_beez.ini</language>
</languages>
</administration>
<!– 位置的定义。位置就是模板上可以显示动态内容的方块区域。例如top一般是显示顶部导航的,而left则一般用来显示左侧的主菜单等等 –>
<positions>
<position>left</position>
<position>right</position>
<position>top</position>
<position>breadcrumb</position>
<position>user1</position>
<position>user2</position>
<position>user3</position>
<position>user4</position>
<position>debug</position>
<position>syndicate</position>
</positions>
<params>
</params>
</install>

然后是index.php文件,需要注意就是这么几行:

defined(‘_JEXEC’) or die(‘Restricted access’); #这是为了防止模板文件被直接访问

<jdoc:include type=”head” /> #系统将由此输出必要的html header,例如title, meta等等

<?php echo JText::_(‘You are here’); ?> #系统的本地化功能,如果你安装了中文语言包,那么“you are here”将被中文语言包中的对应条目取代显示

<jdoc:include type=”modules” name=”breadcrumb” /> #调用系统模块,这里的name就是前面xml里定义的position。

好了,做一个简单的模板,这些应该够用了。剩下的就是美工和html设计了。