分享

用 Joomla! 模板实现类似 Maycode.com 的新闻门户式首页布局

 NaturalWill 2015-05-19
很多会员在 Joomla!中文论坛 上提问“Maycode.com 首页那种样式是怎么做的”。实际上,如果你看过本站的另一篇文章《修改 Joomla! 1.5 的 HTML 输出而不动核心文件》就会明白,通过自定义 HTML 输出就能实现。本站会员 Shiliu 在论坛对这个问题的回答:“稍懂一些开发的知识.想改成什么样就是什么样的了.都是view 部分的”,就是这个意思。

我一直期待有高手能够奉献这样一个“中国式新闻门户首页布局”的 View 代码,这样无论什么模板都能直接复制过去启用。 但是中国的高手都太忙,所以等了几个月也没有结果。另外,从易用性角度来看,这种 overriding 的方式对新手来说多少有点困难。因此,我决定换一个思路。

今天介绍的方法适用于任何 Joomla! 模板,适用于任何 Joomla! 核心版本。同时,任何新手对照视频教程的示范操作一遍就能成功。你想模仿腾讯 QQ 首页?或者做一个类似新浪首页的 Joomla! 网站?那就不要错过本文!

 



 

基本思路:
 
Joomla! 自带了一个值得赞赏的功能就是:模板分配。意思是,可以给任何一个菜单项目单独分配一个模板,当在前台点击该菜单时,就自动应用指定的模板;而点击其它菜单时,就应用 Joomla! 后台指定的“默认”模板。

我们就是利用这一点来解决问题!既然我们所需要的是“新闻门户式首页布局”,可见只跟“首页”有关系,我们不用考虑其它内容(所谓“二级页面”)。 大家都知道,在 Joomla! 上,“首页”本身就有对应的菜单项目。因此,我们只需要给“首页”这个菜单项目分配一个“新闻门户式”模板即可。

新问题:

目前没有专门的“新闻门户式”Joomla! 模板;
即使有这样的模板下载来,但是跟“二级页面”的模板风格不同,怎么办?
再退一步,有高手开发了这样的“新闻门户式” Joomla! 模板,也附带“二级页面”的风格,但是不合我的口味,怎么办?
或者,有了上述模板,也合我的口味,但是他要我掏钱,我不愿意付费,怎么办?
那么,本文就来解决这些问题。我们的目标是:根据用户已经在使用的 Joomla! 模板,通过人人可以学会的简单步骤,制作一个风格一致的“新闻门户式”Joomla! 模板,然后将它分配给“首页”菜单项目。

为了方便大家理解,就以 Maycode.com 的首页为模仿对象。

 

目标分析:
本文开头的插图就是 Maycode.com 的首页。可以看出,首页上基本包含下列内容:

网站 Logo 图片和文字;
注册、登录、收藏等链接;
顶部菜单;
图片循环放映模块;
文章展示模块;
Google 搜索模块;
Adsense 广告若干;
底部友情链接;
以上各项内容各自通过哪个对应的 Joomla! 模块来实现,我想大家都差不多知道。找不到现成模块的,用 Custom Code 模块也能自己输入 HTML 代码做一个,例如友情链接就可以这样。

因此,核心问题是:这些模块怎样排版成这个样子?

说到底,原来是一个“样式问题”。这就是为什么我最终选择用“Joomla! 双重模板法”来解决,而不是通过 php 编程。

既然说到了“样式”,我建议你最好了解一些初步的 CSS 知识,至少别人写的代码你能看懂,否则还谈什么 DIY 呢?有些人或许还在想:“我就不学 CSS,我也不想掏一分钱,我就要那个某某样子的网站”,您老火星来的吧?

 

实施计划:
为了简化,我们只选择 Maycode.com 首页上下半部分的三行两列文章展示模块部分,因为整个右侧栏可看作是 right 模块位置,只要你的模板是三栏式,基本上右侧都能自动实现这个样子;页面上半部分跟下半部分差不多,只是有一个 Flash 播放器,说穿了只不过是 another module,把它当作文章模块来看就行了。只要能作出下半页,上半页不就类推了?

下半页除了 6 个文章展示模块,还有一个 Adsense 广告部分,我们也一并模仿了,因为它的风格是横跨两列,介绍一下这个方法,你就能举一反三了。

