注意：本文最后更新于 2506 天前，有关的内容可能已经发生变化，请参考使用。

2017年12月1日更新：AMP功能已经做成插件，详情见这里

很不幸，我使用Typecho前段时间爆出非常严重的安全漏洞，好在我之前做过习惯性地加固，install.php相关的文件也删除了，所以即使满大街都是漏洞利用工具，也没受到本次漏洞的伤害。

既然官方已经出了1.1的更新，我也就顺手将博客程序升级了：结果升级一时爽，模板火葬场。因为博客内容经过多个转换程序，而且年久失修，加上原来在模板上做过一些高耦合的hack，所有弊端一次性爆发，导致不得不推到重来一遍。于是乘着这个机会一并解决了一些遗留问题，并顺手增加AMP功能。

HTML转Markdown

由于07年至今用过Boblog，Emlog等博客系统，数据编辑器从UBB到HTML富文本都用过，所以context里的内容鱼目混杂。于是首先要进行内容格式统一：UBB转换成HTML，HTML集体转换为Markdown。UBB转HTML基本没问题，HTML转Markdown建议用html2text完成，基本上格式可以保留，记得设置.body_width =0不主动换行即可。

    import pymysql.cursors
    import html2text
    
    connection = pymysql.connect(host='localhost',
                                 user='root',
                                 password='password',
                                 db='typecho',
                                 charset='utf8mb4',
                                 cursorclass=pymysql.cursors.DictCursor)
    
    try:
        with connection.cursor() as cursor:
            # Read a single record
            sql = "SELECT * FROM `typecho_contents`"
            cursor.execute(sql)
            result = cursor.fetchall()
            for x in result:
                if(x['text'][0:15]=='<!--markdown-->' or x['type']=='attachment'):
                    pass
                else:
                    h = html2text.HTML2Text()
                    h.ignore_links = False
                    h.body_width =0
                    md_text='<!--markdown-->'+h.handle(x['text'])
    
                    sql="UPDATE `typecho_contents` SET `text` =%s WHERE `cid` = %s ;"
                    print(x['cid'])
                    cursor.execute(sql,(md_text,str(x['cid'])))
                    connection.commit()
    
    finally:
        connection.close()

支持AMP

之所以要统一博客内容统一成Markdown，除了强迫症之外，更主要的是为了支持AMP。Typecho至今没有出任何支持AMP的插件或主题，我没去想怎么用插件实现AMP，而是直接通过修改模板的post.php、function.php文件来暴力实现，原则上所有模板都可以用。

效果就是在任何一篇博文的url后面加上amp=1即可访问amp版的页面，例如本文的AMP页面，总之实现起来也很简单。

具体步骤如下：

对模板里的post.php文件做如下修改(后台控制台》外观》编辑当前外观》post.php)：

    <?php if (!defined('__TYPECHO_ROOT_DIR__')) exit; ?>
    <?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">
        <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": "Holmesian Blog",
              "logo": {
                "@type": "ImageObject",
                "url": "https://holmesian.org/usr/themes/Holmesian/images/holmesian.png",
                "width": 60,
                "height": 60
              }
            },
            "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}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="/">Holmesian Blog</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() ?>#comments">完整版 »</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页面，并在搜索结果中体现出来。效果如下：

「倘若有所帮助，不妨酌情赞赏!」

提交失败，请检查提交地址。如有必要，请将错误提示反馈给作者
这是什么问题呢

joker February 26th, 2020 at 12:35 pm 回复

为啥我用了贵博的插件，生产的AMP或者MIP页面里的图片都被拉伸了的感觉！

学习笔记Blog December 25th, 2017 at 02:02 pm 回复

@学习笔记Blog

我更新了一下插件，解决了图片拉伸问题。
请使用新插件。

Holmesian December 25th, 2017 at 06:53 pm 回复
1. @Holmesian
  
  多谢提醒！我去升级插件去，直接FTP覆盖即可吧！
  
  学习笔记Blog December 28th, 2017 at 03:01 pm 回复