跟 Instapaper 学排版

ipa包中有一个template.html文件是用来排版的,原理是读取模板并替换变量并通过UIWebView输出,代码如下(无他,仅存在云端便于翻阅):

<!DOCTYPE html>

<html>  
<head>  
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no; minimum-scale=1.0; maximum-scale=1.0;" />  
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  
<meta name="robots" content="noindex"/>  
<link rel="icon" href="/images/favicon.png"/>  
<style type="text/css">  
body{font-family:Verdana, Helvetica, Arial, sans-serif;font-size:15px;margin:0px auto 0px auto;-webkit-text-size-adjust:none;-webkit-touch-callout:none;word-wrap:break-word;}  
body.ipad{margin:100px 70px 0 70px;}  
h1{font-size:1.2em;font-weight:normal;}  
h2{font-size:1.15em;}  
h3, h4, h5, h6{font-size:1.0em;}  
#titlebar{direction:%TEXTDIRECTION%;}
#titlebar h1{font-size:16px;font-weight:bold;font-family:Helvetica, Arial, sans-serif;margin-bottom:5px;padding-bottom:8px;border-bottom:1px solid #aaa;}
body.ipad #titlebar h1{border-bottom:0;padding-bottom:0;margin-bottom:0;}  
#footer{direction:%TEXTDIRECTION%;border-top:1px solid #aaa;margin-bottom:20px;}
#fin{text-align:center;color:#888;font-size:14px;margin-top:48px;}
body.ipad #fin{font-size:18px;margin-top:96px;}  
.orig_line{font-family:Verdana, Helvetica, Arial, sans-serif;color:#888;font-size:13px;}
a.original, a.original:visited, a.original:active{text-decoration:underline;color:#555;}  
img{border:0;display:block;margin:0.5em auto;max-width:100%;}  
body.ipad img{max-height:500px;}  
body.iphone img{max-height:200px;}  
pre, code{overflow:scroll;}  
#story{clear:both;overflow:hidden;margin-bottom:40px;direction:%TEXTDIRECTION%;}
#story div{margin:1em 0;}
blockquote{border-top:1px solid #bbb;border-bottom:1px solid #bbb;margin:1.5em 0;padding:0.5em 0;}  
blockquote.short{font-style:italic;padding:0 1em;border-top:0;border-bottom:0;}  
body.ipad blockquote.short{padding:0 2em;}  
pre{white-space:pre-wrap;}  
sup, sub{height:0;line-height:1;vertical-align:baseline;_vertical-align:bottom;position:relative;}  
sup{bottom:0.5ex;}  
sub{top:.5ex;}  
ul.bodytext, ol.bodytext{list-style:none;margin-left:0;padding-left:0em;}  
</style>  
<script type="text/javascript">  
    function attachImageListeners()
    {
        var i, imgs = document.getElementById('story').getElementsByTagName('img');
        for (i = 0; i < imgs.length; i++) {

            var p = imgs[i];
            while (p.nodeName.toLowerCase() != 'a' && p.parentNode) p = p.parentNode;
            var href = (p.nodeName.toLowerCase() == 'a' ? p.getAttribute('href') : false); 

            imgs[i].setAttribute('onclick',
                'window.location.href = "imgtap:///?x=' + imgs[i].offsetLeft + '&y=' + imgs[i].offsetTop + 
                '&w=' + imgs[i].clientWidth + '&h=' + imgs[i].clientHeight + 
                '&src=' + encodeURIComponent(imgs[i].getAttribute('src')) + 
                (href ? '&href=' + encodeURIComponent(href) : '') +
                '"; return false;'
            );

            imgs[i].setAttribute('ongestureend',
                'if (event.scale < 1.0) return false; ' +
                'window.location.href = "imgtap:///zoom?x=' + imgs[i].offsetLeft + '&y=' + imgs[i].offsetTop + 
                '&w=' + imgs[i].clientWidth + '&h=' + imgs[i].clientHeight + 
                '&src=' + encodeURIComponent(imgs[i].getAttribute('src')) + 
                (href ? '&href=' + encodeURIComponent(href) : '') +
                '"; return false;'
            );
        }
    }

    function imageQLines()
    {
        var src, i, out = '', imgs = document.getElementById('story').getElementsByTagName('img');
        for (i = 0; i < imgs.length; i++) {
            src = imgs[i].getAttribute('src');
            if (! src) continue;
            if (src.substring(0, 5) == 'data:') continue;
            imgs[i].setAttribute('id', 'img' + i);
            out += 'img' + i + ',' + src + "n";
        }
        return out;
    }
</script>  
</head>

<body class="%DEVICECLASS%" onload="attachImageListeners();">  
    <div id="titlebar">
        <h1>%TITLE%</h1>
        %ORIGLINK%
    </div>

    <div id="story">
    %BODY%
    </div>

    <div id="footer">
        %ORIGLINK%
        <div id="fin">
            ◆
        </div>
    </div>
</body>

</html>