文章展示模块有很多种,我们今天选用功能比较强大的 Display News by BK 图文展示模块。 当然,Maycode.com 很可能用的是别的模块,不过我们只要“模仿”就行了,没必要“克隆”啊。Adsense 广告我们就用 Joomla! 核心自带的 Banner 广告模块代替吧。如果你在实际做网站时真的需要 Adsense 模块,本站的下载栏目有很多。

我们选用 Joomla! 1.5.8 中文版核心自带的默认模板 rhuk_milkyway 为例。

 

关键步骤:
前面说了,我们要给“首页”这个菜单项目分配一个“新闻门户式”的 Joomla! 模板,并且要与现有的“默认”模板风格一致。那么,最“一致”的就是当前模板本身了,不是吗?

不过,当前模板已经是“默认”了,又怎么能单独分配给“首页”呢?这就需要灵活处理一下:我们用“偷梁换柱”法。简单举例:我们将一个白馒头称呼为“馒头”,另外再做一个一模一样的,叫做“馍馍”,没见过的人以为是两样东西,看过之后就会骂:靠!猫叫了个咪咪啊,蒙谁呢?

也就是说,我们将“默认模板”复制一份,但是必须换名字,否则 Joomla! 不会认为是“两个不同的模板”。我们只改名字,而不用修改样式,因此就会产生两个不同名称、相同风格的模板。然后将其中一个分配给首页。这还没完,因为这 时候样式还是完全一样的,我们必须针对分配给首页的那个模板作出某些修改,才能完成任务。

 下载 视频教程:Joomla! 双重模板法实现新闻门户式首页布局
文件标题: 视频教程:Joomla! 双重模板法实现新闻门户式首页布局 (Details)
文件类型: avi
版本: 1.0
文件大小: 46.04 MB
下载次数: 358
 {mospagebreak_scroll heading=“新闻门户式”首页布局的实现思路&title=实战 Joomla! 双重模板法}

实战 Joomla! 双重模板法:
 

1、复制一个新模板

请看一下 Joomla! 1.5.8 的安装目录。/templates 就是模板目录。里面有一个文件夹名称是 rhuk_milkyway,就是默认模板。而另一个文件夹 /templates/ja_purity 就是另一个自带模板 JA Purity,另一个文件夹 /templates/beez 就是另一个自带模板 Beez。

看到这里,您是否认为复制一份 /templates/rhuk_milkyway 目录就等于新建了一个模板呢?不是的。我们必须首先搞清楚这一点,否则你遇到其它自己喜欢的模板就不知道怎么操作了。

文件夹名称固然提示了模板的名称,但 Joomla! 核心判断模板名称并不是靠文件夹名称的。Joomla! 是读取每一个模板的 templateDetails.xml 文件中 <name> 部分的定义来识别不同模板的。因此目录名称可以叫 A,而 XML 文件中 <name> 那里可以定义成 B,系统最终认为模板名称是 B 而不是 A。

不过,为了方便,没有人这么做。一个约定俗成的规则就是目录名称与 <name> 定义完全一致,以方便“人类”识别(因为这个规则对服务器来说没有什么好处)。

虽说 Joomla! 是通过 XML 文件来识别模板身份,但是如果你更改了某个现有模板的目录名称,就会发现前台找不到模板了。这是因为,一个模板包含了很多文件,这些文件在前台读取时要通 过已知的路径去寻找,这个路径就包含了修改之前的模板文件夹名称。当你修改了文件夹名称之后,路径就错了。

反过来讲,如果我们要复制一个模板,并且希望 Joomla! 把它识别为“另一个模板”,就必须做两件事:

复制当前模板的文件夹并改为新名称;
修改 XML 文件中 <name> 的定义以及所有该模板中文件路径中的旧文件夹名称;
我们就这么干!将 rhuk_milkyway 文件夹复制一份,将文件夹名称修改为 rhuk_milkyway_portal,还 保存/上传 到 /templates 目录。我之所以将旧名称作为新名称的一部分,是为了方便“人眼”识别,而且在服务器上这两个文件夹会紧挨着排序,比较容易找到。如果你不喜欢这种方式,完 全可以使用任何名称。

接下来,打开 XML 文件,将 <name> 部分的 rhuk_milkyway 也修改为 rhuk_milkyway_portal;通过“在文件中查找/替换”的方法,将所有涉及 rhuk_milkyway 的部分都替换为 rhuk_milkyway_portal。

提醒:推荐使用开源的 Notepad++ 文本编辑器,可以做到在多个文件,包括子目录中查找并替换。

