amp converter
1.0.0
Una biblioteca para convertir artículos HTML, publicaciones de blogs o contenido similar a AMP (Accelerated Mobile Pages).
Nota : esta biblioteca no está destinada a convertir documentos HTML completos. Si desea convertir una página completa, debe utilizar una biblioteca más avanzada, por ejemplo: Lullabot/amp-library.
composer require magyarandras/amp-converter
Ejemplo sencillo:
Asegúrese de que su código HTML no contenga etiquetas o atributos no válidos en HTML5, de lo contrario, el AMP generado también será inválido.
<?php
use magyarandras AMPConverter Converter ;
/*
If you have images with unknown dimensions in your HTML code and use relative URLs, you must pass the images' base URL to the constructor.
Examples:
$converter = new Converter('https://example.com');
$converter = new Converter('https://cdn.example.com');
*/
$ converter = new Converter ();
//Load built-in converters
$ converter -> loadDefaultConverters ();
//HTML to convert
$ html = '
<p><strong>This is a sample HTML code generated by TinyMCE.</strong></p>
<p><strong><img src="https://cdn.example.com/photo/example_960_720.jpg" alt="" width="960" height="640" /></strong></p>
<p><span style="font-family: ' times new roman ' , times;">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></p>
<p style="text-align: center;"><iframe src="https://www.youtube.com/embed/gYJ03GyrSrM" width="560" height="314" allowfullscreen="allowfullscreen"></iframe></p>
<p style="text-align: center;"> </p>
<blockquote class="twitter-tweet">
<p dir="ltr" lang="en">Check out the latest post on the AMP Blog to learn how <a href="https://twitter.com/AdobeExpCloud?ref_src=twsrc%5Etfw">@AdobeExpCloud</a> has been working to seamless integrate AMP support into its applications ⚡<br /><br />Learn more here <a href="https://t.co/hX3QmJ707x">https://t.co/hX3QmJ707x</a></p>
— AMP Project (@AMPhtml) <a href="https://twitter.com/AMPhtml/status/1248666798901194753?ref_src=twsrc%5Etfw">April 10, 2020</a></blockquote>
' ;
//Convert html to amp html
$ amphtml = $ converter -> convert ( $ html );
//Get the necessary amp components
$ amp_scripts = $ converter -> getScripts ();
print_r ( $ amphtml );
echo PHP_EOL ;
print_r ( $ amp_scripts );La salida:
< p > < strong > This is a sample HTML code generated by TinyMCE. </ strong > </ p >
< p > < strong > < amp-img src =" https://cdn.example.com/photo/example_960_720.jpg " width =" 960 " height =" 640 " alt layout =" responsive " > </ amp-img > </ strong > </ p >
< p > < span > Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ span > </ p >
< p > < amp-youtube data-videoid =" gYJ03GyrSrM " width =" 480 " height =" 270 " layout =" responsive " > </ amp-youtube > </ p >
< p > </ p >
< amp-twitter width =" 375 " height =" 472 " layout =" responsive " data-tweetid =" 1248666798901194753 " > </ amp-twitter > Array
(
[0] => <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
[1] => <script async custom-element="amp-twitter" src="https://cdn.ampproject.org/v0/amp-twitter-0.1.js"></script>
)
Puede especificar qué convertidores usar cargándolos manualmente:
<?php
use magyarandras AMPConverter Converter ;
use magyarandras AMPConverter TagConverter AMPImgZoom ;
use magyarandras AMPConverter TagConverter AMPYoutube ;
//PHP 7+ syntax:
//use magyarandrasAMPConverterTagConverter{AMPImgZoom,AMPYoutube}
$ converter = new Converter ();
$ converter -> addConverter ( new AMPImgZoom ());
$ converter -> addConverter ( new AMPYoutube ());
$ amphtml = $ converter -> convert ( $ html );
$ amp_scripts = $ converter -> getScripts ();
print_r ( $ amphtml );
print_r ( $ amp_scripts );Si tiene imágenes con dimensiones desconocidas en su código HTML (debe evitar esta situación si es posible) y usa URL relativas, debe pasar la URL base de las imágenes al constructor. También puede especificar el límite de tiempo para obtener el tamaño de una sola imagen (el valor predeterminado es 10 segundos). (Nota: el límite de tiempo se aplica a cada imagen, no a todo el proceso)
<?php
use magyarandras AMPConverter Converter ;
$ converter = new Converter ([
' image_base_url ' => ' https://example.com ' , //This base URL will be used if the src of an image is a relative path.
' image_timeout ' => 5 //Obtaining the size of a single image (downloading the required data) can't take longer than 5 seconds.
]);
//Load built-in converters
$ converter -> loadDefaultConverters ();
//HTML to convert
$ html = '
<p><strong>This is a sample HTML code generated by TinyMCE.</strong></p>
<p><strong><img src="images/picture.jpg" alt="Sample image" /></strong></p>
' ;
//Convert html to amp html
$ amphtml = $ converter -> convert ( $ html );
//Get the necessary amp components
$ amp_scripts = $ converter -> getScripts ();
print_r ( $ amphtml );
echo PHP_EOL ;
print_r ( $ amp_scripts );La biblioteca no puede admitir todo de fábrica, pero puede ampliarla con sus propios convertidores (o puede reemplazar los existentes si es necesario).
Por ejemplo, considere lo siguiente: utiliza una biblioteca de cuenta regresiva jQuery en algunos de sus artículos/publicaciones de blog y desea convertir el siguiente código a AMP.
<!-- The following line should be replaced with amp-date-countdown component -->
< div data-countdown =" 2038/01/19 " > </ div >
<!-- Countdown library: http://hilios.github.io/jQuery.countdown/examples/multiple-instances.html -->
< script >
$ ( '[data-countdown]' ) . each ( function ( ) {
var $this = $ ( this ) , finalDate = $ ( this ) . data ( 'countdown' ) ;
$this . countdown ( finalDate , function ( event ) {
$this . html ( event . strftime ( '%D days %H:%M:%S' ) ) ;
} ) ;
} ) ;
</ script >Puede crear una clase de convertidor personalizada que implemente TagConverterInterface.
<?php
class CountdownConverter implements magyarandras AMPConverter TagConverterInterface
{
private $ necessary_scripts = [];
private $ extension_scripts = [
' <script async custom-element="amp-date-countdown" src="https://cdn.ampproject.org/v0/amp-date-countdown-0.1.js"></script> ' ,
' <script async custom-template="amp-mustache" src="https://cdn.ampproject.org/v0/amp-mustache-0.2.js"></script> '
];
public function convert ( DOMDocument $ doc )
{
$ query = ' //div[@data-countdown] ' ;
$ xpath = new DOMXPath ( $ doc );
$ entries = $ xpath -> query ( $ query );
if ( $ entries -> length > 0 ) {
$ this -> necessary_scripts = $ this -> extension_scripts ;
}
foreach ( $ entries as $ tag ) {
//Although in this example there isn't any validation, you definitely should check if the date is valid.
$ timestamp = strtotime ( $ tag -> getAttribute ( ' data-countdown ' ));
$ countdown = $ doc -> createElement ( ' amp-date-countdown ' );
$ countdown -> setAttribute ( ' timestamp-seconds ' , $ timestamp );
$ countdown -> setAttribute ( ' layout ' , ' fixed-height ' );
$ countdown -> setAttribute ( ' height ' , ' 50 ' );
$ template = $ doc -> createElement ( ' template ' );
$ template -> setAttribute ( ' type ' , ' amp-mustache ' );
$ paragraph = $ doc -> createElement ( ' p ' );
$ paragraph -> setAttribute ( ' class ' , ' p1 ' );
$ text = $ doc -> createTextNode ( ' {{d}} days, {{h}} hours, {{m}} minutes and {{s}} seconds ' );
$ paragraph -> appendChild ( $ text );
$ template -> appendChild ( $ paragraph );
$ countdown -> appendChild ( $ template );
$ tag -> parentNode -> replaceChild ( $ countdown , $ tag );
}
return $ doc ;
}
public function getNecessaryScripts ()
{
return $ this -> necessary_scripts ;
}
}Usando el convertidor personalizado:
<?php
require_once ' vendor/autoload.php ' ;
require_once ' CountdownConverter.php ' ;
use magyarandras AMPConverter Converter ;
$ converter = new Converter ();
//Load built-in converters
$ converter -> loadDefaultConverters ();
$ converter -> addConverter ( new CountdownConverter ());
$ html = ' <div><h1>Hello!</h1><div data-countdown="2038/01/19"></div></div> ' ;
//Convert html to amp html
$ amphtml = $ converter -> convert ( $ html );
//Get the necessary amp components
$ amp_scripts = $ converter -> getScripts ();
print_r ( $ amphtml );
print_r ( $ amp_scripts );
