????????

典型的模板目錄結(jié)構(gòu)
　　Joomla！ CMS模板使用目錄和文件的結(jié)構(gòu)，但它們可能因模板而異
　　網(wǎng)站模板（可以更改網(wǎng)站外觀的模板）可以在 /templates 目錄中找到。例如，如果您的模板稱為“mytemplate”，那么它將被放置在文件夾中：

<path-to-Joomla!>/templates/mytemplate

　　管理員模板（更改站點的管理員部分的模板）可以在 /administrator/templates目錄中找到。例如，如果您的管理員模板名為“myadmintemplate”，那么它將被放置在文件夾中：

<path-to-Joomla!>/administrator/templates/myadmintemplate

?

　　

? ? 模板目錄

　　典型的Joomla!模板將包括以下目錄：

　　css - 包含所有的 .css 文件
　　html -?包含核心輸出和模塊chrome的模板覆蓋文件
　　p_w_picpaths - 包含模板使用的所有圖片
　　language - 包含模板使用的所有語言文件
　　根據(jù)模板設(shè)計的復雜行可能還包含：

　　javascript - 包含支持模板添加功能的Javascript

?

　 目錄示例

　　模板的典型路徑為 <root>/public_html/domain-name/template/<模板名稱>，其中將包含基于您的模板的以下目錄和文件。?

/css/html/p_w_picpaths/javascript/language component.php error.php favicon.ico index.php templateDetails.xml template_preview.png template_thumbnail.png

?

　模板文件

　　一般模板至少應該包含以下文件：

• index.php

• 提供用于顯示和定位模塊和組件的邏輯。

• component.php

• 提供用于顯示打印機友好頁面的邏輯，如“E-mail this link to a friend.”等.

• error.php

• 提供用于處理如404，page not found 錯誤的方法。

• favicon.ico

• favicon 圖標文件

• template.css

• 用于處理模板的顯示方面，包括邊距，字體，標題，圖像邊框，列表格式等的規(guī)范。?.css文件也可位于 /css?目錄中。

• templateDetails.xml

• 保存與模板相關(guān)的元信息，由安裝程序和模板管理器使用。

• template_preview.ext?-?使用圖片的擴展格式（.jpg，.png，.gif）替換.ext

• 通常，在 模板管理->模板 中點擊縮略圖顯示一個600x400像素的圖片，而不是在?模板管理->樣式 中。在將模板應用到站點之前給管理員一個彈出窗口。

• template_thumbnail.ext?-?使用圖片的擴展格式（.jpg，.png，.gif）替換.ext

• 通常，在 模板管理->模板 中點擊縮略圖顯示一個200x150像素的圖片，而不是在?模板管理->樣式 中。?這樣可以讓管理員在將模板應用到站點之前可以瀏覽模板的縮略圖。

• 
  

