在我們以前的教程Joomla com_content延伸，我們已經向你展示了如何創建額外的字段（自定義字段）和顯示它們在T3布局的顯示。今天，我們回到了另一個高級教程關于Joomla的自定義字段（額外的字段），深入挖掘額外的字段和顯示你如何實現你自己的專業的產品展示在我們最近的客戶展示頁面做的。 事不宜遲，讓我們開始吧。

1：額外的字段類型

目前，T3框架支持多領域的3種類型，包括：

1.用于項目的額外字段

2.用于窗體的額外字段：菜單項、搜索、聯系人、標簽等。

3.模塊類型的額外字段 今天，我們將重點了解

# 1：文章的額外字段。

2：如何開展？ 在這個過程中有4個步驟：

1.定義每個組中的額外的字段組和額外字段

2.獲得額外的字段

3.如何使用額外的字段

4.為額外字段的樣式

2.1添加額外的字段組，并在每個組中定義額外的字段 在客戶展示，你將能夠看到以下：

1.網站的名稱：可以通過使用文章的標題來完成，所以我們不需要一個額外的字段。

2.用戶名：這是成員的用戶名在我們JoomlArt的論壇，這將是我們第一次額外字段。

3.縮略圖：這是網站的縮略圖，這將是我們的第二個額外的字段。

4.網站的網址：直接你到頁面時，懸停在網站的縮略圖，這將是我們的第三個額外的字段。

5.joomlart模板名稱：我們的客戶使用來開發他們的網站模板，這將是我們額外的第四場。

這增加了4個額外的領域，我們需要為客戶展示。下一步呢？

創建XML文件。文件所在的文件夾模板/extrafields t3_bs3_blank等。您可以在一個多個字段組中定義XML文件。在每一組中，它可以有一個或多個額外的字段。

用代碼格式化的： 定義額外的字段組：

1. <fieldset name="extra-field-group-name" label="Extra field group label" description="Extra field group description" group="extrafields">

定義額外字段：

1. <field name="extra-field-name" type="list" default="" label="Extra field name" description="Extra field description">
2. <option value="value-1">Extra field value 1</option>
3. <option value="value-2">Extra field value 2</option>
4. </field>

定義在客戶展示頁中的每個組中的額外的字段組和額外字段 客戶展示文章的完整的XML文件：

1. <?xml version="1.0" encoding="utf-8"?>
2. <form>
3. <fields name="attribs">
4. <fieldset name="extrafields" label="Extra Fields">
5. <field name="us-username" type="text" default="" label="Username" class="input-large" description="JoomlArt username"/>
6. <field name="us-url" type="text" default="" label="Url" class="input-xxlarge" description="User site url"/>
7. <field name="us-thumbnail" type="text" default="" label="Thumbnail" class="input-xxlarge" description="User site thumbnail"/>
8. <field name="us-template" type="text" default="" label="Template Name" class="input-large" description="JoomlArt template name"/>
9. </fieldset>
10. </fields>
11. </form>

以上user-sites.xml文件定義：

額外的字段組是“額外的字段”

額外的域用戶名為：美國，美國的ID，郵件，網址為，美國為模板的縮略圖。
所有額外的域的類型是“文本”

2.2獲得額外的字段 在創建額外的字段Joomla不支持，我們已經創建了一個覆蓋布局文件，我們想顯示這些額外的領域。

你可以在模板/ t3_bs3_blank / HTML / com_content /分類得到那些覆蓋布局文件。 對于客戶展示頁面，我們需要有以下的覆蓋布局文件：

showcase.php

showcase.xml

showcase_item.php

覆蓋您將需要為客戶展示的布局文件

#1: showcase.php file

