轻松迁移博客到AMP

<style>
@font-face {
    font-family: 'sourcesanspro';
    src: url('//toobug.s.f2er.info/font/sourcesanspro.woff2') format('woff2'),
         url('//toobug.s.f2er.info/font/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>

<style>
@font-face {
    font-family: 'sourcesanspro';
    src: url('//toobug.s.f2er.info/font/sourcesanspro.woff2') format('woff2'),
         url('//toobug.s.f2er.info/font/sourcesanspro.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
</style>

<!-- 在head区 AMP 脚本之前引入 -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<!-- 将统计脚本替换成如下代码 -->
<amp-analytics type="googleanalytics" id="UA-XXXXXXXX">
    <script type="application/json">
    {
        "vars": {
            "account": "UA-XXXXXXXX"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        }
    }
    </script>
</amp-analytics>

<!-- 在head区 AMP 脚本之前引入 -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

<!-- 将统计脚本替换成如下代码 -->
<amp-analytics type="googleanalytics" id="UA-XXXXXXXX">
    <script type="application/json">
    {
        "vars": {
            "account": "UA-XXXXXXXX"
        },
        "triggers": {
            "trackPageview": {
                "on": "visible",
                "request": "pageview"
            }
        }
    }
    </script>
</amp-analytics>

<!-- 用于显示评论框和评论列表的容器 -->
<div id="disqus_thread"></div>
<script>
// 监听disqus组件传递的消息
// 其中有一个是`resize`，是disqus用于告诉当前页面
// “我加载完了，我的尺寸是XXX”
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize') {
            // 向 AMP 页面发送消息，要求重新设置 amp-iframe的高度
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
            }, '*');
        }
    }
}
</script>
<script>
    // 用于解析url参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    // 通过url参数获取当前 AMP 页面对应的文章相关参数
    // 并赋值给page变量，稍后disqus将读取page变量
    var disqus_config = function () {
        this.page.title = decodeURIComponent(getQueryVariable("title"));
        this.page.url = decodeURIComponent(getQueryVariable("url"));
        this.page.identifier = decodeURIComponent(getQueryVariable("identifier"));
    };

    // 引入disqus脚本
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = '//toobug.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

<!-- 用于显示评论框和评论列表的容器 -->
<div id="disqus_thread"></div>
<script>
// 监听disqus组件传递的消息
// 其中有一个是`resize`，是disqus用于告诉当前页面
// “我加载完了，我的尺寸是XXX”
window.addEventListener('message', receiveMessage, false);
function receiveMessage(event)
{
    if (event.data) {
        var msg;
        try {
            msg = JSON.parse(event.data);
        } catch (err) {
            // Do nothing
        }
        if (!msg)
            return false;

        if (msg.name === 'resize') {
            // 向 AMP 页面发送消息，要求重新设置 amp-iframe的高度
            window.parent.postMessage({
              sentinel: 'amp',
              type: 'embed-size',
              height: msg.data.height
            }, '*');
        }
    }
}
</script>
<script>
    // 用于解析url参数
    function getQueryVariable(variable) {
        var query = window.location.search.substring(1);
        var vars = query.split("&");
        for (var i=0;i<vars.length;i++) {
            var pair = vars[i].split("=");
            if(pair[0] == variable){return pair[1];}
        }
        return(false);
    }
    // 通过url参数获取当前 AMP 页面对应的文章相关参数
    // 并赋值给page变量，稍后disqus将读取page变量
    var disqus_config = function () {
        this.page.title = decodeURIComponent(getQueryVariable("title"));
        this.page.url = decodeURIComponent(getQueryVariable("url"));
        this.page.identifier = decodeURIComponent(getQueryVariable("identifier"));
    };

    // 引入disqus脚本
    (function() {  // DON'T EDIT BELOW THIS LINE
        var d = document, s = d.createElement('script');

        s.src = '//toobug.disqus.com/embed.js';

        s.setAttribute('data-timestamp', +new Date());
        (d.head || d.body).appendChild(s);
    })();
</script>

<amp-iframe
    width="600"
    height="140"
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://toobug.s.f2er.info/amp/disqus/toobug.html?title=#{page.title}&url=#{config.url}/#{page.path}&identifier=#{page.path}">
    <div
        overflow
        tabindex=0
        role=button
        aria-label="Disqus Comments"
    >Disqus Comments</div>
</amp-iframe>

<amp-iframe
    width="600"
    height="140"
    layout="responsive"
    sandbox="allow-scripts allow-same-origin allow-modals allow-popups allow-forms"
    resizable
    src="https://toobug.s.f2er.info/amp/disqus/toobug.html?title=#{page.title}&url=#{config.url}/#{page.path}&identifier=#{page.path}">
    <div
        overflow
        tabindex=0
        role=button
        aria-label="Disqus Comments"
    >Disqus Comments</div>
</amp-iframe>