页面定制教程

起因

事情的起因是一个朋友使用文章组件作为主要的内容组件，内容主要有两种，一种是正常的新闻，使用默认的文章样式就可以了。另外一种是产品类。这位朋友希望能够让产品类的文章展示效果和正常的新闻文章展示效果不一样。我觉得这是一个常见的问题，因此，就写了这篇教程来介绍如何实现这种需求

创建新的风格

在文章组件的文章显示视图中新建一个风格。具体的操作如下：

1. 如果你的系统是J4.x.那么需要前往 网站根目录/components/com_content/tmpl/article这个文件夹。如果你的joomla核心是J3.x。那么你需要前往那么 网站根目录/components/com_content/views/article/tmpl这个文件夹.默认情况下，这个文件里面有4个文件。如图：

 

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

3，修改product.xml文件。输入一些我们这种风格的描述信息，方便以后查看。修改后的xml内容如下：

<?xml version="1.0" encoding="utf-8"?>
<metadata>
	<layout title="文章-产品风格" option="产品风格">
		<help
			key = "Menu_Item:_Product_Article"
		/>
		<message>
			<![CDATA[以产品的风格来展示文章]]>
		</message>
	</layout>

	<!-- Add fields to the request variables for the layout. -->
	<fields name="request">
		<fieldset name="request"

 上面我对原始的XML文件没有做过多的修改，仅仅只是修改了title，option，key，CDATA里面的信息。这些信息主要是用来向系统布局风格的，其中option和title是关键，不能和已有的风格相同。

做完这些，我们就完成了一个新的文章详情页的显示风格的注册了。

使用新的风格

我们有两种方案来使用新的风格。一种是创建菜单，另外一种是使用文章的布局选项。

1.创建菜单项

当我们按照上面的操作后，再次新建一个菜单项，在菜单项的类型选项中会多一个选项。在文章组件下面=》文章-产品风格。截图如下：

创建完成后，你在菜单项的链接中可以看到此时使用的layout参数已经是我们指定的product了。如图：

此时系统展示这个菜单项的时候就会使用我们新的product布局风格，而不是默认的default风格了。由于我们是直接复制default风格的，所以，目前为止product和default展示是一样的，这个很正常。后面我们会介绍如何来写product布局的内容。

2，使用文章参数

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

这样当展示这篇文章的时候就会使用我们指定的产品风格展示了。

 如何来编写新风格的内容

前置知识

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

修改步骤

如果你需要的风格和默认的风格相差不大，那么你可以打开product.php文件，在原有的基础上稍作修改，保存即可。下面我们介绍如何完全重写一个新的布局。

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

<?php
/**
 * @package     文章组件的产品风格布局 代码演示
 */
?>
<h1>这是产品风格的布局</h1>

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

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

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

<?php
 echo "<pre>";
	print_r($this->item);//查看模型的数据
 echo "</pre>";
 
?>
<h1>这是产品风格的布局</h1>

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

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

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

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

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

<?php
/**
 * @package     文章组件的产品风格布局 代码演示
 */
 // echo "<pre>";
	// print_r($this->item);//查看模型的数据
 // echo "</pre>";
 
?>
<h1><?php echo $this->item->title;?></h1>
<div class="alert"><?php echo $this->item->introtext;?></div>

 效果截图如下：

 

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

高级功能的使用

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解码。然后获得值

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

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