• Joomla!模板需要 templateDetail.xml 文件，這個文件可以在任何模板的根目錄下找到。這個XML文件包含Joomla!為了在后端顯示和提供模板選項所需要的基本元素據(jù)。它也包含很多用于提供關(guān)于模板，模板作者，定義文件、文件夾的信息。它也定義模板在后端提供的模板語言文件、參數(shù)和設(shè)置。

  templateDetail 文件使用一個相當基本的XML格式和結(jié)構(gòu)。這個XML文件中的數(shù)據(jù)被分成不同的部分并特別格式化以呈現(xiàn)不同的片段和參數(shù)。通過Joomla!核心提供的強大工具讀取和解析XML數(shù)據(jù)。然后渲染以注冊模板并創(chuàng)建在模板管理器中看到的顯示。這為模板開發(fā)人員提供了一種相對簡單的方法來創(chuàng)建在模板中使用的任務(wù)，設(shè)置和參數(shù)

  The implementation of?templateDetails.xml?will vary from template to template, it can be simple or complex depending on what features the template offers. The default Joomla! 3 Protostar template serves as an excellent example to demonstrate how this file is used. The various sections of this file are explained below.

  templateDetails.xml的實現(xiàn)將因模板而異，它可以是簡單的或復雜的，這取決于模板提供的功能。 以默認的Joomla！ 3 Protostar模板作為一個很好的例子來演示如何使用這個文件。 此文件的各個部分解釋如下。

  ?

  XML格式

  每個templateDetails.xml文件的頂部兩行需要首先定義XML格式和DOCTYPE。

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

  下一行也是必需的，因為它告訴Joomla! 該文件中的數(shù)據(jù)將用于擴展，在本例中為模板。 所有模板數(shù)據(jù)都包含在此<extension>標簽中，文件通過關(guān)閉此標簽</extension>結(jié)束。

  1	<extension?version="3.1" type="template" client="site">

  ?

  基本詳情

  第一部分通常是模板開發(fā)人員包括關(guān)于模板的信息。 諸如名稱，日期，聯(lián)系信息，版權(quán)，版本號和基本描述的信息是常見的。 此數(shù)據(jù)在模板管理器中使用，并顯示在可用模板列表中，也可以顯示在模板編輯屏幕中。

  模板基本詳情在 Template Manager > Templates 中可見

  ?

  模板詳情示例

  ?

  Protostar XML 代碼的基本詳情:

  <extension?version="3.1"?type="template"?client="site"><name>protostar</name><version>1.0</version><creationDate>4/30/2012</creationDate><author>Kyle?Ledbetter</author><authorEmail>admin@joomla.org</authorEmail><copyright>Copyright?(C)?2005?-?2014?Open?Source?Matters,?Inc.?All?rights?reserved.</copyright><description>TPL_PROTOSTAR_XML_DESCRIPTION</description>

  您可能會注意到，此代碼（描述）的最后一行包含語言字符串，而不是實際描述。 這個字符串引用了模板中實際描定義和寫入描述的語言文件。這是Joomla中的首選方法，對于為公共使用分配的擴展以適應國際語言支持，但是如果翻譯不是一個問題，可以簡單地鍵入描述。 語言文件也在templateDetails.xml文件中的語言部分中定義，本文后面將對此進行更詳細的介紹。

  模板描述在Protostar編輯器中可見

  ?

  模板詳情示例

  ?

  目錄結(jié)構(gòu)

  關(guān)于模板安裝的所有文件夾都列示于此。所有位于模板根目錄的文件和文件夾在安裝期間需要被羅列在此。自動包括列出的文件夾中包含的任何文件。每個文件夾包含從模板根目錄開始的完整路徑信息。 管理員安裝程序在安裝期間存儲文件時使用此信息。

  下面是默認Protostar模板的文件和文件夾結(jié)構(gòu)。這是一個相當標準的文件結(jié)構(gòu)為基本的Joomla！模板。

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

  J3 Protostar的文件目錄視圖

  ?

  模塊位置

  可在模板中使用的可用模塊位置在此區(qū)域中定義。

  這些是默認Protostar模板中定義的模塊位置：

  <positions><position>banner</position><position>debug</position><position>position-0</position><position>position-1</position><position>position-2</position><position>position-3</position><position>position-4</position><position>position-5</position><position>position-6</position><position>position-7</position><position>position-8</position><position>position-9</position><position>position-10</position><position>position-11</position><position>position-12</position><position>position-13</position><position>position-14</position><position>footer</position> </positions>

  位置列表包含在<positions>標簽中。每個<position>標簽創(chuàng)建一個模塊位置，該位置可以從模塊管理器中的位置列表和Joomla!的其他區(qū)域中獲得，其中可以選擇模塊位置。

  位置列表的簡單格式意味著它可以很容易地定制。 例如，要向列表中添加新的模塊位置，只需在<positions>標簽中添加一個新的<position>標簽，其中使用全部小寫字母，且不含空格的唯一名稱。 請記住，這只會將位置添加到后端，并且需要在其他模板文件中進行額外開發(fā)以在前端渲染新位置。

  ?

  語言

  有的模板也許包括語言文件以便允許模板中的靜態(tài)文本翻譯。請注意語言文件夾已經(jīng)定義并且還包含其中的兩個語言文件。雖然語言文件夾是之前定義的，但這些文件需要自己的定義。這個方法告訴Joomla! 包含模板使用的字符串的語言文件在哪兒。

  第一個文件保存用戶將要查看的文本的語言文件。帶有.sys或system擴展名的第二個文件用于將在管理員區(qū)域中查看的文本。

  這是默認Protostar模板的語言文件夾和文件結(jié)構(gòu)：

  <languages?folder="language"><language?tag="en-GB">en-GB/en-GB.tpl_protostar.ini</language><language?tag="en-GB">en-GB/en-GB.tpl_protostar.sys.ini</language> </languages>

  語言字符串在模板和Joomla!中使用，以便利用Joomla!中廣泛的國際語言支持功能。此方法為開發(fā)人員和用戶提供了相對簡單的方法來翻譯模板和擴展屏幕中使用的任何文本。 Joomla! 將檢查所使用的任何語言字符串的語言文件，并以用戶選擇的語言加載相應的文本代替字符串。 在這種情況下，只有英語文件（en-GB），任何其他語言的文本翻譯必須由用戶或開發(fā)人員提供，然后Joomla!才能使用。

  ?

  參數(shù)

  模板可以提供顯示選項和管理員可以在模板管理器中選擇的其他參數(shù)。例如，默認的Protostar模板允許管理員更改各種顏色，字體和添加標志，這些參數(shù)位于高級選項卡下，也由XML參數(shù)定義和創(chuàng)建。

  模板參數(shù)包含在<config>標記中，該標記包含具有名稱屬性為“params”的<fields>標記。在<fields>標簽中，定義了參數(shù)組和各個參數(shù)。 <fieldset>標記用于創(chuàng)建參數(shù)組。各個參數(shù)使用<field>標簽定義。

  每個<fieldset>和<fieldset>中的每個<field>參數(shù)都需要由name屬性定義的唯一名稱。此名稱定義參數(shù)本身，用于將設(shè)置傳遞到前端文件。每個參數(shù)還應包含標簽屬性和描述屬性。標簽文本隨設(shè)置屏幕中的參數(shù)一起顯示，以標識使用的設(shè)置，并且可以在說明中包括更詳細的信息。

  參數(shù)字段實際上可以是具有相應選項的任何類型的表單輸入，這由類型屬性選擇。任何必需的選項，如單選按鈕或選擇選項，都在<option>標簽中定義。 CSS類名可以用class屬性定義。并且可以使用默認屬性定義默認參數(shù)設(shè)置。

  下面是默認Protostar模板中的參數(shù)定義。在本示例中，所有標簽，描述和選項都使用上一節(jié)中定義的語言文件中的語言字符串定義，以及一些來自Joomla！核心，因此它們可以根據(jù)需要翻譯成不同的語言。

  Protostar高級參數(shù)屏

  ?

  <config><fields?name="params"><fieldset?name="advanced"><field?name="templateColor"?class=""?type="color"?default="#08C"label="TPL_PROTOSTAR_COLOR_LABEL"description="TPL_PROTOSTAR_COLOR_DESC"?/><field?name="templateBackgroundColor"?class=""?type="color"?default="#F4F6F7"label="TPL_PROTOSTAR_BACKGROUND_COLOR_LABEL"description="TPL_PROTOSTAR_BACKGROUND_COLOR_DESC"?/><field?name="logoFile"?class=""?type="media"?default=""label="TPL_PROTOSTAR_LOGO_LABEL"description="TPL_PROTOSTAR_LOGO_DESC"?/><field?name="sitetitle"??type="text"?default=""label="JGLOBAL_TITLE"description="JFIELD_ALT_PAGE_TITLE_LABEL"filter="string"?/><field?name="sitedescription"??type="text"?default=""label="JGLOBAL_DESCRIPTION"description="JGLOBAL_SUBHEADING_DESC"filter="string"?/><field?name="googleFont"type="radio"class="btn-group?btn-group-yesno"default="1"label="TPL_PROTOSTAR_FONT_LABEL"description="TPL_PROTOSTAR_FONT_DESC"><option?value="1">JYES</option><option?value="0">JNO</option></field><field?name="googleFontName"?class=""?type="text"?default="Open+Sans"label="TPL_PROTOSTAR_FONT_NAME_LABEL"description="TPL_PROTOSTAR_FONT_NAME_DESC"?/><field?name="fluidContainer"type="radio"class="btn-group?btn-group-yesno"default="0"label="TPL_PROTOSTAR_FLUID_LABEL"description="TPL_PROTOSTAR_FLUID_DESC"><option?value="1">TPL_PROTOSTAR_FLUID</option><option?value="0">TPL_PROTOSTAR_STATIC</option></field></fieldset></fields></config>

  Protostar模板說明了XML可以在模板界面中使用的幾種不同方式，但還有更多的可能性。 在此示例中，<fieldset name =“advanced”>標記包含所有參數(shù)，并使用name屬性在界面中創(chuàng)建“高級”選項卡。 在界面中創(chuàng)建另一個選項卡所需要的是另一個具有不同name屬性的<fieldset>標記。 考慮到這一點，在模板中創(chuàng)建所需的額外選項卡和參數(shù)相對簡單。

  ?

  其他資源

  index.php文件是網(wǎng)站的骨架。 Joomla!傳遞的每一頁都是“index.php”從數(shù)據(jù)庫選擇內(nèi)容插入填充的。

  模板的index.php文件包含將按原樣傳遞的代碼和php代碼的混合，在傳遞之前將對其進行修改。 任何設(shè)計了簡單的html網(wǎng)頁的人都會熟悉這個代碼：有兩個主要部分 - <head>和<body>。 index.php不同的地方是使用php代碼插入從數(shù)據(jù)庫中選擇的信息。

  這里是一個例子：

  傳統(tǒng)HTML頭部：

  <head> <title>My?Example?Webpage</title> <meta?name="title"?content="example"?/> <link?rel="stylesheet"?href="www.example.com/css/css.css"?type="text/css"?/> </head>

  Joomla!的做法：

  <head> <jdoc:include?type="head"?/> <link?rel="stylesheet"?href="<?php?echo?$this->baseurl??>templates/mytemplate/css/css.css"?type="text/css"?/> </head>

  ?

  因此，不是在index.php文件上定義這些頭部分，而是通過php代碼的位從數(shù)據(jù)庫中查找頭部分。聰明的部分是這兩個腳本將向用戶提供相同的代碼。如果你看一下joomla網(wǎng)站的代碼，所有的<?php blah />將被正常的html代碼所取代。

  好的模板設(shè)計

  index.php應該是簡潔的，因為它會在每次加載新頁面時重新發(fā)送。元素（如樣式）應在保存在用戶緩存中的css文件中提供。這里的教程將介紹創(chuàng)建index.php的技術(shù)方面。

  為什么是index.php？

  Index.htm歷史上是給予網(wǎng)站主頁的名稱。因此，當用戶導航到www.example.org時，網(wǎng)絡(luò)服務(wù)器提供www.example.org/index.htm。因為Joomla!是用PHP編寫的，index.php是自動提供的文件。更復雜的是，當用戶導航到j(luò)oomla網(wǎng)站時，根目錄的index.php重定向到當前默認模板的index.php。

????

轉(zhuǎn)載于:https://blog.51cto.com/12902932/1924610

總結(jié)

以上是生活随笔為你收集整理的理解Joomla!模板的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。