Configuration de la mise en page

Une des caractéristiques de mise en évidence du framework T3 est la configuration de mise en page visuelle.Vous pouvez voir la structure de votre mise en page lors de la configuration. Il y a 2 parties dans la configuration de mise en page: Layout Structure et Responsive Layout

Ouvrez le style où vous souhaitez affecter la mise en page. Cette disposition sera appliquée uniquement au style actuel.

Structure de la mise en page

La structure de mise en page vous permet de modifier la structure de votre mise en page.

Étape 1: Attribuer la position du module

Étape 2 : Définir le nombre de blocs dans les potions qui le permettent.(Spotlight)

Configuration de la mise en page Responsive

Étape 1: Sélectionnez la mise en page responsive à configurer

Étape 2: Désactiver la position du module que vous ne voulez pas afficher dans une mise en page spécifique

Étape 3: Redimensionner les positions de module dans le bloc de type Spotlight Pour les positions de module dans un autre type de bloc, vous ne pouvez pas les redimensionner.

Paramètres enregistrés

Les paramètres de votre configuration de mise en page ne sont pas enregistrées dans la base de données, mais dans des fichiers .ini situés dans templates\purity_iii\etc\layout.

Vous pouvez également configurer votre mise en page dans ces fichiers .ini mais nous ne le recommandons pas.

Dans Purity III, nous ajoutons des paramètres supplémentaires - extra fields. Voici les étapes de l'ajout de champs supplémentaires dans Purity III.

Dans la rédaction de cet article, nous vous présenterons l'ajout de champs supplémentaires utilisés dans la page Portfolio.

Fondamentalement, cela comprend les étapes suivantes :

• Créer un groupe de champs supplémentaires en ajoutant un fichier portfolio.xml.

• Définir des champs supplémentaires dans le fichier créé portfolio.xml.

• Ajout de style pour les champs supplémentaires.

• Affecter un groupe de champs supplémentaires dans le contenu de catégorie Joomla - Catégorie portfolio.

• Affecter un champ supplémentaire pour chaque article dans la catégorie portfolio

Étape 1: créer un fichier portfolio.xml

Créer un fichier portfolio.xml dans templates/purity_iii/etc/extrafields/. Le fichier.xml consiste à déclarer des champs supplémentaires pour le type de contenu de portfolio.

<?xml version="1.0" encoding="utf-8"?><form>    <fields name="attribs">        <fieldset name="extra-fields" label="Extra Fields" description="Extra Fields">            <field name="portfolio-state" type="list" default="" label="Special State"                   description="Product Special State">                <option value="">None</option>                <option value="current">Current</option>                <option value="hot">Hot</option>                <option value="free">Free</option>            </field>            <field name="portfolio-demo" type="text" class="input-xxlarge" default="" label="Demo Link" description="Product demo link" />        </fieldset>    </fields></form>

Étape 2: ajouter le style des champs supplémentaires

Vous pouvez ajouter de style pour chaque champ dans n'importe quel fichier .less dans templates\purity_iii\less. dans Purity III, le style de champs supplémentaires utilisés dans la mise en page Portfolio est stocké dans le fichier portfolio.less dans templates\purity_iii\less\layouts.

// Porfolio Extra Fields// ---------------------.porfolio {  // State  .item-state {    width: 70px;    height: 70px;    background: url(../../images/porfolio-item-states.png) no-repeat center top;    display: block;    text-indent: -9999em;    position: absolute;    top: -3px;    right: -3px;  }  .state-free {    background-position: center;  }  .state-hot {    background-position: center bottom;  }  // Demo URL  .item-demo-url {    margin-top: @t3-global-margin / 2;  }}

Étape 3: créer une catégorie de contenu.

Créer une catégorie de contenu nommée Portfolio. Dans l'onglet Extra fields, choisir Portfolio comme option Extra field group.

Étape 4: attribuer des champs supplémentaires pour les articles dans la catégorie Portfolio

Lorsque vous créez un article, après l'avoir attribué à la catégorie portfolio, des champs supplémentaires apparaîssent alors sous l'onglet Extra field.

Aperçu en Front-end

Créer une mise en page de remplacement avec le template purity III

