在我們之前關于擴展Joomla com_content的教程中,我們向您展示了如何創建額外的字段(自定義字段)并在布局中正確顯示它們。今天,我們又回來了關于Joomla自定義字段(額外字段)的另一個高級教程,深入挖掘額外字段并向您展示如何實現您自己的專業外觀產品展示。
1.額外的字段類型
目前,T3 Framework支持3種額外字段,包括:
- 文章的額外領域
- 表單的額外字段:菜單項,搜索,聯系人,標簽等
- 模塊類型的額外字段
今天,我們將重點關注類型#1:文章的額外字段

2.操作步驟:
這個過程涉及4個步驟:
- 在每個組中定義額外的字段組和額外的字段
- 獲得額外的領域
- 如何使用額外的字段
- 樣式為額外的領域
2.1添加額外的字段組并在每個組中定義額外的字段
在Customer Showcase上,您將能夠看到以下內容:
- 網站名稱:可以通過使用文章的標題完成,因此我們不需要額外的字段。
- 用戶名:這是我們JoomlArt論壇上的會員用戶名,這將是我們的第一個額外字段。
- 縮略圖:這是網站的縮略圖,這將是我們的第二個額外字段。
- 網站的網址:當您將鼠標懸停在網站的縮略圖上時直接進入網頁,這將成為我們的第三個額外字段。
- JoomlArt模板名稱:我們的客戶用來開發他們的網站的模板,這將是我們的第四個額外領域
我們需要為Customer Showcase創建4個額外的字段。下一步是什么?
創建一個.xml文件。該文件位于文件夾中templates\t3_bs3_blank\etc\extrafields。您可以在一個.xml文件中定義許多額外的字段組。在每個組中,它可以有一個或多個額外的字段。
代碼格式與.xml文件一起使用:
定義額外的字段組:
<fieldset name =“extra-field-group-name”label =“Extra field group label”description =“Extra field group description”group =“extrafields”>
定義額外的字段:
<field name =“extra-field-name”type =“list”default =“”label =“Extra field name”description =“Extra field description”> <option value =“value-1”>額外字段值1 </ option> <option value =“value-2”>額外字段值2 </ option> </場>

.xmlCustomer Showcase文章的完整文件:
<?xml version =“1.0”encoding =“utf-8”?>
<FORM>
<fields name =“attribs”>
<fieldset name =“extrafields”label =“Extra Fields”>
<field name =“us-username”type =“text”default =“”label =“Username”class =“input-large”description =“JoomlArt username”/>
<field name =“us-url”type =“text”default =“”label =“Url”class =“input-xxlarge”description =“User site url”/>
<field name =“us-thumbnail”type =“text”default =“”label =“Thumbnail”class =“input-xxlarge”description =“User site thumbnail”/>
<field name =“us-template”type =“text”default =“”label =“Template Name”class =“input-large”description =“JoomlArt template name”/>
</fieldset>
</fields>
</ FORM>
user-sites.xml上面的文件定義了:
- 額外的領域組是“額外的領域”
- 額外字段:us-username,us-id,us-email,us-url,us-thumbnail,us-template
- 所有額外字段的類型都是“文本”
2.2獲得額外的領域的文章
由于Joomla不支持創建額外的字段,我們必須創建一個覆蓋布局文件,我們希望顯示這些額外的字段。您可以輕松地獲取這些覆蓋布局文件templates/t3_bs3_blank/html/com_content/category。
對于Customer Showcase頁面,我們需要具有以下覆蓋版面文件:
- showcase.php
- showcase.xml
- showcase_item.php

