En .NET, un la page principale est un modèle pour les pages de contenu, où une série de pages ASPX qui utilisent toutes le même la page principale peuvent tous partager le même code de base.
Aussi disponible dans cette série:
Premiers pas avec Umbraco: Partie 1
Premiers pas avec Umbraco: Partie 2
Premiers pas avec Umbraco: Partie 3
Premiers pas avec Umbraco: Partie 4
Premiers pas avec Umbraco: Partie 5
UNE la page principale peut alors avoir un ou plusieurs contentPlaceHolders défini et chaque page ASPX qui utilise cette la page principale il suffit de définir le code qui se trouve dans la contentPlaceHolder. Masterpages peuvent également être imbriqués, c'est comment ils seront structurés dans notre exemple de site.
Définir le code dans notre modèle de page de base
le Page de base, rappelez-vous c'est la Modèle et Type de document qui héritera de toutes les pages suivantes, ne doit contenir que les éléments communs à toutes les pages du site. Ouvrez le BasePage.master fichier dans Visual Web Developer Express (VWD). Il aura déjà un peu de code ASPX dans le fichier, y compris un élément. Cet élément pointe vers un élément dans l'un des Umbraco pages maîtresses.
Il est possible d’ajouter le code au pages maîtresses entièrement à travers le back-end Umbraco; lorsque vous sélectionnez l'un des Modèles dans le Réglages Dans cette zone, une copie du fichier est chargée dans le panneau de droite du back-end pour modification, cette fonctionnalité est plus utile pour effectuer de petites modifications et mettre à jour le fichier. pages maîtresses, et pour insérer des macros ou des éléments. Lorsque nous utilisons un IDE complet .NET, nous obtenons intellisense et toute une gamme de fonctionnalités qui ne sont pas présentes dans Umbraco. pages maîtresses nécessitera généralement une édition dans les deux domaines.
Enregistrez le fichier. Jetons un coup d'oeil à ce que nous avons. Il est au format HTML5, comme on peut le voir dès le minimum DOCTYPE et meta charset élément. Il n'est pas essentiel d'utiliser HTML5, mais nous pouvons aussi bien, n'est-ce pas? dans le de la page que nous avons liée à une feuille de style (que nous n’avons pas encore créée, mais qui le sera ultérieurement) et à un </code> élément. le <code><title></code> contient notre première balise Umbraco et pointe vers une macro. Ne vous inquiétez pas trop pour le moment, nous n'avons pas encore discuté de macros et celles-ci seront abordées plus en détail dans une partie ultérieure de la série. Le contenu de la page est enveloppé dans un <code><form></code> élément avec le <code>courir vers</code> attribut mis à <code>serveur</code>, ce qui est une pratique standard pour les sites .Net. Nous incluons également un lien vers le <code>HTML5shiv</code> fichier sur code Google pour qu'IE8 ou inférieur puisse afficher nos éléments HTML5 correctement.</p> <p>Ensuite nous avons un <code></code> élément qui contient un <code><hgroup></code> élément pour l'en-tête du site principal et le slogan (composé de <code><h1></code> et <code><h2></code> balises respectivement), et un <code><nav></code> élément contenant la navigation principale du site, qui sera construit à partir d’une liste standard non ordonnée. Le code HTML affiché pour la navigation principale ne sera pas réellement utilisé dans la forme finale du site. Il est répertorié ici pour indiquer comment le code HTML devrait être utilisé lorsqu'il est créé automatiquement à l'aide d'une autre macro. Il est utile d’ajouter la structure de base des éléments construits de manière dynamique, au cas où ils auraient besoin d’être stylisés avant l’ajout des bits dynamiques. Ceci est particulièrement important si vous travaillez en équipe et que quelqu'un d'autre s'occupera de tout le contenu (amusant) du back-end..</p> <p>Nous avons alors un <code><div></code> élément qui contient un <code><asp:ContentPlaceHolder></code>. le <code><div></code> a un <code>identifiant</code> à des fins de style, et la <code><asp:ContentPlaceHolder></code> a un <code>identifiant</code> attribut afin qu’il puisse être rempli avec d’autres pages (ou <code>pages maîtresses</code>). Il a aussi le <code>runat = "serveur"</code> attribut car c’est un élément ASPX géré par le serveur. Notez que certains de nos éléments se voient attribuer un nom de classe pour le style du site vers la fin de la série..</p> <p>Nous avons aussi un <code><footer></code> élément contenant une autre copie de la navigation (à nouveau, le code HTML est fourni à ce stade principalement à des fins de style et d’exemple de la manière dont il apparaîtra éventuellement dans le navigateur lorsque les pages sont servies), ainsi qu’une déclaration de droit d’auteur. La déclaration de copyright contient un petit extrait de <code>C #</code>; tout ce que cela fait est de sortir l'année en cours au format standard à 4 chiffres, de sorte qu'il reflète toujours l'année d'affichage de la page. Enfin, nous établissons un lien vers la version hébergée de jQuery sur Google-CDN, car nous en aurons besoin pour ajouter un comportement à notre site dans la dernière partie de la série..</p> <hr> <h2>Codage de la page d'accueil</h2> <p>Ensuite, nous pouvons ajouter le code qui constituera la page d'accueil. Si nous ouvrons la <code>HomePage.master</code> fichier dans VWD nous pouvons voir qu'il a déjà été imbriqué sous <code>BasePage.master</code> (la <code>BasePage.master</code> le fichier est défini comme <code>MasterPageFile</code> dans le <code>Maîtriser</code> déclaration en haut du fichier), il suffit de changer le <code>ContentPlaceHolderID</code> du <code><asp:Content></code> élément pour qu'il pointe vers le <code><asp:ContentPlaceHolder></code> élément que nous avons ajouté à la <code>BasePage.master</code>:</p> <pre><asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Maintenant, ajoutez le code suivant à la <code><asp:Content></code> élément montré ci-dessus:</p> <pre><p><umbraco:Item field="introText" runat="server" /></p> <umbraco:Item field="bannerImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia(0, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia(0, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> <div> <div> <div> <umbraco:Macro Alias="heroPanels" runat="server"></umbraco:Macro> </div> </div> <ul> <li>précédent</li> <li>Suivant</li> </ul> </div></pre> <p>Cette page principale contient un autre type d’élément Umbraco - le <code>Article</code>. Le premier élément que nous utilisons définit le texte d’introduction sur la page. Rappelez-vous, nous avons défini cela comme une propriété du <code>Page d'accueil</code> Type de document dans la première partie de cette série et définissez-le sur un type de données de <code>Éditeur Richtext</code>. le <code><umbraco:Item></code> L'élément ici dans le modèle affiche le contenu de tout ce qui est entré dans l'éditeur de texte enrichi lorsque nous créons un nœud de contenu pour la page d'accueil dans le back-end.</p> <p>La relation entre les propriétés des types de document et les éléments qui se retrouvent dans nos pages devrait être un peu plus claire, mais ne vous inquiétez pas si ce n'est pas tout à fait clair, nous n'avons pas encore créé de fichier. les pages réelles pour le moment, mais lorsque nous terminons la dernière partie du puzzle, il faut bien le mettre en place.</p> <p>Ensuite, nous avons un élément d'image; parce que nous utilisons un sélecteur de média (j'expliquerai exactement ce qu'est un sélecteur de média lorsque nous créons la page), le code est beaucoup plus complexe que ce que nous avons vu jusqu'à présent. L'une des sections du back-end d'Umbraco est la <code>Médias</code> section où tout le contenu multimédia d’un site peut être téléchargé et stocké. Comme pour les autres ressources du site, chaque élément multimédia est un nœud de l’arborescence de nœuds. Un nom lui est attribué lorsque l’élément multimédia est ajouté au CMS..</p> <p>Quand on ajoute le <code><img></code>élément, nous utilisons un <code><umbraco:Item></code> semblable à la <code>Texte d'introduction</code>, mais nous devons utiliser un extrait de code XSLT en ligne et quelques extraits de code HTML pour obtenir le chemin de l'image stockée dans la médiathèque. L’extrait de code XSLT utilise le <code>concat ()</code> méthode, qui accepte un tableau de chaînes délimité par des virgules à concaténer, pour construire le <code><img></code> élément. Dans ce tableau, nous utilisons les entités HTML et les balises pour construire l’élément manuellement. Nous utilisons également une fonction du <code>umbraco.library</code> classe. La fonction est <code>GetMedia</code> et nous permet d’obtenir le chemin du mage dans la médiathèque (il existe un dossier correspondant dans le système de fichiers Umbraco dans lequel tous les éléments multimédias sont stockés) à l’aide de la commande <code>umbracoFile</code> propriété, et le nom du noeud en utilisant <code>@nodeName</code>. Notez que pour que l'exemple de code ci-dessus s'affiche correctement, je devais insérer des caractères \ dans les entités HTML. Supprimez-les si copier et coller dans vos propres fichiers.</p> <p>Enfin, nous ajoutons quelques balises de base pour le panneau des héros, notamment un conteneur extérieur (le <code><div></code> avec un <code>identifiant</code> de <code>héros</code>), une <code><div></code> chacun pour le <code>#téléspectateur</code> et <code>#slider</code> éléments, et une interface utilisateur simple permettant de naviguer dans les différents panneaux de contenu. le <code>#slider</code> L'élément contient également un <code><umbraco:Macro></code> élément, nous allons donc construire cette partie du panneau des héros en utilisant une macro XSLT que nous créerons dans une partie ultérieure de la série. Le panneau des héros sera initialement construit à partir de XSLT et de la majoration affichée ici, puis sera conçu pour fonctionner avec un script..</p> <hr> <h2>Création du modèle de contenu</h2> <p>Nos pages de contenu sont relativement simples et sont construites en utilisant une seule propriété de la <code>Contenu</code> Type de document. Dans le fichier masterpage, changez le <code>ContentPlaceHolderID</code> du <code><asp:Content></code> élément à <code>BaseContent</code> exactement comme nous l'avons fait pour la page d'accueil:</p> <pre> <asp:Content ContentPlaceHolderID="BaseContent" runat="server"> </asp:Content></pre> <p>Ajoutez ensuite le code suivant à la <code><asp:Content></code> élément:</p> <pre><div><umbraco:Item field="pageCopy" runat="server" /></div></pre> <p>C'est tout, c'est tout ce que nous allons utiliser dans notre modèle de page de contenu. En réalité, une page de contenu serait probablement beaucoup plus complexe, mais pour notre exemple simple, cela devrait suffire. Nous avons utilisé un contenant externe <code><div></code> pour ça <code><umbraco:Item></code> parce que l'élément est lié à un <code>Éditeur Richtext</code> et pourrait donc contenir de nombreux types de contenu.</p> <hr> <h2>Les modèles de nouvelles</h2> <p>Notre modèle NewsList sera presque aussi fondamental que notre <code>Contenu</code> modèle en tant que la page sera en grande partie construite dynamiquement en utilisant une macro XSLT. N'oubliez pas de mettre à jour le <code>ContenPlaceHolderID</code> à <code>BaseContent</code> comme nous l'avons fait dans nos autres modèles, puis ajoutez les éléments suivants à l'espace réservé:</p> <pre><section> <h1>Nouvelles récentes de la société</h1> <umbraco:Macro Alias="newsList" runat="server" /> </section></pre> <p>Sur cette page nous avons un <code><section></code> element, qui contient l’en-tête de la page principale et la macro qui construit la liste des actualités. C’est tout ce dont nous avons besoin dans ce modèle, passons donc au prochain et dernier; la <code>NewsItem</code>. Encore une fois, changez le <code>ContentPlaceHolderID</code> à <code>BaseContent</code> puis ajoutez le code suivant à l'espace réservé: </p><pre><article> <h1><umbraco:Item field="headline" runat="server" /></h1> <ul> <li>Posté sur <umbraco:Item field="date" formatAsDate="true" runat="server" /></li> <li>Par <umbraco:Item field="creatorName" runat="server" /></li> </ul> <div> <umbraco:Item field="storyImage" xslt="concat('&\lt;img src=&\quot;',umbraco.library:GetMedia(0, false())/umbracoFile, '&\quot; alt=&\quot;',umbraco.library:GetMedia(0, false())/@nodeName, '&\quot; /&\gt;')" xsltDisableEscaping="true" runat="server"/> <div><umbraco:Item field="newsText" runat="server" /></div> </div> </article> <nav> <umbraco:Macro Alias="newsNav" runat="server" /> </nav></pre> <p>Notre <code>NewsItem</code> Le modèle est un peu plus complexe que la plupart des autres. Le conteneur principal du reportage est un <code><article></code>, qui contient un <code></code> pour le titre et des informations sur le reportage tel que son <code>rendez-vous amoureux</code> et <code>auteur</code>. La date, qui est indiquée dans le premier <code><li></code>, est lié à la <code>Sélecteur de date</code> champ que nous avons ajouté au type de document correspondant à ce type de page. Nous avons mis le <code>formatAsDate</code> Attribuez à true ce qui formate la date correctement sans une chaîne de temps ajoutée à la fin. le <code>auteur</code> est obtenu en utilisant le <code>creatorName</code> propriété qui est automatiquement ajoutée aux nœuds (pages) lors de leur création dans le back-end.</p> <p>Le corps de l'article est un récipient extérieur <code><div></code> qui utilise le <code>newsImage</code> champ (il s’agit essentiellement de la même image que la bannière de la page d’accueil, qui utilise également un sélecteur de média. Là encore, les entités HTML comportent des barres obliques inverses afin qu’elles s'affichent correctement ici) et une <code><div></code> qui utilise un <code><umbraco:Item></code> lié au <code>newsText</code> champ. Nous créons également un secondaire <code><nav></code> élément qui permettra au visiteur de naviguer directement de la page d’actualités en cours vers d’autres pages sans devoir revenir à la liste des actualités. Ce sera construit à partir d'une macro, que nous verrons dans la prochaine partie de cette série.</p> <hr> <h2>Ajout de pages</h2> <p>Nous avons donc passé au moins jusqu'à présent quelques bonnes heures à mettre les choses en place (plus si vous deviez installer VWD + SQL Server), ajoutons donc déjà quelques pages! Dans un site Umbraco, il n’existe pas de «pages» individuelles en tant que telles. Ne pensez pas vous-même - "J'ai besoin que cette page fasse quelque chose d'unique pour pouvoir ajouter ceci ou cela à la page sous-jacente" - cela ne fonctionne tout simplement pas comme ça, il n'y a pas de page sous-jacente. Au lieu de pages, nous avons des nœuds de contenu dans l’arborescence (en particulier, des nœuds dans la <code>Contenu</code> section du backend CMS) et les données de la base de données. Des URL individuelles sont stockées dans la base de données et chaque nœud est associé à une URL. Ainsi, lorsqu'un visiteur tape l'adresse d'une page ou navigue sur le site, le CMS vérifie quelle URL a été demandée et construit la page à la volée. , en utilisant son type de document et son modèle.</p> <p>Ainsi, pour créer la page d'accueil du site, accédez à la section Contenu du CMS, cliquez avec le bouton droit de la souris sur le dossier Contenu dans le panneau en haut à gauche, puis choisissez Créer. Dans la boîte de dialogue qui apparaît, entrez Home comme nom et choisissez Page d'accueil comme type de document:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2.jpg"><br> <p>Une fois que nous avons frappé le <code>Créer</code> Dans la boîte de dialogue, le nouveau nœud sera créé et affiché dans le panneau en haut à gauche du CMS, avec une petite étoile orange à sa droite. Cela indique que le nœud a été enregistré, mais pas publié. Dans le panneau de droite du CMS, nous voyons les onglets et les champs que nous avons définis dans le type de document de la première partie. <code>Contenu</code> onglet est affiché par défaut car il s’agit du premier onglet, la première propriété que nous avons définie était le <code>Texte d'introduction</code> propriété, qui mappe directement à la zone de texte en haut de la <code>Contenu</code> languette. Nous avons également défini le <code>Image de la bannière</code> propriété, qui mappe directement sur le contrôle de sélecteur de média indiqué sous la zone de texte.</p> <p>Le nœud de contenu de la page d'accueil héritera également d'une propriété du <code>Page de base</code> type de document -le <code>Nom de domaine</code> - qui peut être vu sur le <code>Propriétés</code> languette. Aller au <code>Propriétés</code> onglet maintenant. Umbraco crée automatiquement plusieurs propriétés importantes, notamment le nom du nœud, qui est un champ éditable permettant de modifier facilement le nom du nœud à tout moment, et le <code>Type de document</code> et <code>Modèle</code> utilisé. Il existe d'autres propriétés utiles telles que le créateur du nœud et la date de publication. Entrer <code>L'entreprise</code> dans le <code>Nom de domaine</code> champ (cela pourrait prendre le format <code>L'entreprise</code>, ou une URL réelle telle que www.thecompany.com, cela ne fait aucune différence, car il sera simplement utilisé pour le titre de la page).</p> <p>Les deux <code>Texte d'introduction</code> et le <code>Image de la bannière</code> sont des propriétés obligatoires. Elles devront donc être toutes les deux renseignées avant de pouvoir publier la page. le <code>Texte d'introduction</code> est facile; nous commençons juste à taper dans la zone de texte. Nous pouvons faire un formatage de base en utilisant le <code>Éditeur Richtext</code> boutons en haut de l'onglet, mais essentiellement, nous complétons simplement cette propriété, ou ce champ, en tapant. le <code>Image de la bannière</code> est légèrement (mais pas beaucoup plus) complexe et pour le compléter, nous devrons travailler brièvement avec une autre section du système de gestion de contenu - la médiathèque.</p> <hr> <h2>La médiathèque</h2> <p>La médiathèque est un référentiel de toutes les ressources multimédias, telles que les images, les vidéos, les fichiers son ou d’autres fichiers ou documents intégrés. Notre <code>Image de la bannière</code> terrain pour la <code>Page d'accueil</code> utilise un <code>Sélecteur de média</code>, contrôle qui ouvre une boîte de dialogue affichant la médiathèque et permet à l’administrateur final du site de choisir visuellement l’image qu’il souhaite utiliser. Avant que cela puisse arriver, il faut que la médiathèque puisse sélectionner des éléments..</p> <p>Pour ajouter un élément à la médiathèque, il suffit de choisir la <code>Médias</code> section en cliquant sur l’icône dans le panneau inférieur gauche de l’arrière-plan, puis une fois que le nœud de section de média a été chargé dans la section en haut à gauche, cliquez avec le bouton droit sur le dossier Médias et choisissez <code>Créer</code> du menu. Dans la boîte de dialogue qui apparaît, vous pouvez attribuer un nom à l’image (rappelez-vous que le nom que nous donnons au nœud est utilisé dans la <code>alt</code> attribut de l’image lorsqu’elle est affichée sur la page d’accueil), et choisissez le <code>Type de support</code>. Vous pouvez choisir parmi trois types prédéfinis: un dossier qui peut être utile lorsque nous souhaitons classer et stocker de nombreux éléments multimédias de manière ordonnée, en général <code>Fichier</code> type ou <code>Image</code>, que nous allons utiliser dans ce cas. Vous pouvez facilement créer d’autres types de supports dans <code>Réglages</code> section.</p> <p>Une fois la <code>Créer</code> Dans la boîte de dialogue, vous avez cliqué sur le bouton, le nouvel élément d'image est créé et le panneau de droite de l'éditeur contient certaines propriétés, notamment un bouton de téléchargement. Nous devrions cliquer sur le bouton de téléchargement pour choisir le fichier sur notre ordinateur que nous souhaitons télécharger (j'ai une image prédéfinie prête à être téléchargée). Une fois que vous avez sélectionné l'image à télécharger et cliqué sur l'icône de sauvegarde dans la barre d'outils en haut du panneau de droite, l'image fera partie de la bibliothèque multimédia et sera répertoriée en tant que nœud dans l'arborescence du nœud multimédia. Une vignette pour l'image sera également créée et affichée dans le <code>Propriétés</code> panneau à droite, avec quelques-uns des attributs de l'image:</p> <img src="//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-2_2.jpg"><br> <p>Maintenant que l'image est prête à être sélectionnée, revenez à la <code>Contenu</code> section et sélectionnez le <code>Accueil</code> noeud que nous avons créé plus tôt. dans le <code>Image de la bannière</code> champ sous la zone de texte, cliquez sur le <code>choisir</code> lien pour ouvrir le sélecteur, qui apparaîtra dans une boîte de dialogue. Clique le <code>La compagnie fait ceci!</code> noeud dans le sélecteur et il sera défini dans le <code>Bannière imag</code>e domaine. le <code>Accueil</code> noeud peut maintenant être publié, alors cliquez sur l'icône du monde avec un disque devant pour enregistrer et publier la page.</p> <p>C'est tout; vous avez fait votre première page Umbraco! Vous pouvez afficher la nouvelle page en cliquant sur l'icône Aperçu (la page avec la loupe) pour la voir en mode aperçu, ou vous pouvez simplement ouvrir un nouvel onglet dans votre navigateur, copier l'adresse URL du back-end, collez-le dans le nouvel onglet et supprimez tout après le numéro de port.</p> <p>À ce stade, la page est totalement dépourvue de style, mais vous devriez constater que le texte d'introduction et l'image que nous avons définis dans le back-end sont affichés sur la page, avec la marque située en haut de l'écran. <code>Home.master</code> et <code>Page de base</code> modèles. le <code><umbraco:Item></code> éléments ont tous été peuplés, mais aucun <code><umbraco:Macro></code> les éléments n'auront pas encore été remplis car nous avons besoin d'écrire du XSLT pour ces.</p> <hr> <h2>Résumé</h2> <p>Dans cette partie du didacticiel, nous avons examiné le fonctionnement des modèles Umbraco (ils représentent des pages maîtres .Net) et leur imbrication pour une réutilisation maximale du code. Maintenant que nous avons créé une page, nous avons vu comment les types de document, les modèles et les nœuds fonctionnent ensemble pour créer les propriétés que nous pouvons modifier dans le back-end, ainsi que les pages que nos visiteurs verront..</p> <p>Dans la partie suivante de cette série, nous allons créer le reste des pages du site, puis commencer à écrire le XSLT qui construira la navigation en haut et en bas, ainsi que le panneau des héros, entre autres choses..</p>
<div class="rek-block">
<center>
<ins class="adsbygoogle"
style="display:inline-block;width:580px;height:400px"
data-ad-client="ca-pub-3810161443300697"
data-ad-slot="9434875811"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</center>
</div>
<div class="h-alltags">
<a href="articles/code">Code</a>
</div>
</div>
</div>
</div>
</div>
<div class="next_posts clearfix">
<div class="n_post">
<div class="next_posts-h1 left_nh1"><a href="/articles/code/getting-started-with-umbraco-part-3.html">Premiers pas avec Umbraco Partie 3</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-3.png');"></div>
</div>
<div class="n_post">
<div class="next_posts-h1 right_nh1"><a href="/articles/code/getting-started-with-umbraco-part-1.html">Premiers pas avec Umbraco Partie 1</a></div>
<div class="next_posts-img" style="background-image: url('//accentsconagua.com/img/images_26_2/getting-started-with-umbraco-part-1.png');"></div>
</div>
</div>
<footer>
<div class="container">
<div class="footer-langs">
<ul class="site-langs-list">
<li><a href="https://www.accentsconagua.com"><i class="flag flag-DE"></i>Deutsch</a></li>
<li><a href="https://fr.accentsconagua.com"><i class="flag flag-FR"></i>Français</a></li>
<li><a href="https://nl.accentsconagua.com"><i class="flag flag-NL"></i>Nederlands</a></li>
<li><a href="https://no.accentsconagua.com"><i class="flag flag-NO"></i>Norsk</a></li>
<li><a href="https://sv.accentsconagua.com"><i class="flag flag-SE"></i>Svenska</a></li>
<li><a href="https://it.accentsconagua.com"><i class="flag flag-IT"></i>Italiano</a></li>
<li><a href="https://es.accentsconagua.com"><i class="flag flag-ES"></i>Español</a></li>
<li><a href="https://ro.accentsconagua.com"><i class="flag flag-RO"></i>Românesc</a></li>
</ul>
</div>
<div class="h-block"><a href="/">fr.accentsconagua.com</a><div class="h-block-a"></div></div>
<div class="footer-text">
Informations intéressantes et conseils utiles sur la programmation. Développement de sites Web, conception de sites Web et développement Web. Tutoriels Photoshop. Création de jeux informatiques et d'applications mobiles. Devenez un programmeur professionnel à partir de zéro.
</div>
</div>
</footer>
<div class="search">
<img class="searchico" src="//accentsconagua.com/img/search.svg" alt="">
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<input class="searchmain" type="text" id="search-input" placeholder="Chercher...">
<ul class="searchli" id="results-container"></ul>
</div>
</div>
<link rel="stylesheet" href="css/flags.css">
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script>
window.addEventListener("load", function(){
window.cookieconsent.initialise({
"palette": {
"popup": {
"background": "#edeff5",
"text": "#838391"
},
"button": {
"background": "#4b81e8"
}
},
"theme": "classic",
"position": "bottom-right"
})});
</script>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script src="js/scripts.min.js"></script>
<script src="js/common.js"></script>
<link rel="stylesheet" href="css/fontawesome-all.min.css">
<script>
var modal = document.querySelector(".modal");
var trigger = document.querySelector(".search");
var closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
trigger.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
</script>
<script src="https://unpkg.com/simple-jekyll-search@1.5.0/dest/simple-jekyll-search.min.js"></script>
<script>
SimpleJekyllSearch({
searchInput: document.getElementById('search-input'),
resultsContainer: document.getElementById('results-container'),
json: '/search.json',
searchResultTemplate: '<li><a href="{url}">{title}</a></li>'
})
</script>
<script src="jquery.unveil2.min.js"></script>
<script>
$('img').unveil();
</script>
</body>
</html>
Share
Accentsconagua