Modèle 1 avec Bitrix. Des solutions toutes faites. Là où il y en a deux, il y en a trois

Le modèle définit la mise en page éléments fonctionnels, l'affichage des pages et le style artistique. Le général apparence site.

Habituellement, une seule mise en page est utilisée pour toutes les pages, mais 1C Bitrix vous permet d'utiliser simultanément plusieurs options de conception.

À l'aide d'outils intégrés, vous pouvez définir vos propres modèles pour toutes les sections et même les pages. Vous pouvez également définir diverses conditions d'affichage d'un circuit particulier. Les paramètres sont effectués via le panneau d'administration.

Les modèles de pages sont stockés dans le dossier « modèles » du même nom. DANS éditeur visuel Sélectionnez simplement l'option souhaitée dans la liste et complétez-la avec les données nécessaires. Une caractéristique des modèles est la séparation de la logique de la présentation.

Qui a besoin de modèles et pourquoi ?

Le système Bitrix vous permet de créer et d'utiliser des modèles prédéfinis, en les appliquant aux espaces de travail.

Il s'agit d'une solution pratique et efficace lorsque vous travaillez avec des pages à plusieurs composants avec une structure complexe, par exemple lorsque vous travaillez avec une boutique en ligne ou un portail d'actualités.

Avantages d'un modèle correctement sélectionné :

• Première impression. La conception du site Web indique clairement les spécialités de l’entreprise et crée une impression favorable.
• Mémorabilité. Le site est associé à une entreprise précise et reste reconnaissable.
• Intégrité. Le modèle doit être rédigé dans les moindres détails, présentant une image harmonieuse.
• Fonctionnalité. L’attractivité est combinée à la convivialité et à la praticité.

Création indépendante d'un modèle pour 1C Bitrix

La structure du modèle 1C Bitrix est un ensemble de fichiers et de dossiers. Le répertoire principal contient la description et informations générales pour la partie administrative. Parfois, certaines fonctions supplémentaires y sont également attribuées.

La zone de travail du modèle est utilisée pour placer le contenu principal et le besoin de division est dû à la structure. Il est désigné par work_area et est écrit sous forme d'édition, agissant comme un séparateur d'espace.

Les principales rubriques du site sont également présentées sous forme de répertoires correspondants. La base du modèle 1C Bitrix est constituée des fichiers d'en-tête et de pied de page. Ils contiennent du code, des extensions d'appel, du CSS et d'autres fonctions.

Le contenu dynamique est inclus dans le modèle avec les directives Bitrix Framework. Ici, vous pouvez définir des insertions PHP qui appellent des composants Bitrix spéciaux.

Tout d'abord, le titre, les icônes, les feuilles de style en cascade, les balises et autres paramètres de base sont définis. Après cela, il est nécessaire de déterminer l'emplacement de la partie administrative. Il est préférable de placer toutes les images de travail dans un dossier spécifique.

La liste numérotée avec un menu est remplacée en appelant le composant Bitrix pour créer et modifier des éléments. La plupart des autres éléments standards sont également créés en tant que composants.

Pour placer l'extension souhaitée, le code pour l'appeler est inséré à un endroit présélectionné sur la page. Dans un premier temps, il se trouve dans la documentation utilisateur ou dans l'onglet de l'éditeur visuel.

Un autre aspect important concerne les fichiers CSS du modèle. Au départ, il y en a trois : le principal et deux auxiliaires pour la conception du contenu. Mais cette distinction est très arbitraire, car tous les éléments sont étroitement liés.

Comment installer un modèle ?

L'installation du gabarit fini s'effectue selon le schéma suivant :

Dans la section modèles du panneau d'administration, vous devez sélectionner le bouton « ajouter » ;

Le formulaire de création est standard : il précise l'identifiant, le titre et la description ;

Lorsque vous travaillez avec du HTML, il est important de séparer clairement les éléments liés à la conception et au contenu ;

La directive work_area est insérée dans le champ d'édition, où le modèle est copié ;

Si vous avez du CSS, vous devez vous rendre dans l'onglet styles, où le code est inséré ;

Vous pouvez enregistrer le résultat et évaluer le travail résultant.

La dernière partie est l'indication de toutes les variables Bitrix écrites dans le fichier d'en-tête. Il est important de penser à éditer les chemins en CSS et à sauvegarder les résultats intermédiaires. Après cela, vous pouvez appliquer le modèle au site en le sélectionnant dans la liste appropriée dans les paramètres du produit.

conclusions