#1:showcase.php文件
<?php
/** * @package Joomla.Site * @subpackage com_content * * @copyright Copyright (C) 2005 - 2013 Open Source Matters, Inc. All rights reserved. * @license GNU General Public License version 2 or later; see LICENSE.txt */ // no direct access
defined('_JEXEC') or die('Restricted access');
$cols = $this->params->get('num_columns', 3);
$span = floor(12 / $cols);
$key = 0;
$items = $this->items;
?>
<div class="showcase<?php if ($this->params->get('pageclass_sfx')) echo ' ' . $this->params->get('pageclass_sfx'); ?>">
<?php if ($this->params->get('show_page_heading', 1)) : ?>
<div class="page-header">
<h1> <?php echo $this->escape($this->params->get('page_heading')); ?></h1>
</div>
<?php endif; ?>
<?php //JAHelper::loadModules('inline') ?>
<!-- Item list -->
<div class="showcase-items">
<?php foreach ($items as $item):
?>
<?php if ($key % $cols == 0) : ?>
<!-- Row -->
<div class="row row-showcase">
<?php endif ?>
<div class="col-xs-12 col-sm-<?php echo $span ?>">
<?php
// Load category_item.php by default
$this->item = $item;
echo $this->loadTemplate('item');
?>
</div>
<?php if ((($key+1) % $cols == 0) || $key+1 == count($this->items)) : ?>
</div>
<!-- // Row -->
<?php endif ?>
<?php
$key++;
endforeach; ?>
</div>
<!-- // Item list -->
<!-- Pagination -->
<?php
if ($this->pagination->getPagesLinks()): ?>
<div class="pagination-wrap">
<?php echo $this->pagination->getPagesLinks(); ?>
<p class="counter pagination-counter">
<?php echo $this->pagination->getPagesCounter(); ?>
</p>
</div>
<?php endif; ?>
<!-- //Pagination -->
</div>
#2:showcase.xml文件
<?xml version="1.0" encoding="utf-8"?>
<metadata>
<layout title="xLayout - Showcase" option="COM_CONTENT_CATEGORY_VIEW_BLOG_OPTION">
<help
key = "JHELP_MENUS_MENU_ITEM_ARTICLE_CATEGORY_BLOG"
/>
<message>
<![CDATA[COM_CONTENT_CATEGORY_VIEW_BLOG_DESC]]>
</message>
</layout>
<!-- Add fields to the request variables for the layout. -->
<fields name="request">
<fieldset name="request"
>
<field name="id" type="category"
description="JGLOBAL_CHOOSE_CATEGORY_DESC"
extension="com_content"
label="JGLOBAL_CHOOSE_CATEGORY_LABEL"
required="true"
/>
</fieldset>
</fields>
<!-- Add fields to the parameters object for the layout. -->
<fields name="params">
<fieldset name="basic" label="Basic">
<field name="display_num" type="text"
description="Number of items"
label="# Items"
size="3"
default="12"
/>
<field name="num_columns" type="text"
description="JGLOBAL_NUM_COLUMNS_DESC"
label="JGLOBAL_NUM_COLUMNS_LABEL"
size="3"
/>
<field name="orderby_pri" type="list"
description="JGLOBAL_CATEGORY_ORDER_DESC"
label="JGLOBAL_CATEGORY_ORDER_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="none">JGLOBAL_NO_ORDER</option>
<option value="alpha">JGLOBAL_TITLE_ALPHABETICAL</option>
<option value="ralpha">JGLOBAL_TITLE_REVERSE_ALPHABETICAL</option>
<option value="order">JGLOBAL_CATEGORY_MANAGER_ORDER</option>
</field>
<field name="orderby_sec" type="list"
description="JGLOBAL_ARTICLE_ORDER_DESC"
label="JGLOBAL_ARTICLE_ORDER_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="front">COM_CONTENT_FEATURED_ORDER</option>
<option value="rdate">JGLOBAL_MOST_RECENT_FIRST</option>
<option value="date">JGLOBAL_OLDEST_FIRST</option>
<option value="alpha">JGLOBAL_TITLE_ALPHABETICAL</option>
<option value="ralpha">JGLOBAL_TITLE_REVERSE_ALPHABETICAL</option>
<option value="author">JGLOBAL_AUTHOR_ALPHABETICAL</option>
<option value="rauthor">JGLOBAL_AUTHOR_REVERSE_ALPHABETICAL</option>
<option value="hits">JGLOBAL_MOST_HITS</option>
<option value="rhits">JGLOBAL_LEAST_HITS</option>
<option value="order">JGLOBAL_ORDERING</option>
</field>
<field name="order_date" type="list"
description="JGLOBAL_ORDERING_DATE_DESC"
label="JGLOBAL_ORDERING_DATE_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="created">JGLOBAL_CREATED</option>
<option value="modified">JGLOBAL_MODIFIED</option>
<option value="published">JPUBLISHED</option>
</field>
<field name="article_layout" type="componentlayout"
label="Article Layout"
description="JFIELD_ALT_COMPONENT_LAYOUT_DESC"
useglobal="true"
extension="com_content" view="article"
/>
</fieldset>
<fieldset name="article" label="COM_CONTENT_ATTRIBS_FIELDSET_LABEL">
<field name="show_title" type="list"
description="JGLOBAL_SHOW_TITLE_DESC"
label="JGLOBAL_SHOW_TITLE_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="link_titles" type="list"
description="JGLOBAL_LINKED_TITLES_DESC"
label="JGLOBAL_LINKED_TITLES_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field name="show_intro" type="list"
description="JGLOBAL_SHOW_INTRO_DESC"
label="JGLOBAL_SHOW_INTRO_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field
name="info_block_position"
type="list"
default=""
label="COM_CONTENT_FIELD_INFOBLOCK_POSITION_LABEL"
description="COM_CONTENT_FIELD_INFOBLOCK_POSITION_DESC">
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">COM_CONTENT_FIELD_OPTION_ABOVE</option>
<option value="1">COM_CONTENT_FIELD_OPTION_BELOW</option>
<option value="2">COM_CONTENT_FIELD_OPTION_SPLIT</option>
</field>
<field name="show_category" type="list"
description="JGLOBAL_SHOW_CATEGORY_DESC"
label="JGLOBAL_SHOW_CATEGORY_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="link_category" type="list"
description="JGLOBAL_LINK_CATEGORY_DESC"
label="JGLOBAL_LINK_CATEGORY_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field name="show_parent_category" type="list"
description="JGLOBAL_SHOW_PARENT_CATEGORY_DESC"
label="JGLOBAL_SHOW_PARENT_CATEGORY_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="link_parent_category" type="list"
description="JGLOBAL_LINK_PARENT_CATEGORY_DESC"
label="JGLOBAL_LINK_PARENT_CATEGORY_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
<field name="show_author" type="list"
description="JGLOBAL_SHOW_AUTHOR_DESC"
label="JGLOBAL_SHOW_AUTHOR_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="link_author" type="list"
description="JGLOBAL_LINK_AUTHOR_DESC"
label="JGLOBAL_LINK_AUTHOR_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JNo</option>
<option value="1">JYes</option>
</field>
<field name="show_create_date" type="list"
description="JGLOBAL_SHOW_CREATE_DATE_DESC"
label="JGLOBAL_SHOW_CREATE_DATE_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_modify_date" type="list"
description="JGLOBAL_SHOW_MODIFY_DATE_DESC"
label="JGLOBAL_SHOW_MODIFY_DATE_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_publish_date" type="list"
description="JGLOBAL_SHOW_PUBLISH_DATE_DESC"
label="JGLOBAL_SHOW_PUBLISH_DATE_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_item_navigation" type="list"
description="JGLOBAL_SHOW_NAVIGATION_DESC"
label="JGLOBAL_SHOW_NAVIGATION_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field
name="show_vote" type="list"
label="JGLOBAL_SHOW_VOTE_LABEL"
description="JGLOBAL_SHOW_VOTE_DESC"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field
name="show_readmore"
type="list"
description="JGLOBAL_SHOW_READMORE_DESC"
label="JGLOBAL_SHOW_READMORE_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field
name="show_readmore_title"
type="list"
label="JGLOBAL_SHOW_READMORE_TITLE_LABEL"
description="JGLOBAL_SHOW_READMORE_TITLE_DESC"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_icons" type="list"
description="JGLOBAL_SHOW_ICONS_DESC"
label="JGLOBAL_SHOW_ICONS_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_print_icon" type="list"
description="JGLOBAL_SHOW_PRINT_ICON_DESC"
label="JGLOBAL_SHOW_PRINT_ICON_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_email_icon" type="list"
description="JGLOBAL_Show_Email_Icon_Desc"
label="JGLOBAL_Show_Email_Icon_Label"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_hits" type="list"
description="JGLOBAL_SHOW_HITS_DESC"
label="JGLOBAL_SHOW_HITS_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JHIDE</option>
<option value="1">JSHOW</option>
</field>
<field name="show_noauth" type="list"
description="JGLOBAL_SHOW_UNAUTH_LINKS_DESC"
label="JGLOBAL_SHOW_UNAUTH_LINKS_LABEL"
>
<option value="">JGLOBAL_USE_GLOBAL</option>
<option value="use_article">COM_CONTENT_FIELD_VALUE_USE_ARTICLE_SETTINGS</option>
<option value="0">JNO</option>
<option value="1">JYES</option>
</field>
</fieldset>
</fields>
</metadata>
這里是代碼格式來獲取文章的額外字段:
$ attribs = new JRegistry($ this-> item-> attribs);
你有你的覆蓋布局文件準備好了嗎?現在您只需將上面的代碼格式添加到您的showcase_item.php文件中即可。
#3:showcase_item.php文件
<?php
// no direct access
defined('_JEXEC') or die('Restricted access');
// Define default image size (do not change)
$params = new JRegistry($this->item->attribs);
//echo "[".ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid)."]";
$link = JRoute::_(ContentHelperRoute::getArticleRoute($this->item->slug, $this->item->catid));
$products_info = JAFactory::getProducts();
$tplname = $params->get('template_name');
$jirakey = $params->get('jira_key');
// $ususername = $params->get('us-username');
// $usemail = $params->get('us-email');
// $usurl = $params->get('us-url');
// $usthumbnail = $params->get('us-thumbnail');
// $ustemplate = $params->get('us-template');
?>
<!-- Item -->
<div class="thumbnail pd-list-item">
<div class="item-image pd-screen">
<div class="pd-screen-img">
<img src="/<?php echo $params->get('us-thumbnail') ?>" alt="<?php echo htmlentities($this->item->title) ?>"/>
</div>
<!-- State -->
<?php
$state = $params->get('special_state');
if (is_array($state) && count($state)):
foreach ($state as $st):
?>
<span class="item-state state-<?php echo strtolower($st) ?>"><?php echo $st ?></span>
<?php
endforeach;
endif; ?>
<!-- //State -->
<!-- CTAs -->
<ul class="pd-cta">
<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"><i class="fa fa-desktop"></i> Visit site</a></li>
</ul>
<!-- CTAs -->
<span class="item-mask"></span>
</div>
<div class="pd-title">
<h2>
<?php echo $this->escape($this->item->title); ?>
</h2>
</div>
<!--<p class="item-desc"><?php //echo $this->item->introtext; ?></p>-->
<ul class="info-list pd-info-list">
<li class="row">
<div class="col-xs-12 col-md-6" title="User post"><i class="fa fa-user"></i>
<?php
if ($params->get('us-id') && trim($params->get('us-id')) != '') { ?>
<a href="http://www.joomlart.com/forums/member.php?<?php echo $params->get('us-id'); ?>" title="<?php echo $params->get('us-username'); ?>">
<?php echo $params->get('us-username'); ?>
</a>
<?php } else { ?>
<?php echo $params->get('us-username'); ?>
<?php } ?>
</div>
<div class="col-xs-12 col-md-6 text-right" title="Template name"><i class="fa fa-tag"></i>
<?php if($params->get('us-template') && $params->get('us-template') != '') { ?>
<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>
<?php } ?>
</div>
</li>
</ul>
</div>
<!-- //Item -->
2.3為額外的字段添加樣式
您可以.less在模板LESS文件夾中的任何文件中添加創建額外字段的樣式templates/t3_bs3_blank/less。
客戶展示額外的字段樣式:
// USER SHOWCASE
// ---------------------------------------------------------
.mod-masthead {
position: absolute;
top: 0;
right: @global-margin;
.btn-primary {
border-radius: 30px;
font-size: (@t3-font-size-bigger * 1.5);
padding: (@global-padding / 2) @global-padding;
}
}
.showcase {
.pd-info-list {
font-size: @font-size-base;
}
.pd-list-item .info-list em {
display: inline-block;
}
.pd-list-item .item-image .item-mask {
background: rgba(0,0,0,.3);
display: none;
height: 100%;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.pd-list-item {
.pd-screen-img img {
transition: all 350ms;
transform: translateZ(0px);
}
.pd-cta > li {
@media (max-width: @screen-sm-max ) {
width: 100%;
}
}
i {
color: @gray-light;
}
&:hover {
.pd-screen-img img {
transform: scale(1.1,1.1);
}
.pd-cta > li > a {
background: @green;
border-color: @green;
color: @white;
opacity: 1;
i {
color: @white;
}
}
}
}
}
請將LESS編譯為CSS,以便將新添加的樣式編譯為CSS。

2.4如何使用額外的字段
#1:創建一個您想要為其分配額外字段組的類別。

#2:從創建的類別中為每篇文章中的額外字段設置值。

#3:創建菜單項
使用菜單類型創建菜單是xlayout - Showcase,菜單將從我們為其分配額外字段組的類別獲取內容。