Purity III fournit une variété de mises en page personnalisées pour com_content de Joomla tel que : Blog, Magazine, Portfolio, Features Intro, Glossary, et etc. Ces dispositions utilisent principalement le type de contenu article par défaut, sauf la mise en page Portfolio, qui utilise les extrafields supplémentaires : Special of state et Demo link en dehors de tout le champ d'origine à partir d'un article standard.

Fondamentalement, cela comprend les étapes suivantes :

1. Créer un type de contenu

• Préparation des champs supplémentaires pour le type de contenu

• Créer une catégorie de contenu

• Attribuer des articles à la catégorie

2. Créer une mise en page personnalisée

• Créer des éléments de menu - type layout overrides

Dans cet article, nous vous présenterons le processus de création de la mise en page Portfolio, une mise en page surchargeant ma mise en page Joomla par défaut.

Allons-y :

1: Créer le type de contenu Portfolio

Nous mettons l'étape dans une section indépendante car il peut être utilisé pour n'importe quelle disposition, non seulement mise en page portfolio.

2. Créer la mise en page portfolio

Dans cette section, nous vous présenterons comment créer la mise en page portfolio pour la vue catégorie à l'aide du type de surcharge de mise en page “Menu Items”

Pour créer 1 Type de mise en page de surcharge “Menu Items”, nous avons besoin d'un fichier xml et d'un fichier php avec le même nom. Dans ce cas, nous devons créer 2 fichiers portfolio.xml et portfolio.php dans le dossier templates/purity_iii/html/com_content/category . Le fichier portfolio.xml comprendra toutes les informations sur les paramètres de mise en page pour cette mise en page, dans le même temps, portfolio.php est un fichier template de mise en page.

2.1 portfolio.xml

Ce fichier a une structure similaire au fichierdefault.xml ou blog.xml dans le dossier components/com_content/view/category/tmpl .

<?xml version="1.0" encoding="utf-8"?><metadata>  <layout title="xLayout - Portfolio" 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">        <!-- use layout type list, default layout type of view category -->        <field name="layout_type" type="hidden" default="list" />        <field name="display_num" type="text"           description="Number of items"           label="# Items"           size="3"           default="12"            />        …. (các params trong group basic)    </fieldset>     <fieldset name="article" label="COM_CONTENT_ATTRIBS_FIELDSET_LABEL">  ….     </fieldset>    ….</fields></metadata>

2.2 portfolio.php

De même que la mise en page par défaut de la vue catégorie, la mise en page porfolio affiche ces éléments dans une catégorie. Dans cette section, je vais surtout expliquer comment ajouter des données dans les champs supplémentaires du type de contenu Portfolio.

<?php/** * @version    $Id: category.php 303 2010-01-07 02:56:33Z joomlaworks $ * @package    K2 * @author    JoomlaWorks http://www.joomlaworks.gr * @copyright  Copyright (c) 2006 - 2010 JoomlaWorks Ltd. All rights reserved. * @license    GNU/GPL license: http://www.gnu.org/copyleft/gpl.html */ // no direct accessdefined('_JEXEC') or die('Restricted access'); $cols = $this->params->get('num_columns', 3);$span = floor(12 / $cols);$key = 0;$items = $this->items;?> <div class="porfolio<?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="porfolio-items">   <?php foreach ($items as $item):    ?>    <?php if ($key % $cols == 0) : ?>    <!-- Row -->    <div class="row row-porfolio">  <?php endif ?>       <div class="col-xs-6 col-md-<?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>

Les données des champs supplémentaires utilisent pour afficher un élément dans le portfolio, dans la mise en page de type sublayout : portfolio_item.php. Lors de la création d'un élément Portfolio, ces extra fields seront stockés dans les attributs de champ de l'article et nous pouvons y accéder comme suit :

<?php$attribs = new JRegistry($this->item->attribs);// get extra fields$state = $attribs->get('portfolio-state');$demo_link = $attribs->get('portfolio-demo');?>

De là, nous pouvons utiliser ces champs supplémentaires comme les autres champs de l'article.

2.3 Style de template Portfolio

Étape 1 & 2: Créer un type de contenu: Portfolio et une mise en page Portfolio pour affichage category et com_content. Purity III a déjà un style pour...