1.下载工具包，后解压。
http://closure-templates.googlecode.com/files/closure-templates-for-javascript-latest.zip
2.运行命令：
java -jar SoyToJsSrcCompiler.jar --outputPathFormat mainui.js mainui.soy
以下是例子：
1. index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>WebSite - Home</title> <link href="styles/main.css" rel="stylesheet" type="text/css"> <script src="scripts/lib/jquery-1.8.2.min.js"></script>
<script src="scripts/lib/soyutils.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/mainui.js"></script>
<script src="strings/strings.js"></script>
</head> <body>
</body>
</html>
2. main.css
@charset "utf-8";
footer {
display: none;
}
#footer-content {
text-align: center;
}
nav {
position: fixed;
z-index:;
top: 20px;
right: 15px;
}
#logo {
font-size: 24px;
font-weight: bold;
color: #353535;
}
a {
text-decoration: none;
}
a.active {
font-weight: bold;
color: #353535;
}
a:active {
color: #353535;
}
a:hover {
color: #4183c4;
}
ul {
list-style-type: none;
}
li.horizontal{
float: left;
}
#section-home {
margin-top: 180px;
margin-right: auto;
margin-bottom: 180px;
margin-left: 80px;
}
#logo-big {
font-size: 60px;
font-weight: bold;
color: #353535;
}
#logo-description {
font-size: 60px;
font-weight: bold;
color: #999;
float: left;
}
#li-logo-big {
text-align: left;
width: 400px;
}
a:hover {
cursor:pointer;
}
nav a {
margin-right: 5px;
margin-left: 5px;
}
3. main.js
$(document).ready(function(){
alert("document ready");
$("body").html(website.ui.main.body(website.strings.body));
$("#main-content").html("Home");
$("#nav-home").click(function(){
$("#nav-home").addClass("active");
$("#nav-guide").removeClass("active");
$("#nav-faq").removeClass("active");
$("#nav-dashboards").removeClass("active");
$("#main-content").html("Home");
$("title").text(website.strings.title.home);
});
$("#nav-guide").click(function(){
$("#nav-guide").addClass("active");
$("#nav-home").removeClass("active");
$("#nav-faq").removeClass("active");
$("#nav-dashboards").removeClass("active");
$("#main-content").html("Guide");
$("title").text(website.strings.title.guide);
});
$("#nav-faq").click(function(){
$("#nav-faq").addClass("active");
$("#nav-home").removeClass("active");
$("#nav-guide").removeClass("active");
$("#nav-dashboards").removeClass("active");
$("#main-content").html("FAQ");
$("title").text(website.strings.title.faq);
});
$("#nav-dashboards").click(function(){
$("#nav-dashboards").addClass("active");
$("#nav-home").removeClass("active");
$("#nav-faq").removeClass("active");
$("#nav-guide").removeClass("active");
$("#main-content").html("Dashboards");
$("title").text(website.strings.title.dashboards);
});
});
4. mainui.soy 和 mainui.js
{namespace website.ui.main}
/**
* The body content.
* @param navHomeText The text of link home.
* @param navGuideText The text of link guide.
* @param navFAQText The text of link faq.
* @param navDashboardsText The text of link dashboards.
* @param copyright The text of copyright.
*/
{template .body}
<header>
<a id="logo" href="">WebSite</a>
<nav>
<a id="nav-home" class="active">{$navHomeText}</a>
<a id="nav-guide">{$navGuideText}</a>
<a id="nav-faq">{$navFAQText}</a>
<a id="nav-dashboards">{$navDashboardsText}</a>
</nav>
<hr/>
</header>
<div id="main-content">
</div>
<footer>
<hr/>
<div id="footer-content">{$copyright}</div>
</footer>
{/template}
// This file was automatically generated from mainui.soy.
// Please don't edit this file by hand. if (typeof website == 'undefined') { var website = {}; }
if (typeof website.ui == 'undefined') { website.ui = {}; }
if (typeof website.ui.main == 'undefined') { website.ui.main = {}; } website.ui.main.body = function(opt_data, opt_ignored) {
return '<header><a id="logo" href="">WebSite</a><nav><a id="nav-home" class="active">' + soy.$$escapeHtml(opt_data.navHomeText) + '</a><a id="nav-guide">' + soy.$$escapeHtml(opt_data.navGuideText) + '</a><a id="nav-faq">' + soy.$$escapeHtml(opt_data.navFAQText) + '</a><a id="nav-dashboards">' + soy.$$escapeHtml(opt_data.navDashboardsText) + '</a></nav><hr/></header><div id="main-content"></div><footer><hr/><div id="footer-content">' + soy.$$escapeHtml(opt_data.copyright) + '</div></footer>';
};
5. strings.js
if (typeof website == 'undefined') { var website = {}; }
if (typeof website.strings == 'undefined') { website.strings = {}; }
website.strings.title = {
home:'WebSite - Home',
guide:'WebSite - Guide',
faq:'WebSite - FAQ',
dashboards:'WebSite - Dashboards',
}
website.strings.body = {
navHomeText:'Home',
navGuideText:'Guide',
navFAQText:'FAQ',
navDashboardsText:'Dashboards',
copyright:'© 2014 LDL. All rights reserved.'
}
website.strings.mainContent = {
logDescription:'The description'
}