03 83 56 65 20 06 87 42 95 30

blog / tutoriels

Nous proposons à la communauté des tutoriels au gré de nos humeurs, de l'actualité et des besoins.
( n'hésitez pas, par ailleurs à nous en demander)

Les préréglages de mise en page sont des éléments de base que le Layout Manager utilise comme point de départ pour vous permettre de personnaliser la mise en page de votre site. Chaque preset vous donne une nouvelle série de sections, chacune liée à un style, affirmant l'aspect et la convivialité du site. Vous pouvez ensuite placer des particules et positions dans ces sections, ajouter des lignes, et organiser la page de la façon dont vous voulez qu'elle ressorte.

Si vous ne trouvez pas un preset qui réponde à vos besoins, vous pouvez en créer un nouveau.

C’est très facile pour un développeur qualifié de créer un Preset de mise en page. Il s’agit soit de prendre un Preset de mise en page existante et de lui ajouter ou supprimer des sections, soit de construire une toute nouvelle disposition prédéfinie à partir de zéro, si vous y êtes disposé.

Afin de présenter des codes dans notre page web nous utilisons des balises <pre></pre> ou <code><code>. Quelle est la différence entre elles?

La balise <code><code> mettra en valeur votre code, mais il sera traité comme dans d'autres balises texte - tous les espaces supplémentaires, sauts de ligne ou tabulations seront supprimés.
<pre> - est l'abreviation de preformated, un texte apparaîtra exactement comme vous l'avez entré.

Règle générale: <code></code> Nous l'utilisons pour ajouter du code dans le texte et<pre></pre> lorsque nous voulons afficher code long.

Styles

Même si vous n'avez pas de style css, le texte à l'intérieur de ces balises est affiché avec une police monospace comme Menlo ou Monaco. Gantry 4 a déjà des styles définis pour les balises pre et code has already defined styles for pre and code tags, par exemple :

c'est un exemple de <code>

   Exemple de Code sur plusieurs lignes qui utilise les balises <pre> 
    $lists = array ();
        $lists['search'] = $search;
        $lists['order_Dir'] = $filter_order_Dir;
        $lists['order'] = $filter_order;

Il n'y a aucun problème avec javascript, les langages php / css, mais vous pouvez en avoir avec HTML ou XML. Nous devons remplacer les caractères "<" et ">" à l'aide des symboles mathématiques < (plus petit que) et > (plus grand que). Dans le cas contraire, ils seraient interprétés comme des balises html ordinaire.

Prettify (enjoliver)

SI vous étiez curieux de connaître à quoi sert le fichier prettify.less - le mystère est résolu. Essayez d'ajouter quelques codes<pre></pre>- comme dans l'exemple ci-dessous:

 

1

2

3

4

5

<pre class="prettyprint lang-php linenums">

<?php

echo 'Hello World';

?>

</pre>

Résultat

<?phpecho 'Hello World';?>

Gantry 4 a intégré prettify.js. Pour l'appeler dans le header il suffit d'ajouter class="prettyprint" puisque vous avez déjà prettify.less. La classe "lang-xxx" définit le langage tels que css, php ou html et la class "linenums" ajoute des numéros de lignes. Vous pouvez également utiliser par exemple, .linenums:33 - alors la numérotation des lignes commence à partir de 33
Vous pouvez trouver ici plus d'informations sur prettify

Syntax Highlighter (surligneur de syntaxe)

Syntax Highlighter (SH) est probablement le plus populaire. Il ya aussi le plugin Jommla - codecitation avec SH mais n'est pas developpé depuis la version 1.6 de Joomla et utilise également la version 2.x de SH. La nouvelle version apporte un changement important pour l'utilisateur final. Dans la version 2 et inférieure, il n'était pas possible de se contenter de selectionner du code et de faire un copié/collé - le texte copié contient également des numéros de ligne. C'était effectué par un objet swf. Dans la version 3, vous pouvez double-cliquer pour selectionner tout le code et simplement copier/coller. C'est pourquoi - vous connaissez ce monstre de Gantry - Je l'ai intégré à mon template.

Comment fonctionne SH? Nous avons besoin du fichier shCore.js et de plusieurs autres fichiers js appelé brosses (brushes). Il existe de nombreuses brosses pour différents langages de programmation. Je vais utiliser dans ce tutoriel 5 brosses pour php, css, xml, js et sql. Si vous en voulez plus, vous pouvez améliorer le code ci-dessous.

Évidemment, les premiers champs

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

<fields name="syntaxhighlighter" type="chain" label="SYNTAX_HIGHLIGTHER">

<field name="syntaxhighlighterstyle" type="selectbox" label="SYNTAX_STYLE"  default="Default">

      <option value="Default">Default</option>

      <option value="Django">Django</option>

      <option value="Eclipse">Eclipse</option>

      <option value="Emacs">Emacs</option>

      <option value="FadeToGrey">FadeToGrey</option>

      <option value="MDUltra">MDUltra</option>

      <option value="Midnight">Midnight</option>

      <option value="RDark">RDark</option>       

</field>

    <field name="css" type="toggle" default="0" label="CSS"/>

    <field name="php" type="toggle" default="0" label="PHP"/>

    <field name="xml" type="toggle" default="0" label="XML"/>

    <field name="java" type="toggle" default="0" label="JAVA_SCRIPT"/>

    <field name="sql" type="toggle" default="0" label="SQL"/>

</fields>

Maintenant notre fichier syntaxhighlighter.php

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

<?php

/**

 * @package     gantry

 * @subpackage  features

 * @version        4

 * @author      Marcin Paczkowski

 * @license     do whatever you want :)))

 */

defined('JPATH_BASE') or die();

gantry_import('core.gantryfeature');

class GantryFeatureSyntaxHighlighter extends GantryFeature {

    var $_feature_name = 'syntaxhighlighter';

     

    function isEnabled()

    {

        global $gantry;

                

      

     $css_enabled = $gantry->get('syntaxhighlighter-css');

     $java_enabled = $gantry->get('syntaxhighlighter-java');

     $php_enabled = $gantry->get('syntaxhighlighter-php');

     $xml_enabled = $gantry->get('syntaxhighlighter-xml');

     $sql_enabled = $gantry->get('syntaxhighlighter-sql');

      

if (1 == (int)$css_enabled || 1 == (int)$java_enabled || 1 == (int)$php_enabled

|| 1 == (int)$xml_enabled   || 1 == (int)$sql_enabled ) return true;

        return false;

    }

     

  

   

    function init() {

        global $gantry;

         

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/less/SH";

$gantry->addLess($SHFolderless. "/shCore.less");

$gantry->addLess($SHFolderless. "/shCore".$gantry->get('syntaxhighlighter-syntaxhighlighterstyle').".less");

         

        $gantry->addScript($SHFolderjs . "/shCore.js");

         

        $gantry->addInlineScript('SyntaxHighlighter.all();');

         

        if ($gantry->get('syntaxhighlighter-php')){

        $gantry->addScript($SHFolderjs . "/shBrushPhp.js");}

         

        if ($gantry->get('syntaxhighlighter-css')){

        $gantry->addScript($SHFolderjs . "/shBrushCss.js");}

         

        if ($gantry->get('syntaxhighlighter-xml')){

        $gantry->addScript($SHFolderjs . "/shBrushXml.js");}

         

        if ($gantry->get('syntaxhighlighter-java')){

        $gantry->addScript($SHFolderjs . "/shBrushJScript.js");}

                 

         if ($gantry->get('syntaxhighlighter-sql')){

        $gantry->addScript($SHFolderjs . "/shBrushSql.js");}

        }

    }

Explication du code

J'ai utilisé la fonction isEnabled() et à l'intérieur simple condition vérifiant si n'importe quel brosse est "ON" (activée). Un tel code permets d'éviter un interrupeteur supplémentaire pour l'ensemble de la fonctionnalité.Such code let avoid to add additional toggle for whole feature - Si n'importe quel brosse est « ON » l'ensemble de la fonction sera exécutée.

Lors de la création de nouvelles fonctionnalités, j'essaie de garder une structure de dossiers compatibles. Quand j'ajoute un fichier unique js ou css (less), J'ai juste à ajouter au dossier principal comme /js, /less ou /css mais s'il y en a plus je créer un nouveau dossier pour eux. Si nous faisons cela, nous devons montrer à Gantry ce nouveau dossier sinon il recherchera dans les dossiers principaux. Pour cela il existe les variables $SHFolderjs $SHFolderless pour les fichiers js et less .

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_new_name'))."/less/SH";    

JURI::root(true) est la méthode Joomla pour retourner à la racine de notre site. Je pourrais utiliser tout simplement JURI::root(true)."/templates/gantry/js/SH";. Pourquoi j'ai utilisé un autre code ? Parce que maintenant ce code est plus sophistiqué et semble plus sérieux :)). Je plaisante bien sûr. Vous pouvez trouver dans les variables de dossiers un nouveau champ "template_new_name". J'ai créé ce champ et je m'en sers en plusieurs endroits: chemins d'accès aux nouveaux dossiers, ma propre marque de fabrique de mes fonctionnalités (pas dans ce blog, mais dans d'autres projets) et dans l'onglet Aperçu dans le gestionnaire deTemplate Manager pour afficher le nom du template. La raison est très simple: si je décide de publier ce template avec un nouveau nom il suffit de changer la valeur dans ce champs et les chemins et autres champs seront automatiquement mis à jour. Je suis juste paresseux.

Vous souhaitez savoir comment changer le branding ou l'aperçu du template? - Laissez un commentaire ci-dessous.

Si vous souhaitez utiliser ma méthode ouvrez template-options.xml, trouvez la ligne 15 et ajoutez en-dessous:

<field name="template_new_name" type="hidden" default="Gantry"/>

Si vous voulez rester fidèles aux paramètres par défaut Remplacez ces 2 lignes par:

$SHFolderjs = JURI::root(true)."/templates/".strtolower($gantry->get('template_full_name'))."/js/SH";

$SHFolderless = JURI::root(true)."/templates/".strtolower($gantry->get('template_full_name'))."/less/SH";

Comment utiliser la coloration syntaxique (Syntax Highlighter )?

Nous utilisons class="brush:brushname" et brushnames : css, php, xml (aussi pour html), sql and js. Il existe beaucoup plus de brosses et vous pouvez améliorer le script pour les utiliser.

D'autres classes:
"gutter:false" - pas de numéros de lignes
"first-line: 10" - numérotation des lignes partira de 10
"highlight: 2" - ligne 2 sera mis en évidence
"highlight: [1, 3]" - lignes 1 et 3 seront mis en évidence

L'auteur de la coloration syntaxique est Alex Gorbatchev. Plus d'informations et de brosses vous les trouverez : ici

Ci-dessous vous trouverez le lien de téléchargement


créez les champs
copiez syntaxhighlighter.php file vers ../templates/gantry/features folder
copiez SH folder from /js folder vers ../templates/gantry/js folder
copiez SH folder from /less folder vers ../templates/gantry/less folder
créez le champ <field name="template_new_name" type="hidden" default="Gantry"/> ou changez le code de la fonction form aux lignes 39 et 40.

L'un des concepts clés qui rendent Gantry si puissant, c'est qu'il propose une richesse de possibilités et des fonctionnalités qui peuvent être facilement accessibles par le template de Joomla.
Pour vous développeur de template, cela vous facilite l'écriture d'un code propre et vous fournit, comme avantage secondaire, un niveau d'abstraction qui vous permettra de passer de Joomla 2,5 à 3,0 + sans rien changer à votre template.
La bibliothèque de gantry gère tous les morceaux compliqués à votre place.

Gantry est bourré de fonctionnalités permettre l'élaboration de designs dans des mises en page pleinement fonctionnelles avec le strict minimum d'effort et sans soucis!

Le Framework Gantry a des exigences de système pour fonctionner, vous les trouverez énumérées ci-dessous décomposées dans des groupes distincts :

Sous-catégories

Quelques articles sur l'actualité de Web54 et de ce qu'il se passe au niveau internet en Lorraine

Tutoriels sur Gantry, Vertex, Helix ... etc ...

(documentation personnelle ou traduction de la documentation originale)

La création de site internet, necessite des logiciels.
En lorraine, certains créateurs de sites utilisent des logiciels libres et en font la promotion.

Serge Billon en fait partie, et vous fait partager ici, en tant que webmaster reconnu sur Nancy et sa région, sa passion pour les logiciels libres.

Référencer un site n'est souvent pas une partie de plaisir, ni une formalité.

C'est pourquoi nous proposons des prestations en référencement, sur forfait ou sur devis personnalisé.

Toutefois, nous tenons à proposer une méthodologie aux clients qui voudraient tenter l'aventure et procéder eux-même à leur référencement.

Suivez les étapes pas à pas, et faites progresser votre site dans les méandres des moteurs de recherche.

Tutoriels en français des composants RS

Contact
Parlons social
Recevoir des nouvelles du site
Sauvegarder
Choix utilisateur pour les Cookies
Nous utilisons des cookies afin de vous proposer les meilleurs services possibles. Si vous déclinez l'utilisation de ces cookies, le site web pourrait ne pas fonctionner correctement.
Tout accepter
Tout décliner
Fonctionnels