amp converter
1.0.0
用於將 HTML 文章、部落格文章或類似內容轉換為 AMP（加速行動頁面）的庫。
注意：此庫並不是為了轉換整個 HTML 文檔，如果您想轉換整個頁面，您應該使用更高級的庫，例如：Lullabot/amp-library
composer require magyarandras/amp-converter
簡單的例子：
確保您的 HTML 程式碼不包含 HTML5 中無效的標籤或屬性，否則產生的 AMP 也會無效。
<?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 );輸出：
< 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>
)
您可以透過手動載入來指定要使用的轉換器：
<?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 );如果 HTML 程式碼中的圖像尺寸未知（如果可能，應避免這種情況）並使用相對 URL，則必須將圖像的基本 URL 傳遞給建構函數。您也可以指定取得單張影像大小的時間限制（預設為10秒）。 （註：時間限制適用於每張影像，而不是整個過程）
<?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 );該庫無法支援開箱即用的所有內容，但您可以使用自己的轉換器對其進行擴展（或者如果需要，您可以替換現有的轉換器）。
例如，請考慮以下情況：您在某些文章/部落格文章中使用 jQuery 倒數計時庫，並且希望將以下程式碼轉換為 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 >您可以建立一個實作 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 ;
}
}使用自訂轉換器：
<?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 );
