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 th
e 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存档中到,您可以通过管理⾯板将其下载并安装在您的⽹站上。
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 sys
tem. 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 –预览模板的图⽚
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 l
让我们考虑l的简化版本
After header
后标头
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE install PUBLIC "-//Joomla! 2.5//DTD template 1.0//EN" "/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" "/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</copyright><!-- template's author-->
<authorEmail>admin@website</authorEmail><!-- e-mail -->
<authorUrl>www.website</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 -->
免费管理系统html模板<copyright>Copyright © 2015 website</copyright><!-- template's author-->
<authorEmail>admin@website</authorEmail><!-- e-mail -->
<authorUrl>www.website</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="www.website" target="_blank">This is the simplest template!</a>.</p>
]]></description>
<description>
<![CDATA[ <h1> My template </h1>
<p>Created
<a href="www.website" target="_blank">This is the simplest template!</a>.</p>
]]></description>
All files required for the template must be described l
模板所需的所有⽂件必须在l中进⾏描述
<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&l</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&l</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 ):
位置通常位于div块内部。 这是如何定位位置的⽰例(来⾃⽹站):
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>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论