1. <?php
2. /**
3. * @package Joomla.Site
4. * @subpackage com_content
5. *
6. * @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved.
7. * @license GNU General Public License version 2 or later; see LICENSE.txt
8. */
9. // no direct access
10. defined('_JEXEC') or die('Restricted access');
12. $cols = $this->params->get('num_columns', 3);
13. $span = floor(12 / $cols);
14. $key = 0;
15. $items = $this->items;
16. ?>
18. <div class="showcase<?php if ($this->params->get('pageclass_sfx')) echo ' ' . $this->params->get('pageclass_sfx'); ?>">
20. <?php if ($this->params->get('show_page_heading', 1)) : ?>
21. <div class="page-header">
22. <h1> <?php echo $this->escape($this->params->get('page_heading')); ?></h1>
23. </div>
24. <?php endif; ?>
26. <?php //JAHelper::loadModules('inline') ?>
27. <!-- Item list -->
28. <div class="showcase-items">
30. <?php foreach ($items as $item):
31. ?>
32. <?php if ($key % $cols == 0) : ?>
33. <!-- Row -->
34. <div class="row row-showcase">
35. <?php endif ?>
37. <div class="col-xs-12 col-sm-<?php echo $span ?>">
38. <?php
39. // Load category_item.php by default
40. $this->item = $item;
41. echo $this->loadTemplate('item');
42. ?>
43. </div>
45. <?php if ((($key+1) % $cols == 0) || $key+1 == count($this->items)) : ?>
46. </div>
47. <!-- // Row -->
48. <?php endif ?>
49. <?php
50. $key++;
51. endforeach; ?>
53. </div>
54. <!-- // Item list -->
56. <!-- Pagination -->
57. <?php
58. if ($this->pagination->getPagesLinks()): ?>
59. <div class="pagination-wrap">
60. <?php echo $this->pagination->getPagesLinks(); ?>
61. <p class="counter pagination-counter">
62. <?php echo $this->pagination->getPagesCounter(); ?>
63. </p>
64. </div>
65. <?php endif; ?>
66. <!-- //Pagination -->
68. </div>

#2: showcase.xml file

