5.2 给模板增加CSS文件，JS文件-v0.0.2版本

在这一节中，大家将看到planc模板的v0.0.2版本。通过对v0.0.2版本的学习，我们可以知道如何在模板中增加CSS文件和JS文件

1，本节目标

了解如何给模板增加CSS,JS文件

2，v0.0.2版本

废话少说，直接献上v0.0.2版本的源码。大家可以直接下载：tpl_plancv0.0.2_2019-01-06_for_j3x.zip

3，v0.0.2版本的效果

安装v0.0.2版本后，我们再次刷新前台，可以看到如下图：

通过上面的两个图，我们可以断定，当前的模板的JS和CSS已经被成功的加载了

4，本版本的改进

4.1 创建JS和CSS资源

在v0.0.2版本中，我们的目标是给模板增加css和js文件。因此，做的第一件事，就是在planc目录下新建了两个文件夹，JS和CSS.

在CSS目录下，增加了一个template.css文件（文件名任取），内容如下：

body{
    color: #ff0000;
}

在JS目录下，增加了一个template.js文件（文件名任取），内容如下：

alert("js ok");

这两个文件的内容都非常的简单，主要是用来测试是否在模板中真的成功加载了文件。

3.2 在模板的入口文件中引入资源

为了让模板加载上面的文件，需要修改模板的入口点文件index.php. 新版本的index.php内容如下：

<?php
//JS文件的路径
$cssFile = "templates/planc/css/template.css";
$jsFile = "templates/planc/js/template.js";

//得到文档对象
$doc = JFactory::getDocument();

//向文档中加入CSS
$doc->addStyleSheet($cssFile);
//向文档中加入JS
$doc->addScript($jsFile);
?>
<!DOCTYPE html>
<html>
	<head>
<jdoc:include type="head" />
	</head>
	<body>
Joomla中文网(http://www.joomlachina.cn)，学习Joomla从这里开始！
	</body>
</html>

整个代码并没有什么难以理解的地方。

首先我们使用全局的JFactory对象的getDocument()方法得到文档对象

//得到文档对象
$doc = JFactory::getDocument();

然后分别使用文档对象的 addStyleSheet() 和 addScript() 方法向文档中引入css和JS文件。

//向文档中加入CSS
$doc->addStyleSheet($cssFile);
//向文档中加入JS
$doc->addScript($jsFile);

addStyleSheet()和addScrip()方法接受一个参数，就是需要加入文件的路径。

4，JDOC语法

可能你会很奇怪，为什么调用了$doc->addStyleSheet()和$doc->addScript()方法，模板中就加载了css，js文件呢。这里就需要谈到一个非常重要的知识点，JDOC语法。

在上面的代码HTML部分，如果仔细观察，你会看到下面奇怪的代码（这些代码明显不是html标签。）

        <jdoc:include type="head" />

写过html的朋友都知道，一般会在<head>标签中写入需要引入的css，js资源。但在Joomla模板中，需要在head中加入<jdoc：include type="head"/>声明。这个JDOC是joomla模板的语法。在真正模板执行的时候，joomla系统会解析<jdoc />中的内容，将其进行替换。比如这里的type="head"，就会被$doc文档对象进行解析，替换为我们指定需要加载的资源（css,js）链接

5，对于模板templateDetails.xml文件的改进

我们已经知道了templateDetails.xml文件的作用是向系统详细的说明模板信息。在v0.0.2版本中，我们也对这个文件做了一点修改。如下：

<?xml version="1.0" encoding="utf-8"?>
<extension version="3.0" type="template" method="upgrade" client="site">
	<name>planc</name>
    <version>0.0.2</version>
	<creationDate>2019-01-06</creationDate>
	<files>
<filename>index.php</filename>
<folder>css</folder>
<folder>js</folder>
	</files>
</extension>

主要的修改如下：

1，为了方便跟踪我们模板的版本信息，修改了version属性的值。原先是v0.0.1 ,现在改为v0.0.2.
2，为了记录当前版本是何时发布的，我们增加了一个creationDate结点。
3，因为需要引入css,js文件。所以在files结点的下面，我们增加了<folder>css</folder><folder>js</folder>

需要重点注意：在为joomla模板打包的时候，必须在files结点中明确的说明，我们的模板需要使用的文件或者文件夹有哪些。否则，系统会提示文件丢失

6，重要内容总结

1，为了要在模板中加入css,js等文件，我们需要做两步，第一步，在html的<head>标签中加入 <jdoc：include type="head"/> .第二步使用JFactory::getDocuemnt（）方法获得文档对象，然后调用文档对象的addStyleSheet()和addScript()方法来引入文件

2，为了更好的记录模板的相关信息，我们可以使用version，creationDate这两个字段来记录当前模板的信息。在为joomla模板打包的时候，必须在files结点中明确的说明，我们的模板需要使用的文件或者文件夹有哪些。否则，系统会提示文件丢失

7,开启后台调试模式

在写PHP代码的时候，有可能出现拼写错误的问题。我们可以通过后台开启调试模式，及时发现此类问题。开启的方法如下：

在后台->系统信息全局设置中的服务器选项卡中将错误报告设置为开发。如图：

作者：张敏

原文：http://www.joomlachina.cn/articles/1821-jiaocheng/joomla-plan-c/1526-first-template-6?tmpl=component&zhuanti=1

5.2 给模板增加CSS文件，JS文件-v0.0.2版本

1，本节目标

2，v0.0.2版本

3，v0.0.2版本的效果

4，本版本的改进

4，JDOC语法

5，对于模板templateDetails.xml文件的改进

6，重要内容总结

7,开启后台调试模式

Joomla模板开发教程

获取最新资讯

基础学习教程

Joomla系列教程

站内链接