joomla新建模板_Joomla模板设计

joomla新建模板

Joomla template example. This is our first article on this CMS. Today we talk about Joomla template design for front-end developer completely unfamiliar with CMS. Joomla is one of the most popular content management system (CMS) that allows you to create websites fast and easy. Therefore, we decided not to bypass the script and make our own review. We will not make a simple overview of the system, which may seem rather boring, but we take something more interesting – the process of creating your own template. We also describe the structure of the templates in Joomla and other important things.

Joomla模板示例。 这是我们有关此CMS的第一篇文章。 今天，我们为完全不熟悉CMS的前端开发人员讨论Joomla模板设计。 Joomla是最受欢迎的内容管理系统(CMS)之一，它使您可以快速轻松地创建网站。 因此，我们决定不绕过脚本并进行我们自己的审查。 我们不会对系统进行简单的概述，这看起来可能很无聊，但是我们采取了一些更有趣的方法-创建自己的模板的过程。 我们还将在Joomla和其他重要内容中描述模板的结构。

Joomla CMS的基本概念： (Basic concepts of the Joomla CMS:)

Template – a set of folders / files that define the layout and design of the pages. You can have many installed templates on one website. Thus it is possible to change the design of the website in a few seconds, switching from one template to another.

模板 –一组定义页面布局和设计的文件夹/文件。 一个网站上可以安装许多模板。 因此，可以在几秒钟内更改网站的设计，从一个模板切换到另一个模板。

HTML template has specified areas of the page (usually – div blocks), in which will be displayed certain content. For example, in the central area, the main page content is displayed. The owner / author of the site can create articles using the built-in editor WYSIWYG, which will be displayed in this area.

HTML模板具有页面的指定区域(通常是-div块)，将在其中显示某些内容。 例如，在中央区域中，显示主页内容。 网站的所有者/作者可以使用内置编辑器“所见即所得”创建文章，该文章将显示在该区域中。

Also, we can define other areas in the HTML template to display different objects. Typically, these areas are: header of the document (that is always displayed at the top), the footer (what is displayed at the bottom), the area for the menu, additional areas for the sides. It all depends on the desire of the template’s author. These areas are called positions.

另外，我们可以在HTML模板中定义其他区域以显示不同的对象。 通常，这些区域是：文档的页眉(始终显示在顶部)，页脚(底部显示)，菜单区域，侧面的其他区域。 这完全取决于模板作者的需求。 这些区域称为职位。

In the template there are other features that will be described further.

在模板中，还有其他功能将进一步描述。

Module – an object with HTML / PHP / CSS / JavaScript code that can be displayed in certain designated areas of the page. Example of typical models: language switcher, authorization block, search on the site, voting, etc.

模块 –具有HTML / PHP / CSS / JavaScript代码的对象，可以在页面的某些指定区域中显示。 典型模型的示例：语言切换器，授权块，在站点上搜索，投票等。

Plugin – an object with HTML / PHP / CSS / JavaScript code that can be embedded into the page content. The main difference from the module is the place where the plugin appears on the page. Article’s author, during working in WYSIWYG editor will be able to insert some code (similar to HTML code). On the site, this code will be replaced by a similar object module.

插件 –具有HTML / PHP / CSS / JavaScript代码的对象，可以将其嵌入页面内容中。 与模块的主要区别在于插件在页面上的显示位置。 Article的作者，在所见即所得的编辑器中工作期间，将能够插入一些代码(类似于HTML代码)。 在站点上，此代码将被类似的对象模块代替。

Component – a global object that has a lot of settings. Typically, in addition, modules and plugins come to the component. For example, a component may be a guest book, e-commerce shop, forum and so on. All these objects have a variety of settings and can be shown on a separate page.

组件 –具有很多设置的全局对象。 通常，此外，模块和插件也包含在组件中。 例如，组件可以是留言簿，电子商务商店，论坛等。 所有这些对象都有各种设置，可以显示在单独的页面上。

WYSIWYG editor – online text editor (what you see is what you get). Using a simplified panel similar to the panel of Microsoft Word or WordPad, you can create articles that the editor will automatically convert into HTML code.

所见即所得编辑器 –在线文本编辑器( 所见即所得 )。 使用类似于Microsoft Word或WordPad面板的简化面板，可以创建文章，编辑器会自动将其转换为HTML代码。

Modules, plugins and components are extensions. With extensions, by installing the CMS, you can make anything you want: online store, blog, forum and so on. All extensions are available in a zip archive, which you can download and install on your site through the admin panel.

