Mode développeur Squarespace : créez et modifiez vos propres modèles Squarespace

1. Intro: Squarespace est une plate-forme facile à utiliser pour construire de beaux sites Web, généralement ciblés vers ceux qui n'ont pas de compétences en codage. Mais que se passe-t-il si vous pouvez avoir un contrôle total sur votre site Web ? Que se passe-t-il si vous pouviez modifier ou créer votre propre modèle Squarespace ? Bonjour, je suis Christopher Dodd et je suis un des meilleurs professeurs ici sur SkillShare.com couvrant des sujets tels que le développement web et le freelance en ligne. Dans cette classe, nous allons apprendre à utiliser quelque chose appelé le mode développeur dans Squarespace. C' est une fonctionnalité de Squarespace qui nous permet de télécharger notre code de modèle et de faire des mises à jour plus précises sur notre site Web, en plus d'ajouter des fonctionnalités qui n'existent pas déjà sur notre modèle. Le résultat est la même grande expérience utilisateur de la construction de n'importe quel site Squarespace. C' est juste maintenant que vous avez un contrôle total sur le modèle. Dans cette classe, nous allons commencer avec un modèle de base activer le mode développeur, et commencer à construire notre site Web en utilisant la fois l'interface d'administration ainsi que les langues qui composent le modèle Squarespace, y compris HTML, CSS, JavaScript, et Jason de Squarespace. T. À la fin de la classe, vous comprendrez la structure du modèle, ainsi que la majorité des fonctionnalités disponibles à personnaliser grâce à l'utilisation de code. Pour autant que je sache, il n'y a pas de cours comme celui-ci. Je suis excité que tu me rejoignes à l'intérieur. 2. Outils et connaissances nécessaires: Avant de commencer avec ce cours, je voulais couvrir certaines des connaissances ou des outils dont vous aurez besoin pour suivre la classe. Bien sûr, il s'agit plutôt d'une classe intermédiaire, donc il suppose que vous avez déjà des compétences de développeurs Web front- end. J' ai une liste de quelques choses ici sur mon ordinateur, y compris la ligne de commande, l'utilisation de DevTools sur Google Chrome, ou tout navigateur que vous aimez utiliser. Vous avez besoin de connaître des CSS, et nous allons parler versions locales et en direct d'un site Web, donc c'est quelque chose que vous devez savoir aussi. Git de base et bien sûr, JSON. Je voulais juste aborder ces choses dès le début dans cette leçon. Si vous connaissez toutes ces choses, ne vous inquiétez pas pour cette leçon, il suffit de sauter, mais pour ceux d'entre vous qui un peu plus du côté débutant, je voulais juste les couvrir parce qu'ils vont vous monter dans la classe si vous n'avez aucune idée de ce que c'est. Tout d'abord, la ligne de commande, un outil très essentiel pour toute programmation. Par exemple, j'utilise iTerm pour mon application terminal, mais sur Mac, le standard fourni avec chaque ordinateur est Terminal. Ici, vous pouvez voir que c'est juste un peu d'une application où vous pouvez écrire des commandes dans, comme une ligne de base, changer dans le dossier de code, lister le dossier de code, effacer. Vous devriez connaître un peu la ligne de commande, mais si vous suivez les commandes exactement comme je le dis dans la vidéo, vous ne devriez pas trouver beaucoup de problèmes, même si vous êtes nouveau dans l'écriture de commandes en ligne de commande. Comme je l'ai dit, celui que je vais utiliser dans cette classe est iTerm. C' est un spécial sur lequel j'ai certaines fonctionnalités configurées comme par exemple, je n'ai pas besoin de taper cd quand je veux changer dans un répertoire. Si je voulais faire ce que j'ai fait auparavant, je peux simplement taper du code, et s'il n'y a pas de commande, il comprendra que j'essaie de changer de répertoires. Sous Windows, le programme va probablement s'appeler Invite de commandes. Je suis presque sûr que c'est l'outil de ligne de commande standard fourni avec Windows. Juste pour être conscient, nous allons utiliser la ligne de commande, mais nous ne serons pas lourds sur la ligne de commande, donc vous n'avez pas besoin d'être un expert en la matière. L' autre chose que j'ai besoin que vous soyez familier avec est Chrome DevTools ou tout logiciel que vous utilisez. Le navigateur que j'aime utiliser est Google Chrome, mais vous pourriez vouloir utiliser Firefox ou Safari. Les DevTools pour moi, je peux ouvrir en appuyant sur la commande d'option « I » sur mon Mac, et vous obtiendrez ce panneau ici qui a Elements et Console. Celui-ci ici, Console est celui que nous allons regarder dans cette classe comme il est dit ici, JS Console. Ce que nous allons faire, c'est que nous allons faire ce qu'on appelle un console.log, qui prend les données et les sort essentiellement dans cette console ici. Ce que nous allons faire, c'est prendre des Objets, les mettre dans cette Console, et ensuite nous allons les parcourir. Si vous ne l'avez jamais vu auparavant, cette partie de la classe pourrait vous être un peu familière. Mais encore une fois, c'est une compétence que vous devriez avoir en tant que développeur web frontal utilisant la console. En fait, si vous voulez une classe purement sur DevTools, faites-le moi savoir mais cela devrait être assez facile à suivre néanmoins. CSS, je vais écrire du CSS, mais ce n'est pas une classe CSS. Je ne veux pas que vous voyiez du CSS et que vous soyez submergé par lui. Si vous ne comprenez pas CSS, je vous recommande fortement d'apprendre CSS. J' ai déjà des cours sur Skillshare que vous pouvez suivre. Mais si vous ne le comprenez pas et que vous n'êtes pas intéressé à l'apprendre, évidemment, ne vous inquiétez pas à ce sujet. Ce n'est pas essentiel pour cette classe, mais en tant que développeur web frontal qui construit des modèles Squarespace ou quoi que ce soit sur le front-end, vous voudrez certainement savoir comment utiliser CSS. Comme je l'ai mentionné ici, Moins sera discuté, mais ce n'est pas une connaissance requise. Comme nous le découvrirons plus tard dans cette classe, nous utiliserons Less fichiers que vous pouvez simplement échanger avec CSS. Moins est CSS pré-compilateur. Vous n'avez pas nécessairement besoin de savoir ce que c'est, mais sachez simplement que lorsque vous voyez .less dans le nom de fichier, cela signifie que vous pouvez écrire un code CSS dedans, ou vous pouvez écrire un code Less, ce qui est légèrement différent de CSS. Mais ne vous inquiétez pas si vous ne savez rien de Less ou de son homologue Sass, sur lequel j'ai un cours ici sur Skillshare aussi, vous n'avez pas besoin de savoir Moins pour tirer le bénéfice de cette classe. Lorsque vous voyez .less, juste think.CSS si vous n'êtes pas familier avec Less du tout. Une autre chose dont je parle constamment tout au long de la classe qui pourrait vous confondre est que je parle de la version locale du site Web. Lorsque nous téléchargeons notre code et que nous exécutons un serveur sur notre propre ordinateur afin d'exécuter le code, c'est ce qu'on appelle exécuter quelque chose localement. Localement signifie simplement sur votre ordinateur. Tout au long de la classe, ce que nous allons faire est d'éditer le code sur notre propre ordinateur et cela va changer la version ou changer ce qui apparaît sur l'écran localement, donc sur notre propre ordinateur. Mais pour que cela aille réellement sur le site, nous allons devoir pousser ces changements, que je vous montrerai plus tard dans la classe. Je voulais juste le mentionner brièvement parce que si vous m'entendez dire localement, version locale, site web local, c'est ce que je veux dire, le site Web que nous exécutons sur notre propre ordinateur. Ce ne sera pas le même que le site sur Squarespace lui-même. J' ai aussi besoin que vous compreniez Git de base, Git très basique. Git est un système de contrôle de version. C' est le système de contrôle de version le plus populaire, une compétence très importante à avoir en tant que développeur. Il est important de connaître Git pour cette classe car nous allons l'utiliser pour mettre à jour la version live. Nous allons faire des changements locaux et ensuite nous le pousserons sur le site en direct de Squarespace. Nous allons le faire à travers seulement trois commandes. En fait, je pense qu'il y a un total de quatre commandes que nous utilisons pour Git dans toute la classe. Pas beaucoup, mais encore une fois, quand tu vois Git et que tu n'as pas eu d'expérience avec ça avant, je ne veux pas que tu paniques. Nous n'utilisons que quatre commandes. Un pour télécharger le code Git sur votre propre ordinateur, puis un pour ajouter le code à votre Commit, puis pour valider le code, puis pour pousser le code. C' est très basique. Ne paniquez pas si vous n'êtes pas familier avec Git. Encore une fois, beaucoup de ressources en ligne si vous voulez apprendre Git. Ensuite, la dernière chose est JSON. JSON est juste un format de structure de données simple. Si nous allons dans notre navigateur en ce moment et cherchons JSON, il est allé à JSONLint. Il signifie JavaScript Object Notation. C' est un format léger pour stocker et transporter des données. Une fois que vous avez la tête autour, c'est très simple. Je recommande certainement si vous n'avez aucune idée de ce que JSON est de faire quelques recherches sur elle d'abord mais fondamentalement, vous avez juste ces paires clé-valeur. Dans ce cas, la valeur est en fait un tableau, puis à l'intérieur de ce tableau, vous avez plusieurs objets avec deux paires clé-valeur différentes. C' est un peu plus complexe, mais ici vous verrez cet exemple ici est un exemple typique. Vous avez la clé qui est le prénom et la valeur qui est John. La seule compétence dont vous avez vraiment besoin avec JSON dans cette classe est de savoir comment naviguer dans un objet JSON. Par exemple, si je voulais obtenir John de cette structure de données ici, je devrais trouver le premier élément du tableau, les employés, puis attraper le prénom de cet élément dans le tableau. Encore une fois, ce n'est pas des choses complexes, mais si vous êtes pris sur la partie JSON de cette classe, je recommande certainement de prendre une pause et aller chercher un peu sur JSON parce que, fondamentalement, JSON est au cœur des modèles Squarespace. Ce n'est pas quelque chose qui est particulièrement compliqué, mais en même temps, cela va vous faire monter si vous n'avez aucune idée de ce qui se passe avec le JSON. C' est une bonne recommandation pour toutes ces choses. Si l'une de ces choses que vous n'avez aucune idée, certainement faire quelques recherches. Je recommanderais avant même d'arriver à ce point dans la classe. Je voulais juste couvrir cette connaissance requise parce qu'il y a des questions qui se posent parfois dans les cours. Se coincer sur de petites choses que je n'ai pas vraiment envisagées pour un utilisateur débutant, c'est plus une classe intermédiaire alors gardez cela à l'esprit. Ce sont quelques-unes des choses, en plus de ce que nous allons apprendre dans la classe d'aujourd'hui, que vous devrez connaître. Je voulais juste mettre cette vidéo ici. Évidemment, les outils nécessaires, comme n'importe quelle autre de mes classes de développement web, vous aurez besoin d'un navigateur Web donc pour moi c'est Google Chrome. Vous pouvez utiliser Firefox ou Safari, puis un éditeur de code. Comme vous pouvez le voir ici, j'aime utiliser Atom quand je travaille avec des fichiers simples. C' est A-T-O-M. Lorsque je travaille avec des projets complets, j'aime utiliser VS Code maintenant, ce qui est abrégé pour Visual Studio Code. Évidemment, vous allez avoir besoin d'un programme en ligne de commande, mais cela vient standard avec n'importe quel ordinateur. Nous allons installer un autre logiciel dans la classe, donc vous n'avez pas nécessairement besoin de l'avoir encore. Nous allons connaître les paquets que vous devez installer dans cette classe au fur et à mesure. Mais c'est tout, les gars. Je voulais juste m'assurer que tu sois au courant de ces choses que tu dois vraiment savoir. Assurez-vous d'avoir un éditeur de code et un navigateur Web comme toujours. C' est tout. Je te verrai dans la prochaine vidéo. 3. Qu'est-ce qu'un modèle Squarespace: Avant de commencer à éditer et à créer notre modèle Squarespace, nous devons être clairs sur ce qu'est réellement un modèle. Si nous entrons sur le site squarespace.com et cliquez sur l'élément de menu pour les modèles, nous pouvons voir un portfolio des différents modèles qui sont disponibles par défaut dans Squarespace. Ils ont ceux qui sont les plus populaires et ensuite vous les avez également organisés par catégorie. Ce sont ceux que vous pourriez vouloir utiliser si vous aviez un site Web de portefeuille photo ou peut-être que vous avez créé un site web entier juste pour votre mariage. Ces modèles vont probablement être ceux que vous voulez regarder en premier. Mais bien sûr, ça n'a pas d'importance. Vous pouvez utiliser le modèle que vous voulez dans Squarespace. La chose cool à propos de ces modèles cependant, est qu'ils fonctionnent sur n'importe quel site Squarespace. L' architecture back-end et toutes les pages et photos que vous avez ajoutées doivent toujours fonctionner sur tous ces modèles. Il s'agit essentiellement de personnaliser la mise en page, présentation et le style de votre site Web. Pour le démontrer, je pense que le mieux est de vous montrer l'un de mes sites Web et de voir ce qui se passe lorsque nous changeons le modèle. Comme je suis actuellement connecté, je peux aller ici et cliquer sur « Tableau de bord du compte ». Ici, vous verrez ma liste de sites Web. Celui-ci est celui que nous allons construire dans cette classe, celui-ci est un autre projet que j'ai, et la raison pour laquelle ils sont assis ici est parce que ce sont des sites d'essai avec mode développeur activé et l'une des fonctionnalités de est que l'essai n'expire jamais. Vous pouvez les avoir en mode développeur aussi longtemps que vous le souhaitez jusqu'à ce que vous soyez prêt à publier, puis vous pouvez passer à un plan. Mais juste en bas est un site Web qui est actuellement en direct et j'ai un plan sur. C' est mon site web de portefeuille de photographie et de vidéographie. Si je clique sur « Modifier le site », cela me conduira à l'administrateur Squarespace pour ce site Web. Maintenant, si vous n'êtes pas familier avec cet administrateur, nous allons entrer dans les bases d'une future leçon, mais pour cette vidéo, ce que je veux vous montrer est le modèle. Jetons un coup d'oeil à mon site web. Je peux soit cliquer sur les éléments de menu ici ou aller dans le répertoire des pages, et vous pouvez voir ici dans « Navigation secondaire », J' ai « Événements », et voici une galerie de vidéos intégrées. Ce sont des liens Vimeo de certains des événements que j'ai filmés. Si on retourne ici, j'ai quelques vidéos dans le créneau de la mode que j'ai tourné, et vous pouvez voir la mise en page de toutes ces pages, c'est la même chose. C' est juste une galerie de vidéos, et si je vais à la page « Photos », c'est juste une galerie de photos différentes. Je peux les télécharger ici dans mon administrateur et ils apparaissent sur la page en fonction du modèle que j'utilise. Allons en arrière ici, allons « Accueil », cliquez sur « Conception », cliquez sur « Modèle » , et vous pouvez voir que nous exécutons le modèle jasper, c'est notre modèle en direct. Mais ce que nous pouvons faire est de changer de modèle à tout moment et nous pouvons également installer un modèle sans avoir à changer immédiatement. Nous pouvons en fait prévisualiser. Je vais cliquer sur « Installer un nouveau modèle », et comme il est dit ici, l'installation d'un modèle n'affectera pas votre site Web en direct. Ce que je vais faire est de choisir un modèle qui, je pense, fonctionnera aussi bien avec un site Web comme le mien de la photographie et de la vidéographie portfolio. Ici, je vais cliquer sur « Preview Avenue », et qui en fait vous montre juste un aperçu plus grand, ne fait pas de prévisualisation sur votre boutique. Ce que nous allons devoir faire est de cliquer sur « Commencer avec cette conception », et il va installer ce modèle sur notre site Web. Ici nous l'avons, nous pouvons le désinstaller ou nous pouvons cliquer pour prévisualiser. Je vais en prévisualiser, et maintenant, ce que vous verrez est que notre site Web va maintenant être chargé dans ce modèle. Maintenant, le problème avec mon site Web, je crois, était que j'avais toute la navigation à l'intérieur d'une navigation secondaire. Parce que cela utilise la navigation primaire, il est inséré son propre nav, mais si nous revenons à « Accueil  », puis nous retournons dans « Pages », et nous faisons défiler cette navigation supérieure ici, nous pouvons voir toutes les pages qui existent sur mon site en ce moment. Je peux aller à cette page « Événements » que nous avons examiné auparavant, et vous pouvez voir tout le même contenu là-dedans, tous les mêmes incorpores Vimeo, mais au lieu de le présenter comme une grille, ce que ce modèle a fait l'a présenté comme un diaporama. Maintenant, nous devons cliquer sur ce diaporama et c'est comme ça que vous lisez une vidéo. Ensuite, avec la page de photographie, si je vais à ma page « Photos », vous pouvez voir les photos sont également affichées dans un diaporama. Le point que je fais ici est que tout le contenu est toujours là et nous pouvons toujours voir le contenu, mais la différence est que l'apparence et la présentation sont différents. Pour toutes les galeries, nous avons ce diaporama au lieu de ce que nous avions auparavant, qui était une grille. Évidemment, il y a des polices qui sont différentes, il y a le titre de mon site Web qui est positionné différemment, mais tout est déterminé comme nous venons de le discuter par le modèle. C' est pourquoi, parce que le modèle prend effectivement tout le contenu que vous avez dans votre site Web, il ne modifie pas le contenu ou ne supprime rien, nous pouvons changer notre modèle autant que possible, autant que nous veulent et nous pouvons facilement revenir en arrière. Maintenant, j'ai mon ancien site web. Je ne l'ai jamais perdu. Je vais cliquer sur « Désinstaller » parce que je suis satisfait de ce thème ou avec ce modèle. C' était rétrograder un modèle modifié sur un site réel en direct, mais ce que nous allons faire pour cette classe, c'est que nous allons commencer avec un modèle de base. La façon dont nous pouvons le faire est d'aller à base-template.squarespace.com, donc c'est le modèle de tiret de base dot squarespace dot com, et vous pouvez voir ce modèle de base. Ici, vous pouvez cliquer sur « Créer un site comme ceci », ce que je vais faire, et ce que cela va faire est de créer une nouvelle porte de développement ou une nouvelle porte d'essai pour vous, que vous pouvez rapidement transformer en magasin de développement en activant le mode développeur. Nous y reviendrons dans une vidéo plus tard, mais je voulais que ce modèle démarre parce que ce sera le point de départ sur lequel nous allons continuer à construire sur la classe, et c'est aussi celui que je vous suggère de commencer comme eh bien si vous apprenez à construire votre propre modèle parce qu'il a beaucoup de choses de base dont vous avez besoin que vous ne voulez vraiment pas coder à partir de zéro, mais en même temps, ce n'est pas très opiniâtre dans le sens où il n'est pas très stylisé et il n'y a pas beaucoup à l'intérieur, donc il n'y a pas grand-chose à décomposer pour obtenir le résultat que vous voulez. Dans la vidéo suivante, nous allons apprendre à utiliser l'administrateur ici. Nous allons créer du contenu, puis après cela, nous allons creuser dans la façon de modifier réellement le code du modèle. 4. Les bases de Squarespace: Donc, en ce moment, nous avons notre nouveau site Web exécutant le modèle de base. Avant d'aller et de modifier ce modèle, il est important que nous ayons tous une compréhension de la façon dont Squarespace fonctionne réellement de la part de l'administrateur, des utilisateurs, respectifs. La plupart des utilisations de Squarespace, la grande majorité d'entre eux ne modifieront leur site Web qu'à partir de cet administrateur. Il est donc important que nous comprenions ce que nous faisons ici. Pour ceux d'entre vous qui ont de l'expérience avec Squarespace et qui ont géré un site Web Squarespace pendant un certain temps ou qui ont construit votre propre site Web Squarespace à l'aide de cette interface. Alors peut-être que c'est une leçon que vous pouvez ignorer, mais pour le reste d'entre nous, je veux vraiment vous montrer comment vous pouvez contrôler le contenu et la conception de votre site en utilisant simplement l'administrateur. Ensuite, nous allons passer à la façon d'éditer le modèle avec du code. L' administrateur que vous regardez ici est le seul contrôle que vous avez sur back-end de votre site Web et il forme la structure du contenu de votre site Web. Savoir ce truc est très important avant de modifier un code. La première chose que je veux faire est de retourner dans les pages et de supprimer ce contenu de démonstration. Donc cette page, ce blog. Maintenant, avec le contenu de démonstration supprimé, nous pouvons créer nos propres pages. Si nous voulons que la page ne soit pas liée dans la navigation, nous pouvons cliquer ici. Ou si nous voulons qu'il apparaisse automatiquement dans la navigation du site, nous pouvons cliquer sur cette icône ici. Je vais cliquer sur cette icône et nous avons nos options ici. Dans cette section de mise en page, nous pouvons créer une page avec une mise en page prédéfinie. Ici, dans cette section de collection, nous pouvons ajouter ce qu'on appelle une collection dans Squarespace. Une collection est fondamentalement quelque chose comme un blog, une galerie, une collection de produits est fondamentalement une liste de quelque chose. Donc, quand nous cliquons dessus, nous devrions voir une liste. Ensuite, dans une collection, vous avez divers éléments. L' exemple parfait, bien sûr, est un blog, que nous obtiendrons dans une seconde. Un blog, vous pouvez cliquer sur le blog et vous verrez une liste de tous les articles de blog. Mais alors vous pouvez également cliquer sur le billet de blog individuel et les lire. Mais c'est un parfait exemple de collection. Il s'agit essentiellement d'une liste de contenu avec des pages apparentes et des pages enfants. L' autre contenu que nous pouvons ajouter ici est une page de couverture qui, pour autant que je sache, est une page qui couvre l'ensemble de votre écran et comporte un ou deux liens. Donc, vous cliquez sur le lien et ensuite vous êtes amené à une certaine page sur le reste du site. L' autre option ici est d'ouvrir un lien externe. Ce que je vais faire est de créer une page à propos. Donc, je vais cliquer ici pour la mise en page à propos. Nous avons trois mises en page différentes que nous pouvons choisir. Je vais juste cliquer sur la version de la bannière. Quand il ouvre cette boîte ici, je vais appeler la page À propos de nous. Après que nous l'ayons nommé comme ça, il va arriver ici. Vous pouvez également le voir apparaître dans notre navigation sur notre site. Voici où vous pouvez modifier le contenu du site Web. Si je passe la souris sur le contenu de la page, vous pouvez voir le contenu de la page apparaître et il y a deux options, Modifier ou Paramètres. Si je clique sur Paramètres, je reçois une gamme de paramètres différents à modifier ici. Mais si je clique sur Modifier, j'ai accès à ce générateur de page qui vient dans Squarespace. Donc ici, j'ai un bloc de texte. Je peux modifier le placement du titre. Si je passe à ce bloc d'image ici, je peux soit ajouter une image à partir de mon bureau, soit cliquer Modifier et cliquer ici pour rechercher une image. Ceci est une fonctionnalité cool de Squarespace est qu'il recherche automatiquement sur splash, qui est un site Web où vous pouvez trouver des photos de stock gratuit. Disons que je veux utiliser ça. Cliquez sur Ajouter au site. Il est traité et redimensionné. Là, nous l'avons. Je vais cliquer sur Appliquer. Je vais peut-être écrire une légende. Fille qui fait des sit-ups. Je vais juste laisser le contenu ici parce que ce n'est pas pertinent. Ici, vous pouvez modifier la page comme vous le souhaitez. Vous pouvez cliquer sur ces petites icônes ici et vous pouvez ajouter différents blocs qui sont disponibles dans le générateur de pages Squarespace. Il est important de noter ici que ce n'est pas personnalisable. Ces blocs viennent à Squarespace et pour autant que je sache, nous ne pouvons pas ajouter nos propres blocs ici. C' est bon, il y a plein d'options ici. Comme vous le découvrirez bientôt avec le modèle, nous sommes en mesure de personnaliser un peu avec du code. Donc, ne vous inquiétez pas. Si je clique sur Enregistrer. Maintenant, cette page est enregistrée. Si je retourne à la page d'accueil, vous pouvez voir, comme je l'ai dit, c'est dans cette navigation de site ici. Ensuite, je veux vous montrer une collection. Donc, nous avons mentionné le blog avant. Si je clique sur Nouveau Blog, je vais juste appeler ceci le Blog. Si je vais ici pour le Blog, je peux réellement ajouter un nouveau billet de blog. Il va me demander d'entrer un titre de poste et une description ici. Je vais juste copier et coller du contenu, du contenu très basique. On y va. Je peux ajouter des balises et des catégories comme vous le feriez dans n'importe quelle plateforme de blogs qui va mettre à la maison. Il suffit de les séparer par une virgule et il les séparera automatiquement. Verrouiller. Je vais choisir une catégorie d'exercice. Cool. Donc, en ce moment, ce post est en mode brouillon, mais je peux appuyer sur enregistrer et publier. Maintenant, vous pouvez voir que c'est dans cette liste ici. Donc si je le mets à un brouillon. Je peux voir tous mes billets de brouillon ici. Je peux également les planifier ou les mettre en revue, mais fondamentalement ici sur la page du blog ou laissez-moi juste vérifier, je suis sur la page du blog. Si je clique sur la page du blog ici, vous verrez que je reçois une liste de billets abrégés qui n'est qu'un pour le moment. Si je clique sur le billet de blog, vous pouvez voir que c'est la même chose, mais c'est parce que je n'en ai qu'un. En fait, créons un deuxième billet de blog afin que je puisse prouver ce que je dis ici. Appelons ça, encore une fois j'invente des trucs ici. Ne prenez pas trop attention au contenu réel de ces pages. Pour créer ces catégories en tant que Nutrition, cliquez sur Enregistrer et publier. Touchez Terminé. Maintenant, vous pouvez voir ceci est le billet de blog pour les meilleures choses à manger pour rester en bonne santé. Si je retourne sur le blog, vous pouvez voir que nous avons les deux articles ici, donc c'est comme une liste. Cela devrait ramener à la maison l'idée d'une collection. Avec une collection, vous avez une collection d'articles individuels, d' images, de vidéos, dans ce cas, de billets de blog. Si vous allez à la collection, vous pouvez voir la liste et ensuite vous pouvez cliquer sur les éléments individuels. Ce concept est très important à comprendre car nous pouvons réellement éditer le code de la liste et éditer le code des éléments en utilisant le mode développeur Squarespace. Enfin, je veux vous montrer une option de la catégorie finale, qui est l'autre catégorie. Je vais juste ajouter un lien externe. Vous pouvez donc ajouter un lien vers quelque chose qui ne se trouve pas dans votre site Web. Je vais juste mettre et des liens pour dire, nous trouver sur Google. Si je vais ici, salle de gym locale, et ouvrons ça dans une nouvelle fenêtre. Je vais frapper sur ça. Vous verrez que nous avons cette icône de lien externe. Nous pouvons réorganiser les liens dans notre navigation. Nous pouvons déplacer la section À propos de la page à ne pas lier et par conséquent, elle n'apparaît pas dans aucune navigation. Mais fondamentalement, nous avons les trois principaux types ici qui sont disponibles pour nous en ce moment dans notre modèle, qui sont ces pages dynamiques de base avec le générateur de page, la collection, disons dans ce cas un blog et un lien externe. Évidemment, nous avons aussi une page de couverture. Mais tu peux jouer avec ça si tu veux. Une chose que j'ai oublié de faire en fait est d'aller dans notre section design et de mettre à jour le titre du site Web. Donc, au lieu de votre titre de site, je vais l'appeler Votre salle de gym locale. Le slogan vient nous rendre visite. Ce n'est pas vraiment pertinent. Mais maintenant, il va se mettre à jour partout où nous tirons dans le titre du site, il va tirer dans votre salle de gym locale. Cool. Donc, il y a plus de fonctionnalités et nous allons y entrer lorsque nous construisons notre modèle ici. Mais ce sont les concepts de base. Vous êtes essentiellement en train de créer des pages dans cette partie de page ici. Vous pouvez choisir de mettre cela dans une navigation ou de le placer dans la section de non-lien. Nous pouvons en fait construire quelques options ici. Nous pouvons créer nos propres collections. Nous pouvons également créer des pages statiques, ce que je vais vous montrer comment faire. Nous pouvons en fait avoir ce qu'on appelle des dossiers et des index, ce qui nous permet d'imbriquer sur la navigation. Tout cela arrive dans cette classe, mais ce sont les bases de Squarespace. Il n'y a pas grand-chose d'autre en termes de structure. Vous construisez des pages et des collections différentes. Votre modèle déterminera à quoi cela ressemble lorsque vous le visualisez réellement sur votre site Web. Bon, cool. Donc, dans la prochaine vidéo, nous allons commencer à éditer notre modèle et nous allons activer le mode développeur. Donc je te vois dans cette vidéo. 5. Comment modifier votre modèle Squarespace: Dans cette leçon, nous allons enfin introduire ce mode développeur Squarespace, et parler des deux façons de mettre à jour votre modèle. Je veux que vous dirigiez vers la section des paramètres ici et descendiez à Avancé, puis allez au développeur un mode. Si nous cliquons sur cette bascule ici, sera confronté à un avertissement, puis nous cliquerons sur Continuer et sera soudainement activer notre mode développeur. Si nous faisons défiler vers le bas jusqu'aux détails de connectivité, nous pouvons voir tous les détails dont nous avons besoin pour nous connecter à notre site Web Squarespace, et modifier réellement le modèle. Vous avez le nom d'utilisateur et le mot de passe qui sont égaux à votre compte Squarespace, nom d'utilisateur et mot de passe, donc aucune nouvelle information là-bas. Mais ici, nous avons le nom d'hôte SFTP et le port et nous avons un dépôt Git. Le nom d'hôte SFTP, pour autant que je sache, sera toujours dev.squarespace.com. Le port que je pense ne change pas vraiment non plus et l'adresse du dépôt Git, est-ce que cela va être l'adresse de développement de votre magasin avec template.git à la fin. Ceci est sujet à changement, mais en ce moment, c'est comme ça que ça marche. Comme vous pouvez le voir ici, c'est l'adresse de développement de mon magasin et le dépôt Git est juste en train de définir comme un modèle .git sur cela. Maintenant, la façon dont nous allons le faire dans cette classe et la façon dont je recommande est d'utiliser Git. La raison en est que vous pouvez télécharger le code localement et le modifier sur votre propre ordinateur. Vous pouvez le faire avec SFTP, que nous verrons dans une seconde. Mais vous modifiez des fichiers individuels et attendez qu'ils soient téléchargés. Alors qu'avec Git, vous pouvez exécuter un serveur local, apporter des modifications, exécuter sur le serveur local, et lorsque vous êtes prêt, vous pouvez envoyer ces modifications sur votre site Web Squarespace. Push est un peu de terminologie Git. ne savez pas si vous êtes familier avec Git, mais c'est une compétence très importante à apprendre si vous faites du développement Web. Donc j'espère savoir tout sur Git. Si ce n'est pas le cas, nous couvrirons un Git de base. Ça ne va pas être trop dur. Mais avant d'entrer dans Git, ce que je veux vous montrer c'est SFTP, et cela nous permet d'éditer les fichiers directement sur le site. SFTP signifie protocole de transfert de fichiers sécurisé. Vous pouvez être familier avec FTP si vous avez édité un autre site Web auparavant, j'ai édité mon site WordPress en me connectant via FTP, et cela me permet d'éditer les modèles directement. C' est un concept similaire. Ce que nous allons devoir faire est d'installer un client FTP. Celui que j'ai installé est Cyberduck, mais il y en a d'autres que vous pouvez utiliser, comme FileZilla, il y en a probablement tout un tas là-bas. Mais pour ce cours, ce que je vais utiliser, c'est Cyberduck. Si vous voulez suivre exactement comment je le fais, vous pouvez également télécharger Cyberduck. C' est complètement gratuit. Laissez-moi juste chercher pour vous maintenant Cyberduck, il devrait vraiment venir comme la première option. Voilà, tu y vas. Le premier quand vous le recherchez sur Google, d'accord. Je l'ai déjà installé, donc ce que je vais faire est d'ouvrir Cyberduck, et ouvrons un nouveau navigateur. Je vais cliquer sur « Ouvrir la connexion ». Ici, nous voulons changer le protocole de transfert de fichiers pour sécuriser le protocole de transfert de fichiers ou protocole de transfert de fichiers SSH. Pour le serveur, nous devons mettre le nom d'hôte. C' est dev.squarespace.com et le Port est ce qui est écrit ici, 2030. Ensuite, pour le nom d'utilisateur, il le dit déjà, c'est juste votre nom d'utilisateur Squarespace, qui va être une adresse e-mail très probablement et puis pour le mot de passe, j'ai été enregistré dans ma gestion de mot de passe, collé dans là. Et frappons, je ne vais pas ajouter de porte-clés et appuyez sur « Connect ». Il pourrait arriver avec quelques erreurs comme une empreinte digitale inconnue. Pas nécessairement des erreurs, mais plus d'avertissements. Vous pouvez simplement cliquer sur Autoriser. ce moment, il essaie de se connecter. Il est connecté avec succès. Ici, vous pouvez voir qu'il est connecté à mon serveur Squarespace. Maintenant, comme vous pouvez le voir ici, il y a une collection de trois dossiers différents ici, parce que je cours trois sites Web maintenant en mode développeur, j'ai les dossiers pour chacun d'eux. Jetons un coup d'oeil à ce que c'est d'autre. C' est du dahlia-lime-sh9g, ce qui est le premier ici. Je vais double-cliquer pour me concentrer sur ça. Vous pouvez voir ceci ici est notre modèle. Maintenant, afin de démontrer l'édition de votre modèle en utilisant SFTP, ce que je vais faire est de faire une simple modification qui va ajouter une fonctionnalité que nous allons utiliser dans la classe aujourd'hui et qui est d'autoriser des photos. Afin d'autoriser les photos, je vais ouvrir le dossier des collections ici. Ce que je dois faire est de créer un nouveau fichier appelé folders.conf et de le télécharger dans cette collection ici. Si je devais éditer un fichier existant, ce que je peux faire est juste un clic droit sur le fichier et éditer avec tout ce qui est mon éditeur de code préféré. J' aime utiliser Atom pour éditer des fichiers individuels et dire par exemple, je voulais faire une modification à cela, je pourrais faire mon édition frapper « Enregistrer » et il va automatiquement télécharger sur le serveur ici. Très cool. Mais parce que nous créons un nouveau fichier, ce que je vais faire est d'ouvrir à nouveau Atom. Créons ce folders.config. Maintenant, je ne m'attends pas à ce que vous sachiez comment faire cela, alors regardons et trouvons les instructions sur la documentation squarespace. SquarespaceFoldres.conf, j'espère que cela fonctionne. Si nous cliquons sur ce premier lien ici, vous pouvez voir ici la configuration du dossier pour ajouter des dossiers sur votre site, créer un fichier folders.com dans votre dossier collections. Les paramètres standard d'un fichier folder.com sont ci-dessous. Facile. Je vais attraper ça, je vais coller ça dans notre fichier sans titre en ce moment. Je ne veux pas qu'on l'appelle mon dossier. Je vais juste l'appeler dossier et je vais cliquer sur « Enregistrer ». Vous pouvez enregistrer cela n'importe où. Je vais juste l'enregistrer sur mon bureau. Bien sûr, il doit être appelé folders.conf. Appuyez sur « Enregistrer » dessus. Maintenant, je vais ouvrir une fenêtre de navigateur ou une fenêtre de Finder plutôt, naviguez vers le bureau où je mets ce fichier folders.config, allez sur Cyberduck et faites glisser cela dans. Maintenant, vous pouvez voir qu'il est en téléchargement. Ça me donne un avertissement sur l'empreinte inconnue. Je vais cliquer autoriser et pas un grand risque là. Maintenant, il est téléchargé. Pour voir si cela fonctionne réellement maintenant, je vais retourner sur mon site Squarespace. En fait, vous devez actualiser la page pour vous assurer qu'elle tire les dernières modifications. Maintenant, quand je vais dans les pages et cliquez sur ce plus ici, vous verrez que le dossier est apparu en bas ici. En ajoutant ce fichier folders.com à notre dossier collections, j'ai réellement mis à jour mon administrateur dans une nouvelle option. C' est ce que je voulais dire plus tôt par ce que j'ai dit à propos ajout de fonctionnalités à votre modèle par l'utilisation de code. En ajoutant ce fichier com, nous ajoutons une nouvelle fonctionnalité à notre administrateur. Je peux cliquer sur « Dossier » maintenant. Ce que cela me permet de faire, ce ne sera pas un changement permanent, mais je peux imbriquer des choses. J' ai un nouveau dossier. Malheureusement, notre modèle ne prend pas actuellement en charge les menus déroulants, mais comme vous pouvez le voir ici, au moins dans l'administrateur, il est imbriqué et nous verrons comment cela fonctionne en seulement une seconde. Mais c'est un parfait exemple d'ajout de quelque chose à notre site Web Squarespace en utilisant SFTP. Cela va se produire instantanément parce que c'est le code réel, qui est en cours d'exécution en ce moment sur notre modèle. Mais aussi cool que cela soit, je ne vous recommande pas réellement d'utiliser SFTP lorsque vous faites beaucoup de changements sur votre site Web, ce que je recommande à la place est d'utiliser Git. Je vais fermer Cyberduck. Revenons aux paramètres, mode développeur avancé. Ce qu'on va faire, c'est cloner ce dépôt. Maintenant, malheureusement, ce ne sera pas une classe tout à propos de Git. Donc je vais soit supposer que vous avez connaissance de Git soit que si vous ne comprenez pas quelque chose que vous voyez ici, que vous allez chercher et comprendre ce que cela signifie parce que c'est supposé savoir que vous savez, un peu d'un Git ou que vous pouvez toujours suivre le long même sans savoir exactement ce que toutes les commandes dans Git. Mais fondamentalement, le concept ici est que nous allons cloner ce dépôt dans notre ordinateur. Cela signifie que nous prenons juste le code dans ce dépôt et le copions sur notre ordinateur. Je vais copier cette adresse. Ce que je vais faire est d'ouvrir mon application terminal. Ouvrez votre application de ligne de commande préférée. J' utilise iTerm. L' application par défaut sur un Mac est Terminal, et l'application sur un ordinateur Windows, je crois s'appelle Invite de commandes. Mais Git devrait fonctionner exactement de la même manière. Ce que je vais faire, c'est que je vais aller dans mon répertoire de code. Ici, vous pouvez simplement l'exécuter sur votre bureau si vous le souhaitez. C' est à vous de décider. Mais pour moi, je vais aller dans mon dossier de code personnel, dans courant, et en fait je vais y jeter un oeil. J' ai déjà un fichier appelé template. J' ai donc juste besoin d'aller rapidement dans mon dossier de code et de renommer cela. Cela ne vous affectera probablement pas, va juste appeler ce modèle 1, parce que lorsque vous clonez, il va être modèle froid comme il est écrit ici. D' accord, donc peut le clarifier maintenant. Ce que je vais faire, c'est exécuter le clone Git. Git clone, collez cette adresse dans, puis appuyez sur « Entrée ». Maintenant, il va dire le clonage dans le modèle. Il est important que cela ne fonctionne pas à moins que vous ayez installé Git. Alors assurez-vous d'aller sur le site Web pour Git. Si vous ne l'avez pas déjà et que vous l'installez, il devrait être assez simple. Quoi qu'il en soit, revenons à la leçon en ce moment, il va nous demander le nom d'utilisateur et le mot de passe, et c'est égal à notre nom d'utilisateur et mot de passe Squarespace. C' est facile. Il suffit d'utiliser le même processus qu'avant. Maintenant, il va demander le mot de passe. Je suis là, ma gestion de mot de passe a frappé « Entrée ». Si l'accès n'est pas refusé, il va réellement le télécharger. Ce qui va se passer, c'est que nous pouvons réellement changer dans le répertoire des modèles maintenant. Maintenant, ce que je vais faire est d'ouvrir mon éditeur de code préféré, qui a changé maintenant j'utilise le code VS. Je vais quitter le terminal. Ouvrez le code VS. Vous n'avez pas à utiliser exactement les mêmes éditeurs de code moi, ce code VS est assez bon. Il a ouvert un de mes projets précédents, mais ce que je veux faire est de cliquer sur ouvrir. En fait, il charge le modèle car il a le même nom que celui que je chargeais auparavant. Mais juste pour être sûr que vous voulez cliquer sur « Modèle ». Maintenant, vous avez le code du modèle assis localement sur votre ordinateur. Vous pouvez modifier cela autant que vous le souhaitez, mais les modifications ne seront pas mises en ligne sur votre site Web tout de suite. J' ai l'impression que cette vidéo est un peu longue. Pour la partie suivante où nous installons le serveur live Squarespace et commençons à l'exécuter, je vais séparer cela dans la vidéo suivante. Dans la vidéo suivante, nous allons réellement exécuter un serveur local, ce qui nous permet d'exécuter un grand nombre de parties de notre site Squarespace localement. Il va toujours se connecter aux serveurs Squarespace pour apporter les données. Mais nous pouvons réellement exécuter le code que nous avons ici sur un serveur local. Ça va être dans la prochaine vidéo. Je te verrai dans celui-là. 6. Serveur direct Squarespace: Dans la dernière vidéo, nous avons téléchargé notre modèle Squarespace sur notre propre ordinateur, qui nous permet de l'ouvrir dans un éditeur de code de notre choix et de creuser dans les dossiers, cliquer sur divers fichiers et de les éditer. Je suis bien sûr, en utilisant Visual Studio Code, mais vous pouvez utiliser n'importe quel logiciel de codage ou éditeur de codage que vous aimez utiliser. Il y a un conseil que je vais vous donner est que quel que soit l'éditeur de code que vous utilisez, vous devriez activer une extension qui permet le formatage de ce code ici, qui est JSON-T. Nous en apprendrons plus sur JSON-T plus tard dans cette classe. Mais si vous utilisez VS Code, l'extension que j'utilise est appelée JSON template par stormwarning. Sans cela, la mise en évidence de la syntaxe de JSON-T ne se produira pas. Cela fonctionnera toujours, mais il sera juste plus difficile de travailler avec parce que vous n'aurez pas ce joli codage couleur qui se passe. Le flux de travail de modification de votre modèle est que vous allez apporter vos modifications localement comme il est connu. Ensuite, vous devrez valider ce code, puis pousser sur le site Web Squarespace. À ce stade, le code que vous avez ici sera le même que celui que vous avez sur votre site Squarespace. Maintenant, si nous n'étions pas en train d'exécuter un serveur local et que nous devions valider et pousser du code en utilisant git chaque fois nous voulions voir un changement sur notre site Web qui deviendrait assez fatigant et nous pourrions aussi bien utiliser SFTP, nous avons vu dans la dernière leçon. Ce que je propose à la place, c'est que nous utilisons un serveur local et un serveur nous est fourni par Squarespace appelé Squarespace Live Server. Un grand avertissement avant d'entrer dans Squarespace Live Server, il n'est pas si bien entretenu par Squarespace. Je vais vous montrer un e-mail dans une seconde où j'ai installé Squarespace Live Server. Cela n'a pas fonctionné et j'ai effectivement contacté le support et ils ont admis qu'il y a une zone spécifique que j'ai dû réinstaller qui n'a pas été correctement installée par défaut. Reconnaissez ici qu'il peut y avoir des problèmes avec l'exécution de Squarespace Live Server, et c'est à Squarespace de publier la version la plus correcte et la plus récente sur GitHub et sur son propre site Web. Mais ce que je vais dire est que si vous avez des problèmes ici avec Squarespace Live Server, je voudrais certainement contacter le support Squarespace d'abord avant de plonger dans les commentaires. Sauf si c'est quelque chose de spécifique que j'ai fait et que vous vous demandez. Mais sinon, si Squarespace Live Server change à l'avenir, qu'il est susceptible de faire, et qu'il reçoit une erreur que vous ne voyez pas dans cette classe, alors il est probablement préférable pour vous d'aller demander à Squarespace, quoi de neuf ? Comme ce que j'ai fait. Très bien, donc avec ça hors du chemin, nous devons nous assurer que nous avons quelque chose appelé npm installé. Je vais ouvrir une fenêtre de navigateur et je vais taper npm. Npm signifie gestionnaire de paquets Node. C' est un logiciel qui nous permet d'installer des paquets. Vous n'avez pas nécessairement besoin de tout savoir sur ce qu'est un paquet, mais vous devez avoir npm installé pour exécuter Squarespace Live Server. J' ai déjà installé npm et si vous ne le faites pas, je suis sûr que c'est assez simple à faire. Passons à la documentation. Je suis sûr que si vous allez dans commencer, pas le site le plus convivial, mais si nous allons à Google, installer npm, alors vous pouvez voir, get npm est l'adresse que vous cherchez, d'accord. Vous pouvez télécharger Node.js puis npm et vous pouvez suivre toutes ces instructions pour vous assurer que npm est installé. J' ai déjà installé npm, comme je l'ai dit. En ce moment, ce que je vais faire est d'ouvrir un terminal parce que j'ai déjà mon éditeur de code ouvert. Je vais ouvrir le terminal dans mon éditeur de code et de cette façon, il est déjà défini sur le bon répertoire. Maintenant, je vais exécuter la commande pour installer le serveur Squarespace Live Server qui est npm install -g @squarespace /server. Maintenant, comment puis-je savoir que c'est la bonne commande ? Eh bien, j'ai eu ça de la documentation officielle de Squarespace. Ceci est sujet à changement. Je recommande que si vous vous perdez à ce stade, dirigez-vous vers developers.squarespace et la page en ce moment est local-development et comme vous pouvez le voir ici pour installer le serveur dev, c'est la commande. On va frapper ça. Je l'ai déjà installé. Mais c'est ce que vous devez faire si vous ne l'avez pas déjà installé. Nous devons accepter les conditions d'utilisation des développeurs. J' ai déjà lu ce document, donc je vais appuyer sur Entrée, puis sur Oui. Cela va prendre un peu de temps pour installer et regrouper JRE compatible. Tu n'as pas besoin de savoir ce que ça veut dire. Il faut juste un peu de temps pour l'installer. J' ai juste besoin d'être patient et une fois qu'il sera installé, ça fonctionnera avec espoir. Voilà, tu y vas. Maintenant, la raison pour laquelle je dis que cela fonctionnera avec espoir est que je l'ai exécuté plus tôt et que cela n'a pas fonctionné et que j'ai dû contacter le support Squarespace. Je vais juste vous montrer l'e-mail maintenant. Si je vais dans cet e-mail de support, vous verrez qu'il y avait un problème et que l'équipe d'ingénierie a dû appliquer un correctif au code du serveur de développement local. Ils m'ont juste demandé de relancer l'installation avec la dernière version. La raison pour laquelle je vous montre ceci est, ceci est sujet à changement et cela dépend de façon dont Squarespace veut maintenir le projet. Si vous rencontrez des problèmes, vous devrez peut-être contacter le support technique. Je les ai trouvés très réactifs. Ils ont pu m'aider et ils ont résolu le problème assez rapidement. Si vous obtenez des erreurs après cela, absolument contacter le support technique de Squarespace. Très bien, avec ça hors du chemin, on peut commencer à faire fonctionner notre serveur Squarespace. La façon dont nous faisons cela est de taper SquarePace-server. Ensuite, nous avons mis l'adresse de notre site après cela. Je l'ai actuellement fermé. Mais si je retourne à account.squarespace.com, trouve ce site Web, vous pouvez voir que c'est l'adresse du site Web. Je vais copier cela, mettre cela juste après le serveur Squarespace et ensuite vous voulez utiliser le drapeau - -auth, et cela va vous empêcher d'obtenir des erreurs de permission refusée. Très bien, alors frappez ça. Maintenant pour vous, il peut vous demander à nouveau votre nom d'utilisateur et votre mot de passe, auquel cas il suffit de le saisir. Mais pour moi, je suis déjà connecté et ce qu'il dit c'est qu'il écoute sur le port 9,000. Ce que cela signifie, c'est que nous pouvons aller à notre navigateur, ouvrir un nouvel onglet ou une nouvelle fenêtre et exécuter localhost : 9000. C' est juste localhost : suivi du numéro de port, qui est généralement 9 000. Maintenant, lorsque vous démarrez, Squarespace Live Server prend généralement un peu de temps pour démarrer. Encore une fois, nous devons être un peu patients ici. Vous verrez après une période, nous sommes maintenant en cours d'exécution de notre site Web, mais sur notre propre ordinateur, ce qui est assez cool. Si je clique sur Blog, vous verrez que nous avons la page de blog et ensuite nous pouvons cliquer sur les billets de blog individuels, cliquez sur la page À propos de nous. Le lien externe devrait fonctionner. On a le site sur notre ordinateur. Maintenant, il est important de noter ici que si vous voulez apporter des modifications à votre administrateur, vous devrez certainement pousser votre code. Ce serveur en direct va se mettre à jour dès que nous éditons n'importe quel code dans ce dossier ici. Comme vous pouvez le voir, il accède à tous les fichiers. Si nous devions changer quelque chose, ça arriverait tout de suite. Mais si on veut changer quelque chose sur notre administrateur. Ici, par exemple, où nous avons ajouté la possibilité d'avoir des dossiers, nous allons devoir pousser ce code. D'accord. Nous verrons comment cela fonctionne dans une vidéo ultérieure. Mais pour l'instant, vous avez votre Squarespace Live Server en cours d'exécution et vous êtes en mesure d'apporter des modifications au code modèle qui, pour la plupart, sera affecté instantanément sur cette version locale, désolé, sur cette version locale. Encore une fois, comme je l'ai dit, si vous voulez qu'il aille dans cette version qui est sur le site Web de Squarespace, vous allez devoir pousser, ce que nous aborderons plus tard. Mais si par exemple, je voulais changer l'endroit où le titre est à quelque chose de complètement différent. On arrivera là où tout se trouve dans une seconde. Mais par exemple ici où le titre du site est, si je change cela pour juste titre du site, appuyez sur Enregistrer sur cela, puis actualisé mon site Web ici, vous pouvez voir les mises à jour instantanément. Mais ici, sur le serveur Squarespace, vous n'avez rien changé tant que vous n'avez pas poussé ce code, qui signifie que vous le téléchargez sur Squarespace. Bon, donc je vais revenir au champ dynamique. Ça va être tout pour cette leçon. Dans la leçon suivante, nous allons en fait parler des principaux concepts de développement de modèles parce que nous devons comprendre conceptuellement comment tout cela fonctionne avant de pouvoir réellement y creuser et modifier du code. J' attends avec impatience celle-là. Je te verrai dans la prochaine vidéo. 7. Structure du modèle et couche de données JSON: Dans cette vidéo, nous allons parler de la structure du modèle, et si nous avons le temps, nous allons parler de l'autre concept, que nous devons comprendre pour le développement du modèle, y compris, Jason fille, et Jason T. J' ai mon site Web ou mon modèle en cours d'exécution à localhost:9000 avec la commande que nous avons vu auparavant, squarespace-server, suivi de votre adresse de site Web, puis dash, dash auth. Dans un autre navigateur, j'ai ce diagramme. Ce que vous voyez ici est un diagramme conceptuel que j'ai préparé qui explique comment le modèle est tout configuré. Donc, sans plus tarder, je vais sauter directement. Donc, en haut, vous avez votre modèle, qui est configuré par le fichier template.conf. Donc, si nous retournons dans notre dossier ici, nous pouvons voir ce fichier ici, template.conf c'est un fichier de configuration qui se trouve au cœur de votre template. Il donne le nom au modèle, il fournit l'auteur, et nous pouvons définir les mises en page, les navigations, ainsi que les feuilles de style afin que nous puissions les charger. Si nous revenons au diagramme, vous pouvez voir que ce fichier template.conf est l'endroit où vous définissez les mises en page et les navigations. Donc, si je retourne au code, vous pouvez voir que nous avons un objet ici pour les mises en page, et nous avons un objet ou, un tableau avec un objet à l'intérieur pour les navigations. Si je retourne ici aux mises en page, vous verrez que les mises en page sont directement liées aux régions. Donc, ici, dans les mises en page, nous avons une mise en page par défaut à trouver. Il est juste appelé par défaut, et les régions qu'il utilise en est une et c'est le fichier site.region. Donc, dans un site Web de base, il n'y a qu'un seul fichier site.region, et c'est la mise en page. Fondamentalement, il existe une relation un-à-un entre ceci et la mise en page. Mais comme vous le verrez dans une vidéo ultérieure, nous pouvons séparer nos fichiers de région et créer une mise en page qui a plusieurs fichiers de région combinés, et cela aura beaucoup plus de sens une fois que nous y arriverons dans une vidéo ultérieure . est ce tableau de navigations. Comme vous pouvez le voir sur notre site, nous avons ce bloc de navigation ici, que nous pouvons voir dans notre code comme la navigation du site avec le nom dans le code de navigation du site. Nous pouvons réellement ajouter des navigations à notre modèle en ajoutant à ce tableau ici. Donc on pourrait vouloir ouvrir ça, et lancer une autre navigation pour, je ne sais pas, la navigation secondaire, peut-être. Voilà, tu y vas. On ne va pas vraiment faire ça dans cette classe, donc je vais supprimer ça. Mais théoriquement, nous pouvons avoir autant de navigation que nous le voulons. Je ne suis pas sûr qu'il y ait une limite pour eux, mais nous pouvons certainement en avoir plus d'une. Même chose avec les mises en page, nous pouvons créer autant de mises en page que nous le voulons, et nous pouvons combiner des fichiers de région pour créer ces mises en page. Pour revenir au diagramme de cette structure, vous pouvez voir ici que les régions composent les mises en page, et un bloc est directement lié à une navigation. Donc, si nous revenons à notre code ici, à l'intérieur de ce dossier de blocs, nous pouvons voir ce site-navigation.block. C' est ce qui détermine le code de navigation de notre site. Donc, ce juste ici est de déterminer cela ici, ces éléments de navigation et comment ils fonctionnent, est défini ici. La chose qui relie réellement la navigation, nous allons entrer dans les détails plus tard dans cette classe. Mais nous pouvons réellement lier la navigation en utilisant le nom du nav tel qu'il est défini dans le fichier template.conf en utilisant cette balise de navigation squarespace. Donc, quand nous utilisons cette balise, nous apportons ce bloc spécifique. Comme je l'ai mentionné les gars, nous allons voir ça en pratique très bientôt. Mais tout comme un aperçu conceptuel de haut niveau, nous parlons de la façon dont la structure fonctionne tous ensemble pour produire le modèle.L'autre chose que j'ai écrit ici est que les blocs peuvent aussi être partiels, et les partiels ne sont que des extraits de code réutilisable. Si vous vous trouvez déjà à écrire le même code, et à l'inclure dans plusieurs parties de votre modèle, alors vous allez vouloir utiliser un bloc, écrire le code une fois dans ce bloc, puis faites simplement une référence à ce bloc pour apporter ce code partout où vous en avez besoin. Pour moi personnellement, je n'ai pas trouvé beaucoup de situations dans lesquelles j'ai besoin d'utiliser une partie, donc je ne sais pas s'il y a un exemple spécifiquement dans cette classe, mais je vais fournir un lien vers la documentation sur la façon de l'utiliser. En fait, c'est assez simple. Donc, comme vous pouvez le voir, les blocs mènent à des régions, parce que comme je vous l'ai déjà montré, nous devons apporter le bloc à notre fichier de région d'une manière ou d'une autre, et avec la navigation, c'est comme ça. Avec les partiels, c'est une étiquette différente. Mais essentiellement, nous utilisons toujours le fichier de région ou peut-être le fichier de liste ou d'élément, que nous allons regarder dans une seconde, nous les utilisons pour apporter ces blocs. Ainsi, les blocs seuls n'apparaîtront nulle part, ils doivent être dans un fichier de région, ou sur un élément de collection ou un fichier de liste. Pour revenir au diagramme, vous pouvez voir ici les régions lien vers ce nuage, qui est squarespace.main-content. La raison pour laquelle il s'agit d'un nuage est que ce n'est pas un fichier particulier, c'est juste un attribut sur l'objet squarespace, nous verrons en une seconde qui affiche le contenu de la page. Donc, si nous allons dans notre fichier site.region, et que je cherche squarespace.main-content, qui est juste ici, vous pouvez voir que c'est là que le contenu principal de la page sera chargé dans. Maintenant, beaucoup du temps que le contenu principal tel qu'écrit ici, est déterminé par le contenu d'une page squarespace régulière. Ou comme il est dit dans le code ici, c'est le contenu CMS. Donc, comme nous l'avons vu avant quand nous utilisions le générateur de page pour construire, disons par exemple la page à propos et nous avons ajouté des blocs, et utilisé l'interface pour changer cette image, tout cela ici, est le contenu principal qui arrive à travers. Donc, comme vous pouvez le voir, quelle que soit la page sur laquelle nous sommes, nous obtenons toujours tout le code qui l'entoure. Mais le code à l'intérieur de squarespace.main-content est le contenu de la page qui change. Encore une fois, nous allons voir tout cela dans la pratique, très bientôt mais juste une compréhension conceptuelle de haut niveau, vous devrez peut-être revenir au diagramme à mesure que vous allez dans cette classe, et c'est cool, mais c'est la théorie globale derrière le modèle. Si vous avez créé une page Squarespace normale, comme celle-ci, et que vous avez mis dans le contenu de la page à l'aide de l'administrateur , le contenu squarespace.main sera juste ce contenu. Mais si vous avez configuré ce qu'on appelle une page statique, qui est une page que nous écrivons nous-mêmes dans le modèle, alors ce contenu apparaîtra dans cet objet, squarespace.main content. Si nous examinons une collection particulière, ce que nous verrons est soit le contenu par défaut du système qui provient de Squarespace. Ou si nous avons défini le code de collection nous-mêmes dans notre modèle, alors le contenu squarespace.main apparaîtra le fichier de liste. Exemple parfait, ici, nous avons une collection définie, qui est le blog. Lorsque nous sommes sur la page de liste de blog, c'est le code qui apparaît. Si nous allons sur notre site et cliquez sur ce lien pour le blog, cette page ici, est déterminée par le code dans ce fichier. Bien sûr, ce code passe par le contenu Squarespace.Main et ensuite il a tout le code autour d'elle. Juste pour rendre ces gars plus clairs, je vais inspecter cela dans le navigateur, et vous montrer que nous avons ce conteneur ici, conteneur contenu, dans notre région de site. Là, vous pouvez voir, et tout ce qu'il contient, est le code du fichier blog.list. En allant ici à blog.list, vous pouvez voir l'identifiant de l'article. Il y a tous les articles dans cette boucle d'élément, que vous pouvez voir le commentaire juste là. Le niveau suivant vers le bas est l'élément. Rappelez-vous que nous avons parlé de la façon dont une collection est une liste d'éléments, et vous pouvez jeter un oeil à la liste complète de chaque élément, tandis que le fichier d'élément est le code qui compose la page d'éléments individuels. Si nous allons dans notre code ici et regardons blog.item, ce sera le code qui sera chargé dans le contenu squarespace.main, si nous sommes sur un élément individuel. En cliquant sur cinq exercices à faire à la maison, ce code ici à l'intérieur de cette balise principale particulière, sera le code que nous avons mis en place ici. C' est la structure du modèle juste là, c'est en fait assez simple une fois que vous avez la tête autour. Évidemment, en ce moment, c'est juste conceptuel et une fois que vous commencerez à le faire, vous allez consolider cette connaissance conceptuelle. Je n'ai créé ce diagramme qu'après avoir parcouru et fait du développement de modèles. Il faut un certain temps pour que ce concept soit cimenté dans votre esprit, alors ne vous inquiétez pas, si tout cela est un peu vague pour le moment, nous allons entrer dans chacun de ces différents fichiers dans cette classe aujourd'hui. Mais le deuxième concept dont nous devons parler est le JSON DataLayer et JSON-T. Au risque que cette leçon dure un peu trop longtemps, je vais parler de JSON-T, qui est le langage de modélisation des modèles Squarespace. Maintenant, sur chaque page de votre site Web Squarespace, il y a un DataLayer JSON qui existe. JSON est juste un moyen simple de représenter une structure de données, vous n'avez pas besoin d'avoir trop peur de ce que JSON est, si vous n'êtes pas déjà familier avec elle. Mais sur n'importe quelle page de notre site Web, ce que nous pouvons faire est d'ajouter un point d'interrogation, puis d'écrire format=JSON-pretty, et nous verrons cette page sous forme JSON. Donc, comment fonctionne JSON est, il y a juste un objet parent, puis nous allons et creusons dans ces objets enfants. Ensuite, à l'intérieur d'eux, nous avons différents attributs et plus d'objets imbriqués, tableaux, toutes sortes de choses. Voici toutes les données dont nous disposons sur cette page particulière. Sur chaque page, ce que vous trouverez est que nous avons un objet de site Web, sorte que nous pouvons accéder au titre du site de notre site Web à partir de n'importe quelle page. Nous pouvons accéder à des choses comme, le slogan du site, nous pouvons accéder à différentes parties des paramètres de notre site Web. Nous pouvons consulter le compte actuellement connecté. Les données de la page individuelle se trouvent dans cet objet de collection. Je sais que c'est un peu déroutant, étant donné que cette page d'accueil que nous regardons n'est pas en fait une collection elle-même, mais chaque page, les données de cette page spécifique dans Squarespace sont contenues dans cet objet de collection. Comme vous pouvez le voir, le titre de cet objet de collection est Bienvenue, qui est notre page d'accueil. Vous pouvez voir s'il a des balises ou des catégories sur cette page. Le nom de la région que nous utilisons, qui, je crois, est la mise en page, l'étiquette de type, toutes sortes de données relatives à cette page spécifique. Maintenant, comme nous le verrons plus loin, il y a aussi une donnée qui devient disponible dans le contexte d' un bloc et qui nous permet de retirer des éléments de notre navigation. Mais pour l'instant, c'est le concept principal, c'est que, nous avons cette couche de données assis sur chaque page, quelle que soit la page vers laquelle nous allons sur notre site Web. Peut-être que je vais à la page du blog, vous verrez que c'est à quoi il ressemble sur le front, mais derrière chaque page de votre site Squarespace, il y a des données JSON qui se rapportent à cette page. Beaucoup de ces objets vont avoir les mêmes informations que sur n'importe quelle page comme votre site Web, cela ne va pas changer. Mais alors l'objet de collection ici est la chose qui va changer, en fonction de la page sur laquelle vous êtes. Nous avons le titre, nous avons la quantité d'éléments dans cette collection, et comme vous pouvez le voir, toutes les balises que nous avons ajoutées sont dans ce tableau ici et toutes les catégories du blog sont répertoriées ici, dans ce tableau. Ce que je reçois ici, c'est que, toutes les données que vous voulez afficher dynamiquement sur votre page, proviennent de cette couche de données JSON. Comme vous pouvez le voir ici, nous avons en fait les éléments individuels pour le blog. La façon dont nous prenons réellement les données de cette couche JSON, et les représentons sur la page, est par JSON-T. Je vais ouvrir un nouveau navigateur ici, charger, developers.squarespace.com, tête à modèle docs. Comme vous pouvez le voir ici, sous ce menu, nous avons un ensemble complet d'instructions sur la langue du modèle. Il parle de ce qu'est JSON-T et parle de quelques petits morceaux de terminologie. Je pense que nous avons peut-être déjà abordé beaucoup de choses dans cette leçon. Je vais diviser ça en une autre leçon. Parlons de JSON-T plus en détail dans la vidéo suivante. 8. Aperçu de JSONT-T: Dans la dernière vidéo, nous avons appris sur la structure du modèle, et nous avons introduit la couche de données JSON. La façon dont nous apportons réellement ces données JSON sur la page est via JSON-T. Je voulais séparer ce concept en une autre leçon, parce que j'ai réalisé qu'il y avait un peu à franchir ici. Il y a beaucoup de documentation ici sur le site Web de Squarespace, mais j'admets même pour moi qu'il a fallu un peu de temps et pratique pour comprendre pleinement ce langage de base. Mais après l'avoir utilisé dans la pratique et comprendre comment cela fonctionne, j'ai réalisé que c'est assez simple et j'espère que cette leçon vous rendra un peu plus facile à comprendre aussi. JSON-T est un langage de modèle puissant conçu pour être jumelé à un jeu de données JSON. C' est la phrase clé ici, elle est conçue pour être jumelée à un jeu de données JSON. Rappelez-vous dans la dernière vidéo, nous avons vu comment une page devient un jeu de données JSON lorsque vous mettez le format de point d'interrogation est égal à JSON Pretty. En fait, les données sont toujours là assis sur cette page, indépendamment du fait que nous mettions cela dans notre navigateur ou non, c'est juste pour afficher les données dans un bon format. Mais si nous allons sur n'importe quelle page et nous, c'est un bon domaine à aborder. Parfois, vous obtenez une erreur de serveur interne 500, vous avez juste besoin de redémarrer le serveur, puis il devrait fonctionner à nouveau. Frustrant, mais il semble être la seule chose qui le corrige à ce stade. Maintenant ça dit écouter sur le port 9 000 je vais le rafraîchir. Maintenant que nous avons à nouveau notre site Web, ce que je vais faire est de mettre la couche de données JSON de n'importe quelle page dans notre console JavaScript en utilisant le code fourni ici. Nous pouvons aller voir les données JSON, et nous pouvons jeter cela n'importe où dans un fichier particulier et nous arriverons à consoles enregistrer l'objet pour la portée actuelle dans notre console JavaScript. On verra ça dans une seconde. Si nous voulons que cela se produise sur chaque page, nous pouvons le mettre dans notre fichier site.region, mais bien sûr, cela signifie que le fichier site.region sera le contexte. Il ne montrera que ce qui est dans la portée de ce site.region. Cela n'a peut-être pas beaucoup de sens. Mais nous verrons dans une seconde comment cela fonctionne. Je vais le mettre juste ici après le body tag, frapper sur ça. Rafraîchissons la page et ouvrons notre console, et vous pouvez voir ici nous avons un objet. C' est le même objet que nous avons regardé avant quand nous avons tapé dans le format est égal à JSON Pretty, mais maintenant nous pouvons réellement voir la page et nous pouvons voir l'objet aussi. Comme vous pouvez le voir ici, il tire les éléments de ce tableau d'éléments. Voici toutes les informations qu'il utilise, et nous tirons cela en utilisant JSON-T. Je vous recommande lorsque vous écrivez JSON-T, pour ouvrir l'objet parfaitement dans votre console comme ceci, puis vous pouvez commencer à naviguer dans l'objet pour déterminer comment vous allez réellement tirer l'attribut spécifique que vous voulez hors de cet objet. Les principaux concepts à comprendre avec JSON-T, si nous revenons à la documentation est que si nous avons un objet dans JSON qui a baz bonjour et que nous écrivons baz, nous allons obtenir bonjour. Si nous mettons la clé dans notre document, nous obtiendrons la valeur. C' est ce qu'on appelle une paire de valeurs de clé dans JSON. Jetons un coup d'oeil à notre page ici et voyons un exemple. Comme vous pouvez le voir ici, nous avons la balise body d'ouverture, et à l'intérieur de l'ID, nous sortons l'ID de page sur l'objet Squarespace. Jetons un coup d'oeil à la façon dont cela correspond à notre objet ici. Si je regarde l'objet, faites défiler vers le bas, vous pouvez voir qu'il y a un objet Squarespace. Si j'ouvre cet objet d'espace carré, je peux voir l'ID de la page. Ceci ici fait référence à cette valeur ici, et si nous regardons et inspectons notre code HTML en ce moment, vous pouvez voir que c'est la valeur réelle qui va dans le champ ID. À un niveau très basique, nous pouvons commencer en haut de l'objet, puis nous pouvons cibler n'importe quel objet dans cet objet, puis en utilisant la .notation, nous pouvons aller plus loin. Nous pouvons prendre l'objet Squarespace puis aller dans l'ID de la page. Encore une fois, vous pouvez voir ici nous prenons des classes de page de l'objet squarespace. Donc, vous squarespace les classes de page, voilà. Nous pouvons également utiliser ce qu'on appelle une balise de section. Ce qu'une balise de section nous permet de faire est de zoomer sur une zone particulière de notre jeu de données JSON. Ici, vous pouvez voir au lieu de simplement avoir un site Web, nous avons commencé la balise avec une section, et nous devons également avoir un .end pour signifier la fin de ce bloc de code. Ce que cela représente ici, c'est l'objet sur lequel nous allons zoomer. Donc, nous avons section site Web, si nous revenons à notre jeu de données, rappelez-vous que nous avons vu avant l'objet du site ici, donc voici le site Web. Ce que nous faisons essentiellement, c'est que nous zoomons sur cet objet particulier, puis le symbole 'at' que nous n'avons pas vu ici, mais nous avons vu ici va être mis sur le site Web parce que nous sommes dans cette portée. Si nous voulons prendre un attribut particulier de cet objet, nous n'avons plus besoin d'écrire website.site title parce que nous sommes déjà étendus à un site Web. Ensuite, nous pouvons simplement référencer n'importe quelle clé dans cet objet sans avoir à écrire le parent. sauve juste un peu de réécriture. Ici vous pouvez voir à l'intérieur de l'objet du site, nous cherchons le titre du site, faites défiler vers le bas, vous pouvez voir le titre du site. Nous pouvons également simplement supprimer cette section complètement et au lieu d'avoir un code de section, nous pouvons faire comme je l'ai déjà dit. Nous pouvons en fait juste pour le titre spécifique du site ici, nous pouvons juste mettre le titre du site website.site. Cela devrait fonctionner tout aussi bien, ce qui est le cas. Je vais changer à ce retour. Cela devrait expliquer les sections. Revenons ici et regardons une section répétée. Si nous avons une clé avec une valeur qui est un tableau, alors nous pouvons fondamentalement parcourir tous les éléments et la portée à cet élément particulier en utilisant la section répétée point, puis le nom de l'objet. Comme je l'ai mentionné précédemment, ce symbole fait référence à l'objet portée. Voyons cela en action ici en allant à notre bloc de navigation. Parce que la navigation n'est pas une page en soi, nous allons devoir prendre ce code, diriger vers la navigation du site, et une fois que c'est dans cette section répétée, ici nous prenons les éléments de navigation et nous extrayons les données de chaque élément individuel. Si je devais faire un journal de console ici, nous allons maintenant voir les données pour chaque élément individuel. Rafraîchissons par ici. Comme vous pouvez le voir, nous avons quatre éléments de menu, et par conséquent, nous avons quatre objets qui apparaissent. Tous ces objets devraient être assez similaires car ils sont tous des liens. Comme vous pouvez le voir à l'intérieur, nous avons des attributs comme, est-ce le lien actif, est-ce un dossier, et nous avons l'objet de collection, qui nous donne toutes les informations comme celui-ci est en fait un lien de dossier. Je vais aller au second. Ici vous pouvez voir ceci est le lien vers le blog. Nous avons le titre du lien et, plus important encore, nous avons en fait l'URL du blog, et c'est ce dont nous avons besoin pour créer un lien. En revenant à ici, vous pouvez voir à partir de cet élément, nous sommes à la portée de la collection et nous prenons l'URL complète et le tittle de navigation. Encore une fois, nous parcourons et mettons tous ces objets comme vous pouvez le voir, et pour n'importe quel objet donné dans cette boucle, nous allons dans la collection, nous zoomons sur ce contexte, et nous prenons la navigation et l'URL complète comme vous pouvez le voir ici. Ici, nous zoomons également sur une autre partie du contexte JSON, nous zoomons sur le lien externe. Si nous ouvrons l'objet final, vous pouvez voir qu'au lieu d'un objet de collection, il a un lien externe. Ensuite, nous tirons de cela le titre et l'URL comme vous pouvez le voir ici, URL et titre. Il est important de noter ici aussi que la section étiquetée ici nous permet de vérifier l'existence de cet objet. Ici, vous pouvez voir cela signifie essentiellement, s'il y a un objet de collection, retirez l'URL complète et le titre de navigation et mettez-le dans cette structure HTML. S' il n'y a pas de lien externe, prenez cette information et mettez-la dans un lien de la même manière. Comme vous pouvez le voir ici, c'est un exemple parfait. Il n'est pas en fait d'utiliser les données de la nouvelle fenêtre parce que la nouvelle fenêtre est juste vraie ou fausse, juste ici. Mais c'est essentiellement dire si la nouvelle fenêtre est vraie, alors nous allons ouvrir un lien dans un nouvel onglet en utilisant cible égale soulignement vide. La section nous permet de zoomer dans un contexte particulier avec l'objet JSON, mais elle nous permet également de vérifier si un attribut ou un objet existe dans cette portée. Comme vous pouvez le voir ici, c'est un autre exemple. Si actif est vrai, alors nous allons mettre cette classe sur cet élément de liste. Je comprends que cela pourrait être un peu lourd pour contourner votre tête au début, mais comme vous vous déplacez et commencez à l'utiliser, vous commencez à réaliser que ce langage JSON-T n'est pas si complexe. C' est en fait 80% à 90% de la langue entière. C' est juste zoomer les intersections et extraire les données de l'objet JSON comme ceci. Si nous revenons à la documentation, il y a d'autres choses à noter. Si nous cliquons sur les directives, vous pouvez voir que nous avons la section, section répétée. Nous pouvons également créer un ou qui est comme un autre. Nous pouvons vérifier l'existence de l'article. Si elle existe, nous l'avons, mais sinon, nous aurons cette apparition. Vous pouvez également avoir des alternants avec qui est assez cool. Comme vous êtes en boucle à travers quelque chose, nous pouvons ajouter quelque chose à la fin de chaque ligne. Ensuite, nous pouvons également créer nos propres variables. Si nous voulions nous faciliter la vie, nous pouvons assigner certains attributs dans une variable personnalisée et les utiliser. Honnêtement, je n'utilise pas vraiment cette fonctionnalité du tout parce que les données sont toutes là. n'y a pas beaucoup d'options pour manipuler des variables de toute façon dans JSON-T, mais c'est aussi une option juste là. Nous pouvons également ajouter des commentaires, mais ce n'est pas particulièrement important. Les principaux autres concepts à comprendre est ceci, prédicats. Ces prédicats essentiellement, pas nécessairement des objets dans votre contexte JSON, mais des directives spéciales que Squarespace fournit afin de vérifier l'existence de choses. Un commun et celui que nous verrons dans cette classe est le prédicat de dossier. Cela teste essentiellement si l'élément de navigation est un dossier. Dans la situation ici, où nous avons ce premier lien en tant que dossier, nous voulons le traiter différemment. Désolé, je dois cliquer ici. Nous voulons traiter celui-ci différemment des autres liens parce que c'est un dossier, n' est pas un lien vers une page. prédicats nous permettent de vérifier si le contexte que nous recherchons répond à un certain critère, et nous le verrons en une seconde. Nous avons également cette chose appelée un formateur JSON-T, et nous l'avons déjà vu maintenant en prenant l'objet et en le transformant en quelque chose qui est joli JSON. Si je supprime cela, je me demande si mon navigateur affichera toujours l'objet bien. Si nous actualisons la page ici, vous verrez que mon navigateur reconnaît toujours cela comme JSON et le formate d'une manière agréable. Mais si nous avons juste pris l'objet ici et n'avons pas utilisé un format du tout, vous verrez ici qu'il n'exporte tout simplement pas du tout. Nous prenons les données de l'objet et nous devons les formater dans un format JSON lisible par l'homme pour que nous puissions les voir. C' est un exemple de formateur. Il n'y a pas trop d'exemples. Je ne pense pas que ça se passera dans cette classe. Mais quand vous le voyez, peut-être que vous modifiez un modèle existant et que vous voyez qu'il y a ce symbole de tuyau, puis un mot clé après. Notez qu'il prend réellement ce qui est à gauche du tuyau et le formatage d'une certaine manière. Par exemple, en fait, cet exemple existe probablement dans notre base de code. Si nous allons dans un élément de blog, vous pouvez voir ici nous avons ajouté l' objet et nous formons cela d'une manière particulière, juste ici en utilisant ce formateur JSON-T date. Ils sont utiles. Cela dit, il n'y en a pas trop. Vous allez juste à la documentation pour regarder ceux disponibles et si vous le voyez dans votre code ici, il y a un tuyau et un tiret. Qu'est-ce que cela signifie ? Il suffit de diriger directement vers la documentation et de la regarder. En tant que sous-ensemble de format que vous avez également des helpers, qui sont tout comme les formateurs, mais la principale différence que vous verrez est que chacun de ces helpers est un tuyau et un mot-clé après le symbole at. Il prend un objet complet et il tire essentiellement de nouvelles informations qui pourraient ne pas exister déjà sur l'objet. Par exemple, nous n'avons pas nécessairement d'image, je ne pense pas. Peut-être dans la page à propos de nous. Cette image est générée dynamiquement, nous ne serons pas en mesure de le démontrer pour l'instant. Mais essentiellement, vous verrez dans une vidéo ultérieure, nous utiliserons la méta de tiret d'image et nous apporterons les informations de mélange sur une image en utilisant cette aide JSON-T. Vous verrez ça dans une vidéo plus tard. Les aides sont aussi avec le tuyau et un mot clé, c'est une autre page à rechercher si vous essayez de comprendre ce qu'est quelque chose quand vous voyez ce genre de syntaxe. La dernière, les variables système. C' est des choses qui se trouvent sur votre couche de données JSON. Nous avons tout vu avant quand nous entrons dans notre console. C' est quoi l'un d'eux, les en-têtes de Squarespace. Si nous faisons défiler vers le bas, nous pouvons voir qu'il y a un objet pour les en-têtes Squarespace, et il contient un tas de code différent qui vient de notre backend et va dans notre section tête de notre template. Si nous allons dans notre fichier de région de point de site, vous pouvez voir que nous sortons juste cet objet directement dans notre section principale ici. Beaucoup de contenu là-bas. Ce n'est pas absolument tout dans JSON-T, j'en suis sûr. Mais ce sont les principaux concepts et comme je l'ai dit, tout est ici dans la documentation. J' ai juste pensé que j'en parlerais un peu aussi parce que ça m'a pris du temps pour m'en remettre à la tête. Mais maintenant que je l'ai utilisé en pratique, j'ai réalisé que c'est assez simple et vous commencerez à comprendre qu'il n'y a pas grand-chose à la fin. Selon la pratique que vous vous donnerez avec le codage des modèles JSON, vous commencerez à solidifier cette connaissance dans votre tête et cela commencera à être beaucoup plus simple. J' ai le sentiment que cette vidéo est assez longue, donc nous allons passer à autre chose et finalement éditer notre modèle. Je sais qu'il y a beaucoup de théorie avant d'arriver à ce point, mais maintenant nous allons vraiment y aller, apporter des modifications à notre modèle et vous montrer toutes les fonctionnalités du mode développeur. Je suis excité de finalement plonger et de faire quelques modifications. Je te verrai dans la prochaine vidéo. 9. Mises en page et zones: Après un peu de théorie et un peu de configuration, il est maintenant temps de commencer à éditer notre modèle. Passionnant fois les gars, je suis heureux de finalement y entrer. Mais bien sûr, la théorie est aussi importante, alors ne sautez pas ça. Mais maintenant, nous pouvons réellement créer quelques modifications sur notre site Web étant donné que nous avons cette connaissance théorique. Une des premières choses, je veux faire est de mettre à jour la mise en page. Comme vous pouvez le voir ici, je ne suis pas vraiment friands de la façon dont tout est juste assis à gauche de la page. J' aime les choses plus centrées, et aussi pour la page d'accueil que nous allons créer dans une seconde, je voudrais qu'elle soit pleine largeur. Sur de nombreux sites Web, vous avez probablement vu le contenu de comme un billet de blog ou une page particulière sera assis à l'intérieur d'un peu d'un conteneur ici, il ne va pas pleine largeur, ce qui le rend un peu plus facile à lire, mais sur la page d'accueil, vous verrez souvent des sections pleine largeur. C' est ce que nous allons créer dans cette vidéo. La première chose que nous allons faire est de nous diriger vers notre code, assurez-vous que nous exécutons notre serveur local. Ce que je vais faire, c'est me diriger vers le répertoire des styles. Nous allons parler de la façon dont CSS est compilé plus à propos de moins, et comment tout regroupe dans votre modèle plus tard dans cette classe. Mais pour l'instant, ce que je veux faire est juste de frapper dans « base.Less », et de trouver la règle de style pour le conteneur. C' est juste ici sur le site conteneur, comme vous pouvez le voir, nous avons une largeur maximale et pas de marges automatiques. C' est la première chose que je vais changer. Je vais changer la largeur maximale à 1,140 parce que j'aime mieux ce nombre, enlever le rembourrage et lui donner une marge à gauche et à droite de l'ordre. Allons frapper sur ça. Lorsque nous actualisons la page, vous verrez que notre contenu est maintenant plus large et qu'il se trouve au milieu, peu importe la taille de l'écran, tant qu'il est au-dessus de 1140. Si nous descendons ici, nous pouvons voir qu'en dessous de 1140 il n'y a pas de marges de part et d'autre, donc c'est une autre chose que nous devrons corriger. Je vais descendre ici, et dans moins nous pouvons réellement entrer le code pour le conteneur du site et mettre notre requête multimédia ici. Média largeur maximale 1140 pixels. Nous allons avoir la marge droite, 20 pixels et la marge gauche 20 pixels. L' ordre de ceux-ci n'a pas d'importance. revenant à notre page ici, Enrevenant à notre page ici, et si je tire ça, vous verrez une fois qu'il atteint 1140 pixels de la largeur de la fenêtre, vous obtiendrez une marge fixe de 20 pixels de chaque côté. Voilà, tu y vas. Cool. C'est un exemple de changement CSS que nous pouvons apporter à notre modèle ici. Mais ce que je veux faire est en fait de créer une mise en page alternative. La raison pour laquelle je veux faire cela est que je vais créer une page d'accueil qui permet des sections pleine largeur. Cette image étant au milieu, aura pleine largeur et aura comme texte sur le dessus. Avant de créer cette mise en page, ce que je vais faire est en fait créer la page sur notre site Squarespace. Je vais passer par l'adresse de mon site SquarePaceWeb/Config. Rendez-vous dans les pages et ici pour la page d'accueil, nous pouvons simplement éditer ceci directement. Nous pouvons entrer ici et modifier le contenu de la page. moment, nous avons cette mise en page de trois colonnes avec cette image aléatoire en haut, je vais supprimer tout le contenu. C' est juste du contenu de démonstration de toute façon, et mettons en fait du contenu qui est plus pertinent pour ce faux site Web. Nous pouvons soit cliquer sur ce symbole plus ici, je vais cliquer sur ces onglets car il n'y a pas encore de contenu. Je vais cliquer sur le plus, et je vais insérer ce qu'on appelle une affiche. Une affiche est juste une image de fond avec du texte sur le dessus. Je vais chercher une image pour une salle de gym. Sélectionnons juste celui-ci. Je vais écrire un titre ici, « Your Friendly Neighborhood Gym », puis le sous-titre ici, « Venez dire bonjour ». Pour épineter cette page un peu plus. Ce que je vais faire, c'est insérer un peu d'une vidéo primaire. Cette fois, je vais effectivement cliquer sur cet onglet ici, et, je vais chercher la vidéo, qui est là sous base, et, je vais insérer une vidéo que j'ai préparée plus tôt pour ce faux gymnase. A l'origine, j'ai appelé la salle de gym, sac à dos C' est ma petite vidéo promotionnelle idiote que j'ai créée. Mais comme vous pouvez le voir, c'est un autre morceau de contenu que nous pouvons ajouter, tout comme nous pouvons ajouter tant de choses différentes comme une citation, un bouton, une intégration audio, toutes sortes de choses. Diaporama, toutes sortes de choses qui sont disponibles ici dans Squarespace. Pour notre page d'accueil, je vais juste le laisser là. Je vais cliquer sur « Enregistrer ». C' est maintenant notre page d'accueil. Donc, si nous allons à notre version locale, et nous enlevons les scories à la fin et simplement aller à localhost : 9000. Malheureusement, le contenu n'est pas encore parvenu, dans des situations comme celle-ci, ce que j'aime faire est de redémarrer le serveur. Cela devrait charger les modifications les plus récentes de notre site Web Squarespace. Encore une fois, il va prendre un certain temps à charger. Laissons-le charger et jetons un coup d'oeil une fois qu'il est terminé. Comme vous pouvez le voir ici, nous avons votre salle de gym de quartier sympathique, venez dire bonjour, et nous avons notre incroyable petite vidéo promotionnelle ici. Juste des gens au hasard qui travaillent en utilisant des images de stock. toute façon, alors vous comprenez le point. Nous avons l'affiche et la vidéo ici, mais le problème est que nous voulons qu'elle soit pleine largeur. Maintenant, la raison pour laquelle ce n'est pas pleine largeur est parce que nous avons le contenu dans ce site-conteneur. Si je regarde à travers le code, beaucoup de choses ici, mais ici dans cette div, nous avons un conteneur visuel. Il y a deux choses qu'on va devoir faire ici. Nous allons devoir déplacer cette div dans chacun de l'en-tête, la section principale et le pied de page ; parce que nous voulons toujours que l'en-tête et le pied de page soient dans le conteneur. Mais nous voulons que le contenu de la page d'accueil et de toutes les autres pages que nous définissons sur cette mise en page spécifique soit pleine largeur. Le premier changement est que nous allons repositionner le div pour site-container, et avant de le faire, ce que je vais faire est de diviser notre fichier site.region en trois parties différentes. L' en-tête, le pied et la section du milieu, qui peut rester le nom site.region. Je vais te montrer comment on peut faire ça maintenant. Je vais prendre tout au-dessus de ce point d'injection de contenu CMS. Copiez cela dans mon presse-papiers, créez un nouveau fichier de région appelé header.region. Collez cela là, puis sortons tout après cette balise principale, qui représente notre pied de page. Assurez-vous qu'il est enregistré dans le Presse-papiers, puis, footer.region. Douce. La nidification est bonne là-bas et à l'intérieur.region, nous voulons juste nettoyer la nidification et un peu ici. Nous devons mettre à jour notre mise en page maintenant pour indiquer à Squarespace que nous voulons charger dans l'ordre de l'en-tête, du site et du pied de page. Dans notre fichier template.com, ce que nous allons faire est d'ajouter l'en-tête et le pied de page à notre tableau de fichiers de région ici. Fondamentalement, ce que nous avons fait, cela va produire exactement le même résultat, mais cela va diviser notre fichier de région en trois sections différentes, parce que nous pouvons vouloir que cette section du milieu soit différente sur d'autres pages, mais nous voulons que le pied de page et l'en-tête restent les mêmes. Cela le rend également un peu plus facile à éditer. Si je veux modifier quelque chose dans mon en-tête, je sais que je dois aller à header.region et si je veux modifier quelque chose dans mon pied de page, je peux aller à footer.region donc quelques avantages à faire cela. Revenons sur notre site Web et actualisons et prouvons qu'il n'y a pas de problème. Voilà, tu y vas. Nous avons toujours l'en-tête, le pied de page, qui est juste ce texte et nous avons le contenu au milieu, donc cela fonctionne toujours. Mais maintenant, ce que nous pouvons faire, c'est que nous pouvons créer une autre mise en page dans notre template.conf. Je vais copier cet objet, puis mettre à jour certaines choses. Celui-ci au lieu de la valeur par défaut, je vais appeler pleine largeur et le titre qui apparaîtra dans l'administrateur squarespace sera pleine largeur. Au lieu de site au milieu, je vais créer un autre fichier de région appelé full width.region. Full-width.region va avoir essentiellement le même contenu que site.region, mais la différence est que nous n'allons pas utiliser le conteneur de site à l'intérieur. Je vais te montrer à quoi ça ressemble dans une seconde. Rafraîchir la page à nouveau, il ne devrait pas y avoir de différence jusqu'à ce que nous commencions à faire ces modifications à la position du développement. Mais comme je vous l'ai déjà montré, conteneur de site encapsule l'en-tête, le contenu et le pied de page, donc nous allons devoir restructurer cela. dirigeant dans notre fichier d'en-tête ici, je vais supprimer cette balise d'ouverture et ensuite dans le footer.region, je vais supprimer cette balise div ici. Maintenant, si nous actualisons la page, tout va être en pleine largeur. Voilà, tu y vas. Comme je l'ai mentionné, ce que nous voulons faire est d'avoir cet en-tête et pied de page dans le conteneur pour la page d'accueil, mais le contenu de la page d'accueil soit pleine largeur. Ce que nous allons faire est d'ajouter dans le conteneur du site, mais dans le pied de page et dans l'en-tête. Ici, nous sommes déjà dans le fichier de pied de page, alors commençons ici. Je vais envelopper le contenu du pied de page dans le conteneur du site div, puis pour l'en-tête, je vais faire la même chose. Déplacer dans l'en-tête ici, aller ajouter dans ce div pour le conteneur de site. Appuyez sur Enregistrer sur cela, revenez ici, actualisez la page et vous verrez que maintenant cette section du milieu est pleine largeur, mais l'en-tête et le pied de page sont toujours dans ce conteneur. Le problème avec cela, cependant, est que chaque page de notre site Web va maintenant être pleine largeur, comme vous pouvez le voir. Nous voulons toujours que les autres pages de notre site soient à l'intérieur du conteneur, c'est juste que nous voulons que la page d'accueil soit pleine largeur. Ce que nous devons faire est d' ajouter le conteneur du site à notre site.region ici. Ça va résoudre ce problème. Maintenant, sur chaque page qui utilise la mise en page que nous avons définie ici par défaut, elle utilisera l'en-tête, le côté et le pied de page. Afin d'obtenir le meilleur des deux mondes dans le sens où nous voulons que la mise en page alternative apparaisse sur notre page d'accueil. Nous voulons pleine largeur, mais sur les autres pages, nous voulons juste une mise en page par défaut. Nous allons devoir pousser les changements, pour qu'ils passent à l'administrateur squarespace et ensuite nous pouvons réellement sélectionner notre nouvelle mise en page, à l'intérieur de l'administrateur squarespace. Allons jeter un coup d'oeil à nos mises en page ici. J' ai réalisé que nous devons réellement changer la section centrale à pleine largeur. De cette façon, il va tirer dans cette région ici, qui n'a pas la div avec la classe du conteneur de site. La différence entre les deux mises en page, ceci et ceci est pratiquement la même sauf pour ce conteneur de site div, d'accord ? Toute page qui utilise la mise en page pleine largeur va utiliser ces régions, et toute page qui utilise la mise en page par défaut va utiliser ces régions. Comme je l'ai mentionné précédemment, afin de voir réellement cette mise en page alternative sur admin et de la sélectionner, nous allons devoir pousser ces changements sur notre site Web Squarespace. Ce que je vais faire, c'est ouvrir un nouveau terminal ici. Ce que nous allons devoir faire en premier, c'est utiliser le mot-clé get ad avec un point, et cela ajoutera toutes les modifications que nous avons apportées jusqu'à présent dans notre commit. Ensuite, je vais faire un commit, en utilisant tiret m, je peux écrire un message. Le message va être, ajouter une disposition pleine largeur. Maintenant, nous avons engagé cela à git, nous pouvons taper git push et il va pousser ce changement sur le site Squarespace. Là, vous pouvez le voir, il est mis à jour et maintenant, nous pouvons abaisser notre site Web Squarespace. Comme vous pouvez le voir, il a produit un peu d'effet funky, et c'est parce que nous avons laissé dans ce journal de console dans notre zone de point d'en-tête. Effectuer un journal de console afin que vous puissiez voir couche de données adjacente est utile lorsque vous effectuez le développement. Mais pour une raison quelconque quand vous le poussez sur votre site Squarespace, il finit par briser l'administrateur, et donc vous obtiendrez cet effet bizarre. Ce que je vais faire, c'est juste l'enlever pour l'instant. De cette façon, nous n'avons pas le site web funky. Je vais devoir juste ajouter ce changement à mon commit, faire un autre commit, en disant supprimer le journal de la console, puis pousser à nouveau. Une fois que c'est poussé, nous pouvons rafraîchir notre page ici, et tout devrait aller bien. Maintenant, ce que nous devrions avoir dans notre administrateur Squarespace, c'est l'autre mise en page enregistrée. Voyons si c'est le cas. En allant dans notre page d'accueil ici et en cliquant sur l'icône en forme de roue dentée. Je veux que vous cliquiez sur avancé, et ici vous pouvez voir une nouvelle option apparaissant pour la mise en page. Je crois que s'il n'y a pas d'option pour le changer, ça n'apparaît pas du tout. Mais parce que nous avons ajouté pleine largeur, nous pouvons maintenant changer la mise en page de la page par défaut à la pleine largeur, sur cette page. Nous allons appuyer sur sauver, et vous verrez que maintenant nous avons une section pleine largeur. C' est parce que nous avons cette disposition alternative définie ici appelée pleine largeur, qui utilise un fichier de région différent au milieu entre l'en-tête et le pied de page. C' est ce qui vous donne la section complète du fouet. Alors que sur ces autres pages qui utilisent toujours la mise en page par défaut, ils ont toujours le conteneur. Pour résumer, ce que nous avons fait est que nous avons séparé notre fichier de région en trois parties différentes, l'en-tête, la section centrale et le pied de page, ce qui nous a permis de garder l'en-tête et le pied de page sont les mêmes pour les autres mises en page. Nous pouvons toujours utiliser ce code, mais pour la section du milieu, nous pouvons échanger ce fichier de région de points de site avec quelque chose d'autre comme ce fichier de région de points pleine largeur. Nous avons également mis à jour un peu de CSS. Maintenant, nous sommes prêts à regarder la partie suivante du diagramme. Si je clique sur ici est la navigation. Dans la leçon suivante, nous allons examiner les blocs et comment nous pouvons mettre à jour les blocs pour mettre à jour notre navigation. 10. Navigation et blocs: Dans la leçon précédente, nous avons créé quelques nouveaux fichiers de région, et nous l'avons fait afin de mettre en place de nouvelles mises en page dans notre fichier de conf de dot template. Dans cette leçon, nous allons parler des navigations et de la façon dont nous pouvons représenter sur les navigations à l'aide de blocs. Si je me dirige vers mon code et que nous allons au seul fichier bloc dans les blocs, c'est le fichier bloc pour la navigation. Revenons au diagramme et parlons de la façon dont ce bloc est réellement introduit dans notre région. Dans notre fichier de conf dot template, nous avons nos mises en page comme nous l'avons vu dans la dernière leçon, mais nous avons aussi un tableau de navigations. plupart du temps, il n'y a qu'une seule navigation, mais nous pouvons créer plusieurs navigations ici. Je veux attirer votre attention sur cette paire de valeur clé ici. C' est le nom que nous allons faire référence dans notre code. Comme vous le verrez dans le diagramme, les navigations sont configurées dans votre fichier de conf de dot template, mais le code de ces navigations existe dans des blocs qui vont dans des endroits comme des régions. Voyons voir cela en vigueur maintenant. Si je vais dans ma région d'en-tête, qui est l'endroit où se trouve la navigation, nous verrons cette balise spéciale fournie par squarespace. Squarespace navigation deux-points apporte une navigation que nous avons définie dans notre template dot conf. Rappelez-vous que j'ai dit de prendre note de ce nom ici, SiteNav. Ici, dans notre ID de navigation dans cette balise est ce nom exact. Nous disons ici dans cette balise que nous voulons utiliser cette navigation particulière que nous avons configurée dans notre template dot conf. L' attribut suivant est le modèle égal à. C' est là que nous définissons le bloc qui va contenir cette navigation du site. Ici, nous pouvons voir la navigation de tiret du site. Nous n'avons pas besoin de mettre le bloc de points à la fin, vous pouvez voir que cela correspond parfaitement au bloc de points de navigation de tableau de bord du site ici. Partout où nous mettons cette balise, nous enregistrons cette navigation que nous avons configurée dans template dot conf et nous lui demandons d'utiliser le code dans ce bloc. Ici, le code que nous plaçons ici sera rendu. L' autre chose à noter à propos de la navigation est que cela nous donnera accès à un tableau d'éléments. Dans n'importe quel bloc de navigation, nous aurons un tableau d'éléments. En fait, nous allons juste le prouver maintenant. Je vais déplacer ceci au-dessus de notre section répétée afin que nous puissions voir quel est le contexte JSON à l'intérieur de ce bloc de navigation. Si je rafraîchis la page ici, nous pourrions avoir besoin de redémarrer le serveur. J' ai eu ce repos pendant un certain temps, donc nous avons juste besoin de redémarrer en exécutant le serveur squarespace, suivi de l'adresse, suivie de l'authentification du tiret de tiret. Vous devriez être familier avec ça maintenant. Il écoute sur le port 9,000 actualisons la page et attendons. Je ne sais pas si cela va prendre autant de temps à votre fin, mais pour moi cela prend environ 30 secondes pour charger le tout, donc pas un paquet très efficace pour le moment, mais j'espère que cela s'améliorera. Après ce qui se sentait comme une éternité apparaît maintenant. Si je me dirige vers ma « Console » ici, nous pouvons voir cet objet ici. Dans cet objet, nous allons voir un tableau d'éléments et dans ce tableau d'éléments, objets de collection qui ont notre navigation. À l'intérieur de notre élément de navigation, si nous regardons le contexte JSON à l'intérieur de cela, nous avons accès au tableau d'un élément. Si nous sortons simplement cela en dehors de la navigation, alors nous n'aurons pas accès à ce tableau de navigation. Rendons ça là où c'était avant. Maintenant, nous allons devoir consoles journaux. Actualisez la page ici. Comme vous pouvez le voir, nous avons deux objets. Le premier, si nous regardons à l'intérieur, n'a pas d'articles. C' est celui qui vient de la région point du site ou de la région du point de tête plutôt. Mais celui-ci vient de notre navigation. Ici vous pouvez voir que nous avons des objets. C' est important à noter. Vous ne verrez pas les éléments si vous regardez le contexte JSON dans le fichier de région. Mais si vous allez plus loin dans la navigation, il crée ce tableau d'éléments. C' est très important parce que nous allons maintenant parcourir ces éléments et produire un élément de liste pour chacun de ces éléments. Nous avons expliqué un peu sur le JSON-T qui se passe ici dans la leçon sur JSON-T, donc vous devriez avoir une assez bonne compréhension de ce que c' est et d'où ils viennent, de cette leçon. Mais il y a un changement que nous devons vraiment faire ici, et c'est que notre modèle ne prend pas actuellement en charge les dossiers. N' oubliez pas que nous avons ajouté le dossier dot conf juste ici à notre dossier de collections. Cela nous a permis de créer un dossier dans l'administrateur. Mais notre modèle n'a pas la possibilité d' avoir un menu déroulant lorsque nous survolons le dossier, qui est probablement ce que vous attendez de votre navigation. Tout d'abord, construisons notre dossier. Je vais cliquer sur ce « Nouveau dossier » et je veux le changer en, faisons un dossier plein des différents « Types de classe ». Je vais mettre à jour le titre de la page, titre de navigation et le limace. Appuyez sur « Enregistrer » dessus. Maintenant, ce que nous pouvons faire est de créer des pages dans ce dossier, donc je vais créer une page et nous allons l'appeler HIIT pour l'entraînement à haute intensité. Maintenant, vous pouvez voir que nous avons créé cette page HIIT. Ce que je veux faire avant d'aller plus loin est de cliquer sur cette icône ici pour ouvrir le dossier. Ensuite, ce que je peux faire est de faire glisser cette page à l'intérieur de ce dossier. Maintenant, comme je l'ai déjà dit, nous ne prenons pas réellement en charge les menus déroulants lorsque nous survolons des dossiers encore dans notre modèle. Mais ici, vous pouvez clairement voir que nous imbriquons cette page dans ce dossier. Pour cette page HIIT, ce que je vais faire est de mettre dans un titre, High Intensity Interval Training, autrement connu sous le nom HIIT. On y va. Je vais changer ça en titre 1. Puis en bas ici, parce que cela n'a pas vraiment d'importance dans le but de cette classe, nous allons trouver un générateur d'ipsum Lorem. C' est bon pour mettre en faux contenu de paragraphe juste pour voir à quoi il ressemblerait. Fondamentalement contenu factice. Maintenant, nous avons une page pour l'entraînement à intervalles de haute intensité. Ce que je vais faire pour construire ce dossier est dupliquer cette page. Je reviens une seconde. Vous pouvez effectivement cliquer sur cette vitesse, faites défiler vers le bas sur « Général », puis cliquez sur « Dupliquer la page ». Confirmez que je veux le faire. Je vais l'appeler « Pilates ». Mettons cela sous HIIT et bien sûr, nous allons devoir changer. L' URL est changée en « Pilates », donc c'est bien, mais nous devons changer le titre ici. Pilates. « Enregistrer » cela, puis une autre page dupliquée. Appelons ça CrossFit comme dernière classe. Faites glisser celui-ci de non lié à la photo, puis, une fois que nous arrivons à cette page parce qu'elle est dupliquée, nous avons juste besoin de mettre à jour ceci à CrossFit. Appuyez sur Enregistrer sur ça. Maintenant, nous avons un dossier pour les types de classes avec trois pages différentes décrivant différents types de classes. heure actuelle, notre navigation ici ne reconnaît pas et n' affiche pas réellement les pages qui se trouvent dans un dossier parce que rappelez-vous, nous avons ajouté la possibilité d'avoir des dossiers dans ce modèle après avoir commencé avec celui-ci. Ce modèle par défaut n'a pas de menus déroulants, mais nous pouvons facilement le faire en utilisant JSON-T. Si je vais au code, éliminons tout ça. Vous pouvez juste commencer par où nous devons commencer, et nous pouvons aller dans le fichier site-navigation.block. Pour chaque article, ce que nous voulons faire est de vérifier s'il s'agit d'une collection, nous vérifions s'il s'agit d'un lien externe, mais nous ne vérifions pas s'il s'agit d'une photo. Au-dessus du lien de collection, ce que je vais faire est de mettre dans un je pense qu'ils l'appellent prédicat dans JSON-T, mais il y a un prédicat spécial que je vous ai montré avant, qui vérifie si quelque chose est un dossier. Ensuite, nous allons mettre la fin, nous allons l'apporter et je vais juste vous montrer si nous retournons dans la documentation, nous pouvons voir tous les prédicats ici, et si je recherche le dossier, vous verrez juste des tests si une navigation un dossier car nous devons traiter un élément de menu de dossier différemment. Retour à notre page. Si c'est un élément de menu de dossier, ce que je veux faire est de mettre dans un lien qui en ce moment, il n'ira nulle part. Ne mettons tout simplement pas un href, mais je veux mettre une balise avec le titre de navigation. Cela va être le nom du dossier fondamentalement. Ensuite, ce que je veux mettre dans est une liste non ordonnée de tous les éléments de menu dans ce dossier. La façon de le faire est si nous regardons réellement le code, alors passons à notre version locale où nous avons tous les console.logs. Jetons un coup d'oeil. Dans notre tableau d'éléments, dans le premier élément à l'intérieur de l'objet de collection, et nous pouvons voir que c'est le dossier, et si nous faisons défiler, actuellement, il n'y a pas d'éléments de sous-menu, donc nous avons juste besoin de rafraîchir la page ici. On y va. Nous avons la collection, qui est le titre de navigation pour le dossier, mais ensuite, nous avons également des éléments dans cet élément, et c'est là que nous pouvons parcourir et retirer les différentes pages de ce dossier. Je peux voir que j'ai fait un peu d'erreur ici et je dois mettre en collection devant ici parce que nous n'avons pas zoomé dans ce contexte comme nous l'avons fait ici. Ce que je vais faire ici, c'est commencer une autre section répétée. So.Éléments de section répétés, tout comme nous l'avons fait ici, mais maintenant nous sommes à l'intérieur de l'un de ces éléments, et il y a un tableau d'éléments imbriqués. Ce que je vais faire est la même chose que nous avons fait ici. Si c'est une collection, tout d'abord, nous voulons mettre dans un élément de liste quel que soit le type de lien qu'il s'agit. Je vais le mettre dans l'élément de liste. S' il y a une collection présente, ce qui signifie essentiellement n'importe quelle page de votre site Squarespace à l'exception d'un lien externe, comme ici, nous allons créer une sous-liste ci-dessous. Je vais frapper sur Save. Voyons ce qui se passe lorsque nous exécutons ceci sur notre serveur local. Vous verrez que le code que nous avons écrit est maintenant à venir dans notre navigation. On a ce type de classe. C' est une balise de lien sans href car elle ne lie nulle part, et à l'intérieur, nous avons une autre liste non ordonnée avec tous les liens vers les pages de ce dossier. Nous avons un peu de problème ici parce que nous avons un autre lien de collection ici pour les types de classe. Malheureusement, même s'il s'agit d'un dossier, il apparaît comme une collection. Pour corriger cela, tout ce que nous devons faire est de prendre tout ce code et de s'assurer que c'est l'un ou l'autre. S' il s'agit d'un dossier, nous allons le traiter de cette façon, mais si ce n'est pas un dossier, nous traitons la collection de cette façon, et cela devrait arrêter l'élément de menu en double. Rafraîchissant la page ici, vous pouvez maintenant voir que nous avons des types de classe répertoriés ici avec une liste non ordonnée pour les différents types de classe dans notre dossier. Nous pouvons cliquer dessus parce que nous avons défini l'URL et vous pouvez lire sur tous les différents types de classes. Maintenant, évidemment, nous devons faire quelques changements CSS ici parce que cela n'a pas l'air si grand. Ce que nous voulons faire est d'aller ici et de nous assurer que cela n'est pas affiché par défaut, puis, lorsque nous survolons les types de classes, il apparaîtra. C' est tout ce qui est CSS juste là. Je vais rapidement le jeter ensemble maintenant, mais le principe principal ici est que nous sommes en mesure d' accéder aux sous-éléments de cet élément de menu. Réparons un peu cela en allant dans base.less. Nous allons être à l'intérieur de notre élément de navigation du site. Si vous n'avez jamais utilisé moins avant, c'est tout comme Sass ou tout autre compilateur CSS. J' ai un cours ici sur le partage de compétences sur Sass si vous voulez en savoir plus à ce sujet. Mais fondamentalement, si vous ne l'avez jamais vu avant, nous pouvons réellement nicher. Nous pouvons cibler les balises A dans l'élément de navigation du site en lançant l'ensemble de règles dans cet autre ensemble de règles. Étant donné que je sais comment faire cela, je l'écrirais ici, mais pour ceux d'entre vous qui ne savent pas moins ou Sass mais connaissent juste CSS, je vais l'écrire dehors ici. Fondamentalement, ce que nous essayons de faire est de cibler l'élément de navigation du site et l'ul à l'intérieur si nous voulons en afficher aucun. Sauf bien sûr, l'élément de navigation du site est en cours de survol, alors, tous les uls imbriqués doivent s'afficher. Appuyez sur Enregistrer sur ça. Cela nous donnera la possibilité de les faire apparaître en vol stationnaire. Évidemment, le positionnement est désactivé maintenant, donc je vais rapidement corriger ça. Voyons comment ça marche. Vous avez juste besoin de lui donner une couleur de fond. Disons « Blanc ». Maintenant, ce n'est pas le meilleur menu, mais au moins nous avons nos éléments dans notre dossier apparaissent lorsque nous survolons cet élément de dossier. C' est plus une expérience utilisateur que nous attendrions d'un modèle, mais ce n'est pas une classe CSS, donc nous ne serons pas trop pris sur son apparence. Mais comme vous pouvez le voir dans cette leçon, nous sommes en mesure de mettre à jour notre navigation sur notre site ici en utilisant notre connaissance de JSON-T et notre connaissance de la façon de rechercher des données JSON. Désolé, c'est juste ici, dans notre onglet console. Voici tous les éléments, et c'est le processus que vous prendriez indépendamment du fait qu'il s'agisse d'un bloc, d'une liste ou d'un élément, vous devriez regarder la couche de données JSON, voir ce que vous essayez d'accéder, et écrire JSON-T sur la base de cela. Avant de passer à la leçon suivante, ce que je veux faire est de transformer ce dossier en ce qu'on appelle un « index ». Un « index » nous permet d'accéder aux données de ces pages enfants dans une page distincte qui représente tous les éléments de ce dossier. C' est donc similaire à une collection. Il s'agit essentiellement d'une collection de pages plutôt que de messages, d'images ou de vidéos. Je suis sûr que cela commencera à avoir un peu plus de sens une fois que nous commencerons à l'implémenter. Si nous regardons ici, nous pouvons voir que c'est clairement un dossier donné cette icône et aussi quand nous cliquons dessus, rien ne se passe vraiment. Si nous cliquons sur une autre page, puis cliquez sur le dossier, ce n'est pas en fait une page. Nous ne pouvons pas réellement afficher une page pour ce dossier. Donc, l'avantage de faire un « index » est que cela peut être une page ainsi qu'une collection de différentes pages ici. Je dois être prudent en utilisant le mot « Collection » parce que techniquement en termes de terminologie Squarespace, n'est pas une collection, mais fondamentalement un « index » est comme un dossier qui est aussi une page. Nous pouvons en savoir plus sur les index en allant à nouveau dans la documentation, et il y a un élément de menu ici pour « Dossiers et index ». N' oubliez pas que nous utilisons les instructions ici pour activer les dossiers dans notre modèle Squarespace. Mais si nous faisons défiler vers le bas, nous pouvons réellement créer un index. Comme il est dit ici, un index est un dossier avec une page principale qui permet aux développeurs d'agréger les données des collections et des pages qu'il contient. Pour créer un index, nous allons faire ce qu'il dit ici. Ajoutez un fichier « index.conf » à notre dossier de collections. Nous allons utiliser ces paramètres standard. Nous allons aller dans le dossier des collections, cliquez sur « Nouveau fichier », appelez-le un fichier « index.conf », collez-le dans, et je ne veux pas qu'il soit appelé « Mon index » juste « index » va bien. Je ne veux pas qu'il dise ajouter une collection. Je vais dire « ajouter une page » et nous allons lui permettre d'accepter des pages, pas des galeries. Bien sûr, si vous vouliez créer plusieurs index qui étaient des index de galeries, alors vous le laisseriez là. Si vous vouliez des index de blogs, alors vous pourriez mettre « blog » ici. Mais pour nous, nous ne sommes que des pages d'imbrication. Nous allons éclaircir ça pour l'instant. Je vais appuyer sur « Enregistrer » sur cela, et l'autre partie est que nous devons faire un modèle de page d'index. Nous le faisons en créant un fichier « index.list », et nous l'ajoutons également à notre dossier de collections. Allons dans les collections. Nouveau fichier, « index.list ». Pour gagner du temps ici, je vais copier et coller du code, mais c'est du code très basique. Je vais vous expliquer rapidement ce que cela fait. Où journalisation de la console, ce que le contexte JSON est à l'intérieur de ce fichier de liste. Ensuite, ce que nous faisons est de chercher l'objet de collection, qui se souvient, contient toutes les informations pour cette page particulière. Nous recherchons les collections imbriquées à l'intérieur de cela et faisons une liste de toutes ces collections. Comme nous le verrons bientôt, ce code JSON-T correspond à ce que nous avons dans nos contextes JSON. Ce que je vais faire, c'est que je pense qu'on devrait pousser ça sur le serveur. Laissez-moi aller à l'adresse de l'index. Ouais, donc ça redirige juste vers « HIIT ». Ce que nous allons devoir faire, c'est pousser ces changements à Squarespace. Je vais ouvrir cet autre terminal ici où je fais mon « git » ajouter tout, valider avec le message, « Transformer le dossier en index ». Alors on va pousser ça. Maintenant, quand nous allons sur notre site Web dans notre administrateur Squarespace, que nous pouvons cliquer ici et nous obtenons une nouvelle option ici, qui est index. Nous ne pouvons pas réellement transformer ce dossier en un index en soi, mais ce que nous pouvons faire est de créer un index puis de les déplacer dans le nouvel index. Aller à supprimer ce dossier maintenant pour les types de classe. Comme vous pouvez le voir sur cette nouvelle page d'index, que je devrais renommer tout de suite en «  Types de classe  » et appuyer sur « Enregistrer » sur cela. Vous pouvez maintenant voir que cet index, qui ressemble beaucoup à un dossier, est une page en soi. Ensuite, dans cet index, nous parcourons et sortons toutes les pages de cette page d'index. On peut cliquer sur « Pilates » et ça fera apparaître la page « Pilates ». Si nous regardons l'objet JSON. si nous allons ici, allez à l'adresse pour les types de classe. Nous pouvons voir dans le deuxième objet ici, nous avons un objet de collection, et à l'intérieur de l'objet de collection, nous avons une liste de collections ou un tableau de collections. Et ensuite, nous avons les pages individuelles avec le titre de la page et l'URL complète. Cela correspond au code que nous avons écrit ici. On est à l'intérieur de l'objet, on se dirige vers la collection. Ensuite, à l'intérieur de la collection, nous allons parcourir l'objet de cette collection et c'est exactement ce qui se passe ici. L' autre chose que nous devons faire avant de terminer cela est de nous diriger vers notre navigation sur notre site, et comme cet élément de navigation est une page en soi, nous pouvons maintenant ajouter un chemin d'URL à cela. Je vais écrire « Collection.Full URL. » Appuyez sur « Enregistrer » dessus. « Rafraîchir » par ici. Maintenant, nous pouvons effectivement cliquer sur cet élément de menu « Types de classe » et il ira à la page « Types de classe ». Nous y étions déjà, mais passons à une autre page. Cliquez sur « Types de classe » et maintenant nous sommes en mesure d' accéder à cette page d'index et à toutes les pages qu'elle contient. Là, vous avez les gars, nous avons mis à jour notre fichier bloc pour notre navigation sur le site, mais comme nous l'avons vu dans le diagramme, blocs peuvent aussi être partiels. Je n'ai pas d'exemple spécifique qui vient à l'esprit d'une partie que vous utiliseriez. Mais si nous allons à nouveau dans la documentation de Squarespace, nous pouvons réellement rechercher des partiels. Ici, sous les fichiers de modèle, nous pouvons en apprendre davantage sur les partiels de modèle. Ici, vous pouvez lire comment nous pouvons créer un fichier bloc et ensuite utiliser cette syntaxe pour amener ce fichier bloc où nous le voulons dans notre modèle Squarespace, et ce code viendra à l'endroit où nous plaçons ce code. Ici, vous pouvez lire pourquoi nous devrions utiliser des partiels. Il a un exemple lui-même ici. Cet exemple particulier n'était pas particulièrement pertinent à nos fins. Mais si jamais vous vous retrouvez à vous répéter, souvent, certainement regarder dans l'utilisation de partiels. Cela vous fera gagner du temps et rendra votre code plus organisé. Cela couvre à peu près tout ce que nous pouvons faire avec des blocs. Comme je l'ai dit, il est principalement utilisé pour la navigation, mais il peut aussi être partiel. Dans la prochaine vidéo, nous allons parler plus de ce qui se passe ici. 11. Créer une collection d'événements: Dans les leçons précédentes de cette classe, nous avons parlé du sommet de cette structure ici. Nous avons parlé des mises en page et Navigation-S qui sont configurées dans votre fichier template.com, et qui sont déterminées par le code dans vos régions et blocs. Maintenant, nous allons parler du contenu principal. Bien sûr, les régions déterminent la mise en page globale que vous regardez sur une page particulière. Blocs principalement pour déterminer la navigation qui restera probablement dans une région d'en-tête comme nous l'avons dans notre modèle. Mais maintenant, il est temps de parler de ce qui est affiché à l'intérieur de ce contenu squarespace.Main. Maintenant, dans la plupart des situations, je dirais que ce contenu sera juste le contenu que vous avez configuré dans votre administrateur Squarespace. Si je clique sur notre autre fenêtre ici et que nous regardons la page À propos de nous, par exemple, le contenu que nous avons mis en place dans cette zone de contenu de page, en utilisant les blocs disponibles dans Squarespace est notre contenu Squarespace.Main. C' est quand nous affichons une page. Mais si nous regardons une collection, le code qui passe par SquarePace.MainContent est déterminé par un fichier de liste. Ce n'est pas toujours vrai parce que nous pouvons avoir des collections système, que nous allons vous montrer dans cette leçon. Mais si nous avons un fichier de liste défini ici, alors le code dans ce fichier de liste sera ce qui vient de SquarePace.MainContent. Nous avons aussi des pages statiques, que nous allons couvrir dans la prochaine leçon. Mais dans cette leçon, je veux parler de collections. Les collections sont composées de la page de liste et des pages d'éléments individuels. Maintenant, comme je l'ai mentionné précédemment, il y a un certain nombre de collections système qui viennent avec Squarespace automatiquement. Ce que je vais faire, c'est diriger vers la documentation, défiler vers le bas et cliquer sur les collections. Ici vous pouvez voir une section sur les collections système. Comme vous pouvez le lire, Squarespace crée et maintient plusieurs types de collection dans le système que vous pouvez utiliser sur votre site sans avoir besoin de fichiers dans votre modèle. Essayons ça tout de suite. Permettez-nous à toutes ces collections système de passer par notre modèle. Je vais copier cet objet, aller dans notre template.comfile. Après la navigation, je vais mettre des collections système. Maintenant, nous devrions nous attendre à voir une fois que nous avons poussé cela sur notre site Web Squarespace, la possibilité d'ajouter des albums, des blogs, des événements, des galeries et des produits, sans avoir à écrire ce code dans notre dossier de collections. Permettez-moi juste d'ajouter ce commit avec le message d'ajouter des collections système. Ensuite, nous allons pousser cela afin que nous puissions voir le changement sur notre site Web Squarespace. Allez sur le site de Squarespace, maintenant. Actualisez la page. Si nous allons dans les pages et cliquez dessus, nous pouvons maintenant ajouter des galeries, des produits, des blogs, des événements, des albums, puis un index que nous avons créé auparavant. Dans cette leçon, ce que nous allons faire est de créer une collection d'événements en utilisant d'abord des collections système, puis nous allons le faire sur mesure. La raison pour laquelle nous allons faire une coutume, même si les collections système peuvent être suffisantes, est pour que nous puissions apprendre à créer collections personnalisées si nous voulons faire quelque chose de personnalisé à l'avenir. Alors peut-être que ce n'est pas une collection d'événements que nous voulons différents ici, mais peut-être que nous voulons ajouter quelque chose comme des projets ou un portfolio si nous voulions créer notre propre collection personnalisée plus tard alors les compétences que nous avons apprises dans cette leçon nous aidera à le faire. Mais pour cette leçon, je vais utiliser l'exemple des événements. Créons une collection d'événements en ce moment en utilisant des collections système. Ici, nous avons fait, nous venons de créer une collection d'événements et maintenant nous pouvons créer des événements. Disons Samedi Boot Camp, gratuit pour le public. Très bien, je vais frapper sauver et publier, et comme vous pouvez le voir, cela ressemble beaucoup à un billet de blog, mais c'est un peu différent dans la façon dont il est présenté. Comme vous pouvez le voir ici, la date et l'heure sont très importantes, et puis vous avez ce bouton pour revenir à tous les événements avec ce joli genre de tag de calendrier ici. Cela fonctionne beaucoup comme un blog. Mais au lieu de billets de blog, vous avez des événements. Bon, donc je vais l'enlever maintenant. Supprimons toutes nos collections système et ajoutons notre propre implémentation personnalisée de cette liste. Bon, donc je vais entrer dans le code Visual Studio. Supprimons les collections système. Poussons ce changement. Je vais exécuter git, add, git commits, supprimer les collections système, pousser ces modifications sur notre site Web et nous confirmer que les événements ont disparu. Une fois la page chargée, nous pouvons maintenant voir que nous ne disposons pas de ces collections. Ok, super. Maintenant, nous allons le coder nous-mêmes. Pour cela, allons dans la documentation Squarespace et défilons le bas sur cette page sur les collections pour regarder créer des collections personnalisées. Vous pouvez voir que nous avons besoin du nom de la collection.comf en tant que fichier, et nous avons également besoin d'un des éléments suivants. Nous avons besoin d'un fichier de liste de points ou d'un fichier d'élément point, mais souvent nous aurons les deux. Ok, donc ici vous pouvez voir les options de configuration. Je vais copier et coller ça. Rendez-vous à notre code, créez une nouvelle collection avec le titre Events.comf. Je vais coller cet objet [inaudible] dans. Ne laissons pas cela comme si c'était parce que cela n'a pas de sens. C' est juste une copie d'une configuration pour un blog. Nous allons remplacer le blog par des événements. La commande, si nous avons un retour sur les options disponibles, chronologique, utilisateur, ordonnable ou calendrier, parce que nous exécutons des événements, laissez-nous le changer en calendrier. Il organisera en termes de temps pour l'ajout de texte ici. Ce sont essentiellement les textes de directive qui vont passer par l'administrateur pour ajouter un nouveau, quel que soit l'élément. Dans l'exemple pour le blog, si nous allons dans le blog et nous survolons ici, vous pouvez voir qu'il dit Ajouter un message pour nous, nous voulons dire ajouter un événement. Donc, ajoutez l'événement ici pour les types sauf. Vous pouvez voir qu'il est actuellement défini sur texte. Qui est l'une des trois options disponibles. Il est dit ici qu'il y en a en fait plus que trois. Donc, si nous revenons à notre calendrier ou à notre fichier .comf, nous pouvons réellement changer ce texte en un événement. Un événement est l'un des types d'acceptation que nous pouvons utiliser. Maintenant, il y a quelques autres choses que je veux faire ici. Juste pour rendre cela beaucoup plus agréable, il va apparaître avec une icône de blog par défaut. Donc, je vais changer l'icône pour l'icône du calendrier et c'est à propos des gars. Très bien, donc parce que nous n'avons plus de collections système définies dans notre fichier template.comf. Nous allons certainement devoir créer un fichier de liste ici. Alors, les événements. Liste, et ici, nous devons mettre dans la présentation de nos événements. Avant de le faire, cependant, je vais pousser ces deux fichiers sur notre site web Squarespace en direct. Donc, je vais git ajouter git commit et dire ajouter la collection d'événements, puis git push. Voyons ce que les changements qui font à notre administrateur. N' oubliez pas que nous avons supprimé les collections système de sorte que nous ne devrions pas être en mesure d'ajouter une collection d'événements dès maintenant jusqu'à ce que nous actualisions la page montrant ces modifications. Maintenant, quand nous frappons ce plus, nous devrions voir les événements et il montre la belle petite icône ici parce que nous avons mis l'icône sur calendrier dans notre comfile. Si nous cliquons sur ce bouton, nous pouvons maintenant créer une page d'événements. Nous pouvons cliquer sur cette icône ici pour ajouter un nouvel événement. Ajoutons à nouveau cet événement. Samedi Boot Camp. J' ai réalisé que le dernier était fixé à un lundi. Donc, ce n'est pas très approprié, n'est-ce pas ? Libre au public. Mettons-le à un samedi à l'avenir. Je ne vais pas au-dessus avec lorem ipsum pour l'instant, peut-être que je vais juste dire lorem ipsum. Sauvegardons et publions. Maintenant, si nous allons dans cet événement, nous pouvons voir qu'il y a une page d'élément qui est automatiquement généré pour nous. Mais si nous allons en arrière et cliquez sur la page de liste, vous pouvez voir qu'il n'y a pas de contenu car il utilise L.ListFile ici, qui est vide. commençons à construire ce fichier de liste. Je vais passer à l'hôte local maintenant parce que ce que je veux faire est d'exécuter un journal de console afin que nous puissions voir la couche de données json et déterminer quels attributs nous voulons retirer la couche de données json et mettre sur notre page. Encore une fois, j'ai cette ère HTTP, qui signifie que je dois redémarrer mon serveur. Donc, je vais retourner dans mon premier onglet terminal, contrôler C sur un Mac pour terminer le processus en cours d'exécution. Ensuite, lançons le serveur Squarespace avec le drapeau de off. Nous écouterons à nouveau sur le port 9,000. Je vérifierai avec vous une fois que cela aura terminé le chargement. Bon, donc maintenant nous pouvons voir notre page Events, qui est complètement vide parce que nous avons un events.listfile vide. Même s'il y a un événement dans notre collection d'événements, il n'apparaîtra pas tant que nous n'aurons pas écrit du json T pour prendre la liste des événements et sortir une partie de ce contenu à l'écran. Comme toujours, ce que je vais faire est de mettre la couche de données json dans ce contexte json particulier. Ensuite, nous pouvons commencer à naviguer dans l'objet et comprendre le json T que nous devons écrire. Revenir à cette page après avoir jeté le script pour le journal de la console du contexte json. Vous pouvez voir maintenant dans notre console nous avons un objet secondaire. Je vais cliquer dessus. À l'intérieur de l'objet de la collection, vous verrez que nous avons toutes les informations pour la collection, ce qui est bien sûr des événements de code. Si nous faisons défiler vers le bas, nous devrions essayer de trouver la liste des événements, qui, comme vous pouvez le voir ici, se divisent en deux tableaux. Un tableau pour les événements à venir, tableau M1 pour un événement passé. Nous n'avons pas d'événements passés, donc c'est vide. Mais nous avons un événement à venir. Si nous regardons à l'intérieur, nous pouvons voir le Saturday Boot Camp juste ici dans un contexte adjacent. Bon, comme vous pouvez le voir, nous avons un attribut title ici, et nous avons aussi un attribut body avec tout un tas de HTML. Cet attribut body vient de lorsque nous écrivons ou éditons un événement particulier. Ici, nous pouvons mettre du texte, mais nous pouvons aussi mettre en blocs d'autres contenus riches. Donc, tout le HTML qui représente cela, viendra à travers cet attribut de corps juste ici. Utilisons ceux dans notre dossier ici. Donc, naviguant vers le haut, nous allons devoir parcourir le tableau à venir, puis pour chaque élément, nous allons tirer le titre et le corps. Faisons ça maintenant. Je vais commencer une section répétée pour le tableau. Le tableau est appelé à venir. Assurez-vous de fermer ce bloc. Puis à l'intérieur, je vais créer un div avec la classe d'événement. À l'intérieur de chaque événement, je vais mettre en place un h2 et le h2 va contenir le titre de chacun de ces éléments dans le tableau à venir. Il va sortir le corps juste en dessous. Je ne vais pas envelopper cela dans n'importe quel HTML car il a déjà beaucoup de HTML qui vient avec. Rafraîchir la page ici. Nous devrions commencer à voir notre titre et notre corps passer. Ils vous y vont. Samedi Bootcamp, gratuit pour le public et le contenu du corps là-bas. Maintenant, bien sûr, parce qu'il s'agit d'un événement, nous allons vouloir montrer l'heure et la date réelles de cet événement. Sinon, les gens ne savent pas quand c'est à part ici, samedi Bootcamp. Ce que nous allons faire, c'est apporter ces données ensuite. Si je descend à l'objet à nouveau et que nous naviguons à venir, aller dans cet objet particulier, nous pouvons faire défiler vers le bas. Il a même des informations comme l'emplacement, avec la longitude et la latitude. C' est plutôt cool. Mais ce que nous recherchons, c'est la date de début et la date de fin. C' est juste un code de chiffres que l'ordinateur peut lire, mais évidemment ce n'est pas très lisible pour nous. Ce que nous allons faire, c'est le mettre en forme et ensuite le mettre en forme. Je vais prendre la date de début et la mettre en dessous ici, dans ces éléments em. Ensuite, je vais chercher le formateur approprié. C' est notre occasion d'utiliser les Formateurs JSON-T. Je vais aller dans la documentation Squarespace, aller à la section sur les Formateurs JSON-T, puis ici je vais regarder les Formateurs Date et Heure. Nous voulons formater une date en utilisant ce format de date YUI. Je vais juste copier l'exemple ici et le mettre après la date de début. Allons appuyer sur « Enregistrer » sur ça. Rafraîchissons par ici. Là, vous l'avez. Nous avons la date de l'événement, mais nous pourrions également avoir l'heure de l'événement et pas seulement l'heure de l'événement, mais l' heure de début et l'heure de fin. Pour cela, nous utilisons les mêmes objets que la date de début et la date de fin, mais nous accédons simplement à différentes parties de cette date et heure. Je vais te montrer ce que je veux dire par là dans une seconde. Créons une autre balise em qui est séparée par une balise de rupture. A l'intérieur, je vais remettre la date de début. Au lieu de ce format de date particulier, je vais aller ici, cliquer sur ce lien, qui va nous conduire à la liste de tous les différents codes que nous pouvons mettre en forme notre date/heure. Je vais faire défiler jusqu'à ceci ici et copier ce code ici, et coller ça ici. Ensuite, je vais attraper l'objet date de fin. Je vais juste copier et coller ceci. Modifiez cette date en date de fin avec le même format. Allons appuyer sur « Enregistrer » sur ça. Revenons à notre page et rafraîchissons. Là, vous pouvez voir l'événement est de 15h00 à 16h00. Nous n'avons pas vraiment besoin des secondes là-bas, donc je vais supprimer cela de la chaîne de format. La tête en arrière. Maintenant, vous pouvez voir samedi Bootcamp, gratuit au public le samedi. Il va commencer à 15h et se terminer à 16h. C' est à peu près notre page de liste faite, mais peut-être que nous voulons créer une page pour chaque événement individuel. Pour cela, nous devons créer un fichier .item. Avant de le faire, cependant, je veux lier tous les titres de notre annonce pour diriger vers cet article individuel en cliquant. Faisons ça maintenant. Je vais envelopper le titre dans une balise et l'attribut que nous recherchons, comme toujours, est FullUrl. Je vais appuyer sur « Enregistrer » dessus. Rafraîchissez par ici. Maintenant, vous pouvez voir que le titre est lié à l'événement individuel. Si je clique dessus, vous verrez qu'il y a une erreur. C' est parce que nous n'avons pas encore créé cette page. On va retourner ici. Créons réellement events.item. Pour events.item pour rester simple, je vais copier ce code ici. Ce que nous allons devoir faire est de déterminer quel objet zoomer pour obtenir tous ces attributs. Cela ne fonctionnera pas encore, mais ce que je vais faire est, nous allons, comme toujours, consigner la couche de données JSON pour que nous puissions voir quel objet nous devons zoomer. Je vais me rafraîchir ici et cliquer sur ce titre à nouveau. Maintenant, vous pouvez voir que nous n'avons plus cette erreur. C' est parce que nous avons notre fichier .item. Ici, vous pouvez voir que nous avons à nouveau un objet secondaire, et c'est l'objet qui passe par le fichier events.item. Jetons un coup d'oeil à l'intérieur. Vous pouvez cliquer sur l'objet de la collection. Mais l'objet de collection représente réellement la collection parent. Ici, dans cet objet élément est l'événement réel lui-même. C' est l'objet sur lequel nous voulons zoomer avec notre JSON-T. Nous avons juste besoin d'envelopper tout cela dans du code JSON-T. Nous allons zoomer sur l'élément en utilisant notre balise de section. Je vais réparer l'imbrication là-bas. Rafraîchissons la page ici. Vous verrez que nous avons exactement les mêmes informations. Parce que nous sommes déjà sur la page, nous pouvons supprimer le lien ici parce qu'il est juste un lien vers lui-même actuellement. Mais bien sûr, nous allons le garder sur la liste ici. Rafraîchissez par ici. Comme vous pouvez le voir, notre page d'événement individuel est légèrement différente, si je clique simplement sur ce lien, à notre page Événements parce que le lien est manquant. Mais bien sûr, la différence entre les deux n'est pas particulièrement évidente parce qu'ils montrent tous les deux le même contenu. Ce que je vais faire est d'ajouter un autre événement et nous pouvons voir certitude que cette page affiche une liste de tous les événements. Je vais y aller, créer un événement pour un mercredi prochain, qui sera un séminaire de yoga organisé par Mary. Le contenu sera  : « Mary va vous raconter tout sur le yoga. » Ça a l'air charmant. D'accord. Appuyez sur « Enregistrer » et publiez sur cela. Si nous allons par ici, il n'apparaîtra probablement pas parce que nous aurons besoin de rafraîchir le serveur. Malheureusement, nous allons devoir descendre ici, « Control C », rafraîchir le serveur, puis nous devrions commencer à voir les derniers changements apportés sur notre version locale. Voilà, tu y vas. Il écoute sur le port 9 000. Je vérifierai avec toi une fois que ça aura fini le chargement. Une fois la page terminée le chargement, vous pouvez voir qu'en fait, notre page Événements est une liste et nous avons tous les événements dans notre collection d'événements listés ici. Si je clique sur un, vous verrez que nous allons à la page Article pour cet événement. Il affichera uniquement les informations pour cet élément ou pour cet événement. Si nous retournons au Bootcamp samedi, vous pouvez voir qu'il fait le même comportement. Comme vous pouvez le voir, c'est un exemple de collection. Je sais que ça avait l'air mieux en utilisant les collections système. Souvent, si vous ne voulez pas personnaliser l' apparence de la collection système, vous n'avez pas à le faire. Mais si vous vouliez présenter ceci d'une manière différente, prenez le contrôle total de la page Offre et de la page Article, alors c'est ainsi que vous le feriez. Vous le faites en entrant dans votre code, en allant dans votre dossier de collections, créant un fichier events.conf, un fichier events.list et un fichier events.item. Bien sûr, le mot d'événement ici est interchangeable avec n'importe quel type de collection que vous faites. Mais comme tout est bon, nous pouvons supprimer ces journaux de console maintenant car ils peuvent causer des problèmes sur notre site Squarespace, la version live. Allons en fait ici, git add, git commit et git push afin que nous puissions pousser ce changement sur notre site web Squarespace en direct. Nous pouvons mettre ici « Ajouter la liste des événements et les fichiers d'éléments. » On va pousser ça. Nous irons sur notre site Squarespace dans l'administration. Comme vous pouvez le voir, nous avons maintenant le format que nous avons mis en place dans notre fichier de liste et d'élément. Je vais déplacer les événements, au-delà du blog. Là, vous l'avez. Nous avons notre propre collection personnalisée. Nous avons un contrôle total sur la façon dont il est présenté sur la page. Maintenant, il est temps de regarder la dernière partie du diagramme, qui sont des pages statiques. Je te vois dans cette vidéo. 12. Ajouter une page statique: Dans cette leçon, nous allons couvrir structure du modèle Squarespace en regardant les pages statiques. Les pages statiques sont assez simples, c'est juste une page codée en dur, dans notre administrateur Squarespace, si nous créons une page normale ici, laissons-la comme nouvelle page. Je peux cliquer ici et vous avez cette boîte pour le contenu de la page, vous avez des paramètres et vous avez édité. Maintenant, j'ai accès à l'éditeur de page et je peux ajouter des blocs de contenu de page. Nous avons une page statique, vous n'avez pas accès à cet éditeur de contenu de page. Au lieu de cela, ce que vous avez est juste une page sans options personnalisation et tout le code qui va dans cette page sera stocké dans un fichier de page point. Maintenant, en haut de ma tête, je ne peux pas penser à beaucoup d'exemples dans lesquels vous voudriez utiliser une page statique au lieu d'utiliser une page normale parce que même dans la page normale, vous pouvez insérer du HTML personnalisé, mais peut-être il y a un dans lequel vous voulez juste écrire la page dans le code, vous ne voulez pas avoir à utiliser l'administrateur Squarespace pour le faire ou vous voulez empêcher les utilisateurs admin d'éditer une page, alors la page statique sera l'option pour vous. Ce que je vais faire dans cette leçon est de créer une page statique avec un calendrier intégré et nous pouvons voir comment la page statique fonctionne, laissez-moi entrer dans le code Visual Studio ou tout éditeur de code que vous utilisez et ici nous devons créer un nouveau répertoire appelé pages, je vais le faire en ce moment, de nouvelles pages de dossier. Maintenant, à l'intérieur de ce répertoire de pages , créons un nouveau fichier et notre page statique sera le calendrier des cours. Assurez-vous de mettre la page point à la fin, et pour accompagner notre page, ce que nous allons devoir faire est de mettre en place un autre fichier avec timeable.page.conf. Dans ce fichier com, c'est très simple, nous allons juste mettre en deux paires de valeurs clés. Le premier est le titre, donc je vais appeler ce calendrier, et le second sera une description, je vais mettre un calendrier de toutes nos classes, cool. Maintenant, l'administrateur Squarespace saura ce qu'il faut appeler la page et il fournira une description à Squarespace également. Ici, dans notre fichier de page point horaire, je vais mettre dans un h1 avec le titre de point de collection. N' oubliez pas que pour la plupart des pages de Squarespace , les informations de la page sont stockées dans l'objet de collection, après avoir créé cette rubrique, nous voulons que cette page apparaisse en option dans notre administrateur Squarespace. Pour que vous sachiez ce que nous devons faire, nous devons réellement pousser ces changements à Squarespace, ici, je vais obtenir ajouter pour ajouter ces changements au commit, git commit, ajouter une page statique pour le calendrier. Puis git push, et une fois que le push est terminé, nous pouvons aller ici à notre administrateur Squarespace, rafraîchir. Une fois la page terminée le rechargement, nous pouvons regarder en bas dans notre section non liée et nous verrons ici cette page appelée Horaire, si je clique dessus, vous pouvez voir que nous avons juste le nom de la page qui est Horaire. Nous savons qu'il s'agit d'une page statique parce que le numéro un , nous pouvons voir l'icône est une boîte en pointillés, et aussi quand nous cliquons sur cette page statique, il n'ouvre pas de panneau pour que nous puissions créer modifications car c'est un page statique. Passons cela à la navigation ici, je vais le mettre après les événements et maintenant ce que nous pouvons faire est d'écrire le code que nous voulons à l'intérieur, il n'y a rien de vraiment fantaisie qui se passe avec l'administrateur Squarespace, nous allons juste écrire une page comme nous le ferions normalement, comme un exemple de ce que nous pouvons mettre dans cette page, je vais mettre un calendrier incorporé avec ce calendrier pour les classes. Cela vient directement de Google Calendar, si vous voulez créer un calendrier Google vous incorporer, certainement chercher que, si je frappe enregistrer sur cela, actualiser notre page, pas sur notre site Web publié, mais localement. Je peux cliquer sur l'horaire et vous pouvez voir que nous avons le calendrier pour la remise en forme du sac à dos, qui était le nom original de la salle de gym qui vient ici. Évidemment, si nous voulons que ce changement soit mis en ligne sur notre site Web, nous avons juste besoin de pousser ce code chaque fois que nous faisons des changements, il ne vient pas de l'administrateur Squarespace donc il ne sera pas inséré sur notre site Web Squarespace tant que nous n'avons pas poussé ce code live, faisons ça maintenant, git add, git commit avec le message d'ajouter du contenu à la page de calendrier, puis git push. Maintenant, si nous retournons sur notre site web en direct, nous devrions voir le même changement, et là vous l'avez. Nous avons le titre de la collection ou le titre de la page qui est dans l'objet de la collection et nous avons ce calendrier incorporé, peu importe où nous cliquons sur, si nous revenons à elle, chaque fois que nous cliquons sur cela dans l'admin, n'y a pas d'options qui nous permettent de le modifier parce que c'est une page complètement statique que nous avons du contenu codé en dur qui provient directement de ce fichier de page point. C' est fondamentalement ça les gars, pas beaucoup aux pages statiques, c'est fondamentalement ce que vous voulez mettre ici, vous pouvez et il n'y a pas d'opération spéciale, ce n'est pas une collection, ce n'est pas une page avec un éditeur pour vous de mettre, , c'est juste une page très basique, codée en dur. Pas beaucoup d'instances auxquelles je peux penser dans lesquelles vous voudriez créer une page statique mais si vous deviez créer quelque chose qui était très intensif de code et ne nécessitait rien de Squarespace est admin, alors je pense que cela aurait beaucoup de sens, mais pour la plupart des utilisateurs, nous pouvons insérer cette intégration tout aussi bien en utilisant une page normale dans Squarespace. Aller dans l'édition de contenu de la page et nous pouvons insérer, je suis sûr, notre fer code HTML ou intégrer. Dans ce cas, pas exactement nécessaire pour que nous puissions intégrer un calendrier Google, mais je voulais vous montrer comment créer une page statique afin que vous sachiez comment le faire et qui couvre ce diagramme ici. Comme vous l'avez vu, nous pouvons mapper cette représentation visuelle à notre structure de dossiers ici, blocs, collections, pages et régions ici. Bien sûr, vous avez aussi des scripts et des styles ici, et c'est ce que nous allons couvrir dans la prochaine vidéo. 13. Javascript, CSS et LESS: Dans cette leçon, nous allons parler de scripts et de styles. Pour commencer, je vais fermer tous mes éditeurs ouverts, puis allons dans notre dossier de styles et regardons CSS et moins pour commencer. Maintenant moins est un pré-compilateur CSS. Si je recherche moins sur Google et nous regardons le site Web qui est lesscss.org. Faites défiler vers le bas et nous pouvons voir que moins est une rétrocompatible avec l'extension de langue pour CSS. Maintenant, comme il le mentionne, il est rétrocompatible. Je ne veux pas que vous ayez peur si vous ne savez pas moins d'écrire CSS dans ces fichiers. Comme vous pouvez le voir ici, il y a un peu d'imbrication. Il y a l'utilisation de l'esperluette, ce qui est moins de syntaxe, mais ici vous pouvez voir tout aussi bien ce code fonctionné qui est CSS pur. Il est rétrocompatible. Vous pouvez simplement mettre en CSS directement dans vos fichiers Less et il exécutera toujours ce CSS, mais si vous savez comment tirer parti de moins, et je vous recommande certainement de rechercher comment utiliser moins ou Sass. Sass est un autre, fondamentalement la même chose signifie Syntactically Awesome Style Sheets, donc c'est une chose similaire à moins et en fait, beaucoup de cette syntaxe est la même, comme l'imbrication et les esperluettes. Je recommanderais certainement d'apprendre Sass ou Less, et ils sont presque identiques. Il y a juste quelques différences, mais vous n'avez pas besoin d'en savoir moins pour écrire du code dans ces fichiers et vous n'avez pas à en savoir moins pour faire le développement de modèles, mais fortement recommandé et c'est là au cas où vous voulez l'utiliser. Nous sommes sur le fichier template.com. Ici, nous pouvons voir base.less dans notre tableau de feuilles de style. Ceux-ci tirent directement du dossier styles, et donc si nous voulions inclure plus de feuilles de style, nous pourrions simplement créer un nouveau fichier Less dans ce dossier Styles. Tout d'abord, avant de le faire, aller dans la tête dans base.less et regardons quelque chose que nous pouvons sortir de cela et le mettre dans sa propre section. Comme vous pouvez le voir ici, nous avons une section pour la page d'accueil, qui est essentiellement vide, mais nous avons une section ici pour la liste des blogs. Cela pourrait être un bon candidat pour le placer dans un autre fichier. Si nous entrons ici et créons un blog.less, nous le collons et appuyez sur sauver. Maintenant, nous avons le code pour le blog dans base.less, et tant que la commande est correcte, nous pourrions aller ici dans template.com et ajouter cela après base.less. Après base.less, nous allons charger dans blog.less. Comme un meilleur exemple, nous allons réellement déplacer quelque chose qui est évident, peut-être notre en-tête et notre navigation. Je vais tout prendre de l'en-tête du site ici, jusqu'à ici. Je vais couper ça donc c'est sur mon presse-papiers, allez ici et faites un fichier .less en-têtes. Je vais mettre tout le code d'en-tête là et entre ma base et mon fichier Less, je vais mettre en header.less afin que le code soit toujours inclus dans mon modèle. Si je passe ici à ma version locale et que je lance la page, vous avez une erreur de serveur interne, donc nous allons devoir recommencer lorsque nous annulons le processus en cours en utilisant le contrôle C sur un Mac et relancez notre serveur. Après la réexécution de notre serveur, et que nous actualisons la page, nous devrions commencer à voir qu'il n'y a pas de modifications. Comme vous pouvez le voir, après avoir rechargé la page, nous pouvons voir que notre en-tête est exactement le même, et si nous allons et inspectons, nous pouvons toujours voir les styles s'appliquant à l'en-tête latéral. En cliquant dessus, vous pouvez voir ici qu'il vient à travers un fichier CSS compilé appelé Site.css. Tout cela se passe sur le back-end pour nous sans avoir à faire autre chose que de configurer la liste des feuilles de style dans notre tableau de feuilles de style juste ici, et assurez-vous que cela correspond correctement aux fichiers de notre dossier de styles. Squarespace est génial dans le sens où il va prendre tout cela, le compiler et le mettre dans un fichier que nous allons charger dans notre projet. Bien sûr, nous n'avons pas besoin de briser nos fichiers moins et CSS, mais nous le pouvons si nous le voulons, et l'avantage de les séparer est d'organiser notre bêta de code. Si nous avons beaucoup de CSS et Moins, nous pouvons aller aux différents fichiers et trouver le code pour l'en-tête, trouver le code pour le blog et trouver les styles de base ici. Maintenant, passer aux scripts, si nous voulions exécuter notre propre JavaScript, ce que nous pourrions faire est de créer un nouveau fichier ici ou ici, nous pourrions simplement utiliser site.js, mais créons un nouveau fichier et appelons-le custom.js. Dans ce custom.js, je vais faire le bon vieux Hello World Alert juste pour montrer que cela fonctionne. Sauvegardons cela, actualisez la page et nous devrions nous attendre à ce que l'alerte ne fonctionne pas encore parce que nous ne l'avons pas encore introduit dans notre code. Je vais aller à nouveau dans la documentation squarespace et je vais vous montrer comment nous pouvons apporter du JavaScript personnalisé dans notre modèle. J' ai juste besoin d'aller à developers.squarespace.com, modèles docs, et ici vous pouvez voir un lien pour JavaScript personnalisé. Ici vous pouvez voir que nous pouvons charger en JavaScript personnalisé en utilisant le chargeur de script. Si je viens de copier et coller l'un d'entre eux, et disons que nous voulons l'exécuter sur la page du calendrier. Eh bien, on inclurait juste ce code dans la page du calendrier seulement. Juste besoin de changer ce nom de fichier en personnalisé pour correspondre au nouveau fichier JavaScript que nous avons créé dans le dossier Scripts, et maintenant lorsque nous chargeons la page de calendrier, nous devrions commencer à voir l'alerte arriver. Voilà, tu y vas. Notre hôte local 9 mille dit bonjour monde, nous pouvons cliquer sur OK et le reste de la page se charge. Là, vous l'avez. Nous exécutons maintenant ce js personnalisé sur cette page particulière, et c'est vraiment pratique parce que si nous voulons aller à une autre page et que nous ne voulons pas que ce code s'exécute, c'est facile à faire. Nous pouvons faire en sorte que ce fichier JavaScript ne charge que là où nous l'incluons sur le modèle et tout est bien regroupé sur le back-end via Squarespace. Nous n'avons pas à nous soucier de tous ces fichiers JavaScript qui flottent autour. Squarespace le compilera et gérera les actifs pour nous. Voilà, vous l'avez, les gars. Nous venons d'inclure notre propre CSS et nos propres fichiers JavaScript dans notre modèle. Très simple à faire une fois que vous savez comment l'introduire, dans le cas avec CSS, tout ce que vous avez à faire est d'ajouter le fichier, puis de l'ajouter au tableau de feuille de style. Dans le cas de JavaScript, tout ce que vous avez à faire est d'ajouter ce fichier JavaScript, puis d'utiliser la balise que nous venons de voir ici pour apporter ce script dans la partie de ce modèle que nous voulons. Des trucs très simples. Dans la leçon suivante, ce que nous allons aborder est quelques-unes des autres fonctionnalités des modèles Squarespace qui sont intéressantes, y compris les blocs ouverts, les requêtes personnalisées, les annotations de modèles et les ajustements. J' ai hâte de vous voir dans la prochaine vidéo. 14. Champs de blocs ouverts, requêtes personnalisées, annotations de modèles et ajustements: Les gars, donc dans cette leçon, nous allons couvrir certaines des autres fonctionnalités des modèles Squarespace qui, je pense, sont particulièrement intéressantes et utiles. Ils ouvrent des blocs, des requêtes personnalisées, des annotations de modèle et des ajustements. Je sais que ça sonne beaucoup, mais chacun d'entre eux est assez basique donc ça ne devrait pas prendre trop de temps pour passer par les quatre. Pour commencer, ce que je vais faire est de me débarrasser de ce JavaScript que nous avons créé dans la dernière leçon. Nous n'avons pas vraiment besoin d'un fichier JavaScript que beaucoup de monde. Je vais juste enlever celui-là. Nous pouvons garder moins de fichiers cassés ou nous pouvons revenir à ce qu'ils étaient avant, à vous de décider. Mais pour moi, je vais juste laisser ça comme il est et regardons la première de ces fonctionnalités dont je veux parler dans cette leçon, qui est des blocs ouverts. Nous allons nous référer à la documentation de cette leçon. Revenons à la documentation qui se trouve sur developers.squarespace.com. Ensuite, vous cliquez sur cet élément de menu pour Template Docs. Si nous faisons défiler vers le bas, nous pouvons voir le champ de bloc ouvert. Je vais cliquer dessus et ici vous pouvez lire ce qu'est un champ de bloc ouvert. Les champs de blocs ouverts sont des zones ouvertes dans un modèle, fournies par un développeur, dans lesquelles un utilisateur peut ajouter n'importe quel bloc système et utiliser le même système de mise en page basé sur la grille LayoutEngine qui est utilisé dans les pages et les billets de blog. Les champs de bloc ouverts sont idéaux pour les pieds de page de site et les barres latérales de blog. Je pense que c'est une assez bonne description, mais afin de bien comprendre ce qui se passe ici, prenons juste le code et le jetons dans notre modèle et voyons ce qui se passe, ok ? Je vais réellement le jeter dans la page du modèle ici. Ce sera le plus facile pour nous à voir et parce que cela va affecter l'administrateur Squarespace, je vais devoir pousser ce code. Je vais dire git add, git commit. Rappelez-vous que nous avons mélangé quelques fichiers moins, donc je vais mettre cela dans le message de validation aussi, rompu quelques fichiers moins et ajouté un champ de bloc ouvert. Il va pousser cela. Chargons maintenant notre site Web Squarespace. Assurez-vous que nous sommes sur la page de l'horaire et faisons défiler vers le bas sous ce calendrier intégré. Ce que je veux que vous voyez quand nous survolons ici, il est dit Région #blockField1 et a un bouton Modifier. Ceci est un champ de bloc ouvert et ce qu'il nous permet de faire est de cliquer sur Modifier et nous obtenons la même interface utilisateur que nous obtenons pour créer une page, mais nous pouvons insérer des blocs de contenu où nous le voulons, tant que nous avons défini un champ de bloc ouvert. Je peux y aller et on peut intégrer une vidéo. Au lieu de cela, je vais mettre un peu d'une grille. Je peux télécharger des images que j'ai prêtes à aller. J' ai oublié d'optimiser ces images pour le web, donc ils prendront probablement un peu de temps à télécharger. Nous avancerons vite à travers ça. Voilà, les gars, je viens d'ajouter un bloc de contenu de grille à ce champ de bloc ouvert. Je peux ajouter n'importe quel nombre de blocs ici, comme je le ferais sur une page Squarespace, je peux appuyer sur Enregistrer et maintenant c'est une partie de ma page. Très cool, comme il est mentionné dans la documentation, nous pouvons le mettre dans notre pied de page. Il est également bon de mettre dans une barre latérale, si vous vouliez ajouter une barre latérale à votre site Web, donc nous pourrions avoir une section ici et nous pourrions permettre à l'utilisateur administrateur de venir ici et d'ajouter différents blocs. Caractéristique très cool de Squarespace juste ici. Ce BlockedField1 correspond directement à ce que nous avons écrit ici. Je n'ai pas changé le nom parce que c'est juste pour un exemple, mais nous voulons donner un joli nom. Peut-être que nous dirions la page de l'horaire bas ou juste l'étiquette un peu plus agréable. Mais c'est essentiellement un champ de bloc ouvert. Passant à la fonctionnalité suivante, je veux vous montrer ce qu'est une requête personnalisée. Les requêtes personnalisées nous permettent de prendre des données provenant d'autres parties du modèle et de les amener où nous le voulons. Si je fais défiler ici et cliquez sur « Custom Query Tag » sur ces balises Squarespace, vous pouvez voir que nous pouvons, par exemple, être sur n'importe quelle page dans le modèle Squarespace et apporter dans les messages de blog d'un blog particulier. Permettez-moi d'utiliser la page Événements à titre d'exemple. Nous avons notre page d'événements par ici. Apportons ces événements dans notre page de calendrier. revenant à ici, Enrevenant à ici, mettons un autre h2 et nous pouvons dire Événements à venir. En dessous, nous allons mettre une balise de requête. Je vais copier et coller cet exemple de code ici. A l'intérieur, je vais sélectionner la collection via son ID. D' où est-ce qu'on a cette carte d'identité ? Laissons ça pour l'instant et passons à notre collection d'événements. Nous allons aller dans events.list, et ajoutons à nouveau cette balise de script, ce qui nous permet de consigner le contexte JSON. Nous allons enregistrer cela et nous allons ensuite nous diriger vers notre page Événements sur notre version locale. Ouvrons nos outils de développement, dirigez-vous vers la console. Je vais ouvrir le deuxième objet. Ensuite, je vais aller dans cette collection d'objets ici et chercher U-R-L-I-D. Pas cet ID avec un étrange ensemble de caractères mais urlid. Ça devrait être le même que la limace. Slug, c'est-à-dire la partie après la barre oblique ici dans l'URL. Je vais prendre l'urlid, tout ce que j'ai à faire est de copier ceci, ce qui est des événements et nous pouvons nous débarrasser de cette balise de script maintenant. Retournez dans notre fichier timeable.page et puis nous savons cibler la collection d'événements. Ensuite, nous allons supprimer cette section répétée et nous allons la remplacer par le code dans events.list. Section répétée à venir, va prendre ça. Fondamentalement, ce que cette balise fait est de créer exactement le même contexte qu'ici. Nous pouvons simplement copier et coller le code dans mot pour mot. Juste réparer l'imbrication là, enregistrez la page. Revenons au navigateur maintenant et cliquez sur le lien Horaire. Maintenant, si je fais défiler vers le bas, nous avons la grille qui vient de l'Open Block Field et nous avons ici les événements à venir. Malheureusement, cela ne s'affiche pas, donc ce que nous allons faire est de nous assurer que le contexte correct arrive. On dirait qu'on a fait une erreur mineure ici. Mais bien sûr, nous pouvons toujours utiliser Console log pour comprendre ce qui se passe avec JSON Data Layer. Et s'il y a des problèmes comme celui-ci, c'est généralement parce que nous ne ciblons pas les objets corrects sur le contexte JSON. Rafraîchir la page et je vais ouvrir ma console Developer en même temps. Aller dans le deuxième objet ici et vous pouvez voir ici que le tableau que nous recherchons est en fait des éléments pas à venir. Le contexte n'est pas exactement le même que ici dans le sens où nous n'avons pas un tableau à venir, nous avons juste tous les événements en tant qu'éléments dans notre tableau d'éléments. Ok, donc c'est tout ce qu'on a besoin de réparer ici, c'est au lieu de la section, des articles à venir. Je pense que nous pouvons nous débarrasser de notre journal de console maintenant, assez confiance que ça va marcher. Ensuite, nous pouvons retourner ici, rafraîchir la page. Fermez ceci et vous pouvez voir que nous avons introduit des données de notre collection d'événements dans cette page statique, et nous pouvons le faire dans n'importe quelle page que nous voulons. Requêtes personnalisées, c'est ce qu'ils font. Ils apportent des données provenant d'autres parties de notre modèle Squarespace et nous permettent de travailler avec ce contexte JSON. Ensuite, nous allons parler des annotations de modèles, qui ne devraient pas prendre trop de temps. annotations de modèle sont assez simples. Si je retourne dans mon administrateur Squarespace et que je passe la souris sur le titre du site, vous pouvez voir cette case apparaissant ici. Si je clique sur Modifier, ce qui se passe est qu'il me sort de la section des pages de l'administrateur et dans la section de conception, juste où je peux mettre à jour le titre du site. Vous pouvez le considérer comme un raccourci pour éditer des parties de votre contenu, et le titre du site est un excellent exemple de quelque chose qui existe sur plusieurs zones de votre site Web, mais qui est édité en un seul endroit sur l'administrateur. C' est un exemple parfait. Laissez-moi vous montrer à quoi ça ressemble dans le code. Si nous allons dans notre fichier header.region et nous cherchons le titre du site, vous pouvez voir ici que nous avons cet attribut ici de data-content-field est égal au titre du site. Si je devais vraiment enlever cela et pousser ce changement sur notre site Web Squarespace, git add, git commit, donc nous avons fait deux changements ici. Ajoutez une requête personnalisée, supprimez l'annotation de modèle pour le titre du site, puis poussez cela pour que la modification affecte notre site Web en direct. Ensuite, je retourne à notre administrateur. Notez que lorsque la page est actualisée et que je survole mon titre, cette zone n'apparaît pas. Cela ne signifie pas que je ne peux pas modifier le titre du site, je peux toujours aller ici et aller ici pour changer le titre de mon site. Je peux l'appeler le nom que j'avais en tête, Backyard Gym, et si j'appuie sur « Enregistrer », il mettra encore à jour ce titre, mais ce raccourci pour accéder à cette partie dans votre administrateur est maintenant parti. Donc je ne recommande pas de faire ça. Il est préférable de garder ces annotations là-dedans. Mais si vous voulez savoir quelles autres annotations vous pouvez utiliser dans votre modèle, encore une fois, documentation Squarespace, et ici sous avancé, vous pouvez regarder les annotations de modèle. Ici vous pouvez voir le titre du site, le contenu principal, la navigation, les comptes connectés, le titre. Ce sont tous des exemples d'annotations de modèle. Ceux-ci devraient tous venir par défaut dans des modèles complets. Mais si vous développez votre propre modèle, c'est important à considérer, que vous devriez avoir ces annotations de modèle liées dans vos éléments. Enfin, la dernière fonctionnalité est un tweak CSS. Je vais descendre ici et juste sous Annotations de modèles est Éditeur de style. Maintenant, c'est un peu plus complexe et nous n'entrerons pas dans les détails sur toutes les possibilités de cette leçon, mais je voulais vous montrer que nous avons ce qu'on appelle l'éditeur de style dans Squarespace, et nous pouvons en fait ajouter ce que l'on appelle des ajustements à nos fichiers LESS, et cela nous permettra d'ajouter l'option de changer certains des styles que nous avons mis en place dans nos fichiers LESS à notre administrateur Squarespace. Tout d'abord, allons dans notre administrateur Squarespace. Allons dans le design et allons dans les styles de site. Ici, vous pouvez voir quand il se charge pour cette affiche de bloc d'image. Si je devais aller sur une autre page, eh bien, ça ne me laisse pas aller sur une autre page, mais fondamentalement, ce sont les seuls réglages que nous avons à notre disposition. On peut aller ici et changer la couleur du texte ici en vert. Mais fondamentalement, les autres styles de notre modèle ne peuvent pas être modifiés. Je ne suis pas prêt à m'engager sur cette couleur verte alors je vais appuyer sur ce petit x pour annuler de ça. Au lieu de cela, je vais ajouter un ajustement à l'un de nos fichiers LESS afin que nous puissions réellement contrôler ce style dans l'éditeur de style. Revenons à la documentation ici et nous pouvons regarder la syntaxe. L' un de ceux que j'aime ici est cette largeur de page, donc je vais copier la définition de variable ici ainsi que ces commentaires ci-dessus, je vais copier cela. Allons dans Base.less et mettons-le juste ici. Comme vous pouvez le voir, le tweak, la partie qui en fait un tweak, est en fait juste un commentaire MOINS, ce tiret, tiret en fait un commentaire donc il n'est pas techniquement exécuté dans votre CSS, mais Squarespace interprétera cela comme un tweak et il l'ajoutera à l'éditeur du site. Ici, vous pouvez voir que nous avons juste le mot-clé tweak avec un deux-points après, et ensuite nous avons un objet avec quelques paires de valeurs clés. Nous avons la valeur de type, le titre, la largeur de page et une valeur min et max. Ce que je vais faire est permettre à l'utilisateur admin de changer la largeur de notre conteneur de page. Je vais aller ici, définir ceci à une valeur par défaut de ce que nous avons ici, qui est 1,140, puis remplacons la valeur codée en dur ici par la variable. C' est une syntaxe LESS, mais fondamentalement le symbole at représente une variable, donc quoi que ce soit sera inséré ici. Mais bien sûr, nous avons notre réglage ci-dessus, donc cela nous permet de l'éditer et je vais définir le minimum à, disons, 900 et le maximum devrait être réglé à 2000. Ce sont des nombres arbitraires. Tu peux mettre ce que tu veux ici. Je vais juste donner à cela un nom plus descriptif de la largeur du conteneur de page. Je vais cliquer sur « Enregistrer » là-dessus, et bien sûr, parce que nous créons un ajustement, ce qui est quelque chose que nous voulons apparaître dans notre administrateur, nous allons devoir pousser ce changement sur notre site Web en direct aussi. Je vais entrer ici, encore une fois, vous devriez être très familier avec cela maintenant, l' fait plusieurs fois dans cette classe. Git add, git commit, ajoutez notre premier tweak, voilà, git push, et après cela est poussé, rafraîchissons notre éditeur de style ici. Ici vous pouvez voir sous la taille et les valeurs, nous avons la largeur du conteneur de page. Je ne sais pas si nous pouvons naviguer vers une autre page ici pendant que nous sommes dans l'éditeur de style. Mais laissez-moi juste prendre l'adresse du site et l'ouvrir dans un nouvel onglet. Laisse-moi le traîner ici. Allons sur une autre page qui a réellement le conteneur du site, toute autre page que la page d'accueil. Cliquez sur le conteneur, inspectez-le, et comme vous pouvez le voir, la largeur du conteneur est 1140. C' est là-haut. Une fois que je déplace mon curseur là-haut, vous ne pouvez plus le voir, mais vous devriez être capable de voir que la zone bleue est de 1140 pixels. Allons dans notre éditeur de style et réduisons cela à 1000 pixels. Vous pouvez voir ici qu'il affecte déjà l'en-tête. Nous pouvons voir ça fonctionner en direct. Je vais appuyer sur « Enregistrer » sur ça. Actualisons cette page de blog, et vous pouvez maintenant voir, si nous regardons à nouveau ce conteneur de site, il est restreint à la largeur de 1000. Ce que nous venons de faire, c'est que nous avons mis en place une valeur par défaut pour le conteneur de page vers le bas dans notre fichier LESS, mais nous avons également ajouté un ajustement ici qui permet à l'utilisateur admin d'entrer et de modifier cette valeur. C' est une autre fonctionnalité vraiment cool des modèles Squarespace. Nous pouvons parcourir nos fichiers CSS ou LESS et ajouter ces réglages pour permettre à l'utilisateur admin plus de contrôle sur le style de leur modèle. Des réglages comme ceux-ci permettent à l'utilisateur admin plus de contrôle sur le site Web sans avoir à creuser dans le code du modèle. Vous trouverez que sur de nombreux modèles complets, il y a beaucoup de modifications disponibles et l'utilisateur administrateur a beaucoup de contrôle sur la façon dont son modèle ressemble et se sent. Mais pour nos besoins avec ce modèle d'espace, nous n'avons pas encore de réglages, donc si nous développons un modèle à partir de zéro, nous devrions construire nous-mêmes tous les réglages. Dans la leçon suivante, nous allons réellement regarder l'un de ces modèles entièrement présentés, et nous verrons des exemples en direct de modifications. Mais maintenant que vous savez comment créer vos propres réglages, vous pouvez maintenant modifier ces modèles pour supprimer les réglages ou ajouter vos propres réglages en plus des réglages déjà disponibles, et cela vous permettra de construire un modèle plus complet qui vous permet de changer les choses sans avoir à creuser dans le code à long terme. Cela couvre toutes les principales caractéristiques dont je voulais parler dans la classe d'aujourd'hui. Mais dans la prochaine leçon bonus, ce que nous allons faire est de regarder un modèle plus complexe. Nous allons examiner probablement un point de départ plus réaliste, quelque chose sur lequel vous avez déjà travaillé, un modèle que vous avez sélectionné sur le site Web de Squarespace, et maintenant vous voulez apporter quelques modifications. Eh bien, nous allons jeter un coup d'oeil à un exemple de cela dans la prochaine leçon. Alors, on finira. On parlera du projet de classe et je vous mettrai en route. Presque à la fin ici les gars. Je vous remercie d'avoir veillé jusqu'à ce point, et je vous verrai dans la prochaine vidéo. 15. Bonus : Modifier un modèle plus complexe: Dans cette classe, nous avons utilisé ces modèles de base Squarespace. J' ai utilisé ce modèle de base parce que je pense que c'est un bon point de départ pour apprendre le développement de modèles et aussi je recommande l'utiliser pour développer vos propres modèles personnalisés. Je soupçonne, cependant, que la plupart du temps, vous voudrez modifier un modèle existant. Probablement l'un de ceux qui viennent avec Squarespace pour commencer. C' est pourquoi dans cette leçon bonus, nous allons examiner la personnalisation d'un modèle existant. Juste un avertissement ici les gars, ça va être un peu déplacé parce que je n'ai pas trop prévu à l'avance ce que nous allons faire, mais c'est pourquoi c'est un peu une vidéo bonus. Nous allons choisir un modèle, puis nous allons trouver une modification et l' exécuter et vous pouvez voir un petit résumé de notre flux de travail. Cela formera un peu une introduction sur la façon d'éditer les modèles plus complexes que vous pourriez exécuter sur votre site Squarespace. Pour commencer, allons sur squarespace.com/templates, que nous pouvons trouver en allant sur squarespace.com et en cliquant sur Modèles. Ici, vous pouvez voir la liste de tous ces modèles. Maintenant, un avertissement avant de sauter directement est que certains d'entre eux sont construits avec une version plus récente de Squarespace et que vous n'êtes pas en mesure d'utiliser le mode développeur sur certains d'entre eux. Donc juste un autre avertissement ici que certains d'entre eux, vous ne pouvez pas utiliser le mode développeur avec. Mais si nous faisons défiler vers le bas, vous pouvez voir que ces modèles sont sur la dernière version de Squarespace, recherche de modèles d'une version antérieure. Je vais cliquer sur celui-ci. Ici, nous serons en mesure de rechercher un modèle particulier. Je vais aller avec le modèle que je suis actuellement en cours d'exécution sur mon site Web en direct, qui s'appelle Jasper. Je vais chercher Jasper, et quand je le trouverai, je cliquerai sur Démarrer avec Jasper. Comme ça, nous avons un nouveau site Web Squarespace avec un peu de contenu de démonstration. Comme vous pouvez le voir, il ressemble beaucoup à mon site web en direct que je vous ai montré plus tôt, mon portfolio de photographie et de vidéographie, mais juste avec du contenu de démonstration. Tout d'abord, passons dans Paramètres, passons en mode Développeur avancé, et allumons le mode développeur en cliquant sur cette bascule, en cliquant sur Continuer, et bientôt, nous aurons le mode développeur activé et nous aura toutes nos informations ici. Je vais ouvrir mon application terminal préférée, qui pour moi est iTerm, pour vous sur un Mac, c'est probablement Terminal et sur Windows, Invite de commandes. Je vais rendre les choses un peu plus facile pour moi cette fois et je vais mettre le dossier de modèle sur mon bureau. Je vais utiliser le mot-clé cd suivi par bureau, et maintenant je suis sur le bureau. Ce que je peux faire est d'exécuter git clone, copier l'adresse git ici, la coller ici, et maintenant il va cloner ce dépôt sur mon bureau. Je vais devoir m'authentifier ici. Je vais devoir mettre mon nom d'utilisateur. C' est un peu difficile à lire quand il dépasse une ligne. On y va. Le mot de passe est dans mon application de gestion de mot de passe. Je vais fermer iTerm maintenant et ouvrons ce dossier nouvellement créé dans VS Code ou tout éditeur de codage que vous aimez utiliser. Cliquez ici pour ouvrir le dossier. Sur mon bureau, vous pouvez voir ici qu'il y a un dossier de modèle. Je vais cliquer sur ouvrir et fermer l'écran d'accueil. Maintenant, nous pouvons passer par notre structure de gabarits et parler un peu de ce qui se passe ici. Le premier dossier est un dossier assets. Si vous êtes familier avec le développement web, vous devez savoir que les actifs intègrent des éléments tels que CSS, JavaScript, images et icônes. Ici, vous pouvez voir que nous avons un SVG Sprite qui a toutes les différentes icônes que nous utilisons dans ce modèle. Nous pouvons mettre dans nos propres icônes et images qui sont utilisées dans le modèle juste ici dans les actifs. Ici, à l'intérieur des blocs, nous pouvons voir un certain nombre de blocs. Ce modèle utilise en fait beaucoup de blocs sur plusieurs fichiers de régions, et il intègre un tas de blocs de navigation différents et aussi des partiels, dont nous n'avons pas vu d'exemple réel auparavant. Mais comme vous pouvez le voir ici, ce cart.block n'est clairement pas un élément de navigation, donc cela devrait être partiel. Il est assez clair ici que c'est pour apporter notre panier lorsque nous autorisons le commerce électronique. Nous ne couvrons pas le commerce électronique dans cette classe, mais nous verrons des partiels passer en revue dans une seconde. Si nous allons dans les collections, nous avons des fichiers conf pour nos principaux types de collection, album, blog, événements, produits, projets. Nous avons également un fichier folders.conf afin que nous puissions avoir dossiers dans ce modèle et le fichier index.conf pour définir un index, puis un fichier .list pour l'index afin de déterminer la présentation de cet index et un fichier .list pour la présentation de une liste de projets. Ensuite, nous avons un dossier de scripts. Dans le dossier des scripts, nous avons site-bundle.js, qui est un fichier JavaScript gigantesque de JavaScript minifié. Je ne m'attends pas à ce que vous puissiez décoder ça. Si vous voulez apporter des modifications JavaScript à un modèle qui a déjà un fichier comme celui-ci, je recommande de créer un nouveau fichier JavaScript, puis apporter cela comme nous l'avons déjà fait dans cette classe. Chaînes, nous n'avons pas vu auparavant, mais c'est évidemment un endroit pour stocker des données json. Je ne vais pas passer du temps là-dessus. Dans les styles, nous avons tous nos fichiers moins et CSS. En descendant, nous pouvons voir qu'il n'y a qu'un seul fichier site.region ou il n'y a qu'un seul fichier de région et il s'appelle site.region, et il incorpore beaucoup de ces blocs. Comme vous pouvez le voir ici, c'est notre premier exemple dans le monde d'un partiel. Nous pouvons voir de cette syntaxe ici suivie du nom du bloc. Nous prenons essentiellement le code de responsive-nav.block, qui est juste ici, et le plaçons juste ici. Donc juste un fichier de région et cela signifie évidemment que nous n'avons qu'une seule mise en page. Si je vais dans mon fichier template.conf, vous pouvez voir que c'est le cas. Nous avons juste une mise en page dans notre objet de mise en page et c' est la mise en page par défaut en utilisant seulement la seule région que nous avons. Si nous regardons les navigations, cependant, c'est un peu différent de ce que nous avions dans notre modèle. Nous n'avions qu'une seule navigation, alors que ce modèle en a deux. Il a une navigation secondaire, puis nous avons ce tableau de feuilles de style qui répertorie les feuilles de style que nous voulons apporter dans notre modèle, y compris l'ordre dans lequel nous voulons qu'elles entrent dans notre modèle. Ici, nous avons un tableau de SystemCollections. Comme nous l'avons vu plus tôt dans la classe, SystemCollections nous permet de tirer parti ces types de collection sans avoir à écrire une page .list ou .item pour eux. Ici, vous pouvez voir un nouveau tableau appelé SystemPartials. C' est comme des partiels, mais nous ne les définissons pas nous-mêmes. Au sein de Squarespace, nous avons cette partie ici que Squarespace nous fournit, et c'est un ensemble de boutons de partage. C' est donc un petit aperçu de notre modèle. Ce que je vais faire ensuite est en fait exécuter ce modèle localement. Nous devons entrer ici, exécuter squarespace-server, suivi de l'adresse de notre site Web. Nous allons regarder notre site Web séparément en dehors de l'administrateur aussi. Je vais mettre cela dans son propre onglet, puis je m'assurerai de le copier, de le mettre ici, puis de l'exécuter dans notre commande de serveur Squarespace, veillant à mettre le —auth à la fin. J' ai appuyé sur Entrée. Après un certain temps, il devrait écouter sur port9000. Ouvrons un nouvel onglet, lançons localhost:9000, et je vous attraperai dans quelques secondes quand cela finit enfin le chargement. Ici, vous pouvez voir notre site dans toute sa splendeur, il est fondamentalement juste un titre de site pour le moment. Nous n'avons pas encore de navigation parce que malheureusement, si nous revenons à notre administrateur, vous pouvez voir qu'une fois que nous avons activé le mode développeur, Squarespace a vraiment arraché tout le contenu de la démo, et donc maintenant nous devons créer notre propre contenu. Très triste. Mais bien, dans un exemple de la vie réelle, vous n'utiliseriez pas de contenu de démonstration de toute façon. Laissez-moi apporter du contenu de démonstration à nouveau. Je vais faire le même exemple que dans nos projets principaux, qui était dans la page À propos, cliquez sur Modifier, et je vais juste chercher une image. Peu importe ce qu'est l'image. Allons avec cette belle bande d'arbres à côté d'un lac, on dirait. Il va juste traiter et redimensionner cela, puis nous allons cliquer sur Appliquer. Après avoir cliqué sur Appliquer, nous pouvons faire défiler vers le bas et voir qu'il y a déjà du contenu d'espace réservé là, donc je vais enregistrer cela. Comme vous pouvez le voir, nous avons notre première page et elle est automatiquement ajoutée ici parce que c'est dans notre navigation principale. Si je le déplace vers la navigation secondaire, je crois qu'il apparaîtra toujours et il ne sera probablement pas évident la différence tant que vous n'ajoutez pas des éléments de navigation aux deux navigations. Maintenant, je sais par expérience que ce modèle semble déjà assez agréable. Je ne peux pas vraiment penser à trop de choses que vous voudriez changer sur ce modèle, mais il y a des choses infinies que vous pourriez évidemment faire avec n'importe quel modèle. Une des choses que j'ai remarqué est qu'il n'y a pas beaucoup de pied de page. Une chose que je sais à propos de ce modèle est qu'il y a un élément de pied de page en bas, mais il n'est pas activé. Si je vais à Accueil, si je vais à Design, puis je vais à Styles du site, je peux trouver tous mes réglages pour ce modèle. C' était quelque chose dont nous avons parlé brièvement, mais nous n'avons pas créé beaucoup de réglages car il n'y avait pas vraiment beaucoup de styles CSS dans notre modèle pour commencer. Mais comme vous pouvez le voir ici sous site:pied de page, nous pouvons cliquer sur cette case pour afficher le pied de page Global Site. Si nous n'avons pas cette case à cocher affichée, le pied de page du site sera réglé pour n'afficher aucun et nous ne pourrons pas le voir. Je vais frapper sur ça. Pour revenir à notre site Web Squarespace en direct en dehors de notre administrateur, je vais faire défiler vers le bas et comme vous pouvez le voir, il n'y a toujours rien dans notre pied de page. Si j'inspecte la page cependant, nous devrions commencer à voir qu'il y a un élément de pied de page là-dedans. Comme vous pouvez le voir, pied de page, ID, pied de page, puis à l'intérieur, nous avons tout un tas de code et dans la div la plus imbriquée, il n'y a en fait pas de contenu. Jetons donc un coup d'oeil dans notre code de modèle et voyons où cela arrive. Donc, je vais aller sur site.region et chercher pied de page avec la balise d'ouverture. Ici, vous pouvez voir où notre pied de page est défini. Comme vous pouvez le voir ici, nous avons un champ de bloc ouvert Squarespace, donc évidemment, nous n'avons pas vraiment mis dans nos blocs de fin donc il n'y aura rien qui s'affiche. Essayons de le faire maintenant. Revenons à ici et vous pouvez voir quand je survole cette zone de pied de page, vous pouvez voir ce mot pied de page venir et vous pouvez voir ce bouton pour modifier. Maintenant, je peux ajouter des blocs à mon pied de page. Maintenant, c'est bien et bon, c'est une fonctionnalité déjà dans le modèle. Mais ce que je veux faire dans cette leçon est en fait d'apporter un changement de code au modèle parce que c'est ce qu'est cette classe. Tout est sur le mode développeur. Si vous pouviez le faire dans votre administrateur Squarespace, alors pourquoi auriez-vous besoin de code ? Eh bien, dans ce cas, disons simplement que nous voulions avoir une navigation dans notre pied de page. Je pense que c'est assez commun dans beaucoup de sites Web, ayant une navigation d'en-tête et un pied de page dans la navigation. Donc, au lieu d'avoir ce champ de bloc ouvert, ce que je vais faire, revenez ici, descendons ici, supprimez ce champ de bloc et remplacez-le par une balise de navigation Squarespace. Parce que nous avons déjà deux paramètres de navigation dans notre modèle Squarespace, comme vous pouvez le voir, je vais gagner un peu de temps ici et juste réutiliser la navigation secondaire plutôt que de créer un nouveau pied de page navigation. Ce que je veux dire par re-purpose, c'est que je vais faire en sorte que la navigation secondaire apparaisse dans le pied de page plutôt que dans l'en-tête aussi bien. Donc, tout d'abord, nous devons trouver ce code dans l'en-tête, le supprimer et le déplacer ici. Donc, si je fais défiler vers le haut, notre contenu d'en-tête est dans ce fichier d'en-tête .block. Je vais aller dans notre dossier blocks, aller dans le fichier header.block et comme vous pouvez le voir ici, nous avons notre balise de navigation Squarespace pour le nav principal, puis juste en dessous, le nav secondaire. Donc, je vais prendre la balise plus son élément parent qui l'entoure avec la commande X, il est copié dans mon presse-papiers. Ensuite, je vais enregistrer sur cette page, redescendre jusqu'ici et mettons-le dans notre pied de page à la place. Appuyez sur Enregistrer sur ça. Maintenant, nous allons réellement créer un élément de navigation secondaire, disons nous contacter page, il suffit de nous contacter. Très bien, donc c'est dans la navigation secondaire maintenant et comme vous pouvez le voir, il se trouve juste à côté de la navigation principale sur notre site Web actuellement en direct. Mais bien sûr, nous avons apporté des changements de code localement et cela devrait apparaître sur notre version locale. Alors réexécutons localhost 9 000 et voyons ce qui se passe. Comme vous pouvez le voir, nous avons notre page sur ici dans notre navigation principale, mais si nous faisons défiler vers le bas, nous devrions voir un pied de page avec navigation pour la navigation secondaire. Nous ne voyons pas cela actuellement, alors passons à la page à propos. Cela rend un peu plus évident et ici peut voir le lien de contact nous est en bas. Peut-être qu'il était là sur la page d'accueil. Il semble que la page d'accueil soit un cas particulier, mais néanmoins, si nous sommes sur la page à propos, vous pouvez voir le lien de contact est ici et nous pouvons bien sûr échanger ces autour, nous pouvons nous contacter et sur les positions opposées . Ensuite, lorsque nous réexécutons notre version locale, vous pouvez voir sur est maintenant en bas dans notre navigation de pied de page et contactez-nous est ici dans notre navigation d'en-tête. C' est donc un petit changement sur un modèle plus complet dans cette leçon. Essentiellement, nous pourrions faire tout ce que nous voulions à partir de maintenant. Les possibilités sont infinies et malheureusement, je ne peux pas couvrir tous les changements possibles que vous pourriez imaginer avec votre modèle Squarespace. Je suis venu avec mettre une navigation de site ou un pied de page dans la navigation là juste sur place. Je sais que ce ne sera pas nécessairement le changement que vous souhaitez apporter à votre site Squarespace, mais bien sûr, hésitez pas à laisser un commentaire dans la boîte de discussion ci-dessous. Nous pouvons nous aider mutuellement à créer ce que nous voulons sur notre modèle Squarespace. Peut-être que nous voulons changer la mise en page globale, peut-être que nous voulons incorporer une barre latérale, peut-être que nous voulons incorporer autre framework JavaScript qui exécute presque une application à l'intérieur de notre modèle. Presque tout est possible, au moins à l'avant. Définitivement, prenez ce que vous avez appris dans cette classe, appliquez-le à créer quelque chose de personnalisé pour vous-même ou apportez ces modifications à votre modèle Squarespace et comprenez que s'il y a quelque chose que vous ne savez pas faire ou que vous pouvez pas assembler les deux, vous pouvez toujours laisser un commentaire dans la boîte de discussion ci-dessous. Je suis intéressé de voir ce que vous voulez changer sur votre modèle Squarespace et je ferai de mon mieux pour vous orienter dans la bonne direction. Donc oui, j'espère que cela vous a donné un peu plus d'exposition à d'autres modèles et vous pouvez voir que quel que soit le modèle que nous éditons, où que ce soit le modèle de base ou ce modèle Jasper, c'est le même processus et le mêmes mécaniciens qui travaillent dans les coulisses. Alors merci d'avoir regardé. Je vais terminer la classe dans la prochaine vidéo et vous pouvez commencer votre projet de classe si vous ne l'avez pas déjà fait. J' ai hâte de te voir et de signer, donc je te vois dans la prochaine vidéo. Hey les gars, j'ai oublié de mentionner une chose avant de passer à la leçon suivante. Si vous vouliez faire ces changements en direct sur votre site Web, vous devriez bien sûr exécuter git add et ensuite git valider ces changements. Donc, disons passer à la navigation secondaire, puis git push. Donc, ce changement va maintenant être en direct sur votre site Web plutôt que de simplement fonctionner localement. D' accord les gars, je pensais juste jeter ça là-dedans parce que je viens réaliser qu'on n'a pas vraiment poussé ça sur notre site web en direct. Vérifions ça maintenant. Oui, comme vous pouvez le voir, cette navigation est maintenant séparée dans notre en-tête et notre pied de page. Alors c'est tout. Je te vois dans la prochaine vidéo. 16. Outro: Dans cette classe, nous avons couvert toutes les principales choses que vous pouvez faire dans un modèle Squarespace. En ouvrant le modèle, nous avons pu éditer l'ensemble de l'interface frontale, insérer du HTML, du CSS et du JavaScript partout où nous le voulons. Nous avons également appris sur la couche de données JSON et les données que nous pouvons apporter à partir du back-end en utilisant JSON-T. Pour vos projets de classe, je vous encourage à créer votre propre modèle. Souhaitez-vous qu'il y ait une barre latérale sur votre page de blog ? Peut-être que vous voulez créer une disposition de navigation à plusieurs colonnes dans votre pied de page. Maintenant, armé de votre connaissance des modèles Squarespace, le choix est à vous. Veillez à publier ce que vous créez dans la section projet de la classe. Si vous avez besoin d'aide ou de conseils, laissez vos commentaires dans la section commentaires ou dans la section discussion ci-dessous. Merci, comme toujours, d'avoir regardé, et j'espère vous revoir dans certains de mes autres cours.