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>