模块，插件和组件是扩展 。 通过扩展，通过安装CMS，您可以创建所需的任何东西：在线商店，博客，论坛等。 所有扩展都可以在zip存档中找到，您可以通过管理面板将其下载并安装在您的网站上。

The main extension directory is a directory on official Joomla website http://extensions.joomla.org/

主要扩展目录是Joomla官方网站http://extensions.joomla.org/上的目录

Downloading from it you can be with some certainty that the extension does not contain any malware or adware code.

您可以肯定地下载该扩展程序不包含任何恶意软件或广告软件代码。

At least, I would like to believe that all of these extensions are mercilessly deleted from the catalog in a timely manner. I prefer popular and proven extension, as their developers value their reputation.

至少，我想相信所有这些扩展都会被无情地从目录中及时删除。 我更喜欢流行且经过验证的扩展，因为他们的开发人员重视自己的声誉。

CMS itself is developed all the time, and during this time, the development passes through stages of global changes, which manifested in the fact that at the moment there are several versions of the system. This is version 1.5, version 2.5 and version 3.x (3.x means that the version 3 are compatible with each other – 3.1 3.2 and 3.3). If you have a site on Joomla 2.5 version, only extension on that version will suit your website, extension of different versions are not compatible.

CMS本身一直在开发，并且在此期间，开发经历了全局变更的阶段，这一点体现在目前系统有多个版本的事实中。 这是版本1.5，版本2.5和版本3.x(3.x表示版本3彼此兼容– 3.1 3.2和3.3)。 如果您的网站采用Joomla 2.5版本，则只有该版本的扩展名适合您的网站，不同版本的扩展名不兼容。

You can find thousands of free and paid templates with ready designs, that you can modify to your taste, but very often, they contain a lot of unnecessary (for you) function. More professional approach is to create your own template.

您可以找到成千上万个具有免费设计模板的免费和付费模板，可以根据自己的喜好进行修改，但是通常，它们包含许多不必要的功能(对您而言)。 更专业的方法是创建自己的模板。

A blank template is quite possible to find in the Internet, but you can create it from scratch.

在Internet上很可能会找到一个空白模板，但是您可以从头开始创建它。

A template is a folder archived in zip.

模板是一个以zip存档的文件夹。

Template consists of the following files:

模板包含以下文件：

index.php – main file that describes the structure and design of the page

index.php –描述页面结构和设计的主文件

component.php – display pages in a suitable form for the printer

component.php –以适合打印机的形式显示页面

error.php – representation for 404 pages

error.php – 404页的表示形式

favicon.ico – icon for the website

favicon.ico –网​​站的图标

template_preview.png and template_thumbnail.png – preview pictures of the template

template_preview.png和template_thumbnail.png –预览模板的图片

templateDetails.xml – description of the template.

templateDetails.xml – 模板的描述。

For the convenience of structuring within the folder are also sub-folders with clear names:

为了方便在文件夹中进行结构化，还使用了具有清晰名称的子文件夹：

css – for styles

CSS –适用于样式

images – for images

图片 –图片

js – for scripts

js –用于脚本

language – for ini files with translations into different languages.

语言 –用于翻译成不同语言的ini文件。

Please note that for security reasons, each folder must have an empty index.html file

请注意，出于安全原因，每个文件夹必须有一个空的index.html文件

You can find html folder in the template folder. This folder contains the change in appearance to any Joomla components – the so-called override.

您可以在模板文件夹中找到html文件夹。 此文件夹包含所有Joomla组件的外观更改-所谓的替代。

In general, the structure of the template remains unchanged for Joomla versions 1.5, 2.5 and 3.x

通常，对于Joomla版本1.5、2.5和3.x，模板的结构保持不变。

Let us consider a simplified version of the templateDetails.xml

让我们考虑templateDetails.xml的简化版本

After header

后标头

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.6/template-install.dtd">

follows the main tag:

遵循主要标签：

<extension version="2.5" type="template" client="site">

<extension version="2.5" type="template" client="site">

Next header with the description of the template:

下一个标头，其中包含模板说明：

<name>blanktemplate</name><!-- name of your template -->
<creationDate>2015-01-01</creationDate><!-- template's date -->
<author>your name</author><!-- author's name -->
<copyright>Copyright © 2015 website.com</copyright><!-- template's author-->
<authorEmail>admin@website.com</authorEmail><!-- e-mail -->
<authorUrl>http://www.website.com</authorUrl><!-- your website -->
<version>1.0.0</version><!-- template's version -->

