< 返回 5.2 给模板增加CSS文件,JS文件-v0.0.2版本 - C计划

在这一节中,大家将看到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. 1,为了方便跟踪我们模板的版本信息,修改了version属性的值。原先是v0.0.1 ,现在改为v0.0.2. 
  2. 2,为了记录当前版本是何时发布的,我们增加了一个creationDate结点。
  3. 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代码的时候,有可能出现拼写错误的问题。我们可以通过后台开启调试模式,及时发现此类问题。开启的方法如下:

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

C计划

第3章:Joomla模板机制
第13章:让模板支持多语言
  • 内容提要
  • 留言讨论 (0)
  • 视频教程
在这一节中,大家将看到planc模板的v0.0.2版本。通过对v0.0.2版本的学习,我们可以知道如何在模板中增加CSS文件和JS文件

评论 (0)

  • 最新在前
  • 最佳在前

内容待完善

该课程提供视频版,可以观看完整的视频教程