QQ爹博客 QQ爹博客

Typecho添加AMP支持

in Typecho 文章转载请注明来源!

文章内容转自https://holmesian.org/typecho-upgrade-AMP,略有修改

Typecho至今没有出任何支持AMP的插件或主题,我没去想怎么用插件实现AMP,而是直接通过修改模板的post.php、function.php文件来暴力实现,原则上所有模板都可以用。

效果就是在任何一篇博文的url后面加上amp=1即可访问amp版的页面,例如本文的AMP页面,总之实现起来也很简单。
具体步骤如下:
对模板里的post.php文件做如下修改(后台控制台》外观》编辑当前外观》post.php):

<?php if (isset($_GET['amp'])){; ?>
    <!doctype html>
    <html amp lang="zh">
      <head>
        <meta charset="utf-8">
        <script async src="https://cdn.ampproject.org/v0.js"></script>
        <title><?php $this->title() ?></title>
        <link rel="canonical" href="<?php $this->permalink() ?>" />
        <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<meta name="description" content="<?php $this->description(); ?>" />
<meta name="keywords" content="<?php $this->tags(',', false, 'none'); ?>" />
        <script type="application/ld+json">
          {
            "@context": "http://schema.org",
            "@type": "BlogPosting",
            "headline": "<?php $this->title(); ?>",
            "mainEntityOfPage": "<?php $this->permalink() ?>",
            "author": {
              "@type": "Person",
              "name": "<?php $this->author(); ?>"
            },
            "datePublished": "<?php $this->date('F j, Y'); ?>",
            "dateModified": "<?php $this->date('F j, Y'); ?>",
            "image": {
              "@type": "ImageObject",
              "url": "<?php  print_r(get_post_img($this));?>",
              "width": 700,
              "height": 400
            },
             "publisher": {
              "@type": "Organization",
              "name": "<?php $this->options->title(); ?>",
              "logo": {
                "@type": "ImageObject",
                "url": "https://qqdie.com/tu/400x400l.png",
                "width": 200,
                "height": 200
              }
            },
            "description": "<?php $this->excerpt(60, '...'); ?>"
          }
        </script>
         <style amp-custom>*{margin:0;padding:0}html,body{height:100%}body{background:#fff;color:#666;font-size:14px;font-family:"-apple-system","Open Sans","HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,sans-serif}::selection,::-moz-selection,::-webkit-selection{background-color:#2479CC;color:#eee}h1{font-size:1.5em}h3{font-size:1.3em}h4{font-size:1.1em}a{color:#2479CC;text-decoration:none}article{padding:85px 15px 0}article .entry-content{color:#444;font-size:16px;font-family:Arial,'Hiragino Sans GB',冬青黑,'Microsoft YaHei',微软雅黑,SimSun,宋体,Helvetica,Tahoma,'Arial sans-serif';-webkit-font-smoothing:antialiased;line-height:1.8;word-wrap: break-word;word-break: break-all;}article h1.title{color:#333;font-size:2em;font-weight:300;line-height:35px;margin-bottom:25px}article .entry-content p{margin-top:15px}article h1.title a{color:#333;transition:color .3s}article h1.title a:hover{color:#2479CC}article blockquote{background-color:#f8f8f8;border-left:5px solid #2479CC;margin-top:10px;overflow:hidden;padding:15px 20px}article code{background-color:#eee;border-radius:5px;font-family:Consolas,Monaco,'Andale Mono',monospace;font-size:80%;margin:0 2px;padding:4px 5px;vertical-align:middle}article pre{background-color:#f8f8f8;border-left:5px solid #ccc;color:#5d6a6a;font-size:14px;line-height:1.6;overflow:hidden;padding:0.6em;position:relative;white-space:pre-wrap;word-break:break-word;word-wrap:break-word}article table{border:0;border-collapse:collapse;border-spacing:0}article pre code{background-color:transparent;border-radius:0 0 0 0;border:0;display:block;font-size:100%;margin:0;padding:0;position:relative}article table th,article table td{border:0}article table th{border-bottom:2px solid #848484;padding:6px 20px;text-align:left}article table td{border-bottom:1px solid #d0d0d0;padding:6px 20px}article .copyright-info,article .amp-info{font-size:14px}article .expire-tips{background-color:#f5d09a;border:1px solid #e2e2e2;border-left:5px solid #fff000;color:#333;font-size:15px;padding:5px 10px;margin:20px 0px}article .post-info,article .entry-content .date{font-size:14px}article .entry-content blockquote,article .entry-content ul,article .entry-content ol,article .entry-content dl,article .entry-content table,article .entry-content h1,article .entry-content h2,article .entry-content h3,article .entry-content h4,article .entry-content h5,article .entry-content h6,article .entry-content pre{margin-top:15px}article pre b.name{color:#eee;font-family:"Consolas","Liberation Mono",Courier,monospace;font-size:60px;line-height:1;pointer-events:none;position:absolute;right:10px;top:10px}article .entry-content .date{color:#999}article .entry-content ul ul,article .entry-content ul ol,article .entry-content ul dl,article .entry-content ol ul,article .entry-content ol ol,article .entry-content ol dl,article .entry-content dl ul,article .entry-content dl ol,article .entry-content dl dl,article .entry-content blockquote > p:first-of-type{margin-top:0}article .entry-content ul,article .entry-content ol,article .entry-content dl{margin-left:25px}.header{background-color:#fff;box-shadow:0 0 40px 0 rgba(0,0,0,0.1);box-sizing:border-box;font-size:14px;height:60px;padding:0 15px;position:absolute;width:100%}.footer{font-size:.9em;padding:15px 0 25px;text-align:center;width:auto}.header h1{font-size:30px;font-weight:400;line-height:30px;margin:15px 0px}.menu-list li a,.menu-list li span{border-bottom:solid 1px #ededed;color:#000;display:block;font-size:18px;height:60px;line-height:60px;text-align:center;width:86px}.header h1 a{color:#333}.tex .hljs-formula{background:#eee8d5}</style>
<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>
      </head>
      <body>
      <header class="header"><div class="header-title"><h1><a href="/"><?php $this->options->title(); ?></a></h1></div></header>
      
      <article class="post"><h1 class="title"><?php $this->title(); ?></h1>
        <div class="entry-content">
        <?php  ampInit($this);?>
        <?php $this->content(); ?>
        </div>
        <p class="expire-tips">当前页面是本站的「<a href="//www.ampproject.org/zh_cn/">Google AMP</a>」版。查看和发表评论请点击:<a href="<?php $this->permalink() ?>">完整版 »</a></p>
    
      </article>
    
      </body>
    </html>
    <?php } else {?>
\\这里是原模板内容
    <?php  }?>

接着在functions.php文件末尾添加下列两个函数。

    function ampInit($archive)
    {
        if ($archive->is('single')) {
            $archive->content = str_replace('<img','<amp-img width="900" height="675" layout="responsive" ',$archive->content);
            $archive->content = str_replace('img>','amp-img>',$archive->content);
            $archive->content = str_replace('<!- toc end ->','',$archive->content);
            $archive->content = str_replace('javascript:content_index_toggleToc()','#',$archive->content);
        }
    
    }
    
    
    function get_post_img($archive)
    {
        $cid = $archive->cid;
        $db = Typecho_Db::get();
        $rs = $db->fetchRow($db->select('table.contents.text')
                                   ->from('table.contents')
                                   ->where('cid=?', $cid));
        $text = $rs['text'];
        $pattern = '/\<img.*?src\=\"(.*?)\"[^>]*>/i';
        $patternMD = '/\!\[.*?\]\((http(s)?:\/\/.*?(jpg|png))/i';
        $patternMDfoot = '/\[.*?\]:\s*(http(s)?:\/\/.*?(jpg|png))/i';
            if (preg_match($patternMDfoot, $text, $img)) {
                $img_url = $img[1];
            } else if (preg_match($patternMD, $text, $img)) {
                $img_url = $img[1];
            } else if (preg_match($pattern, $text, $img)) {
                preg_match("/(?:\()(.*)(?:\))/i", $img[0], $result);
                $img_url = $img[1];
            } else {
                $img_url ='https://holmesian.org/usr/themes/Holmesian/images/holmesian.png?type=markdown';
            }
            return $img_url;
    }

最后在header.php中添加下列内容

    <?php if ($this->is('post')): ?>
    <link rel="amphtml" href="<?php $this->permalink() ?>?amp=1">
    <?php endif; ?>

全部修改之后,刷新缓存,就可以访问AMP页面啦。
PS:可以到这里测试你的AMP页面是否正确有效。
PS2:Google大概会在48小时内抓取到AMP页面,并在搜索结果中体现出来。效果如下:

1164002399.jpg 185911392.jpg
jrotty WeChat Pay

微信打赏

jrotty Alipay

支付宝打赏

文章二维码

扫描二维码,在手机上阅读!

本文基于《署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)》许可协议授权
文章链接:https://qqdie.com/archives/typecho-adds-amp-support.html (转载时请注明本文出处及文章链接)