<name>blanktemplate</name><!-- name of your template -->
<creationDate>2015-01-01</creationDate><!-- template's date -->
<author>your name</author><!-- author's name -->
<copyright>Copyright © 2015 website.com</copyright><!-- template's author-->
<authorEmail>admin@website.com</authorEmail><!-- e-mail -->
<authorUrl>http://www.website.com</authorUrl><!-- your website -->
<version>1.0.0</version><!-- template's version -->

Further, as a rule, is a description of the template, which can be arranged with HTML:

此外，通常是模板的描述，可以使用HTML进行安排：

<description>
<![CDATA[ <h1> My template </h1>
  <p>Created
  <a href="http://www.website.com" target="_blank">This is the simplest template!</a>.</p>
]]></description>

<description>
<![CDATA[ <h1> My template </h1>
  <p>Created
  <a href="http://www.website.com" target="_blank">This is the simplest template!</a>.</p>
]]></description>

All files required for the template must be described in templateDetails.xml

模板所需的所有文件必须在templateDetails.xml中进行描述

<files>
  <folder>css</folder>
  <folder>images</folder>
  <folder>js</folder>
  <folder>language</folder>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.php</filename>
  <filename>index.html</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>favicon.ico</filename>
  <filename>templateDetails.xml</filename>
</files>

<files>
  <folder>css</folder>
  <folder>images</folder>
  <folder>js</folder>
  <folder>language</folder>
  <filename>component.php</filename>
  <filename>error.php</filename>
  <filename>index.php</filename>
  <filename>index.html</filename>
  <filename>template_preview.png</filename>
  <filename>template_thumbnail.png</filename>
  <filename>favicon.ico</filename>
  <filename>templateDetails.xml</filename>
</files>

If you do not forget, the pages of our site will be divided into areas – positions.

如果您没有忘记，我们网站的页面将分为区域-位置。

Positions are usually located inside of div blocks. This is example of how positions can be located (from the site joomla.org):

位置通常位于div块内部。 这是如何定位位置的示例(来自网站joomla.org)：

These positions also need to be specified in the description of the template. You can use your own names, or you can follow the standard names:

这些位置也需要在模板说明中指定。 您可以使用自己的名称，也可以遵循标准名称：

<positions>
 <position>top</position>
 <position>footer</position>
<position>debug</position>
</positions>

<positions>
 <position>top</position>
 <position>footer</position>
<position>debug</position>
</positions>

If you have a multilingual site, you need to describe all the used languages

如果您有多语言站点，则需要描述所有使用的语言

<languages folder="language">
  <language tag="en-GB">en-GB/en-GB.tpl_blanktemplate.ini</language>
  <language tag="de-DE">de-DE/de-DE.tpl_blanktemplate.ini</language>
</languages>

<languages folder="language">
  <language tag="en-GB">en-GB/en-GB.tpl_blanktemplate.ini</language>
  <language tag="de-DE">de-DE/de-DE.tpl_blanktemplate.ini</language>
</languages>

This description implies that inside the language folder, here are 2 subfolders: en-GB and de-DE which contain files with translations. These files contain the text in the form of “key = value”. Name of the key must be in capital letters.

此描述意味着在language文件夹中有两个子文件夹： en-GB和de-DE ，其中包含带翻译的文件。 这些文件包含“键=值”形式的文本。 密钥名称必须使用大写字母。

For Example:

例如：

DEMOTEXT = "Sample Text"

DEMOTEXT =“样本文本”

Also the template can describe various switches for changing settings template which can be changed by a simple user or administrator of the site (not a programmer). On the site, switches look like the following:

该模板还可以描述用于更改设置模板的各种开关，这些开关可以由站点的简单用户或管理员(而不是程序员)来更改。 在站点上，开关如下所示：

For example, consider the opportunity to create some color. We will create one of the switches. To do this, add the following piece of code:

例如，考虑创造一些颜色的机会。 我们将创建其中一个开关。 为此，请添加以下代码：

<config>
  <fields name="params">
    <fieldset name="basic">
      <field name="templateBGColor" class="" type="color" default="#FFFFFF" label="Background color" description="This is background color theme" />
    </fieldset>
  </fields>
</config>

<config>
  <fields name="params">
    <fieldset name="basic">
      <field name="templateBGColor" class="" type="color" default="#FFFFFF" label="Background color" description="This is background color theme" />
    </fieldset>
  </fields>
</config>

The value of this color will be displayed on the page.

此颜色的值将显示在页面上。

Consider now the index.php file and try to make some arrangement.

现在考虑index.php文件，并尝试进行一些安排。

In the very beginning of the file add the php code:

在文件的开头添加php代码：

