Google AMP - Strona HTML do strony Amp

W tym rozdziale dowiemy się, jak przekonwertować zwykłą stronę HTML na stronę wzmacniacza. Sprawdzimy również stronę pod kątem wzmacniacza i sprawdzimy wyjście na końcu.

Na początek weźmy normalną stronę html, jak pokazano poniżej -

test.html

<!DOCTYPE html>
<html>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link href = "style.css" rel = "stylesheet" />
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width="90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

Zauważ, że używamy w nim style.css, a szczegóły pliku css są takie, jak podano tutaj -

h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }

Zauważ, że użyliśmy również pliku jquery.js w wymienionym powyżej .html.

Teraz hostuj test.html lokalnie i zobacz wyniki widoczne w linku podanym tutaj -

http://localhost:8080/googleamp/test.html

Przejdźmy teraz krok po kroku, aby zmienić powyższy plik test.html na plik test_amp.html.

Najpierw musimy zapisać test.html jako test_amp.html i postępować zgodnie z instrukcjami podanymi poniżej.

Step 1 - Dodaj bibliotekę wzmacniacza w sekcji głowy, jak pokazano poniżej -

<script async src = "https://cdn.ampproject.org/v0.js">
</script>

Na przykład po dodaniu do test_amp.html będzie wyglądał następująco -

<head>
   <meta charset = "utf-8">
   <title>Tutorials</title>
   <script async src = "https://cdn.ampproject.org/v0.js">
   </script>
   <link href = "style.css" rel = "stylesheet" />
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
</head>

Teraz uruchom stronę test_amp.html w przeglądarce i otwórz konsolę przeglądarki. Wyświetli komunikat konsoli, jak pokazano poniżej -

Aby dowiedzieć się, czy plik html jest prawidłowym plikiem amp, dodaj # development = 1 do adresu URL strony html na końcu, jak pokazano poniżej -

http://localhost:8080/googleamp/test_amp.html#development=1

Kliknij powyższy adres URL w przeglądarce i konsoli Google Chrome. Wyświetli listę błędów, które wzmacniacz uważa za nieprawidłowe z punktu widzenia specyfikacji wzmacniacza.

Błędy, które otrzymaliśmy dla test_amp.html są pokazane tutaj -

Naprawmy je teraz jeden po drugim, aż otrzymamy komunikat o pomyślnym zakończeniu.

Step 2 - W konsoli widzimy następujący błąd -

Możemy to naprawić, dodając ⚡ lub amp jako znacznik HTML. Dodamy amp do tagu html, jak pokazano poniżej -

<html amp>

Step 3 - Upewnij się, że masz metatag z zestawem znaków i nazwą = ”viewport” w tagu head, jak pokazano poniżej -

<head>
   <meta charset = "utf-8">
   <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
</head>

Step 4 - Tutaj wyświetlany jest kolejny błąd, który mamy -

Mówi href w linku rel = arkusz stylów, tj. Poniższy link zgłasza błąd. Dzieje się tak, ponieważ amp nie pozwala na umieszczanie zewnętrznych arkuszy stylów z linkiem z atrybutem href na stronach.

<link href = "style.css" rel = "stylesheet" />
We can add the all the css in style.css as follows −
<style amp-custom>
   /*All styles from style.css please add here */
</style>

Zatem dane css obecne w style.css muszą zostać dodane w stylu z atrybutem amp-custom.

<style amp-custom>
   h1 {color: blue;text-align: center;}
   h2 {text-align: center;}
      img {
         border: 1px solid #ddd;
         border-radius: 4px;
         padding: 5px;
      }
      article {
         text-align: center;
      }
      header{
         width: 100%;
         height: 50px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: #ccc;
      }
      footer {
         width: 100%;
         height: 35px;
         margin: 5px auto;
         border: 1px solid #000000;
         text-align: center;
         background-color: yellow;
      }
</style>

