Sidebar

  2. 首页/
  3. 博客资讯/
  4. T3-Framework使用教程/
  5. 使用T3框架在文章中添加Joomla自定义字段

使用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框架自定义字段

chuangye

chuangye

 

chuangye

Joomla的老巢

建站服务

Joomla沟通讨论

技术支持

欢迎加QQ群：468857575