<?php defined( '_JEXEC' ) or die; // this string for security reasons prohibits direct access
$doc = JFactory::getDocument(); // variable that stores a reference to the document
$tpath = $this->baseurl.'/templates/'.$this->template; // variable with relative template address
// add css style using such construction
$doc->addStyleSheet($tpath.'/css/template.css.php');
// add javasript
$doc->addScript($tpath."/js/custom.js");
?>

<?php defined( '_JEXEC' ) or die; // this string for security reasons prohibits direct access
$doc = JFactory::getDocument(); // variable that stores a reference to the document
$tpath = $this->baseurl.'/templates/'.$this->template; // variable with relative template address
// add css style using such construction
$doc->addStyleSheet($tpath.'/css/template.css.php');
// add javasript
$doc->addScript($tpath."/js/custom.js");
?>

Next, the standard header of the page:

接下来，页面的标准标题：

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">
<head>
  <jdoc:include type="head" />
</head>

<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">
<head>
  <jdoc:include type="head" />
</head>

Here <jdoc:include type = "head" /> adds typical tags into the “header”. For example, such meta tags as description, keywords, some other pluggable files, scripts, styles, and others.

在这里<jdoc：include type =“ head” />将典型标签添加到“ header”中。 例如，诸如描述，关键字，一些其他可插入文件，脚本，样式等的元标记。

In our body tag, we add in our style value a color of our switcher, so the site administrators who are unfamiliar with css, can change the background color of the page from admin console:

在body标签中，我们在样式值中添加了切换台的颜色，因此不熟悉CSS的站点管理员可以从管理控制台更改页面的背景颜色：

<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">

<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">

Then we can make our template using div-s. To display the position inside a div or other element:

然后，我们可以使用div -s制作模板。 要显示div或其他元素内的位置：

<div>
  <?php if ($this->countModules( 'footer' )) : ?>
  <jdoc:include type="modules" name="footer" />
  <?php endif; ?>
</div>

<div>
  <?php if ($this->countModules( 'footer' )) : ?>
  <jdoc:include type="modules" name="footer" />
  <?php endif; ?>
</div>

This code checks whether any of the modules to be showed at this footer position, and displays the contents of the modules. Of course, it is possible not to perform verification, and to display it anyway:

该代码检查是否在该页脚位置显示了任何模块，并显示了模块的内容。 当然，有可能不执行验证，而是始终显示它：

<jdoc:include type="modules" name="footer" />

<jdoc:include type="modules" name="footer" />

To show a different position you need to replace the footer with the name of another position.

要显示其他位置，您需要用其他位置的名称替换页脚 。

To display the main content of the page we use the following tags

为了显示页面的主要内容，我们使用以下标签

<jdoc:include type="message" />
<jdoc:include type="component" />

<jdoc:include type="message" />
<jdoc:include type="component" />

We need to put them in the correct div.

我们需要将它们放在正确的div中。

As for examples, if you haven’t forgotten, we previously created 2 folders en-GB and de-DE with language files. This text we have marked with a code word DEMOTEXT. We may display this text using the following php code:

作为示例，如果您没有忘记的话，我们之前创建了2个文件夹en-GB和de-DE及其语言文件。 我们已经用代码字DEMOTEXT标记了此文本。 我们可以使用以下php代码显示此文本：

<?php echo JText::_( 'DEMOTEXT' ) ?>

<?php echo JText::_( 'DEMOTEXT' ) ?>

Moreover, this text can be inserted into values as a parameter (eg title or alt) and as the content of paragraphs, and even in the url links.

此外，此文本可以作为参数(例如title或alt )和段落内容甚至在url链接中插入值中。

Pictures in the template are usually in the directory images. In order to display the image, use the next php code that displays the path to the folder that contains our template

模板中的图片通常位于目录图像中 。 为了显示图像，请使用下一个php代码显示包含我们模板的文件夹的路径

<?php echo $tpath; ?>

<?php echo $tpath; ?>

Variable $tpath we already declared at the beginning of the page, and we know in which template directory the picture is placed.

我们已经在页面开头声明了变量$ tpath ，我们知道图片位于哪个模板目录中。

An example of the picture logo output:

图片徽标输出的示例：

<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="doSomething()">

<img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="doSomething()">

Here, onclick = "doSomething()" runs the function from the file custom.js which we connected as an external script file.

在这里，onclick =“ doSomething()”从作为外部脚本文件连接的custom.js文件中运行该函数。

The complete code of our basic template

基本模板的完整代码