Dodaj tag stylu do swojej strony wzmacniacza. Przetestujmy teraz to samo z powyższym znacznikiem stylu w przeglądarce. Zmiany, które wprowadziliśmy do tej pory w test_amp.html, są pokazane tutaj -

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
      <script src = "js/jquery.js"></script>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            
            article {
               text-align: center;
            }
            header{
               width: 100%;
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               width: 100%;
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <img src = "images/tut1.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut2.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut3.png" width = "90%" height = "90%"/>
         </section>
         <section>
            <img src = "images/tut4.png" width="90%" height = "90%"/>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">Tutorials Point</a></p>
      </footer>
   </body>
</html>

Zobaczmy wynik i błędy w konsoli na powyższej stronie. Obserwuj poniższy zrzut ekranu -

Błąd pokazany w konsoli jest następujący -

Teraz możesz zobaczyć, że w przypadku niektórych błędów dotyczących wzmacniacza styl został usunięty. Naprawmy teraz pozostałe błędy.

Step 5 - Kolejny błąd, który widzimy na liście, jest następujący -

Dodaliśmy tag script wywołujący plik jquery. Należy pamiętać, że strony amp nie pozwalają na umieszczanie na nich niestandardowego kodu JavaScript. Będziemy musieli go usunąć i upewnić się, że użyjemy dostępnego komponentu wzmacniacza.

Na przykład mamy amp-animację, jeśli wymagana jest jakakolwiek animacja, amp-analytics na wypadek, gdybyśmy chcieli dodać kod Google Analytics do strony. Podobnie mamy komponent amp-ad do wyświetlania reklam, które mają być wyświetlane na stronie. Istnieje również komponent amp-iframe, który możemy skierować src do tego samego źródła i wywołać dowolny niestandardowy skrypt javascript, jeśli jest to wymagane w amp-iframe.

Teraz usuńmy tag script ze strony.

Step 6 - Tutaj pokazany jest następny wyświetlany błąd -

Powyższe błędy wskazują na tag graficzny, którego użyliśmy na stronie. Amp nie zezwala na używanie tagów <img src = ”” /> wewnątrz strony. Zauważ, że zamiast tego musimy użyć tagu amp-img.

Zastąpmy tag <img> tagiem <amp-img>, jak pokazano tutaj -

<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut1.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut2.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut3.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>
<section>
   <amp-img alt = "Beautiful Flower"
      src = "images/tut4.png"
      width = "500"
      height = "160"
      layout = "responsive">
   </amp-img>
</section>

Zamieniliśmy wszystkie znaczniki <img> na <amp-img>, jak pokazano powyżej. Teraz uruchommy stronę w przeglądarce, aby zobaczyć dane wyjściowe i błędy -

Błędy

Zauważ, że błędy są teraz coraz mniejsze.

Step 7 - Następny błąd wyświetlany w konsoli jest następujący -

Musimy dodać tag link rel = canonical w sekcji head. Należy pamiętać, że jest to obowiązkowa etykieta i zawsze należy ją dodawać w nagłówku w następujący sposób -

<link rel = "canonical" href =
   "http://example.ampproject.org/article-metadata.html">

Step 8 - Następny błąd wyświetlany jako brakujący noscript tag w konsoli, jak pokazano tutaj -

Musimy dodać tag <noscript> otoczony amp-boilerplate w sekcji head w następujący sposób -

<noscript>
   <style amp-boilerplate>
      body{
         -webkit-animation:none;
         -moz-animation:none;
         -ms-animation:none;
         animation:none}
   </style>
</noscript>

Step 9 - Następny wyświetlany błąd podano poniżej -

Kolejnym obowiązkowym tagiem jest tag style z amp-boilerplate i należy go umieścić przed tagiem noscript. Tutaj pokazano tag stylu z amp-boilerplate -

<style amp-boilerplate>
   body{
      -webkit-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
      -amp-start 8s steps(1,end) 0s 1 normal both;animation:
      -amp-start 8s steps(1,end) 0s 1 normal both
   }
   @-webkit-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
   -amp-start{from{visibility:hidden}to{visibility:visible}}
</style>

Dodaj powyższy tag stylu do strony test_amp.html.

Po zakończeniu przetestuj stronę w przeglądarce, aby zobaczyć dane wyjściowe i konsolę -

Szczegóły konsoli są pokazane tutaj -

W ten sposób w końcu rozwiązaliśmy wszystkie błędy i teraz strona test_amp.html jest prawidłową stroną wzmacniacza.

Jest trochę stylów do dodania, gdy nagłówek i stopka są obcinane, możemy zaktualizować to samo w niestandardowym stylu, który dodaliśmy. Więc usunęliśmy szerokość: 100% z nagłówka i stopki.

Oto ostateczny wynik -

Ostateczny plik test_amp.html

<!DOCTYPE html>
<html amp>
   <head>
      <meta charset = "utf-8">
      <title>Tutorials</title>
      <link rel = "canonical" href=
      "http://example.ampproject.org/article-metadata.html">
      <script async src = "https://cdn.ampproject.org/v0.js">
      </script>
      <meta name = "viewport" content = "width = device-width, 
      initial-scale = 1.0">
      
      <style amp-boilerplate>
         body{
            -webkit-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:
            -amp-start 8s steps(1,end) 0s 1 normal both;animation:
            -amp-start 8s steps(1,end) 0s 1 normal both
         }
         @-webkit-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes 
         -amp-start{from{visibility:hidden}to{visibility:visible}}
      </style>
      <noscript>
         <style amp-boilerplate>
            body{
               -webkit-animation:none;
               -moz-animation:none;
               -ms-animation:none;
               animation:none}
         </style>
      </noscript>
      <style amp-custom>
         h1 {color: blue;text-align: center;}
         h2 {text-align: center;}
            amp-img {
               border: 1px solid #ddd;
               border-radius: 4px;
               padding: 5px;
            }
            article {
               text-align: center;
            }
            header{
               height: 50px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: #ccc;
            }
            footer {
               height: 35px;
               margin: 5px auto;
               border: 1px solid #000000;
               text-align: center;
               background-color: yellow;
            }
      </style>
   </head>
   <body>
      <header role = "banner">
         <h2>Tutorials</h2>
      </header>
      <h2>Some Important Tutorials List</h2>
      <article>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut1.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut2.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut3.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
         <section>
            <amp-img 
               alt = "Beautiful Flower"
               src = "images/tut4.png"
               width = "500"
               height = "160"
               layout = "responsive">
            </amp-img>
         </section>
      </article>
      <footer>
         <p>For More tutorials Visit <a href = 
         "https://tutorialspoint.com/">
            Tutorials Point</a>
         </p>
      </footer>
   </body>
</html>

W końcu kończymy konwersję zwykłego pliku html na amp.