AH版自动转换AMP功能上线

hotfix/远程访问多媒体中心
尹诚诚 7 years ago
parent bd0d61c93c
commit 93022f655d

@ -1,26 +1,30 @@
<?php
if (!defined('BASEPATH'))
exit('No direct script access allowed');
if (!defined('BASEPATH')) exit('No direct script access allowed');
class Index extends CI_Controller {
class Index extends CI_Controller
{
public function __construct() {
public function __construct()
{
parent::__construct();
$this->load->library('simple_html_dom_lib');
}
public function index() {
public function index()
{
$this->load->view('welcome');
}
public function optimize() {
public function optimize()
{
$htmlsource = $this->input->post('htmlsource');
$websitehost = $this->input->post('websitehost');
$create_amp = $this->input->post('create_amp');
if (empty($htmlsource) || empty($websitehost)) {
$this->output->set_status_header(500);
echo 'error:htmlsource or websitehost is empty!';
log_message('error', "htmlsource or websitehost is empty! " . $websitehost);
log_message('error', "htmlsource or websitehost is empty! " . $websitehost);
return false;
}
//域名后面不能有/
@ -46,10 +50,10 @@ class Index extends CI_Controller {
if ($get_http_temp == false) {
$this->output->set_status_header(404);
echo 'CSS文件下载错误';
log_message('error', "optimize CSS文件下载错误! " . $item);
log_message('error', "optimize CSS文件下载错误! " . $item);
return FALSE;
}
$css_content.=$get_http_temp;
$css_content .= $get_http_temp;
}
foreach ($html_object->find('style') as $style_css) {
if ($style_css->type == "text/css") {
@ -65,19 +69,19 @@ class Index extends CI_Controller {
$js_jquery_content = '';
foreach ($html_object->find('script') as $link_script) {
if (!empty($link_script->src)) {
if(empty($link_script->defer) && empty($link_script->async)){ //没有defer标记的才处理否则让js延后加载
$link_js_array[] = $link_script->src;
$link_script->outertext = ''; //删除链接,移动到页底
}
if (empty($link_script->defer) && empty($link_script->async)) { //没有defer标记的才处理否则让js延后加载
$link_js_array[] = $link_script->src;
$link_script->outertext = ''; //删除链接,移动到页底
}
} else {
//网页内的js不需要提取
//$js_content.= $link_script->innertext;//js的内容
// $js_content.= $link_script;//js的内容包含<script>
//含有$表示调用了jquery的函数添加延迟加载defer
if (strpos($link_script, '$') !== FALSE) {
$js_jquery_content.= $link_script->innertext;
$js_jquery_content .= $link_script->innertext;
} else {
$js_inline_content.= $link_script; //js的内容包含<script>
$js_inline_content .= $link_script; //js的内容包含<script>
}
$link_script->outertext = ''; //删除js移动到页底
}
@ -89,16 +93,16 @@ class Index extends CI_Controller {
if ($get_http_temp == false) {
$this->output->set_status_header(404);
echo 'JS文件下载错误';
log_message('error', "optimize js文件下载错误! " . $item);
log_message('error', "optimize js文件下载错误! " . $item);
return FALSE;
}
$js_scr_content.=$get_http_temp;
$js_scr_content .= $get_http_temp;
}
//echo $js_content;
//把网页内容和css提交到purifycss处理
$purifycss_server='http://184.172.113.216:33033/';
if(strpos($websitehost, 'chinarundreisen.com') !== false){//德语站点使用自己的css处理服务器
$purifycss_server='http://158.177.67.52:33033/';
$purifycss_server = 'http://184.172.113.216:33033/';
if (strpos($websitehost, 'chinarundreisen.com') !== false) {//德语站点使用自己的css处理服务器
$purifycss_server = 'http://158.177.67.52:33033/';
}
$optimize_css = GET_HTTP($purifycss_server, 'html_source=' . urlencode($htmlsource) . '&html_css=' . urlencode($css_content), 'POST');
if (empty($optimize_css)) {
@ -120,31 +124,175 @@ class Index extends CI_Controller {
//把css移动到页面底部延迟加载
$lastload_js = '<noscript id="deferred-styles">';
foreach ($link_css_array as $item) {
$lastload_js.='<link rel="stylesheet" type="text/css" href="' . $item . '"/>';
$lastload_js .= '<link rel="stylesheet" type="text/css" href="' . $item . '"/>';
}
$lastload_js.='</noscript><script>var loadDeferredStyles=function(){var addStylesNode=document.getElementById("deferred-styles");var replacement=document.createElement("div");replacement.innerHTML=addStylesNode.textContent;document.body.appendChild(replacement);addStylesNode.parentElement.removeChild(addStylesNode)};var raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;if(raf){raf(function(){window.setTimeout(loadDeferredStyles,0)})}else{window.addEventListener("load",loadDeferredStyles)};</script>';
$lastload_js .= '</noscript><script>var loadDeferredStyles=function(){var addStylesNode=document.getElementById("deferred-styles");var replacement=document.createElement("div");replacement.innerHTML=addStylesNode.textContent;document.body.appendChild(replacement);addStylesNode.parentElement.removeChild(addStylesNode)};var raf=requestAnimationFrame||mozRequestAnimationFrame||webkitRequestAnimationFrame||msRequestAnimationFrame;if(raf){raf(function(){window.setTimeout(loadDeferredStyles,0)})}else{window.addEventListener("load",loadDeferredStyles)};</script>';
$js_content = $js_scr_content . $js_jquery_content;
//延迟加载js需要把返回的js代码保存到一个文件中然后替换占位符以便加载js文件
$lastload_js.='<script async src="##DEFERSCRIPTDEFER##"></script>';
$lastload_js.=$js_inline_content;
$lastload_js .= '<script async src="##DEFERSCRIPTDEFER##"></script>';
$lastload_js .= $js_inline_content;
$html_object = str_replace('</body>', $lastload_js . '</body>', $html_object);
}
echo json_encode(array('result' => 'ok', 'data' => array('html_object' => $html_object, 'js_content' => $js_content)));
$amp = '';
if (!empty($create_amp)) {
$amp = $this->create_amp($html_object, 'ah',$websitehost);
}
echo json_encode(array('result' => 'ok', 'data' => array('html_object' => $html_object, 'js_content' => $js_content, 'amp' => $amp)));
}
//格式化url保证请求的URL有域名//更换为对应的域名路径
function format_url($url, $host = '') {
function format_url($url, $host = '')
{
if (substr($url, 0, 8) == 'https://' || substr($url, 0, 7) == 'http://') {
$url = str_replace('http://', 'https://', $url);//http要改为https
return urldecode($url);
}
if (substr($url, 0, 2) == '//') { //https或http
return urldecode(str_replace('//', 'http://', $url));
return urldecode(str_replace('//', 'https://', $url));
}
return urldecode($host . $url);
}
}
//生成AMP版本 用移动端版本生成
/*
1.加载站点AMP模板模板只有导航、头部、底部
2.删除全部js引用和内链代码
3.删除全部css引用内联css放入<style amp-custom>
4.图片全部替换成amp-img设置宽高设置layout="responsive"
5.去掉所有元素中的style
6.去掉样式表中的!important
7.替换读取源文件title description keywords canonical
8.todo:增加application/ld+json
要求: 图片文件必须带有域名,否则的获取尺寸会出错,如 https://data.asiahighlights.com/pic/abc.jpg
*/
//$htmlsource 移动端版本的HTML对象 $cache_path AMP文件保存路径
function create_amp($htmlsource, $site_code,$websitehost)
{
$html_object = str_get_html($htmlsource);
//读取站点的AMP模板
$amp_template = $this->load->view('amp-template/' . $site_code,null, true);
//生成移动版本,删除多余元素
foreach ($html_object->find('.hidden-xs') as $hidden_item) {
$hidden_item->outertext = '';
}
foreach ($html_object->find('title') as $title) {
$amp_template = str_replace('<!--@TITLE@-->', $title->innertext, $amp_template);
}
foreach ($html_object->find('meta') as $meta) {
if ($meta->name == 'description') {
$amp_template = str_replace('<!--@DESCRIPTION@-->', $meta->content, $amp_template);
}
if ($meta->name == 'keywords') {
$amp_template = str_replace('<!--@KEYWORDS@-->', $meta->content, $amp_template);
}
}
foreach ($html_object->find('script') as $script) {
$script->outertext = '';
}
foreach ($html_object->find('noscript') as $noscript) {
$noscript->outertext = '';
}
foreach ($html_object->find('link') as $link) {
if ($link->rel == 'stylesheet' && !empty($link->href)) {
$link->outertext = '';
}
if ($link->rel == 'canonical' && !empty($link->href)) {
$amp_template = str_replace('<!--@CANONICAL@-->', $link->href, $amp_template);
}
}
$style_content = '';
foreach ($html_object->find('style') as $style) {
$style_content .= $style->innertext;
$style->outertext = '';
}
$style_content = str_replace('!important', '', $style_content);
$amp_template = str_replace('/*@CUSTOM-CSS@*/', $style_content, $amp_template);
//获取图片尺寸AMP要求必须填写width和height
//格式化图片URL
foreach ($html_object->find('img') as $image) {
if(!empty($image->src)){
$img_src_host = parse_url($image->src,PHP_URL_HOST);
if(empty($img_src_host)){
$img_src_host=$websitehost;
}
$image->src= $this->format_url($image->src,$img_src_host);
}
if (!empty($image->originalsrc)) {
$img_src_host = parse_url($image->src,PHP_URL_HOST);
if(empty($img_src_host)){
$img_src_host=$websitehost;
}
$image->originalsrc = $this->format_url($image->originalsrc,$img_src_host);
}
}
//拼接请求的图片url如 https://data.asiahighlights.com/imagesize.php?photo=/pic/logo-ah.png,/pic/ah-slide-logo.png
$request_size = array();
foreach ($html_object->find('img') as $image) {
$img_src = $image->src;
if (!empty($image->originalsrc)) {
$img_src = $image->originalsrc;
}
$img_src_urls = parse_url($img_src);
$request_size[$img_src_urls['host']][] = $img_src_urls['path'];
}
//请求图片尺寸
$image_sizes = array();
foreach ($request_size as $host => $path) {
$parse_url = "https://{$host}/imagesize.php?photo=" . implode(',', $path);
$size_data = GET_HTTP($parse_url);
if (!empty($size_data)) {
$size_data = json_decode($size_data);
foreach ($size_data as $size_item) {
$size_item->photo = "https://{$host}" . $size_item->photo;
$image_sizes[$size_item->photo] = $size_item;
}
}
}
//获取图片尺寸 end
foreach ($html_object->find('img') as $image) {
$img_src = $image->src;
if (!empty($image->originalsrc)) {
$img_src = $image->originalsrc;
}
$img_alt = $image->alt;
$img_class = $image->class;
$img_size = $image_sizes[$img_src];
if (!empty($img_size)) {
$image->outertext = " <amp-img layout=\"responsive\" class=\"{$img_class}\" alt=\"{$img_alt}\" src=\"{$img_src}\" width=\"{$img_size->width}\" height=\"{$img_size->height}\"></amp-img>";
}
}
foreach ($html_object->find('#content_main') as $content_main) {
$amp_template = str_replace('<!--@CUSTOM-CONENT@-->', $content_main, $amp_template);
}
//替换掉写在组件上的样式
$amp_template = preg_replace('/style=.+?[\'|"]/i', '', $amp_template);
return $amp_template;
}
}

File diff suppressed because one or more lines are too long

@ -14,7 +14,8 @@
<h1>页面样式精简</h1>
<form name="form_htmlsource" id="form_htmlsource" action="<?php echo site_url('apps/htmlcompressor/index/optimize'); ?>" method="post">
<input type="text" name="websitehost" id="websitehost" style="width:200px;" placeholder="域名" /><br/><br/>
<textarea name="htmlsource" id="htmlsource" rows="22" style="width:800px;" placeholder="网页代码" ></textarea>
<textarea name="htmlsource" id="htmlsource" rows="22" style="width:800px;" placeholder="网页代码" ></textarea><br/><br/>
<label><input type="checkbox" value="true" name="create_amp">生成AMP页面</label><br/><br/>
<input type="submit"/>
</form>

Loading…
Cancel
Save