Share
Le projet AMP fournit un moyen relativement mains libres d'implémenter plusieurs types d'optimisation de pages Web. Vous pouvez lire notre récapitulatif complet sur le projet et ses effets dans le projet AMP: les sites seront-ils plus rapides??.
Pour résumer comment AMP est mis en œuvre, vous allez:
Une fois que vous avez effectué les trois opérations ci-dessus, le reste du processus d'optimisation est géré pour vous en coulisse. De plus, les pages AMP doivent réussir un test de validation. Pour que ce test réussisse, vous devez respecter toutes les règles de bonne pratique..
L’une des règles d’AMP peut toutefois être un peu lourde au cours du développement: il s’agit de la nécessité que tous les CSS personnalisés soient chargés en ligne dans la bibliothèque. tête section entre un ensemble de Mots clés.
Si vous écrivez manuellement votre CSS directement dans vos pages tête sections, vous aurez à faire face à des problèmes et à des limitations. Si vous devez modifier le code CSS sur plusieurs pages de site, cela sera laborieux et vous n’aurez pas la possibilité d’utiliser des outils d’amélioration CSS tels que les pré-processeurs ou les minifiers..
Pour cette raison, si vous envisagez de créer plus d'un modèle AMP, vous voudrez trouver un moyen d'écrire votre CSS dans une feuille de style externe afin de maintenir votre flux de travail habituel, tout en passant la validation AMP en déplaçant tous vos CSS dans la tête. section après le fait.
Dans cette astuce, vous apprendrez deux façons de le faire..
Jade est un langage que vous pouvez assimiler à un pré-processeur HTML. Il vous permet d'écrire du HTML sous une forme abrégée succincte qui se compile en HTML normal, mais surtout pour le sujet traité, il vous permet également d'importer des fichiers CSS et d'obtenir leur contenu complet où que vous soyez..
Dans cette méthode, vous allez écrire vos modèles AMP en utilisant la syntaxe Jade et importer un fichier CSS externe dans la section d'en-tête de chacun de vos modèles. C'est l'une des meilleures méthodes que vous pouvez utiliser pour créer des pages AMP si vous devez générer du code HTML statique. Voici comment s'y prendre.
La première chose à faire est de configurer la feuille de style externe à importer dans vos modèles AMP. Créez un dossier pour héberger votre projet, puis créez une nouvelle feuille de style et nommez-le “style.css”..
Ajoutez des CSS de base à votre feuille de style, selon votre choix, tant que votre fichier ne dépasse pas 50 Ko, conformément aux règles de validation d'AMP..
Si vous voulez juste un test CSS pour commencer, ajoutez ce qui suit:
body background: # 3498db; couleur: #fff
L'étape suivante consiste à ajouter le code standard d'AMP, mais avec deux différences significatives. Premièrement, nous utiliserons la syntaxe Jade au lieu de HTML simple et deuxièmement, nous importerons notre fichier externe «style.css»..
Créez un nouveau fichier dans le dossier de votre projet nommé «index.jade» et ajoutez-y le code suivant:
doctype html (amp, lang = "en") tête méta (charset = "utf-8") titre AMP via un lien Jade (rel = "canonical", href = "/ index.html") méta (nom = "viewport" , content = "width = device-width, minimum-scale = 1, initial-scale = 1") script (type = "application / ld + json"). "@context": "http://schema.org", "@type": "NewsArticle", "titre": "Cadre Open Source pour la publication de contenu", "datePublished": "2015-10-07T12: 02: 41Z "," image ": [" logo.jpg "] | | script (asynchrone, src = "https://cdn.ampproject.org/v0.js") style (amp-custom) include style.css body h1 Ceci est une page AMP basée sur Jade.
Le code ci-dessus est le même que celui que vous trouverez dans la documentation AMP, juste converti en syntaxe Jade..
Vous remarquerez au bas de ce code que nous avons:
style (amp-custom) include style.css
La lecture de la ligne style (amp-custom) produira le nécessaire Mots clés. En retrait sur la ligne suivante, vous verrez inclure style.css. Cela tire parti de la fonctionnalité d'inclusion de Jade et importera tout le contenu de votre fichier «style.css» et le restituera entre les balises de style..
Vous avez maintenant configuré tout le code requis pour cette méthode et il vous suffit de compiler votre modèle Jade. Vous pouvez le faire soit par un gestionnaire de tâches comme Gulp ou Grunt, soit par une application de compilation..
Pour les projets relativement simples pour lesquels vous souhaitez uniquement compiler des fichiers, je vous recommande d'utiliser une application appelée Prepros. Vous aurez uniquement besoin de la version gratuite / d'évaluation pour cette méthode..
Une fois que vous avez installé et exécuté Prepros, tout ce que vous avez à faire est de faire glisser le dossier de votre projet sur son interface et celui-ci trouvera votre fichier Jade. Il commencera automatiquement à regarder votre projet à la recherche de modifications. Il vous suffit donc de sauvegarder votre fichier Jade ou CSS, ce qui obligera Prepros à compiler votre modèle..
Vous devriez maintenant voir apparaître un nouveau fichier dans votre projet nommé "index.html", et à l'intérieur, vous devriez voir votre code HTML compilé avec le code CSS personnalisé en ligne:
AMP via Jade Ceci est une page AMP basée sur Jade.
La prochaine chose que vous allez faire est de consulter un aperçu de votre site. Bien qu'il soit possible d'afficher votre fichier AMP dans un navigateur chargé directement à partir de votre disque dur, il est conseillé de prévisualiser vos sites avec un hôte local, c'est-à-dire de simuler un hôte Web sur votre ordinateur..
Prepros est fourni avec un aperçu localhost inclus qui s'actualise automatiquement lorsque des modifications sont apportées à votre projet. Cependant, vous ne pourrez pas l'utiliser avec AMP (malheureusement). La raison d'être Prepros charge du JavaScript dans son aperçu pour permettre le rechargement en direct, mais comme aucun code JavaScript personnalisé n'est autorisé dans les pages AMP, le validateur détectera ce script, puis émettra une erreur..
Pour cette raison, je vous recommande de configurer votre aperçu de site localhost à l’aide de MAMP pour Mac ou Windows. Vous suivrez le même processus que celui décrit précédemment, la seule différence étant que vous créerez votre dossier de projet dans votre dossier «htdocs» MAMP avant de le faire glisser sur votre interface Prepros. Lorsque MAMP est en cours d’exécution, vous pourrez en avoir un aperçu à l’URL suivante: http: // localhost: 8888 / myproject..
Avec cette approche, vous obtenez le meilleur des deux mondes: un aperçu localhost sans erreurs de validation via MAMP et une compilation Jade automatique via Prepros..
Si vous n'avez pas besoin de générer des modèles HTML statiques, vous avez la possibilité d'utiliser PHP pour générer dynamiquement votre feuille de style dans votre section head. Cette approche nécessite probablement un peu moins de problèmes, mais elle ne convient que si les exigences de votre projet (et de votre hôte) autorisent PHP..
Incidemment, même si vous n'avez jamais utilisé PHP auparavant et que vous voulez simplement écrire en HTML plutôt que d'utiliser la syntaxe Jade, vous pouvez toujours utiliser cette technique..
Commencez par créer un fichier d'index auquel est ajouté le code standard standard AMP, mais au lieu de nommer le fichier «index.html», appelez-le «index.php»:
Bonjour les AMPs Bienvenue sur le web mobile
Si vous avez déjà travaillé sur un modèle AMP, vous pouvez également simplement renommer le fichier, en remplaçant l'extension par «.php», ce qui le convertira ainsi en un fichier PHP. Par exemple, «about.htm» serait renommé «about.php». (Assurez-vous simplement de modifier l'extension de tous les liens internes également.)
Maintenant, créez une feuille de style externe nommée “style.css” dans votre dossier racine. Si vous avez déjà un modèle sur lequel vous travaillez, coupez le CSS que vous avez actuellement entre vos balises et collez-le dans votre feuille de style externe.
Pour insérer votre CSS externe dans la section de tête de votre fichier AMP, collez simplement cet extrait de code PHP d'une ligne entre les Mots clés:
Si vous n'êtes pas particulièrement intéressé par PHP, vous pouvez vous en tenir à cela, sachant que l'extrait de code permettra à PHP d'extraire votre feuille de style du serveur, de lire son contenu, puis de l'afficher en ligne. Toutefois, si vous souhaitez en savoir plus sur l'extrait, décomposez-le..
Tout d'abord, nous avons les balises PHP d'ouverture et de fermeture . Ceux-ci font savoir au serveur que ce qui sépare ces balises est PHP et non HTML normal.
Ensuite, nous utilisons la fonction readfile (). Cette fonction examine le fichier spécifié entre crochets, le récupère sur le serveur, lit son contenu, puis affiche ce contenu en ligne..
Entre les parenthèses, nous avons la fonction getcwd (). Cette fonction obtient le chemin du répertoire de travail actuel, c’est-à-dire le répertoire dans lequel se trouve notre fichier PHP..
Après cela, nous avons la chaîne (texte normal) “/style.css” qui spécifie le nom de notre feuille de style, par rapport à l'emplacement de notre fichier PHP. Puis entre cette corde et le getcwd () fonction on place un point . qui concatène (connecte) les deux ensemble pour créer le chemin complet vers notre feuille de style. Par exemple, dans un aperçu MAMP, le chemin serait quelque chose comme "/Applications/MAMP/htdocs/myproject/style.css"..
Vous pouvez utiliser cet extrait de code dans autant de modèles que vous le souhaitez, et toute modification apportée à votre feuille de style externe sera imprimée dans tous vos modèles..
Comme avec la méthode Jade, un excellent moyen de prévisualiser vos pages AMP basées sur PHP consiste à utiliser MAMP, qui prend totalement en charge PHP. Installez MAMP et créez votre dossier de projet dans son dossier «htdocs» et vous pourrez prévisualiser votre site à une URL telle que http: // localhost: 8888 / myproject sans configuration supplémentaire..
Nous avons maintenant couvert deux manières de conserver votre feuille de style externe et votre flux de travail de développement CSS normal, tout en passant votre validation AMP en déplaçant votre CSS en ligne. Résumons rapidement chacun.
Accentsconagua
tête section. Compiler avec Prepros et prévisualiser avec MAMP.tête section. Aperçu avec MAMP.Quant à la méthode à choisir, cela dépendra des spécificités de votre projet, mais de manière générale:
Avec l’une ou l’autre de ces méthodes, vous pouvez développer le CSS de la manière dont vous êtes habitué, les modifications étant immédiatement reflétées dans tous les modèles et l’accès aux préprocesseurs et aux outils d’optimisation, tout en maintenant votre CSS conforme à la norme AMP..
J'espère que cela vous aidera à fluidifier vos processus de développement AMP!
