下面是花瓣的一个模板引擎，是不是先写成html再用什么工具能生成

 (function(rt) {
    var templates = rt.templates,
        attrs = function() {
            return rt.attrs.apply(rt, arguments)
        }, _ = function() {
            return rt._.apply(rt, arguments)
        }, img = function() {
            return rt.img.apply(rt, arguments)
        }, imgURL = function() {
            return rt.imgURL.apply(rt, arguments)
        }, imgSize = function() {
            return rt.imgSize.apply(rt, arguments)
        }, avatar = function() {
            return rt.avatar.apply(rt, arguments)
        }, isVerified = function() {
            return rt.isVerified.apply(rt, arguments)
        }, url = function() {
            return rt.url.apply(rt, arguments)
        }, mkurl = function() {
            return rt.mkurl.apply(rt, arguments)
        }, GACampaignURL = function() {
            return rt.GACampaignURL.apply(rt, arguments)
        }, escape = function() {
            return rt.escape.apply(rt, arguments)
        }, __t = rt.templates,
        emerge = function() {
            return rt.renderSync.apply(rt, arguments)
        };
    __t["base/people_pins"] = function(locals) {
        var buf = [];
        with(locals || {}) {
            var interp, __val__ = emerge("base/header");
            buf.push(null == __val__ ? "" : __val__);
            var __val__ = emerge("base/people_layout", {
                req: req,
                user: page.user,
                ctx: "pins",
                body_tpl: "base/people_pins_body",
                page: page
            });
            buf.push(null == __val__ ? "" : __val__)
        }
        return buf.join("")
    }, __t["base/chrome_callout"] = function(locals) {
        var buf = [];
        with(locals || {}) {
            var interp;
            buf.push("

<

div"), buf.push(attrs({
                id: "chrome_callout",
                style: "display: none;",
                "class": "has-close phide"
            })), buf.push(">

<div"), buf.push(attrs({
                "class": "wrapper"
            })), buf.push("><div"), buf.push(attrs({
                "class": "intro sheet"
            })), buf.push("><span>安装花瓣的chrome采集工具，你可以方便地收集网络上的图片，<br"), buf.push(attrs({})), buf.push("/>视频及网页截图，这是花瓣的精髓所在。</span><a"), buf.push(attrs({
                target: "_blank",
                href: "#",
                onclick: "return false;",
                "class": "install-extension btn btn18 rbtn"
            })), buf.push("><strong> 安装花瓣Chrome扩展</strong><span></span></a><a"), buf.push(attrs({
                "class": "close"
            })), buf.push('></a></div></div></div><script>(function(){if(!Browser.chrome||Browser.version<18){document.id("chrome_callout").dispose();return}var a=Cookie.read("_hb_chrome_extention");!a&&!document.html.hasClass("hbChromeExtInstalled")&&document.id("chrome_callout").removeClass("has-close").show(),$$("#chrome_callout .close").addEvent("click",function(){Cookie.write("_hb_chrome_extention",!0,{duration:365}),document.id("chrome_callout").hide()}),$$("#chrome_callout .install-extension").addEvent("click",function(){return installHuabanChromeAddon(),document.id("chrome_callout").hide(),!1})})()</script>')
        }
        return buf.join("")
    }, __t["base/header_main_menu"] = function(locals) {
        var buf = [];
        with(locals || {}) {
            var interp, categories = settings.categories,
                groups = [];
            for (var i = 0, l = categories.length; i < l; i++) {
                var category = categories[i];
                if (category.display === !1) continue;
                category.nav_link = "/favorite/" + category.id + "/", groups[category.group] = groups[category.group] || [], groups[category.group].push(category)
            }
            buf.push("<div"), buf.push(attrs({
                id: "header_main_menu"
            })), buf.push("><div"), buf.push(attrs({
                "class": "inner clearfix"
            })), buf.push("><div"), buf.push(attrs({
                "class": "left-module"
            })), buf.push("><a"), buf.push(attrs({
                href: "/following/",
                "class": "main-link bold following"
            })), buf.push(">我的关注</a><a"), buf.push(attrs({
                href: "/all/",
                "class": "main-link bold all with-line"
            })), buf.push(">最新采集</a><a"), buf.push(attrs({
                href: "/design/?md=top",
                "class": "main-link design"
            })), buf.push(">花瓣设计</a><a"), buf.push(attrs({
                href: "/ent/?md=top",
                "class": "main-link ent"
            })), buf.push(">花瓣娱乐<i"), buf.push(attrs({
                "class": "new-icon"
            })), buf.push("></i></a><a"), buf.push(attrs({
                href: "/gift/?md=top",
                "class": "main-link gift"
            })), buf.push(">花瓣礼物</a><a"), buf.push(attrs({
                href: "/weekly/",
                "class": "main-link weekly"
            })), buf.push(">周刊</a><a"), buf.push(attrs({
                target: "_blank",
                href: "http://visionblog.huaban.com/",
                "class": "main-link visionblog with-line"
            })), buf.push(">访谈</a><a"), buf.push(attrs({
                target: "_blank",
                href: "/apps/",
                "class": "main-link apps"
            })), buf.push(">移动应用</a></div><div"), buf.push(attrs({
                "class": "right-module"
            })), buf.push("><div"), buf.push(attrs({
                "class": "row-0"
            })), buf.push("><div"), buf.push(attrs({
                "class": "group"
            })), buf.push(">");
            for (var $index = 0, $$l = groups[0].length; $index < $$l; $index++) {
                var cat = groups[0][$index];
                buf.push("<a"), buf.push(attrs({
                    href: cat.nav_link
                })), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
            }
            buf.push("</div></div><div"), buf.push(attrs({
                "class": "row-1"
            })), buf.push("><div"), buf.push(attrs({
                "class": "group"
            })), buf.push(">");
            for (var $index = 0, $$l = groups[1].length; $index < $$l; $index++) {
                var cat = groups[1][$index];
                buf.push("<a"), buf.push(attrs({
                    href: cat.nav_link
                })), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
            }
            buf.push("</div><div"), buf.push(attrs({
                "class": "group"
            })), buf.push(">");
            for (var $index = 0, $$l = groups[2].length; $index < $$l; $index++) {
                var cat = groups[2][$index];
                buf.push("<a"), buf.push(attrs({
                    href: cat.nav_link
                })), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
            }
            buf.push("</div></div><div"), buf.push(attrs({
                "class": "row-2"
            })), buf.push("><div"), buf.push(attrs({
                "class": "group"
            })), buf.push(">");
            for (var $index = 0, $$l = groups[3].length; $index < $$l; $index++) {
                var cat = groups[3][$index];
                buf.push("<a"), buf.push(attrs({
                    href: cat.nav_link
                })), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
            }
            buf.push("</div><div"), buf.push(attrs({
                "class": "group"
            })), buf.push("><a"), buf.push(attrs({
                href: "/all/videos/"
            })), buf.push(">视频</a>");
            for (var $index = 0, $$l = groups[4].length; $index < $$l; $index++) {
                var cat = groups[4][$index];
                buf.push("<a"), buf.push(attrs({
                    href: cat.nav_link
                })), buf.push(">" + escape((interp = cat.name) == null ? "" : interp) + "</a>")
            }
            buf.push("</div>");
            if (req.promotions && req.promotions.dropdown_icontxt_promotions && req.promotions.dropdown_icontxt_promotions.length) {
                buf.push("<div"), buf.push(attrs({
                    "class": "group promotion"
                })), buf.push(">");
                for (var i = 0, $$l = req.promotions.dropdown_icontxt_promotions.length; i < $$l; i++) {
                    var promo = req.promotions.dropdown_icontxt_promotions[i];
                    i <= 6 && (buf.push("<a"), buf.push(attrs({
                        href: "" + promo.promotion_url + "",
                        target: promo.open_in_new_tab ? "_blank" : "_self",
                        "class": "brown-link"
                    })), buf.push(">" + escape((interp = promo.title) == null ? "" : interp) + "</a>"))
                }
                buf.push("</div>")
            }
            buf.push("</div></div></div><div"), buf.push(attrs({
                "class": "bottom-bar"
            })), buf.push("><a"), buf.push(attrs({
                onclick: "app.switchHeaderTo('side');return false;",
                href: "#",
                "class": "to-side btn-with-icon btn"
            })), buf.push("><i"), buf.push(attrs({
                "class": "pin-icon"
            })), buf.push("></i><span"), buf.push(attrs({
                "class": "text"
            })), buf.push("> 固定到左侧</span></a><div"), buf.push(attrs({
                "class": "links"
            })), buf.push("><a"), buf.push(attrs({
                href: "/about/#goodies"
            })), buf.push(">花瓣采集工具</a><a"), buf.push(attrs({
                href: "/about/"
            })), buf.push(">关于我们</a><a"), buf.push(attrs({
                href: "/fm/joinus/"
            })), buf.push(">加入我们</a><a"), buf.push(attrs({
                href: "/pins/53553/"
            })), buf.push(">用户反馈</a><a"), buf.push(attrs({
                href: "/about/#links"
            })), buf.push(">友情链接</a></div></div><div"), buf.push(attrs({
                "class": "up-arrow"
            })), buf.push('></div></div>

<script>((function(){if(location.hash){var a=$$("a[href="+location.hash+"]")[0];a&&(a.click(),docScroller.toElement(a))}})).delay(100)</script>')
        }
        return buf.join("")
    }, __t["base/people_likes_boards"] = function(locals) {
        var buf = [];
        with(locals || {}) {
            var interp, __val__ = emerge("base/header");
            buf.push(null == __val__ ? "" : __val__);
            var __val__ = emerge("base/people_layout", {
                req: req,
                user: page.user,
                ctx: "likes",
                body_tpl: "base/people_likes_boards_body",
                page: page
            });
            buf.push(null == __val__ ? "" : __val__)
        }
        return buf.join("")
    }


........



})(app);