amp converter
1.0.0
HTML 기사, 블로그 게시물 또는 유사한 콘텐츠를 AMP(Accelerated Mobile Pages)로 변환하는 라이브러리입니다.
참고 : 이 라이브러리는 전체 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 );