1. <?xml version="1.0" encoding="utf-8"?>
2. <metadata>
3. <layout title="xLayout - Showcase" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
4. <help
5. key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG"
6. />
7. <message>
8. <![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
9. </message>
10. </layout>
12. <!-- Add fields to the request variables for the layout. -->
13. <fields name="request">
14. <fieldset name="request"
15. >
17. <field name="id" type="category"
18. description="JGLOBAL_CHOOSE_CATEGORY_DESC"
19. extension="com_content"
20. label="JGLOBAL_CHOOSE_CATEGORY_LABEL"
21. required="true"
22. />
23. </fieldset>
24. </fields>
26. <!-- Add fields to the parameters object for the layout. -->
27. <fields name="params">
28. <fieldset name="basic" label="Basic">
29. <field name="display_num" type="text"
30. description="Number of items"
31. label="# Items"
32. size="3"
33. default="12"
34. />
36. <field name="num_columns" type="text"
37. description="JGLOBAL_NUM_COLUMNS_DESC"
38. label="JGLOBAL_NUM_COLUMNS_LABEL"
39. size="3"
40. />
42. <field name="orderby_pri" type="list"
43. description="JGLOBAL_CATEGORY_ORDER_DESC"
44. label="JGLOBAL_CATEGORY_ORDER_LABEL"
45. >
46. <option value="">JGLOBAL_USE_GLOBAL</option>
47. <option value="none">JGLOBAL_NO_ORDER</option>
48. <option value="alpha">JGLOBAL_TITLE_ALPHABETICAL</option>
49. <option value="ralpha">JGLOBAL_TITLE_REVERSE_ALPHABETICAL</option>
50. <option value="order">JGLOBAL_CATEGORY_MANAGER_ORDER</option>
51. </field>
53. <field name="orderby_sec" type="list"
54. description="JGLOBAL_ARTICLE_ORDER_DESC"
55. label="JGLOBAL_ARTICLE_ORDER_LABEL"
56. >
57. <option value="">JGLOBAL_USE_GLOBAL</option>
58. <option value="front">COM_CONTENT_FEATURED_ORDER</option>
59. <option value="rdate">JGLOBAL_MOST_RECENT_FIRST</option>
60. <option value="date">JGLOBAL_OLDEST_FIRST</option>
61. <option value="alpha">JGLOBAL_TITLE_ALPHABETICAL</option>
62. <option value="ralpha">JGLOBAL_TITLE_REVERSE_ALPHABETICAL</option>
63. <option value="author">JGLOBAL_AUTHOR_ALPHABETICAL</option>
64. <option value="rauthor">JGLOBAL_AUTHOR_REVERSE_ALPHABETICAL</option>
65. <option value="hits">JGLOBAL_MOST_HITS</option>
66. <option value="rhits">JGLOBAL_LEAST_HITS</option>
67. <option value="order">JGLOBAL_ORDERING</option>
68. </field>
70. <field name="order_date" type="list"
71. description="JGLOBAL_ORDERING_DATE_DESC"
72. label="JGLOBAL_ORDERING_DATE_LABEL"
73. >
74. <option value="">JGLOBAL_USE_GLOBAL</option>
75. <option value="created">JGLOBAL_CREATED</option>
76. <option value="modified">JGLOBAL_MODIFIED</option>
77. <option value="published">JPUBLISHED</option>
78. </field>
80. <field name="article_layout" type="componentlayout"
81. label="Article Layout"
82. description="JFIELD_ALT_COMPONENT_LAYOUT_DESC"
83. useglobal="true"
84. extension="com_content" view="article"
85. />
86. </fieldset>
88. <fieldset name="article" label="COM_CONTENT_ATTRIBS_FIELDSET_LABEL">
89. <field name="show_title" type="list"
90. description="JGLOBAL_SHOW_TITLE_DESC"
91. label="JGLOBAL_SHOW_TITLE_LABEL"
92. >
93. <option value="">JGLOBAL_USE_GLOBAL</option>
94. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
95. <option value="0">JHIDE</option>
96. <option value="1">JSHOW</option>
97. </field>
99. <field name="link_titles" type="list"
100. description="JGLOBAL_LINKED_TITLES_DESC"
101. label="JGLOBAL_LINKED_TITLES_LABEL"
102. >
103. <option value="">JGLOBAL_USE_GLOBAL</option>
104. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
105. <option value="0">JNO</option>
106. <option value="1">JYES</option>
107. </field>
109. <field name="show_intro" type="list"
110. description="JGLOBAL_SHOW_INTRO_DESC"
111. label="JGLOBAL_SHOW_INTRO_LABEL"
112. >
113. <option value="">JGLOBAL_USE_GLOBAL</option>
114. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
115. <option value="0">JHIDE</option>
116. <option value="1">JSHOW</option>
117. </field>
119. <field
120. name="info_block_position"
121. type="list"
122. default=""
123. label="COM_CONTENT_FIELD_INFOBLOCK_POSITION_LABEL"
124. description="COM_CONTENT_FIELD_INFOBLOCK_POSITION_DESC">
125. <option value="">JGLOBAL_USE_GLOBAL</option>
126. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
127. <option value="0">COM_CONTENT_FIELD_OPTION_ABOVE</option>
128. <option value="1">COM_CONTENT_FIELD_OPTION_BELOW</option>
129. <option value="2">COM_CONTENT_FIELD_OPTION_SPLIT</option>
130. </field>
132. <field name="show_category" type="list"
133. description="JGLOBAL_SHOW_CATEGORY_DESC"
134. label="JGLOBAL_SHOW_CATEGORY_LABEL"
135. >
136. <option value="">JGLOBAL_USE_GLOBAL</option>
137. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
138. <option value="0">JHIDE</option>
139. <option value="1">JSHOW</option>
140. </field>
142. <field name="link_category" type="list"
143. description="JGLOBAL_LINK_CATEGORY_DESC"
144. label="JGLOBAL_LINK_CATEGORY_LABEL"
145. >
146. <option value="">JGLOBAL_USE_GLOBAL</option>
147. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
148. <option value="0">JNO</option>
149. <option value="1">JYES</option>
150. </field>
152. <field name="show_parent_category" type="list"
153. description="JGLOBAL_SHOW_PARENT_CATEGORY_DESC"
154. label="JGLOBAL_SHOW_PARENT_CATEGORY_LABEL"
155. >
156. <option value="">JGLOBAL_USE_GLOBAL</option>
157. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
158. <option value="0">JHIDE</option>
159. <option value="1">JSHOW</option>
160. </field>
162. <field name="link_parent_category" type="list"
163. description="JGLOBAL_LINK_PARENT_CATEGORY_DESC"
164. label="JGLOBAL_LINK_PARENT_CATEGORY_LABEL"
165. >
166. <option value="">JGLOBAL_USE_GLOBAL</option>
167. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
168. <option value="0">JNO</option>
169. <option value="1">JYES</option>
170. </field>
172. <field name="show_author" type="list"
173. description="JGLOBAL_SHOW_AUTHOR_DESC"
174. label="JGLOBAL_SHOW_AUTHOR_LABEL"
175. >
176. <option value="">JGLOBAL_USE_GLOBAL</option>
177. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
178. <option value="0">JHIDE</option>
179. <option value="1">JSHOW</option>
180. </field>
182. <field name="link_author" type="list"
183. description="JGLOBAL_LINK_AUTHOR_DESC"
184. label="JGLOBAL_LINK_AUTHOR_LABEL"
185. >
186. <option value="">JGLOBAL_USE_GLOBAL</option>
187. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
188. <option value="0">JNo</option>
189. <option value="1">JYes</option>
190. </field>
192. <field name="show_create_date" type="list"
193. description="JGLOBAL_SHOW_CREATE_DATE_DESC"
194. label="JGLOBAL_SHOW_CREATE_DATE_LABEL"
195. >
196. <option value="">JGLOBAL_USE_GLOBAL</option>
197. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
198. <option value="0">JHIDE</option>
199. <option value="1">JSHOW</option>
200. </field>
202. <field name="show_modify_date" type="list"
203. description="JGLOBAL_SHOW_MODIFY_DATE_DESC"
204. label="JGLOBAL_SHOW_MODIFY_DATE_LABEL"
205. >
206. <option value="">JGLOBAL_USE_GLOBAL</option>
207. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
208. <option value="0">JHIDE</option>
209. <option value="1">JSHOW</option>
210. </field>
212. <field name="show_publish_date" type="list"
213. description="JGLOBAL_SHOW_PUBLISH_DATE_DESC"
214. label="JGLOBAL_SHOW_PUBLISH_DATE_LABEL"
215. >
216. <option value="">JGLOBAL_USE_GLOBAL</option>
217. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
218. <option value="0">JHIDE</option>
219. <option value="1">JSHOW</option>
220. </field>
222. <field name="show_item_navigation" type="list"
223. description="JGLOBAL_SHOW_NAVIGATION_DESC"
224. label="JGLOBAL_SHOW_NAVIGATION_LABEL"
225. >
226. <option value="">JGLOBAL_USE_GLOBAL</option>
227. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
228. <option value="0">JHIDE</option>
229. <option value="1">JSHOW</option>
230. </field>
233. <field
234. name="show_vote" type="list"
235. label="JGLOBAL_SHOW_VOTE_LABEL"
236. description="JGLOBAL_SHOW_VOTE_DESC"
237. >
238. <option value="">JGLOBAL_USE_GLOBAL</option>
239. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
240. <option value="0">JHIDE</option>
241. <option value="1">JSHOW</option>
242. </field>
244. <field
245. name="show_readmore"
246. type="list"
247. description="JGLOBAL_SHOW_READMORE_DESC"
248. label="JGLOBAL_SHOW_READMORE_LABEL"
249. >
250. <option value="">JGLOBAL_USE_GLOBAL</option>
251. <option value="0">JHIDE</option>
252. <option value="1">JSHOW</option>
253. </field>
255. <field
256. name="show_readmore_title"
257. type="list"
258. label="JGLOBAL_SHOW_READMORE_TITLE_LABEL"
259. description="JGLOBAL_SHOW_READMORE_TITLE_DESC"
260. >
261. <option value="">JGLOBAL_USE_GLOBAL</option>
262. <option value="0">JHIDE</option>
263. <option value="1">JSHOW</option>
264. </field>
266. <field name="show_icons" type="list"
267. description="JGLOBAL_SHOW_ICONS_DESC"
268. label="JGLOBAL_SHOW_ICONS_LABEL"
269. >
270. <option value="">JGLOBAL_USE_GLOBAL</option>
271. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
272. <option value="0">JHIDE</option>
273. <option value="1">JSHOW</option>
274. </field>
276. <field name="show_print_icon" type="list"
277. description="JGLOBAL_SHOW_PRINT_ICON_DESC"
278. label="JGLOBAL_SHOW_PRINT_ICON_LABEL"
279. >
280. <option value="">JGLOBAL_USE_GLOBAL</option>
281. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
282. <option value="0">JHIDE</option>
283. <option value="1">JSHOW</option>
284. </field>
286. <field name="show_email_icon" type="list"
287. description="JGLOBAL_Show_Email_Icon_Desc"
288. label="JGLOBAL_Show_Email_Icon_Label"
289. >
290. <option value="">JGLOBAL_USE_GLOBAL</option>
291. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
292. <option value="0">JHIDE</option>
293. <option value="1">JSHOW</option>
294. </field>
296. <field name="show_hits" type="list"
297. description="JGLOBAL_SHOW_HITS_DESC"
298. label="JGLOBAL_SHOW_HITS_LABEL"
299. >
300. <option value="">JGLOBAL_USE_GLOBAL</option>
301. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
302. <option value="0">JHIDE</option>
303. <option value="1">JSHOW</option>
304. </field>
306. <field name="show_noauth" type="list"
307. description="JGLOBAL_SHOW_UNAUTH_LINKS_DESC"
308. label="JGLOBAL_SHOW_UNAUTH_LINKS_LABEL"
309. >
310. <option value="">JGLOBAL_USE_GLOBAL</option>
311. <option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
312. <option value="0">JNO</option>
313. <option value="1">JYES</option>
314. </field>
316. </fieldset>
317. </fields>
318. </metadata>

#3: showcase_item.php file

1. <?php
3. // no direct access
4. defined('_JEXEC')ordie('Restricted access');
6. // Define default image size (do not change)
7. $params =newJRegistry($this->item->attribs);
8. //echo "[".ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)."]";
9. $link =JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
10. $products_info =JAFactory::getProducts();
11. $tplname = $params->get('template_name');
12. $jirakey = $params->get('jira_key');
13. // $ususername = $params->get('us-username');
14. // $usemail = $params->get('us-email');
15. // $usurl = $params->get('us-url');
16. // $usthumbnail = $params->get('us-thumbnail');
17. // $ustemplate = $params->get('us-template');
19. ?>
21. <!-- Item -->
22. <divclass="thumbnail pd-list-item">
23. <divclass="item-image pd-screen">
24. <divclass="pd-screen-img">
25. <img src="/<?php echo $params->get('us-thumbnail')?>" alt="<?php echo htmlentities($this->item->title)?>"/>
26. </div>
28. <!-- State -->
29. <?php
30. $state = $params->get('special_state');
31. if(is_array($state)&& count($state)):
32. foreach($state as $st):
33. ?>
34. <span class="item-state state-<?php echo strtolower($st)?>"><?php echo $st ?></span>
35. <?php
36. endforeach;
37. endif;?>
38. <!-- //State -->
40. <!-- CTAs -->
41. <ulclass="pd-cta">
42. <li><a class="btn btn-inverse" title="<?php echo $params->get('masshead_title');?> Visit site" href="/<?php echo $params->get('us-url')?>" rel="nofollow" target="_blank"><iclass="fa fa-desktop"></i>&nbsp;Visit site</a></li>
43. </ul>
44. <!-- CTAs -->
46. <spanclass="item-mask"></span>
47. </div>
48. <divclass="pd-title">
49. <h2>
50. <?php echo $this->escape($this->item->title);?>
51. </h2>
52. </div>
54. <!--<p class="item-desc"><?php //echo $this->item->introtext; ?></p>-->
56. <ulclass="info-list pd-info-list">
57. <liclass="row">
58. <divclass="col-xs-12 col-md-6"title="User post"><iclass="fa fa-user"></i>&nbsp;
59. <?php
60. if($params->get('us-id')&& trim($params->get('us-id'))!=''){?>
61. <a href="http://www.joomlart.com/forums/member.php?<?php echo $params->get('us-id');?>" title="<?php echo $params->get('us-username');?>">
62. <?php echo $params->get('us-username');?>
63. </a>
64. <?php }else{?>
65. <?php echo $params->get('us-username');?>
67. <?php }?>
68. </div>
69. <divclass="col-xs-12 col-md-6 text-right"title="Template name"><iclass="fa fa-tag"></i>&nbsp;
70. <?php if($params->get('us-template')&& $params->get('us-template')!=''){?>
71. <a href="http://demo.joomlart.com/#<?php echo strtolower(str_replace(' ','_',$params->get('us-template')));?>" title="<?php echo $params->get('us-template');?> demo"><?php echo $params->get('us-template');?></a>
72. <?php }?>
73. </div>
74. </li>
75. </ul>
77. </div>
78. <!-- //Item -->

2.3添加樣式的額外字段 你可以創建額外的字段在任何添加樣式。less的文件在你的模板不在文件夾模板/t3_bs3_blank /less。

增加額外字段的樣式 風格：額外的客戶展示場

1. // USER SHOWCASE
2. // ---------------------------------------------------------
3. .mod-masthead {
4. position: absolute;
5. top:0;
6. right:@global-margin;
8. .btn-primary {
9. border-radius:30px;
10. font-size:(@t3-font-size-bigger *1.5);
11. padding:(@global-padding /2)@global-padding;
12. }
13. }
15. .showcase {
16. .pd-info-list {
17. font-size:@font-size-base;
18. }
20. .pd-list-item .info-list em {
21. display:inline-block;
22. }
24. .pd-list-item .item-image .item-mask {
25. background: rgba(0,0,0,.3);
26. display: none;
27. height:100%;
28. position: absolute;
29. top:0;
30. left:0;
31. width:100%;
32. }
34. .pd-list-item {
35. .pd-screen-img img {
36. transition: all 350ms;
37. transform: translateZ(0px);
38. }
40. .pd-cta > li {
41. @media(max-width:@screen-sm-max ){
42. width:100%;
43. }
44. }
46. i {
47. color:@gray-light;
48. }
50. &:hover {
51. .pd-screen-img img {
52. transform: scale(1.1,1.1);
53. }
55. .pd-cta > li > a {
56. background:@green;
57. border-color:@green;
58. color:@white;
59. opacity:1;
61. i {
62. color:@white;
63. }
64. }
65. }
66. }
68. }

請編譯less、CSS使新補充的風格將被編譯到CSS。

編制LESS的CSS

2.4如何使用額外的字段

# 1：創建一個類，要分配的額外字段組。

為類別分配額外的字段組

# 2：在每一篇文章從創造的類別額外字段設置值。

在每一篇文章中添加額外的內容

# 3：創建菜單項

創建菜單式菜單xlayout -展示，菜單將從一個類別，我們分配的額外字段組為獲取內容

菜單設置：指定覆蓋布局（xlayout -展示)

檢查前頁。

前頁中的額外字段

這是你如何快速添加文章Joomla的自定義字段在純三組合布局轉化為定制產品展示你的Joomla網站。 祝你好運!