现在请进入 Joomla! 1.5.8 管理后台的“扩展 -> 模板管理”,就会发现系统识别了新复制的模板,并将它作为“不同的模板”与原来的模板列在一起(如下图所示)。不要担心 Joomla! 看穿你造假,它不会去比较两份模板的源代码的。



 

2、分配新模板给“首页”菜单项目

在 Joomla! 1.5.8 里面,指向网站首页的菜单项目是 Home,属于 mainmenu 群组。但是我们看到,在 Maycode.com 网站,“首页”这个菜单是位于顶部菜单的。因此我们需要做一个“菜单移动”操作,将 Home 移动到 topmenu 群组,并且改名为中文的“首页”。

现在点击新模板 rhuk_milkyway_portal 的名称,就会打开它的参数页面。在左侧下半部分,可以看到“菜单分配”的选项。



点击“从列表中选择”,就会激活下面的菜单列表。从里面找到“首页”,用鼠标点击它,就等于将这个模板分配给了“首页”这个菜单项目。然后点击右上角的“保存”按钮。可以看到如下画面:



 

这张图是不是刚见过?我贴重复了吗?没有。请仔细看:在“已分配”这一栏,多了一个绿色的对勾。表示 rhuk_milkyway_portal 这个模板已经被分配给某个(些)菜单项目了。

3、改造新模板的样式成为“新闻门户式”

尽管已经给“首页”分配了新的模板,但是现在你查看网站前台,会发现没有任何变化,首页还是博客式布局。这是因为我们只创建了新模板,但还未对其进行样式改造。

简单分析一下首页的博客布局:顶部有Logo 及顶部导航菜单,底部有 banner 广告和页脚版权,这些内容及整个右侧栏我们都想保留。而左侧栏、Latest News、Popular 以及中间主体部分的博客文章我们想去掉,换成我们想要的文章展示模块。

这些模块位置的定义都是在模板的 index.php 文件中,因此我们打开 /templates/rhuk_milkyway_portal/index.php 这个文件,通过搜索 user1、user2、left 等模块位置名称找到要去掉的这些模块位置。

这里提醒一下:如果采用删除代码的方法,很可能造成代码错误,因为新手不是删除太多,就是删除太少,或者是遗留代码未闭合(例如只删除了 <div>,而留下一个 </div>)。因此,为了给以后查找问题留下后路,我们不删除代码。在找到这些模块位置之后,将相关代码用注释标记包围(comment out),这样代码还在那里,但是不会生效了。

接下来,我们要添加自己的模块位置。因为我们所要的“新闻门户式”首页主要是各种模块的排列,因此我们只创建模块位置。建议使用 DIV 作为容器,这样比较符合“标准”,如果新手发现 DIV 不容易控制,也可以使用 Table 表格。

 在这里顺便说一下 Joomla! 的模块位置命名规则:所有的模块名称都可以随意取名,只要名称是由英文和数字(alphanumeric)及连字符、下划线组成,不能有空格和其它特殊字符。模块名称与其前台位置之间没有绝对关系,你可以将名为 left 的模块位置显示在右侧,也可以在名为 debug 的模块位置上发布广告。不过,为了方便他人阅读代码,一个约定俗成的规则就是尽量使用有意义的名称,如果模块位置的名称是一个方位,如 top,那么尽量让它显示在 top(顶部)这个位置。

我们依次创建 user5 至 user10 共6个模块位置来模拟 Maycode.com 首页下半部分的6个文章展示模块;另外创建一个 myads-001 模块位置来放置广告。这个模块位置要位于上下两行文章模块之间,并且横跨两列。具体操作请参看本文配套的视频教程。

创建好自己的模块位置之后,我们进入 Joomla! 后台的“模块管理”,来发布我们的文章展示模块。我们在 Display News 模块的参数中选择让它只展示某个类别中的文章,然后通过 CSS 控制好它的前台效果(参看:如何用 CSS 控制 Display News 模块的外观样式)。再通过“模块复制”的方法,总共产生6个 Display News 模块,各自针对一个文章类别,各自占据一个新增的模块位置。最后,将 Joomla! 自带的 banner 广告发布到新建的广告位置。

最终效果如下:


 

 下载 视频教程:Joomla! 双重模板法实现新闻门户式首页布局
