Contenu
- Installez ExpressionEngine 2
- Ce que nous allons construire
- Travailler avec des canaux
- Utilisation des formulaires de publication
- Créer des catégories
- Configurer des modèles
En tant que concepteur ou développeur Web, il est essentiel d'avoir un portefeuille qui montre aux visiteurs de votre site les projets que vous avez réalisés. La liste des technologies utilisées sur chacune ajoute un petit plus. ExpressionEngine d'EllisLab gère ce type de contenu via des conteneurs de données faciles à gérer appelés canaux. Dans ce didacticiel, nous allons explorer comment les utiliser.
Installez ExpressionEngine 2
Pour suivre, vous aurez besoin d'une copie sous licence d'ExpressionEngine 2. Si vous n'en avez pas déjà une, vous pouvez l'acheter sur le site Web ExpressionEngine. EllisLab n'offre plus une version gratuite du logiciel, mais plusieurs licences différentes sont disponibles, y compris une licence Freelancer à 99,95 $, qui vous permet de créer une présence Web pour votre entreprise.
Vous pouvez trouver des instructions d'installation étape par étape sur le site Web du produit, ainsi que de nombreuses ressources pour vous aider à utiliser ExpressionEngine dans votre travail.
Ce que nous allons construire
Dans ce didacticiel, nous allons créer un site pour les studios de conception fictifs SuperDuper. Le site sera composé de deux types de pages: la page d'accueil et les pages de vue travail. La page d'accueil donnera un aperçu des travaux récents.
Chaque image de projet mènera à sa propre page de vue de travail. Celui-ci contient une grande capture d'écran du site Web, une brève description et une liste des technologies utilisées sur le projet.
Travailler avec des canaux
Lorsque vous créez des sites à l'aide d'ExpressionEngine, vous créez du contenu basé sur des canaux. Il s'agit de la première étape de la création du site de portefeuille SuperDuper Design Studios.
Puisqu'il ne s'agit que d'un site basique, nous n'avons besoin de créer qu'une seule chaîne appelée "Travail".
Dans le panneau de configuration ExpressionEngine, sélectionnez le Administrateur bouton tout en haut, survolez Administration des canaux et choisissez Canaux. Si vous avez une nouvelle installation d'ExpressionEngine 2, vous ne devriez voir aucune chaîne répertoriée.
Cliquez sur le gris Créer une nouvelle chaîne bouton en haut à droite. Nous voulons notre Nom complet du canal être Travail. Le logiciel devrait maintenant créer automatiquement le Nom court pour vous: dans ce cas, travail. Ce nom en minuscules est ce que nous utiliserons dans nos modèles lors de l'affichage des entrées de projet à l'aide de Entrées de chaîne étiqueter.
En dessous de Créer de nouveaux modèles pour cette chaîne? s'assurer Non est sélectionné. Cliquez sur Soumettre pour créer le canal.
Cela fait, vous devriez maintenant avoir le Travail chaîne répertoriée sur le Administration des canaux page. Sur le Administration des canaux page, choisissez Modifier les préférences. Dans le Préférences de publication de la chaîne section, assurez-vous que le Transformez-vous automatiquement les URL et les adresses e-mail en liens? l'option est définie sur Non. Ce paramètre empêche ExpressionEngine d'essayer de créer des liens hypertexte avec des URL dans nos champs personnalisés.
Maintenant que nous avons créé notre chaîne, nous pouvons créer des champs personnalisés pour remplir le contenu.
Utilisation des formulaires de publication
Les formulaires de publication sont ce que nous utilisons dans ExpressionEngine pour créer du contenu. Ils sont constitués de champs personnalisés que nous créons et attribuons à un canal.
Sélectionnez le Administrateur bouton à nouveau, survolez Administration des canaux puis sélectionnez Champs de canal. Avant de pouvoir créer des champs personnalisés, nous devons créer un groupe de champs personnalisés. Cliquez sur le gris Créer un nouveau groupe de champs de canaux bouton en haut à droite pour créer un nouveau groupe. Celui que nous voulons créer est pour le Travail canal. Pour faciliter le suivi de quel groupe de champs appartient à quel canal, vous devriez essayer de garder les deux noms identiques, alors nommez le groupe Travail et cliquez Soumettre pour le créer.
Maintenant que nous avons créé notre groupe, nous sommes presque prêts à ajouter les champs eux-mêmes. Si vous regardez la première image de ce didacticiel, vous remarquerez que la page d'index comprend un titre et une image pour chacun des projets qu'elle répertorie.Pour que nous puissions afficher des images, nous devons configurer une destination de téléchargement pour contenir toutes les images de notre portefeuille.
Clique sur le Contenu en haut du panneau de commande et choisissez Des dossiers, ensuite Préférences de téléchargement de fichiers. Sur la droite, cliquez sur le gris Créer une nouvelle destination de téléchargement bouton. Vous devriez être présenté avec le formulaire ci-dessous.
Remplissez le formulaire en fournissant un nom descriptif, un chemin d'accès au serveur valide (vous pouvez utiliser le répertoire / images / uploads qui existe déjà) et une URL. Le répertoire dans lequel vous souhaitez enregistrer les images doit déjà exister, assurez-vous donc de le créer d'abord sur votre serveur.
Nous savons que le répertoire que nous créons ne contiendra que les images de notre portfolio, nous pouvons donc définir le Types de fichiers autorisés à Images uniquement. En repensant à nos créations, nous savons que sur les pages de détails du travail, le Largeur d'image maximale sera de 960 pixels et le Hauteur maximale de l'image sera de 400 pixels, nous pouvons donc les définir sur le formulaire. Au lieu de devoir télécharger deux images différentes, une pour la page de détail du travail (960x400) et une pour la page d'index (301x200), nous pouvons configurer Manipulations d'images.
En dessous de Manipulations d'images, nous pouvons ajouter une taille d'image supplémentaire pour la page d'index en ajoutant un Nom court appelé domicile et définissez le Type de redimensionnement à Recadrer, les Largeur à 301 et le Hauteur à 200. Cela créera alors automatiquement une version recadrée de notre image que nous utiliserons sur la page d'index. N'oubliez pas de cliquer sur le bouton rouge avec le signe +. Après avoir fait cela, cliquez sur le Soumettre bouton.
Nous sommes maintenant prêts à commencer à ajouter nos champs personnalisés. Clique le Administrateur bouton à nouveau, survolez Administration des canaux puis sélectionnez Champs de canal option. En dessous de Champs de canal sélectionnez le Travail nom du groupe que nous avons créé précédemment.
Cliquer sur Créer un nouveau champ de canal en haut à droite et vous devriez voir un formulaire. Il existe plusieurs paramètres pour chaque champ. Nous allons parcourir celui-ci ensemble, puis vous ferez les autres par vous-même.
Les champs personnalisés dans ExpressionEngine peuvent être de différents types de champs. Il existe des types de champs courants tels que les champs de saisie de texte et les zones de texte, mais vous pouvez même avoir un champ de relation ou un champ de fichier pour télécharger des fichiers ou des images. Pour l'image de notre projet, nous voulons utiliser le Déposer type de champ. Sélectionnez-le dans la liste.
le Étiquette de champ est le libellé du formulaire qui apparaît à côté du champ dans le formulaire publié. Nous voulons que ce nom soit aussi clair que possible. Utilisons le libellé Image du projet. Le nom du champ correspond à la manière dont nous référencerons ce champ dans nos modèles. il doit s'agir d'un seul mot, mais peut contenir un trait de soulignement ou un tiret. Je préfère mettre en espace mes champs en utilisant un préfixe avec le nom du canal. Cela permet de se souvenir plus facilement quels champs appartiennent à quels canaux. Tapez work_image pour le nom du champ.
Pour le Instructions sur le terrain, décrivez brièvement ce qui doit être saisi dans ce champ. Chaque projet doit avoir une image, alors assurez-vous Est-ce un champ obligatoire? est réglé sur Oui. Nous pouvons laisser le Affichage sur le terrain ordre défini sur 1 pour que le champ s'affiche en premier.
En dessous de Options de champ nous pouvons définir le Type de fichier à Image car nous savons que nous ne téléchargerons que des images. Nous pouvons alors définir le Répertoire autorisé dans le répertoire que nous avons créé précédemment.
Votre formulaire doit ressembler à celui ci-dessous.
Une fois que vous êtes heureux, cliquez sur le rouge Soumettre bouton pour enregistrer le champ.
Ce n'est que le premier champ de canal. Ensuite, nous devons créer des champs pour le reste du contenu que nous devons capturer. (ExpressionEngine crée automatiquement un champ pour le titre, nous n'avons donc pas à nous en préoccuper.) Vous trouverez ci-dessous le reste des champs que nous devrons créer.
• URL du projet
Taper: Saisie de texte
Étiquette de champ: URL du projet
Nom court: work_url
Est-ce un champ obligatoire? Non
Formatage du texte par défaut pour ce champ: Rien
• Description du projet
Type de champ: Textarea
Étiquette de champ: Description du projet
Nom court: work_desc
Est-ce un champ obligatoire? Oui
Formatage du texte par défaut pour ce champ: Rien
Pour utiliser un groupe de champs de canaux, il doit être attribué à un canal. Aller à la Administrateur bouton, survolez Administration des canaux et choisissez Canaux. À côté du canal de travail, cliquez sur Modifier les attributions de groupe. Pour le Groupe de champs option, choisissez Travail puis cliquez sur Mettre à jour pour terminer la mission. Maintenant, si vous choisissez le Contenu bouton, survolez Publier et choisissez Travail vous devriez pouvoir voir le formulaire de publication pour notre canal de travail.
Créer des catégories
Maintenant que nous avons créé tous nos champs de canaux, nous sommes prêts à créer nos catégories dont nous aurons besoin pour répertorier les technologies que nous avons utilisées sur le projet.
Sélectionnez le Administrateur bouton, survolez le Administration des canaux option, puis sélectionnez Catégories. Vous devriez être présenté avec une page qui n'a pas de catégories répertoriées. Pour créer des catégories, sélectionnez le gris Créer un nouveau groupe de catégories bouton en haut à droite. Dans le formulaire, saisissez le nom de la catégorie puis cliquez sur le bouton rouge Soumettre bouton. J'ai choisi d'appeler mes catégories Technologies du portefeuille.
Maintenant que nous avons créé le groupe de catégories, nous pouvons créer des catégories pour chacune des technologies. Sélectionner Ajouter / modifier des catégories, puis le gris Créer une nouvelle catégorie bouton.
Dans le Créer une nouvelle catégorie formulaire, remplissez tous les détails pour chacune des catégories de technologie que vous souhaitez et cliquez sur le rouge Soumettre bouton. Pour cet exemple, nous n'avons pas besoin d'ajouter des catégories parentes. J'ai créé une nouvelle catégorie pour chacun des éléments suivants.
- HTML5
- CSS3
- jQuery
- MOINS
- PHP
Pour utiliser un groupe de catégories, il doit être affecté à un canal. Aller à la Administrateur bouton, survolez Administration des canaux et choisissez Canaux. À côté du canal de travail, cliquez sur Modifier les attributions de groupe. Pour le Groupe de catégories option, choisissez Technologies du projet puis cliquez sur Mettre à jour pour terminer la mission. Maintenant, si vous choisissez le Contenu bouton, survolez Publier et choisissez Travail, vous devriez pouvoir voir le formulaire de publication pour le canal de travail. Si vous cliquez sur le Catégories onglet, vous devriez voir toutes les catégories que vous venez de créer.
À l'aide du formulaire de publication, continuez et ajoutez trois entrées de travail à votre site avec différentes technologies sélectionnées pour chacune sous l'onglet Catégories. Nous aurons besoin de ces entrées dans la section suivante lorsque nous commencerons à travailler sur nos modèles.
Configurer des modèles
Avant de pouvoir commencer à afficher du contenu, nous devons d'abord créer les modèles. Clique sur le Conception bouton en haut de l'écran et, sous Modèles, choisir Gestionnaire de modèles.
Clique sur le Nouveau groupe bouton pour créer un nouveau Groupe de modèles. Conformément à notre convention de dénomination, nous l'appellerons Travail. Laissez le reste du formulaire tel quel, puis cliquez sur Soumettre pour créer le groupe. Vous devriez voir le groupe sélectionné et un modèle appelé "index". ExpressionEngine crée automatiquement un modèle d'index pour chaque groupe de modèles. Même si nous ne l'utilisons pas, ce que nous ne ferons pas pour ce didacticiel, le modèle est obligatoire et ne peut pas être supprimé.
Nous voulons également créer un Groupe de modèles appelé Placer. Lors de la création de ce groupe, nous voulons nous assurer de cocher l'option permettant de faire du modèle d'index la page d'accueil du site. Vous devriez maintenant avoir deux groupes de modèles: Travail et Site. Nous devons créer un modèle à l'intérieur de Work appelé vue. Ce modèle sera ce qu'ExpressionEngine utilisera pour afficher les pages de projet individuelles. Le modèle d'index dans le groupe Site sera notre page d'accueil.
Une fois le processus de configuration terminé, nous sommes prêts à donner vie à notre site. Pour commencer, vous devez disposer des modèles statiques (index.html et view.html) pour cet article à portée de main. Vous pouvez les trouver dans le téléchargement des ressources de ce didacticiel, dans le répertoire Static Files. Dans le même répertoire, vous trouverez un dossier intitulé css. Assurez-vous de l'avoir téléchargé sur votre serveur.
Commençons par la page d'accueil. Copiez le contenu de index.html dans le modèle d'index dans le groupe Site. Chargez la page d'accueil du site dans votre navigateur Web et vous devriez voir le modèle statique. Nous allons commencer par la liste des projets. Trouvez le premier div avec la classe "workItem". Nous voulons envelopper un canal: entrées paire de balises autour de ce div.
Si vous regardez le code HTML statique, vous remarquerez que le premier et le dernier élément ont une classe de "premier" et "dernier". C'est ainsi que les trois éléments seront rendus correctement avec un espacement égal. Nous n'utiliserons qu'une seule instance du balisage d'élément de liste dans notre modèle car ExpressionEngine parcourt toutes nos entrées et imprime tout ce qui se trouve à l'intérieur du canal: entrées étiquette pour chaque élément. Pour ajouter la classe au premier et au dernier élément, nous devons avoir un commutateur à l'intérieur de notre canal: balise entrées.
Notre code ressemblera à ceci:
h2> Travaux récents / h2> div id = "recentWork"> {exp: channel: entries channel = "work"} div first || last "}"> a href = "{title_permalink = 'work / view'}"> {work_image: home wrap = "image"} / a> a href = "{title_permalink = 'work / view'}"> h3> {title} / h3> / a> / div> {/ exp: channel: entries} / div>
Une fois la page d'index terminée (vous pouvez voir le résultat ci-dessous), nous pouvons maintenant passer au modèle de vue de travail, qui se trouve dans notre groupe de modèles de travail. S'ouvrir view.html à partir du répertoire Static Files et copiez le contenu dans le modèle de vue dans ExpressionEngine.
Nous avons seulement besoin d'ajouter un bit de code au modèle de vue pour lui faire afficher l'entrée de portefeuille sur laquelle nous avons cliqué dans la liste de la page d'accueil. ExpressionEngine affichera l'entrée en fonction de l'URL.
Notre code ressemblera à ceci:
{exp: channel: entries channel = "work" limit = "1"} div> h2> {title} / h2> {work_image wrap = "image"} div> p> {work_desc} / p> / div> div> div id = "categories"> h3> Le travail était impliqué? / h3> ul> li> HTML5 / li> li> CSS3 / li> li> JQuery / li> li> Photoshop / li> / ul> / div> / div > / div> {/ exp: canal: entrées}
Si vous cliquez sur un projet depuis la page d'accueil du site, il devrait maintenant charger la page d'affichage de ce projet.
Il nous reste encore une chose à faire, qui est de dynamiser les catégories. Cela peut ne pas sembler aussi simple que le reste du code que nous avons écrit, car nous devons combiner deux balises pour nous donner exactement ce dont nous avons besoin. Voyons ce que fait chacune des deux balises.
À l'intérieur de canal: entrées tag, nous pouvons utiliser la balise intégrée catégories balise pour afficher les noms des catégories que nous avons associées au projet, mais cela ne nous donnera que ce que nous voulons sous forme de texte, ce qui rend la vie difficile lorsqu'il s'agit de styliser les catégories.
Le code pour cela ressemble à ceci:
{categories} {category_name} {/ categories}
Cependant, il existe une autre balise que nous pourrions utiliser qui nous présente les catégories sous la forme d'une belle liste non ordonnée qui est beaucoup plus facile à styliser en utilisant CSS. Le seul problème avec cela est qu'il affichera toutes les catégories que nous avons, pas seulement celles que nous avons sélectionnées pour le projet.
Le code pour cela ressemble à ceci:
{exp: channel: categories style = "nested"} {category_name} {/ exp: channel: categories}
Ce dont nous avons besoin, c'est d'une combinaison des deux. Si vous regardez la documentation, vous constaterez que le {exp: channel: categories} la balise a un spectacle option qui prend dans une chaîne canalisée d'ID de catégorie (ID séparés par un |). Lorsque vous implémentez ceci dans la page de vue de travail, le code final doit ressembler à ceci:
{exp: channel: entries channel = "work" limit = "1"} div> h2> {title} / h2> {work_image wrap = "image"} div> p> {work_desc} / p> / div> div> div id = "categories"> h3> Le travail a été impliqué? / h3> {exp: channel: categories style = "nested" show = "{categories} {category_id} | {/ categories}"} {category_name} {/ exp: canal: catégories} / div> / div> / div> {/ exp: canal: entrées}
Votre site de portfolio devrait maintenant être terminé. Pourquoi ne pas continuer à y ajouter des pages et utiliser les autres fonctionnalités qu'ExpressionEngine a à offrir, comme le formulaire de contact pour une page de contact?