<?php defined( '_JEXEC' ) or die; // this string for security reasons prohibits direct access
$doc = JFactory::getDocument(); // variable that stores a reference to the document
$tpath = $this->baseurl.'/templates/'.$this->template; // variable with relative template address
// add css
$doc->addStyleSheet($tpath.'/css/template.css.php');
// add javasript
$doc->addScript($tpath."/js/custom.js");
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">
<head>
  <jdoc:include type="head" />
</head>
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">
<p><?php echo JText::_( 'DEMOTEXT' ) ?></p>
  <header class="header">
  <img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="doSomething()">
    <nav class="navtop" role="navigation">
      <?php if ($this->countModules( 'top' )) : ?>
      <div class="top">
      <jdoc:include type="modules" name="top" />
      </div>
      <?php endif; ?>
    </nav>
  </header>
  <main class="content">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
  </main>
  <footer class="footer">
    <?php if ($this->countModules( 'footer' )) : ?>
    <jdoc:include type="modules" name="footer" />
    <?php endif; ?>
  </footer>
  <jdoc:include type="modules" name="debug" />
</body>
</html>

<?php defined( '_JEXEC' ) or die; // this string for security reasons prohibits direct access
$doc = JFactory::getDocument(); // variable that stores a reference to the document
$tpath = $this->baseurl.'/templates/'.$this->template; // variable with relative template address
// add css
$doc->addStyleSheet($tpath.'/css/template.css.php');
// add javasript
$doc->addScript($tpath."/js/custom.js");
?>
<!doctype html>
<html lang="<?php echo $this->language; ?>" class="no-js">
<head>
  <jdoc:include type="head" />
</head>
<body style="background-color:<?php echo $this->params->get('templateBGColor', '#FFFFFF'); ?>">
<p><?php echo JText::_( 'DEMOTEXT' ) ?></p>
  <header class="header">
  <img src="<?php echo $tpath; ?>/images/logo.png" alt="Logo" onclick="doSomething()">
    <nav class="navtop" role="navigation">
      <?php if ($this->countModules( 'top' )) : ?>
      <div class="top">
      <jdoc:include type="modules" name="top" />
      </div>
      <?php endif; ?>
    </nav>
  </header>
  <main class="content">
    <jdoc:include type="message" />
    <jdoc:include type="component" />
  </main>
  <footer class="footer">
    <?php if ($this->countModules( 'footer' )) : ?>
    <jdoc:include type="modules" name="footer" />
    <?php endif; ?>
  </footer>
  <jdoc:include type="modules" name="debug" />
</body>
</html>

[sociallocker]

[社交储物柜]

打包下载

[/sociallocker]

[/ sociallocker]

This is not a problem to make a beautiful design for coders, without speaking about front-end developers.

在不谈论前端开发人员的情况下，为编码人员做出漂亮的设计并不是问题。

Website template, in fact, is a representation of the pattern MVC (model-view-controller). That is the part that is responsible for the output of information and design. Most modules and components follow the same principle.

实际上，网站模板是模式MVC(模型-视图-控制器)的表示。 这是负责信息和设计输出的部分。 大多数模块和组件遵循相同的原理。

If you want to change the appearance of a module, you can take its view and modify the HTML code to fit your needs.

如果要更改模块的外观，可以查看其模块并修改HTML代码以适合您的需求。

Often, the module’s code is updated. Vendors can remove some errors. If you want that after each module update does not change the appearance of view, you can create an override. This is the file or files that are located in the template will determine the appearance of the module.

通常，模块的代码会更新。 供应商可以消除一些错误。 如果希望在每个模块更新后不更改视图的外观，则可以创建替代。 这是一个或多个位于模板中的文件，将确定模块的外观。

This can be done in the administration panel:

这可以在管理面板中完成：

Extensions – Template manager – Templates – click on our template (get into the online editor of our template) and go to the tab Create Overrides

扩展–模板管理器–模板–单击我们的模板(进入我们的模板的在线编辑器)，然后转到选项卡“创建替代”

After you created the override, we can see that in the html folder will be added the files, or even folders. You can put html folder with these files directly to our zip -template and install on your site the ready template with already modified the appearances of the modules.

创建覆盖后，我们可以看到在html文件夹中将添加文件，甚至是文件夹。 您可以将带有这些文件的html文件夹直接放置到我们的zip -template中，并在您的站点上安装已修改模块外观的现成模板。

Try to create a template for the site and in case of success, you can easily modify views, and after that you can create your own different modules or plugins!

尝试为该站点创建一个模板，如果成功，则可以轻松地修改视图，然后可以创建自己的不同模块或插件！

翻译自: https://www.script-tutorials.com/joomla-template-design/

joomla新建模板