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.

configuration layout1

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

configuration layout2

 

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

configuration layout3

Configuration de la mise en page Responsive

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

configuration layout4

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

configuration layout5

É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.

configuration layout6

 

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.

configuration layout7

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

 

Ajouter des champs supplémentaires

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.

portfolio xml

<?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.

extrafields 1

É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.

extrafields 2

Aperçu en Front-end

extrafields 3

 

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 .

portfolio xml

<?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.

portfolio php

<?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 :

portfolio item

<?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 le Portfolio layout, Ces styles sont stockées dans des fichiers dans le dossier templates/purity_iii:

portfolio php

  • tpls/portfolio.php - Fichier de mise en page

  • less/layouts/portfolio.less (lors de la compilation de less en css, il deviendra le fichier css/layouts/fortfolio.css )

Dans le fichier portfolio.php, vous pouvez définir le fichier CSS pour la mise en page Portfolio. Il en est de même pour les autres templates.

<?php $this->addCss('layouts/porfolio') ?>

Dans le Gestionnaire de template, créez un style Purity III - Portfolio, affecter la mise en page portfolio pour ce style sous l'onglet Layout.

portfolio 1

3. Utilisation de la mise en page Portfolio

Après avoir créé une catégorie nommée Portfolio et assigné avec succès le type de contenu Portfolio à cette catégorie, nous devons créer un élément de menu utilisant cette mise en page Portfolio.

portfolio 2

  1. Créer un nouveau lien de menu

  2. Sélectionnez le type de menu Article, choisir xLayout - Portfolio

  3. Sélectionnez catégorie Portfolio

  4. Sélectionnez style de template Purity III - Portfolio

  5. Configuration des autres options, autres champs puis cliquez sur Enregistrer

4. Et pour les autres mises en page ?

Comme pour la mise en page Portfolio, Purity III fournit d'autres agencements tels que Magazine, Blog, Feature-intro, Glossary, etc. Ces mises en page utilisent le même type de contenu: Article, par défaut le type de contenu de Joomla com_content.

Mise en page Magazine :

La mise en page magazine se compose des fichiers suivants dans le template Purity III templates/purity_iii

  • html/layouts

  • html/com_content/category/magazine.xml

  • html/com_content/category/magazine.php

  • html/com_content/category/magazine_featured.php

  • html/com_content/category/magazine_list.php

  • html/com_content/category/magazine-sub.php

  • tpls/magazine.php

  • less/layouts/magazine.less

  • helper.php

Mise en page Blog :

La mise en page blog se compose des fichiers suivants dans le template Purity III templates/purity_iii.

  • html/layouts

  • html/com_content/category/xblog.xml

  • html/com_content/category/xblog.php

  • html/com_content/category/xblog_item.php

  • tpls/blog.php

  • less/layouts/blog.less

Mise en page Feature-intro 1:

La mise en page Feature-intro 1 se compose des fichiers suivants dans le template Purity III templates/purity_iii.

  • html/layouts

  • html/com_content/category/features-intro.xml

  • html/com_content/category/features-intro.php

  • html/com_content/category/features-intro_item.php

  • tpls/features-intro-1.php

  • less/layouts/features-intro.less

Mise en page Glossary :

La mise en page Glossary se compose des fichiers suivants dans le template Purity III (templates/purity_iii):

  • html/com_content/category/glossary.xml

  • html/com_content/category/glossary.php

  • html/com_content/category/glossary_group.php

  • less/extras/glossary.less

Sous-catégories

Toutes les étapes pour installer Purity III

Comment personnaliser votre template Purity III

Extensions tierces compatibles

Explorez le système de mise en page de Purity III

Améliorer Joomla com_content

Typos pour construire votre contenu

Les systèmes de menu pris en charge

Configuration du template et extension

Page 10 sur 16

Contact

Parlons social

Recevoir des nouvelles du site