文件标题: 视频教程:Joomla! 双重模板法实现新闻门户式首页布局 (Details)
文件类型: avi
版本: 1.0
文件大小: 46.04 MB
下载次数: 358

  {mospagebreak_scroll heading=“新闻门户式”首页布局的实现思路&title=Joomla! 双重模板法小结}

Joomla! 双重模板法小结
从上页的最终效果可以看出,我做的结果很丑陋,但是基本上模仿了“新闻门户式”首页。Maycode.com 的文章模块标题是粉红色,我们通过 CSS 做到了;它的模块标题前方有小图标,我们也做到了;只有一点模仿得不太像:Maycode.com 的模块标题右侧有“查看全部 >> ”这样的链接,指向该类别的文章列表。而我们选用的 Display News 模块没有这个功能,只好借用 Display News 参数中的“模块底部链接”来手动添加了指向类别的链接,而且位置位于模块底部。效果图中左上角那个文章模块底部就是。

请原谅我不是 CSS 高手,因此最终结果很不漂亮。本文的目的是要探讨一种思路,教会一种方法。我相信“青出于蓝而胜于蓝”,你一定会比我做得好!

通过这次实际模拟,我们可以总结出以下几点:

本法不会修改任何 Joomla! 核心代码,也不会修改原有“默认模板”,更不会影响 Joomla! 核心升级,因此十分安全;
本法的关键是“模板分配”;
要想取得漂亮的前台效果,必须学好 CSS;
本法适合于任何 Joomla! 模板,因此如果你正在使用某个自己喜爱的模板,而苦于没有“新闻门户式”首页,就用本法改造吧;
本法同样适用于 Joomla! 1.0.x 平台;
如果想在首页展示文章之外的内容,只需发布对应的模块即可,例如“论坛新帖”、“最新评论”、“特价商品”、“随机展示会员照片”等等;
如果想实现腾讯 QQ 首页那种多标签图文展示模块,请选择 Joomla! 中的“多模块叠放”模块,例如 Jootabs;
不仅可以给“首页”指定单独的模板,你甚至可以给每一个菜单项目都指定完全不同的模板,例如在制作“专题”栏目时,游戏专题用 WOW 风格;汽车专题用宝马奔驰照片;女性专题则用淡雅风格等等;
对于 Joomla! 1.0.x 用户,我可以提醒一个更简便的方法,在复制模板时,无需复制模板文件夹,只需复制一份默认模板的 index.php 文件,然后通过一段代码来为不同组件指定不同的模板。由于 J1.0 的首页有专门的组件 com_frontpage 管理,因此这个方案也能替代分配模板给菜单项目。这个方法是由 Autoit 发明的,我在本站论坛有介绍。

由于本法设计到了 Joomla!模板设计,我顺便在这里分享一下如何作出水平并列的 <div>。

如果不借助 CSS,那么所有的 <div> 都是默认从上向下依次排列。假设我们现在要设计一个两行两列的布局,原始的 HTML 代码(在模板的 index.php 文件中)这样写:

 

1
 
1
 
 
1
 
 
1
 
 

 
 
 

然后在 CSS 文件中这样定义:

 

1
div#row1 {width: 100%; float: left;}
2
div#row1col1 {width: 49%; float: left;}
3
div#row1col2 {width: 49%; float: right;}
4
div#row2 {width: 100%; float: left;}
5
div#row1col1 {width: 49%; float: left;}
6
div#row1col2 {width: 49%; float: right;}
这里面的主要诀窍就是:

利用 float 属性来分配位于同一行的两个 DIV 分别左对齐和右对齐;
给该行的总的 DIV 指定宽度 100%,里面包含的两个水平并列的 DIV 的宽度相加不得大于这个 100%(两个 49% 相加比 100% 稍微小一点,不能等于 100% 是因为某些浏览器会出错);
如果里面包含的两个 DIV 还有 padding 留白,那么在水平方向上(左或右)的 padding 留白宽度与 width 宽度相加,总和不能大于外面大 DIV 的宽度值;
在模板设计中经常会遇到在水平一行上并列两个甚至多个 DIV 的情况,都可以采用这种办法解决。不管同一行有多少个 DIV,它们的 width 与水平 padding 的总和必须小于容纳该行的大 DIV 的 width 宽度值。至于具体的样式,建议你参看 CSS 有关知识。

 

    本站是提供个人知识管理的网络存储空间,所有内容均由用户发布,不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息,谨防诈骗。如发现有害或侵权内容,请点击一键举报。
    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多