在我们以前的教程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文件。在每一组中,它可以有一个或多个额外的字段。
用代码格式化的: 定义额外的字段组:
- <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">Extra field value 1</option>
- <option value="value-2">Extra field value 2</option>
- </field>
定义在客户展示页中的每个组中的额外的字段组和额外字段 客户展示文章的完整的XML文件:
- <?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文件定义:
额外的字段组是“额外的字段”
额外的域用户名为:美国,美国的ID,邮件,网址为,美国为模板的缩略图。
所有额外的域的类型是“文本”
2.2获得额外的字段 在创建额外的字段Joomla不支持,我们已经创建了一个覆盖布局文件,我们想显示这些额外的领域。
你可以在模板/ t3_bs3_blank / HTML / com_content /分类得到那些覆盖布局文件。 对于客户展示页面,我们需要有以下的覆盖布局文件:
showcase.php
showcase.xml
showcase_item.php
覆盖您将需要为客户展示的布局文件
#1: showcase.php file
- <?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 file
- <?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>
#3: showcase_item.php file
- <?php
- // no direct access
- defined('_JEXEC')ordie('Restricted access');
- // Define default image size (do not change)
- $params =newJRegistry($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 -->
- <divclass="thumbnail pd-list-item">
- <divclass="item-image pd-screen">
- <divclass="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 -->
- <ulclass="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"><iclass="fa fa-desktop"></i> Visit site</a></li>
- </ul>
- <!-- CTAs -->
- <spanclass="item-mask"></span>
- </div>
- <divclass="pd-title">
- <h2>
- <?php echo $this->escape($this->item->title);?>
- </h2>
- </div>
- <!--<p class="item-desc"><?php //echo $this->item->introtext; ?></p>-->
- <ulclass="info-list pd-info-list">
- <liclass="row">
- <divclass="col-xs-12 col-md-6"title="User post"><iclass="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>
- <divclass="col-xs-12 col-md-6 text-right"title="Template name"><iclass="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的文件在你的模板不在文件夹模板/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。
编制LESS的CSS
2.4如何使用额外的字段
# 1:创建一个类,要分配的额外字段组。
为类别分配额外的字段组
# 2:在每一篇文章从创造的类别额外字段设置值。
在每一篇文章中添加额外的内容
# 3:创建菜单项
创建菜单式菜单xlayout -展示,菜单将从一个类别,我们分配的额外字段组为获取内容
菜单设置:指定覆盖布局(xlayout -展示)
检查前页。
前页中的额外字段
这是你如何快速添加文章Joomla的自定义字段在纯三组合布局转化为定制产品展示你的Joomla网站。 祝你好运!