Les modèles 1C Bitrix sont assez pratiques et fonctionnels. Leur utilisation simplifiera et accélérera considérablement le développement du projet. Vous pouvez acheter des modèles prêts à l’emploi sur le site Web de l’entreprise.

Dans cet article, nous examinerons toutes les fonctionnalités de création d'un modèle pour Bitrix à partir de zéro. Peu importe que vous ayez une mise en page toute faite ou que vous soyez simplement un perfectionniste qui le laisse écrire lui-même quelque chose sans intermédiaires :)

Quels fichiers sont nécessaires pour créer un modèle ?

L'apparence de votre site (ou présentation du site) est toujours stockée dans un dossier séparé. Dans 1C-Bitrix, le chemin d'accès au modèle passe par le dossier bitrix, qui contient un dossier de modèles et contient déjà une liste de tous nos modèles.

Chemin d'accès aux modèles : /bitrix/templates/

Vous pouvez créer un modèle de 3 manières :

peut être copié modèle prêt à l'emploi et en fonction de cela, changez-le à votre convenance

vous pouvez créer un modèle vide via le panneau d'administration

vous pouvez créer un dossier vide et le remplir progressivement de fichiers et de dossiers

Comme vous l'avez compris, la 3ème option est la plus hardcore :) Allons dans le panneau d'administration, Administration > Paramètres > Paramètres du produit > Sites Web > Modèles de sites Web > Ajouter un modèle.
lien concernant le site : /bitrix/admin/template_admin.php?lang=ru

L'ID du modèle est essentiellement le nom du dossier dans lequel il sera situé, je l'appellerai développement . Remplissez le reste des champs aussi facilement que possible, ils ne sont pas très importants pour le moment. Ajoutez le code suivant au code du modèle :

#ESPACE DE TRAVAIL#

— nous écrivons cette ligne pour que le fichier ne puisse pas être appelé directement depuis le navigateur et qu'il ne démarre pas son exécution ;
— afficher le titre actuel de la page ;
— afficher les mots-clés, la description et tous les scripts ;
- afficher le panneau pour les administrateurs.

Après avoir enregistré le modèle, mon fichier description.php ressemble à ceci :

Super, il devrait nous rester 5 fichiers à la racine, le reste devrait être ce moment nous n'utiliserons pas :

• description.php,
• en-tête.php,
• footer.php,
• styles.css,
• template_styles.css

La partie du code qui se trouve avant #WORK_AREA# est finalement écrite dans header.php. Devinez quelle partie est écrite dans footer.php :) (celle qui suit). La zone de travail elle-même est un contenu dynamique (ce n'est pas toujours aussi dynamique), qui se trouve, par exemple, dans le dossier /contacts/ ou /about/ du fichier index.php. Le fichier lui-même commence généralement par l'inclusion de l'en-tête et se termine par l'inclusion du pied de page :

Envoyez-lui un SMS

Jusqu’à présent, tout semble logique.

Dossiers 1C-Bitrix et structure du nouveau modèle

Il y a plusieurs recommandations dans la documentation que je n’aime pas vraiment personnellement. Premièrement, ils aiment nommer le dossier d’images images au lieu de l’abréviation img . Et bien sûr, je comprends tout, mais quand on écrit des styles, il faut quand même se référer à des images, pourquoi écrire 2 fois plus ? :) Deuxièmement, il a été recommandé de stocker les zones incluses dans le dossier include_areas - pourquoi ne pas créer inc ? Troisièmement, pourquoi avons-nous besoin de 2 fichiers avec des styles ? Si je souhaite tout mettre dans un fichier séparé et le connecter plus tard si nécessaire, alors ces styles seront stockés soit dans le modèle de composant, soit dans le dossier css du modèle.

Pour résumer, notre structure de modèle correcte est :

Composants d'images Include_areas js

Pour être un peu rebelle :

Inc composants img js

En principe, personne ne vous limite, ce ne sont que des recommandations.

Et maintenant, nous arrivons en douceur au premier problème : le code en dur. Le code dur est quand, au lieu de valeurs dynamiques, par exemple Nom de domaine, utiliser saisie de texte. La plupart des développeurs novices ne connaissent pas la constante SITE_ TEMPLATE_PATH, qui stocke le chemin d'accès au modèle actuel sous forme de valeur - dans notre cas, il s'agit de /bitrix/templates/development (sans la barre oblique finale, veuillez noter). Et donc, lorsque vous incluez vos scripts ou zones incluses, pour le dossier vous devez écrire :