为什么要创建新的布局风格

Joomla的模块，组件，插件都支持创建自定义风格。当模块的输出的数据已经能够满足我们的要求，但数据展示的样式（外观）并不满足的时候，我们可以创建新的布局风格来自定义模块的输出，而不用另外再开发一个模块，这样能够让我们介绍很多的工作量。举例来说，最近有一个项目需要展示系统中最新的文章，熟悉joomla的朋友都知道，可以使用系统自带的最新文章模块来完成，但客户要求文章的前3篇需要展示图片，并且显示top1，top2,top3的标签。此时，我们就可以创建一个新的模块布局，而不用重写一个模块。

创建新的布局风格

为模块创建一个新的布局风格（此处用最新文章这个模块来说明）。具体的操作如下：

1. 前往 网站根目录modules/mod_articles_lates(最新文章模块)t/tmpl这个文件夹。这个文件里面有1个文件。如图：

 

2. 将default.php这个文件复制一份，重命名，名字随意。本案例中我使用的是imgnews.因此，在文件夹中我创建了imgnews.php这个文件。如图：

做完这些，我们就完成了一个新的布局风格的注册了。

使用新的风格

我们需要通过模块的设置参数来指定当前模块使用何种风格。具体的操作如下：

在模块的编辑页面，有一个选项，可以让我们指定需要显示的样式。当我们创建了imgnews风格后，系统会自动识别这个风格，我们只需要在后台选择即可。截图如下：

 

这样当展示这个模块的时候就会使用我们指定的风格展示了。

 如何来编写新风格的内容

前置知识

编写新的展示风格并不需要精通php。只需要知道基本即可。更多的需要则是一些前端的样式和脚本。

修改步骤

如果你需要的风格和默认的风格相差不大，那么你可以打开imgnews.php文件，在原有的基础上稍作修改，保存即可。下面我们介绍如何完全重写一个新的布局。（在写代码之前，请确保你已经创建了一个模块，并且正常的发布了这个模块，重点检查模块的显示样式设置参数是否是imgnews）

1 我们使用编辑器打开imgnews.php文件。清空所有的内容。然后输入如下代码：

<?php
/**
 * @package     图片新闻风格布局 代码演示
 */
?>
<h1>这是图片新闻风格的布局</h1>

 实际上上面的php只是一个注释，真正的输出是h1里面的代码。保存后，我们刷新一下前台，查看现在的模块展示有和变化。截图如下：

看到这个界面，说明我们的代码已经起作用了。

2，看看模型给我们提供了哪一些数据。修改imgnews.php文件。新的文件代码如下：

<?php
 echo "<pre>";
   print_r($list); //具体打印什么，可以查看原先的defaut.php中的变量
 echo "</pre>";
?>
<h1>这是产品风格的布局</h1>

再次刷新页面，看到截图如下：

在上面的代码，通过打印list变量，可以知道模型给我们传递了哪些数据。我们后面可以直接调用。

3，调用模型的数据。使用代码

<?php foreach ($list as $item) : ?>
          <?php echo $item->title; ?>
<?php endforeach; ?>

 由于新闻列表返回的是一个列表，因此，我们需要试用一个foreach循环得到每一条数据。然后通过访问数据的属性等到我们需要的文章标题，文章图片等等。

$item->属性的名称。
//下面的代码输出文章的标题
echo $item->title;

下面进一步的改进我们的product布局，输出当前文章的标题。代码如下：

<?php
/**
 * @package     图片新闻风格布局 代码演示
 */
?>
<?php foreach ($list as $item) : ?>
         <h3 class="item"> <?php echo $item->title; ?></h3>
<?php endforeach; ?>

  效果截图如下：

 

至此，我们只需要编写对应的代码，就可以按照我们的要求来写出格式各样的风格样式了。在此我不再展开。

高级功能的使用

1，如果需要在页面中使用js和css.我们可以直接像在普通的html页面里面的用法一样即可。下面的代码演示了如何使用js和css.

<script>
	jQuery(document).ready(function(){
		
		alert("joomlachina.cn");
	});
</script>

<style>
	.mytitle{
		color:#ff0000;
	}
</style>
<h1 class="mytitle"><?php echo $this->item->title;?></h1>
<div class="alert"><?php echo $this->item->introtext;?></div>

 输出结果截图如下：

2，如果你需要加载js/css文件。那么可以使用如下的代码：

$doc = JFactory::getDocument(); 
$cssPath = JUri::root()."xxxxx.css";
$doc->addStyleSheet($cssPath); //引入css文件

$jsPath = JUri::root()."xxxxx.js";
$doc->addScript($jsPath); //引入js文件

3，如何获得json格式的变量。对于下面的images，urls,attribs这些都是json，需要进行解码然后调用。

如果你想获得文章的介绍图片。那么你需要先使用json解码。然后获得值

$item->images = json_decode($item->images);
echo $item->images->image_intro;

有了上面这些，基本上你可以写出任意的布局了，限制你的只有您的想象力了。