使用T3框架在文章中添加Joomla自定义字段

 

在我们之前关于扩展Joomla com_content的教程中,我们向您展示了如何创建额外的字段(自定义字段)并在布局中正确显示它们。今天,我们又回来了关于Joomla自定义字段(额外字段)的另一个高级教程,深入挖掘额外字段并向您展示如何实现您自己的专业外观产品展示。

1.额外的字段类型

目前,T3 Framework支持3种额外字段,包括:

  1. 文章的额外领域
  2. 表单的额外字段:菜单项,搜索,联系人,标签等
  3. 模块类型的额外字段

今天,我们将重点关注类型#1:文章的额外字段

T3框架自定义字段

2.操作步骤:

这个过程涉及4个步骤:

  1. 在每个组中定义额外的字段组和额外的字段
  2. 获得额外的领域
  3. 如何使用额外的字段
  4. 样式为额外的领域

2.1添加额外的字段组并在每个组中定义额外的字段

在Customer Showcase上,您将能够看到以下内容:

  1. 网站名称:可以通过使用文章的标题完成,因此我们不需要额外的字段。
  2. 用户名:这是我们JoomlArt论坛上的会员用户名,这将是我们的第一个额外字段。
  3. 缩略图:这是网站的缩略图,这将是我们的第二个额外字段。
  4. 网站的网址:当您将鼠标悬停在网站的缩略图上时直接进入网页,这将成为我们的第三个额外字段。
  5. 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>
</场>

 T3框架自定义字段

.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

 T3框架自定义字段

#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>&nbsp;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>&nbsp;
<?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>&nbsp;
<?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。

T3框架自定义字段

2.4如何使用额外的字段

#1:创建一个您想要为其分配额外字段组的类别。

T3框架自定义字段

#2:从创建的类别中为每篇文章中的额外字段设置值。

T3框架自定义字段

#3:创建菜单项

使用菜单类型创建菜单是xlayout - Showcase,菜单将从我们为其分配额外字段组的类别获取内容。

T3框架自定义字段