????????

典型的模板目錄結構
　　Joomla！ CMS模板使用目錄和文件的結構，但它們可能因模板而異
　　網站模板（可以更改網站外觀的模板）可以在 /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 - 包含模板使用的所有語言文件
　　根據模板設計的復雜行可能還包含：

　　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

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

• templateDetails.xml

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

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

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

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

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

• 
  

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

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

  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的實現將因模板而異，它可以是簡單的或復雜的，這取決于模板提供的功能。 以默認的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! 該文件中的數據將用于擴展，在本例中為模板。 所有模板數據都包含在此<extension>標簽中，文件通過關閉此標簽</extension>結束。

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

  ?

  基本詳情

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

  模板基本詳情在 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編輯器中可見

  ?

  模板詳情示例

  ?

  目錄結構

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

  下面是默認Protostar模板的文件和文件夾結構。這是一個相當標準的文件結構為基本的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的文件目錄視圖

  ?

  模塊位置

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

  這些是默認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>標簽創建一個模塊位置，該位置可以從模塊管理器中的位置列表和Joomla!的其他區域中獲得，其中可以選擇模塊位置。

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

  ?

  語言

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

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

  這是默認Protostar模板的語言文件夾和文件結構：

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

  ?

  參數

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

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

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

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

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

  Protostar高級參數屏

  ?

  <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”>標記包含所有參數，并使用name屬性在界面中創建“高級”選項卡。 在界面中創建另一個選項卡所需要的是另一個具有不同name屬性的<fieldset>標記。 考慮到這一點，在模板中創建所需的額外選項卡和參數相對簡單。

  ?

  其他資源

  index.php文件是網站的骨架。 Joomla!傳遞的每一頁都是“index.php”從數據庫選擇內容插入填充的。

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

  這里是一個例子：

  傳統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代碼的位從數據庫中查找頭部分。聰明的部分是這兩個腳本將向用戶提供相同的代碼。如果你看一下joomla網站的代碼，所有的<?php blah />將被正常的html代碼所取代。

  好的模板設計

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

  為什么是index.php？

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

????

轉載于:https://blog.51cto.com/12902932/1924610

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。