typechoampGoogle
发表新评论
已有 29 条评论
  1. frontal lace wigs

    Good frontal lace wigs, wonderful and stylish

  2. 雨落泪尽
    雨落泪尽
    回复

    牛逼牛逼,牛逼

  3. devoted
    devoted
    回复

    超级给力,果然是大佬

  4. 狂放
    狂放
    回复

    MIP抠了抠鼻

  5. 尚寂新
    尚寂新
    回复

    补充一下 应该把这两行加上<meta name="description" content="<?php $this->excerpt(100, '...'); ?>" /><meta name="keywords" content="<?php $this->tags(',', false, 'none'); ?>" />

    1. Jrotty
      Jrotty本文作者
      回复

      @尚寂新 感谢说明,已补充233@(滑稽)

  6. holmesian
    holmesian
    回复

    我把AMP的功能做成了插件,有需要的TX不妨试试: https://holmesian.org/AMP-for-Typecho

    1. Jrotty
      Jrotty本文作者
      回复

      @holmesian 最近才用上哈,所以才回复,有个小建议,amp功能和mip功能能不能根据ua信息只对谷歌和百度开放,其他搜索引擎靠边站

      1. holmesian
        holmesian
        回复

        @Jrotty 已经改好。

        1. Jrotty
          Jrotty本文作者
          回复

          @holmesian 谷歌amp测试页面ua是这个google-amphtml,我怀疑蜘蛛amp蜘蛛也是这个ua而不是googlebot,百度的话不清楚!

          1. holmesian
            holmesian
            回复

            @Jrotty 我把google-amphtml也加到判断里了。
            实际上在nginx的访问日志里只有googlebot的UA。

        2. Jrotty
          Jrotty本文作者
          回复

          @holmesian 感谢大大,明天就去升级

前篇 后篇