Merge pull request #6 from oncereply/master

bootstyle
2013-02-19 19:08:45 -08:00 · 2013-02-19 19:08:45 -08:00 · 6974ac2412
commit 6974ac2412
parent 127606643d b4a38b7cb9
46 changed files with 10549 additions and 0 deletions
--- a/bootstyle/archive-articles.ftl
+++ b/bootstyle/archive-articles.ftl
@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount}) - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${archiveDate.archiveDateYear}${archiveDate.archiveDateMonth}"/>
+        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body>
+    </body>
+</html>
--- a/bootstyle/article-list.ftl
+++ b/bootstyle/article-list.ftl
@ -0,0 +1,46 @@
+<#list articles as article>
+<div class="page-header page-header-m">
+    <h3><a href="${article.articlePermalink}">${article.articleTitle}</a></h3>
+</div>
+<div class="page-header-bottom">
+    <span>
+        <li class="icon-time"></li>
+        <#if article.hasUpdated>
+        ${article.articleUpdateDate?string("yyyy-MM-dd HH:mm")}
+        <#else>
+        ${article.articleCreateDate?string("yyyy-MM-dd HH:mm")}
+        </#if>
+    </span>
+    <span>
+        <li class="icon-user"></li>
+        <a href="/authors/${article.authorId}" title="${authorLabel}: ${article.authorName}">
+            ${article.authorName}
+        </a>
+    </span>
+    <div class="pull-right">
+        <span>
+            <li class="icon-eye-open"></li>
+            <a href="${article.articlePermalink}">${article.articleViewCount} ${viewLabel}</a>
+        </span>
+        <span>
+            <li class="icon-comment"></li>
+            <a href="${article.articlePermalink}#comments">${article.articleCommentCount} ${commentLabel}</a>
+        </span>
+    </div>
+</div>
+${article.articleAbstract}
+<div class="article-tags">
+    <li class="icon-tags"></li>${tag1Label}
+    <#list article.articleTags?split(",") as articleTag>
+        <span>
+            <a href="${servePath}/tags/${articleTag?url('UTF-8')}">
+            ${articleTag}
+            </a>
+            <#if articleTag_has_next>,</#if>
+        </span>
+    </#list>
+</div>
+</#list>
+<#if paginationCurrentPageNum != paginationPageCount && 0 != paginationPageCount>
+<div class="btn btn-block pagination-btn" onclick="getNextPage()" data-page="${paginationCurrentPageNum}">${moreLabel}</div>
+</#if>
--- a/bootstyle/article.ftl
+++ b/bootstyle/article.ftl
@ -0,0 +1,96 @@
+<#include "macro-head.ftl">
+<#include "macro-comments.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+    <@head title="${article.articleTitle} - ${blogTitle}">
+        <meta name="keywords" content="${article.articleTags}" />
+        <meta name="description" content="${article.articleAbstract?html}" />
+    </@head>
+    </head>
+<body class="home page top-navbar">
+<#include "header.ftl">
+<div id="wrap" class="container" role="document">
+    <div id="content" class="row">
+        <div id="main" class="span8" role="main">
+            <div class="page-header page-header-m">
+                <h3>
+                    ${article.articleTitle}
+                </h3>
+            </div>
+            <div class="page-header-bottom">
+                <span>
+                    <li class="icon-time"></li>
+                    <#if article.hasUpdated>
+                    ${article.articleUpdateDate?string("yyyy-MM-dd HH:mm:ss")}
+                    <#else>
+                    ${article.articleCreateDate?string("yyyy-MM-dd HH:mm:ss")}
+                    </#if>
+                </span>
+                <span>
+                    <li class="icon-user"></li>
+                    <a href="/authors/${article.authorId}" title="${authorLabel}: ${article.authorName}">
+                        ${article.authorName}
+                    </a>
+                </span>
+                <div class="pull-right">
+                    <span>
+                        <li class="icon-eye-open"></li>
+                        <a href="${article.articlePermalink}">${article.articleViewCount} ${viewLabel}</a>
+                    </span>
+                    <span>
+                        <li class="icon-comment"></li>
+                        <a href="${article.articlePermalink}#comments">${article.articleCommentCount} ${commentLabel}</a>
+                    </span>
+                </div>
+            </div>
+            ${article.articleContent}
+            <div class="article-tags">
+                <li class="icon-tags"></li>
+                ${tag1Label}
+                <#list article.articleTags?split(",") as articleTag>
+                    <span>
+                        <a href="${servePath}/tags/${articleTag?url('UTF-8')}">
+                            ${articleTag}
+                        </a>
+                        <#if articleTag_has_next>,</#if>
+                    </span>
+                </#list>
+            </div>
+            <div class="alert alert-info">
+            <#if nextArticlePermalink??>
+                <a href="${servePath}${nextArticlePermalink}" title="${nextArticleTitle}">
+                    <li class="icon-step-backward"></li>${nextArticleTitle}
+                </a>
+            </#if>
+                &nbsp;
+            <#if previousArticlePermalink??>
+                <div class="pull-right">
+                    <a href="${servePath}${previousArticlePermalink}" title="${previousArticleTitle}">
+                        ${previousArticleTitle}<li class="icon-step-forward"></li>
+                    </a>
+                </div>
+            </#if>
+            </div>
+            <@comments commentList=articleComments article=article></@comments>
+        </div>
+        <aside id="sidebar" class="span4" role="complementary">
+        <#include "side.ftl">
+        </aside>
+    </div>
+</div>
+<#include "footer.ftl">
+<@comment_script oId=article.oId>
+page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
+    <#if 0 != randomArticlesDisplayCount>
+    page.loadRandomArticles('<h4 class="ft-gray">${randomArticlesLabel}</h4>');
+    </#if>
+    <#if 0 != relevantArticlesDisplayCount>
+    page.loadRelevantArticles('${article.oId}', '<h4 class="ft-gray">${relevantArticlesLabel}</h4>');
+    </#if>
+    <#if 0 != externalRelevantArticlesDisplayCount>
+    page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>");
+    </#if>
+</@comment_script>
+</body>
+</html>
--- a/bootstyle/author-articles.ftl
+++ b/bootstyle/author-articles.ftl
@ -0,0 +1,24 @@
+<#include "macro-head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+<@head title="${blogTitle}">
+    <meta name="keywords" content="${metaKeywords}"/>
+    <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+</@head>
+</head>
+<body class="home page top-navbar">
+<#include "header.ftl">
+<div id="wrap" class="container" role="document">
+    <div id="content" class="row">
+        <div id="main" class="span8" role="main">
+        <#include "article-list.ftl">
+        </div>
+        <aside id="sidebar" class="span4">
+        <#include "side.ftl">
+        </aside>
+    </div>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/bootstyle/bootstrap/css/bootstrap-responsive.css
+++ b/bootstyle/bootstrap/css/bootstrap-responsive.css
--- a/bootstyle/bootstrap/css/bootstrap-responsive.min.css
+++ b/bootstyle/bootstrap/css/bootstrap-responsive.min.css
--- a/bootstyle/bootstrap/css/bootstrap.css
+++ b/bootstyle/bootstrap/css/bootstrap.css
--- a/bootstyle/bootstrap/css/bootstrap.min.css
+++ b/bootstyle/bootstrap/css/bootstrap.min.css
--- a/bootstyle/bootstrap/img/glyphicons-halflings-white.png
+++ b/bootstyle/bootstrap/img/glyphicons-halflings-white.png
--- a/bootstyle/bootstrap/img/glyphicons-halflings.png
+++ b/bootstyle/bootstrap/img/glyphicons-halflings.png
--- a/bootstyle/bootstrap/js/bootstrap.js
+++ b/bootstyle/bootstrap/js/bootstrap.js
--- a/bootstyle/bootstrap/js/bootstrap.min.js
+++ b/bootstyle/bootstrap/js/bootstrap.min.js
--- a/bootstyle/css/bootstyle.css
+++ b/bootstyle/css/bootstyle.css
@ -0,0 +1,208 @@
+body.top-navbar {
+    padding-top: 60px;
+}
+
+a:hover {
+    text-decoration: none;
+    color: #00B;
+}
+
+.page-header a {
+    color: #000000;
+}
+
+.page-header a:hover {
+    color: #9A9A9A;
+}
+
+.page-header-m {
+    margin: 20px 0px 5px;
+}
+
+.page-header-bottom {
+    margin: 0px 0px 5px;
+    font-size: 12px;
+    color: #585858;
+}
+
+.article-tags {
+    color: #676767;
+    font-size: 12px;
+}
+
+.article-tags a {
+    text-decoration: none;
+}
+
+#footer {
+    margin-top: 20px;
+}
+
+#footer .container {
+    padding: 10px 15px 10px;
+}
+
+.pagination-btn {
+    margin-top: 20px;
+}
+
+/* emotions */
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
+    cursor: pointer;
+    background-image: url("../images/emotions/emotions-ease.png");
+    float: left;
+    height: 24px;
+    margin-right: 5px;
+    width: 24px;
+    transition: all .2s ease-out;
+    -webkit-transition: all .2s ease-out;
+    -moz-transition: all .2s ease-out;
+}
+
+#emotions span:hover {
+    transform: scale(1.2) rotate(360deg);
+    -webkit-transform: scale(1.2) rotate(360deg);
+    -moz-transform: scale(1.2) rotate(360deg);
+}
+
+.em01 {
+    background-position: -24px 0;
+}
+.em02 {
+    background-position: -48px 0;
+}
+.em03 {
+    background-position: -72px 0;
+}
+.em04 {
+    background-position: -96px 1px;
+}
+.em05 {
+    background-position: 0 -24px;
+}
+.em06 {
+    background-position: -24px -24px;
+}
+.em07 {
+    background-position: -48px -24px;
+}
+.em08 {
+    background-position: -72px -24px;
+}
+.em09 {
+    background-position: -96px -24px;
+}
+.em10 {
+    background-position: 0 -48px;
+}
+.em11 {
+    background-position: -24px -48px ;
+}
+.em12 {
+    background-position: -48px -48px;
+}
+.em13 {
+    background-position: -72px -48px;
+}
+.em14 {
+    background-position: -96px -48px;
+}
+/* emotions */
+
+.form-actions-m{
+    padding-left: 0px !important;
+    padding-bottom: 0px;
+    margin-bottom: 0px;
+}
+
+.article-relative {
+    background-color: #FCFCFC;
+    box-shadow: 0 0 2px #D5D5D5;
+    padding: 5px 0 5px 20px;
+}
+.article-relative:hover {
+    background-color: #fff;
+    box-shadow: 0 0 4px #D5D5D5;
+}
+
+.article-relative ul {
+    list-style: none;
+}
+
+.article-comments{
+    margin-bottom: 20px;
+}
+
+.bs-docs-example {
+    position: relative;
+    padding: 20px;
+    *padding-top: 0px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+    margin-bottom: 20px;
+}
+
+.bs-docs-example-child {
+    position: relative;
+    padding: 5px;
+    *padding-top: 0px;
+    background-color: #fff;
+    border: 1px solid #ddd;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+/* start tags */
+#tags.other-main {
+    list-style: none;
+}
+
+#tags li {
+    float: left;
+    height: 38px;
+}
+
+#tags a {
+    margin: 3px 6px;
+    padding: 3px 12px;
+    background-color: #FCFCFC;
+    box-shadow: 0 0 2px #D5D5D5;
+    float: left;
+}
+
+#tags a:hover {
+    text-shadow: 0 0 2px;
+    text-decoration: none;
+    box-shadow: 0 0 4px #D5D5D5;
+    color: #769abb;
+}
+
+.tags1, .tags1:visited {
+    font-size: 12px;
+    color: #a7a7a7;
+}
+
+.tags2, .tags2:visited {
+    font-size: 14px;
+    color: #808080;
+}
+
+.tags3, .tags3:visited {
+    font-size: 16px;
+    color: #595959;
+}
+
+.tags4, .tags4:visited {
+    font-size: 18px;
+    color: #323232;
+}
+
+.tags5, .tags5:visited {
+    font-size: 20px;
+    color: #0a0a0a;
+}
+/* end tags */
--- a/bootstyle/footer.ftl
+++ b/bootstyle/footer.ftl
@ -0,0 +1,80 @@
+<footer id="footer">
+    <div class="navbar-inner">
+        <div class="container">
+            <div class="pull-left">
+                <span>&copy; ${year}</span> - <a href="${servePath}">${blogTitle}</a>
+                Powered by
+                <a href="http://b3log.org" target="_blank" class="logo">
+                ${b3logLabel}&nbsp;
+                    <span style="color: orangered; font-weight: bold;">Solo</span></a>,
+                ver ${version}&nbsp;&nbsp;
+                Theme by <a rel="friend" rel="friend" href="http://www.oncereply.me" target="_blank">oncereply</a>.
+            </div>
+            <div class="pull-right">
+                <div class="pull-left">
+                ${viewCount1Label}
+                    <span>
+                    ${statistic.statisticBlogViewCount}
+                    </span>
+                    &nbsp;&nbsp;
+                ${articleCount1Label}
+                    <span>
+                    ${statistic.statisticPublishedBlogArticleCount}
+                    </span>
+                    &nbsp;&nbsp;
+                ${commentCount1Label}
+                    <span>
+                    ${statistic.statisticPublishedBlogCommentCount}
+                    </span>
+                </div>
+                <span class="translate-ico" onclick="goTranslate()"></span>
+                <div class="clear"></div>
+            </div>
+            <div class="clear"></div>
+        </div>
+    </div>
+</footer>
+
+<div id="goTop" onclick="Util.goTop()" class="hide">TOP</div>
+<script type="text/javascript">
+    var latkeConfig = {
+        "servePath": "${servePath}",
+        "staticServePath": "${staticServePath}"
+    };
+    
+    var Label = {
+        "tag1Label": "${tag1Label}",
+        "viewLabel": "${viewLabel}",
+        "commentLabel": "${commentLabel}",
+        "topArticleLabel": "${topArticleLabel}",
+        "updatedLabel": "${updatedLabel}",
+        "contentLabel": "${contentLabel}",
+        "abstractLabel": "${abstractLabel}",
+        "clearAllCacheLabel": "${clearAllCacheLabel}",
+        "clearCacheLabel": "${clearCacheLabel}",
+        "adminLabel": "${adminLabel}",
+        "logoutLabel": "${logoutLabel}",
+        "skinDirName": "${skinDirName}",
+        "loginLabel": "${loginLabel}",
+        "em00Label": "${em00Label}",
+        "em01Label": "${em01Label}",
+        "em02Label": "${em02Label}",
+        "em03Label": "${em03Label}",
+        "em04Label": "${em04Label}",
+        "em05Label": "${em05Label}",
+        "em06Label": "${em06Label}",
+        "em07Label": "${em07Label}",
+        "em08Label": "${em08Label}",
+        "em09Label": "${em09Label}",
+        "em10Label": "${em10Label}",
+        "em11Label": "${em11Label}",
+        "em12Label": "${em12Label}",
+        "em13Label": "${em13Label}",
+        "em14Label": "${em14Label}"
+    };
+</script>
+<script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
+<script type="text/javascript" src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/bootstrap/js/bootstrap${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/${skinDirName}${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+${plugins}
--- a/bootstyle/header.ftl
+++ b/bootstyle/header.ftl
@ -0,0 +1,27 @@
+<header id="banner" class="navbar navbar-fixed-top" role="banner">
+    <div class="navbar-inner">
+        <div class="container">
+            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+                <span class="icon-bar"></span>
+            </a>
+            <a class="brand" href="${servePath}" title="${blogSubtitle}">${blogTitle}</a>
+            <nav id="nav-main" class="nav-collapse" role="navigation">
+                <ul id="menu-primary-navigation" class="nav">
+                    <li class="menu-home"><a href="${servePath}">${indexLabel}</a></li>
+                    <#list pageNavigations as page>
+                    <li><a href="${page.pagePermalink}" target="${page.pageOpenTarget}">${page.pageTitle}</a></li>
+                    </#list>
+                    <li>
+                        <a href="${servePath}/tags.html">${allTagsLabel}</a>
+                    </li>
+                    <li>
+                        <a rel="alternate" href="${servePath}/blog-articles-feed.do">Atom<img src="${staticServePath}/images/feed.png" alt="Atom"/></a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+    </div>
+</header>
+
--- a/bootstyle/images/404.png
+++ b/bootstyle/images/404.png
--- a/bootstyle/images/ajax-loader.gif
+++ b/bootstyle/images/ajax-loader.gif
--- a/bootstyle/images/emotions/em00.png
+++ b/bootstyle/images/emotions/em00.png
--- a/bootstyle/images/emotions/em01.png
+++ b/bootstyle/images/emotions/em01.png
--- a/bootstyle/images/emotions/em02.png
+++ b/bootstyle/images/emotions/em02.png
--- a/bootstyle/images/emotions/em03.png
+++ b/bootstyle/images/emotions/em03.png
--- a/bootstyle/images/emotions/em04.png
+++ b/bootstyle/images/emotions/em04.png
--- a/bootstyle/images/emotions/em05.png
+++ b/bootstyle/images/emotions/em05.png
--- a/bootstyle/images/emotions/em06.png
+++ b/bootstyle/images/emotions/em06.png
--- a/bootstyle/images/emotions/em07.png
+++ b/bootstyle/images/emotions/em07.png
--- a/bootstyle/images/emotions/em08.png
+++ b/bootstyle/images/emotions/em08.png
--- a/bootstyle/images/emotions/em09.png
+++ b/bootstyle/images/emotions/em09.png
--- a/bootstyle/images/emotions/em10.png
+++ b/bootstyle/images/emotions/em10.png
--- a/bootstyle/images/emotions/em11.png
+++ b/bootstyle/images/emotions/em11.png
--- a/bootstyle/images/emotions/em12.png
+++ b/bootstyle/images/emotions/em12.png
--- a/bootstyle/images/emotions/em13.png
+++ b/bootstyle/images/emotions/em13.png
--- a/bootstyle/images/emotions/em14.png
+++ b/bootstyle/images/emotions/em14.png
--- a/bootstyle/images/emotions/emotions-ease.png
+++ b/bootstyle/images/emotions/emotions-ease.png
--- a/bootstyle/images/icons.png
+++ b/bootstyle/images/icons.png
--- a/bootstyle/index.ftl
+++ b/bootstyle/index.ftl
@ -0,0 +1,24 @@
+<#include "macro-head.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${blogTitle}">
+        <meta name="keywords" content="${metaKeywords}"/>
+        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body class="home page top-navbar">
+        <#include "header.ftl">
+        <div id="wrap" class="container" role="document">
+            <div id="content" class="row">
+                <div id="main" class="span8" role="main">
+                    <#include "article-list.ftl">
+                </div>
+                <aside id="sidebar" class="span4">
+                    <#include "side.ftl">
+                </aside>
+            </div>
+        </div>
+        <#include "footer.ftl">
+    </body>
+</html>
--- a/bootstyle/js/bootstyle.js
+++ b/bootstyle/js/bootstyle.js
@ -0,0 +1,110 @@
+var bootstyle = {
+    getCurrentPage: function () {
+        var $next = $(".pagination-btn");
+        if ($next.length > 0) {
+            window.currentPage = $next.data("page");
+        }
+    },
+    setNavCurrent: function () {
+        $(".nav li a").each(function () {
+            var $this = $(this);
+            var path1 = latkeConfig.servePath + location.pathname,
+                path2 = latkeConfig.servePath + location.pathname.substr(0, location.pathname.length - 1);
+            if ($this.attr("href") === path1 || $this.attr("href") === path2) {
+                $this.parent().addClass("active");
+            } else if (/\/[0-9]+$/.test(location.pathname)) {
+                $(".nav li")[0].className = "current";
+            }
+        });
+    },
+    setCommentEmotions: function () {
+        // comments emotions
+        $(".comments").each(function () {
+            $(this).html(Util.replaceEmString($(this).html()));
+        });
+    },
+    init: function () {
+        this.getCurrentPage();
+        this.setNavCurrent();
+        this.setCommentEmotions();
+    }
+};
+$(function () {
+    bootstyle.init();
+})
+
+var getNextPage = function () {
+    var $more = $(".pagination-btn");
+    currentPage += 1;
+    var path = "/articles/";
+    if (location.pathname.indexOf("tags") > -1) {
+        var tagsPathnaem = location.pathname.split("/tags/");
+        var tags = tagsPathnaem[1].split("/");
+        path = "/articles/tags/" + tags[0] + "/";
+    } else if (location.pathname.indexOf("archives") > -1) {
+        var archivesPathname = location.pathname.split("/archives/");
+        var archives = archivesPathname[1].split("/");
+        path = "/articles/archives/" + archives[0] + "/" + archives[1] + "/";
+    }
+
+    var nextLabel = '',btn_background = '';
+    $.ajax({
+        url: latkeConfig.servePath + path + currentPage,
+        type: "GET",
+        beforeSend: function () {
+            nextLabel = $more.text();
+            btn_background = $more.css('background');
+            $more.text('　').css("background",
+                "url(" + latkeConfig.staticServePath + "/skins/ease/images/ajax-loader.gif) no-repeat scroll center center #fefefe");
+        },
+        success: function (result, textStatus) {
+            var pagination = result.rslts.pagination;
+
+            for (var i = 0; i < result.rslts.articles.length; i++) {
+                var article = result.rslts.articles[i];
+                var articleHTML = new Array();
+                articleHTML.push('<div class="page-header page-header-m">');
+                articleHTML.push('<h3><a href="'+article.articlePermalink+'">'+article.articleTitle+'</a></h3>');
+                articleHTML.push('</div>');
+                articleHTML.push('<div class="page-header-bottom"><span>');
+                articleHTML.push('<li class="icon-time"></li>');
+                if (article.hasUpdated) {
+                    articleHTML.push(Util.toDate(article.articleUpdateDate, ' yyyy-MM-dd HH:mm '));
+                }else{
+                    articleHTML.push(Util.toDate(article.articleCreateDate, ' yyyy-MM-dd HH:mm '));
+                }
+                articleHTML.push('</span><span><li class="icon-user"></li>');
+                articleHTML.push('<a href="/authors/'+article.authorId+'" title="'+Label.authorLabel+': '+article.authorName+'"> ');
+                articleHTML.push(article.authorName);
+                articleHTML.push(' </a>');
+                articleHTML.push('</span><div class="pull-right"><span>');
+                articleHTML.push('<li class="icon-eye-open"></li>');
+                articleHTML.push('<a href="'+article.articlePermalink+'"> ');
+                articleHTML.push(article.articleViewCount+' '+Label.viewLabel);
+                articleHTML.push(' </a>');
+                articleHTML.push('</span><span><li class="icon-comment"></li>');
+                articleHTML.push('<a href="'+article.articlePermalink+'#comments"> '+article.articleCommentCount+' '+Label.commentLabel+' </a>');
+                articleHTML.push('</span></div></div>');
+                articleHTML.push(article.articleAbstract);
+                articleHTML.push('<div class="article-tags">');
+                articleHTML.push('<li class="icon-tags"></li>'+Label.tag1Label);
+                var articleTags = article.articleTags.split(',');
+                for(var j = 0;j < articleTags.length;j++){
+                    var articleTag = articleTags[j];
+                    articleHTML.push('<span>');
+                    articleHTML.push('<a href="'+latkeConfig.servePath+'/tags/'+articleTag+'">');
+                    articleHTML.push(articleTag);
+                    articleHTML.push('</a></span>');
+                }
+                articleHTML.push('</div>');
+                $more.before(articleHTML.join(''));
+            }
+
+            if (pagination.paginationPageCount === currentPage) {
+                $more.remove();
+            } else {
+                $more.text(nextLabel).css("background", '');
+            }
+        }
+    });
+};
--- a/bootstyle/lang/lang_en_US.properties
+++ b/bootstyle/lang/lang_en_US.properties
@ -0,0 +1,94 @@
+#
+# Copyright (c) 2009, 2010, 2011, B3log Team
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+#
+# Description: Language configurations(en_US) for skin "ease".
+# Version: 1.0.0.5, May 22, 2012
+# Author: Liyuan Li
+#
+dynamicLabel=Dynamic
+moreLabel=More
+contentLabel=More...
+abstractLabel=Abstract
+viewCount1Label=View Count:
+articleCount1Label=Article Count:
+commentCount1Label=Comment Count:
+allTagsLabel=Tags
+archiveLabel=Archive
+yearLabel=
+monthLabel=
+recentArticlesLabel=Recent Articles
+recentCommentsLabel=Recent Comments
+mostCommentArticlesLabel=Most Comment Articles
+mostViewCountArticlesLabel=Most View Articles
+popTagsLabel=Popular Tags
+linkLabel=Friend Links
+indexLabel=Home
+sumLabel=
+pageLabel=Page
+clearAllCacheLabel=Clear all cache
+clearCacheLabel=Clear cache
+adminLabel=Admin
+logoutLabel=Logout
+loginLabel=Login
+em00Label=Smile
+em01Label=Laughter
+em02Label=Happy
+em03Label=Sad
+em04Label=Cry
+em05Label=No Comments
+em06Label=Fidget
+em07Label=Angry
+em08Label=Look Around
+em09Label=Surprise
+em10Label=Cool
+em11Label=Cheeky
+em12Label=Heart
+em13Label=Heart Broken
+em14Label=Devil
+commentLabel=Comment
+viewLabel=View
+authorLabel=Author
+previousPageLabel=Previous Page
+nextPagePabel=Next Page
+firstPageLabel=First Page
+lastPageLabel=Last Page
+archive1Label=Archive:
+author1Label=Author:
+tag1Label=Tags:
+sorryLabel=Sorry!
+notFoundLabel=Not Found!
+returnTo1Label=Return:
+updatedLabel=Updated!
+topArticleLabel=Top!
+replyLabel=Reply
+commentNameLabel=Name
+commentEmailLabel=Email
+commentURLLabel=URL
+submmitCommentLabel=Commit Comment
+nameTooLongLabel=Sorry, your username must be between 2 and 20 characters long!
+mailCannotEmptyLabel=Mail is empty!
+mailInvalidLabel=Mail is invalid!
+commentContentCannotEmptyLabel=Sorry, your content must be between 2 and 500 characters long!
+captchaCannotEmptyLabel=Captcha is empty!
+loadingLabel=loading....
+relevantArticlesLabel=Relevant Articles
+randomArticlesLabel=Random Articles
+externalRelevantArticlesLabel=External Relevant Articles:
+captchaErrorLabel=Captcha Error
+b3logLabel=<span style="color: orange;">B</span><span style="color: blue;"><sup>3</sup></span><span style="color: green;">L</span><span style="color: red;">O</span><span style="color: blue;">G</span>
+killBrowserLabel=<h2>Let's kill outdated and insecure browser!</h2><p>Let's kill outdated and insecure browser for browser evolution, human progress and better experience.</p><p>You can download</p><ul><li><a href="http://www.mozilla.com/" target="_blank">Firefox</a></li><li><a href="http://www.google.com/chrome" target="_blank">Chrome</a></li><li><a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" target="_blank">IE8 / IE9</a></li><li><a href="http://www.maxthon.com/" target="_blank">Maxthon</a> and <a href="http://www.google.com" target="_blank">so on</a>.</li></ul>
+noticeBoardLabel=Notice Board
--- a/bootstyle/lang/lang_zh_CN.properties
+++ b/bootstyle/lang/lang_zh_CN.properties
@ -0,0 +1,94 @@
+#
+# Copyright (c) 2009, 2010, 2011, B3log Team
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+#
+# Description: Language configurations(zh_CN) for skin "ease".
+# Version: 1.0.0.5, May 22, 2012
+# Author: Liyuan Li
+#
+dynamicLabel=\u52a8\u6001
+moreLabel=\u66f4\u591a
+contentLabel=\u5168\u6587
+abstractLabel=\u6458\u8981
+viewCount1Label=\u6d4f\u89c8\u6b21\u6570\uff1a
+articleCount1Label=\u6587\u7ae0\u603b\u6570\uff1a
+commentCount1Label=\u8bc4\u8bba\u603b\u6570\uff1a
+allTagsLabel=\u6807\u7b7e\u5899
+updatedLabel=\u6709\u66f4\u65b0\uff01
+topArticleLabel=\u7f6e\u9876\uff01
+archiveLabel=\u5b58\u6863
+yearLabel=\u5e74
+monthLabel=\u6708
+recentArticlesLabel=\u6700\u65b0\u6587\u7ae0
+recentCommentsLabel=\u6700\u65b0\u8bc4\u8bba
+mostCommentArticlesLabel=\u8bc4\u8bba\u6700\u591a\u7684\u6587\u7ae0
+mostViewCountArticlesLabel=\u8bbf\u95ee\u6700\u591a\u7684\u6587\u7ae0
+popTagsLabel=\u5206\u7c7b\u6807\u7b7e
+linkLabel=\u53cb\u60c5\u94fe\u63a5
+indexLabel=\u9996\u9875
+sumLabel=\u5171
+pageLabel=\u9875
+clearAllCacheLabel=\u6e05\u9664\u6240\u6709\u9875\u9762\u7f13\u5b58
+clearCacheLabel=\u6e05\u9664\u672c\u9875\u7f13\u5b58
+adminLabel=\u7ba1\u7406
+logoutLabel=\u767b\u51fa
+loginLabel=\u767b\u5f55
+em00Label=\u5fae\u7b11
+em01Label=\u5927\u7b11
+em02Label=\u9ad8\u5174
+em03Label=\u60b2\u4f24
+em04Label=\u54ed\u6ce3
+em05Label=\u65e0\u8bed
+em06Label=\u70e6\u8e81
+em07Label=\u751f\u6c14
+em08Label=\u6211\u7785
+em09Label=\u60ca\u8bb6
+em10Label=\u9177
+em11Label=\u987d\u76ae
+em12Label=\u7231\u5fc3
+em13Label=\u5fc3\u788e
+em14Label=\u9b54\u9b3c
+commentLabel=\u8bc4\u8bba
+viewLabel=\u6d4f\u89c8
+authorLabel=\u4f5c\u8005
+previousPageLabel=\u4e0a\u4e00\u9875
+nextPagePabel=\u4e0b\u4e00\u9875
+firstPageLabel=\u7b2c\u4e00\u9875
+lastPageLabel=\u6700\u540e\u4e00\u9875
+archive1Label=\u5b58\u6863\uff1a
+author1Label=\u4f5c\u8005\uff1a
+tag1Label=\u6807\u7b7e\uff1a
+sorryLabel=\u5bf9\u4e0d\u8d77\uff01
+notFoundLabel=\u627e\u4e0d\u5230\uff01
+returnTo1Label=\u8fd4\u56de\uff1a
+replyLabel=\u56de\u590d
+commentNameLabel=\u59d3\u540d
+commentEmailLabel=\u90ae\u7bb1
+commentURLLabel=URL
+submmitCommentLabel=\u63d0\u4ea4\u8bc4\u8bba
+nameTooLongLabel=\u59d3\u540d\u53ea\u80fd\u4e3a 2 \u5230 20 \u4e2a\u5b57\u7b26\uff01
+mailCannotEmptyLabel=\u90ae\u7bb1\u4e0d\u80fd\u4e3a\u7a7a\uff01
+mailInvalidLabel=\u90ae\u7bb1\u683c\u5f0f\u4e0d\u6b63\u786e\uff01
+commentContentCannotEmptyLabel=\u8bc4\u8bba\u5185\u5bb9\u53ea\u80fd\u4e3a 2 \u5230 500 \u4e2a\u5b57\u7b26\uff01
+captchaCannotEmptyLabel=\u9a8c\u8bc1\u7801\u4e0d\u80fd\u4e3a\u7a7a\uff01
+loadingLabel=\u8f7d\u5165\u4e2d....
+relevantArticlesLabel=\u76f8\u5173\u9605\u8bfb
+randomArticlesLabel=\u968f\u673a\u9605\u8bfb
+externalRelevantArticlesLabel=\u7ad9\u5916\u76f8\u5173\u9605\u8bfb
+captchaErrorLabel=\u9a8c\u8bc1\u7801\u9519\u8bef
+b3logLabel=<span style="color: orange;">B</span><span style="color: blue;"><sup>3</sup></span><span style="color: green;">L</span><span style="color: red;">O</span><span style="color: blue;">G</span>
+killBrowserLabel=<h2>\u8ba9\u6211\u4eec\u653e\u5f03\u4f7f\u7528\u90a3\u4e9b\u8fc7\u65f6\u3001\u4e0d\u5b89\u5168\u7684\u6d4f\u89c8\u5668\u5427\uff01</h2><p>\u4e3a\u4e86\u8ba9\u6d4f\u89c8\u5668\u66f4\u597d\u7684\u53d1\u5c55\uff0c\u4eba\u7c7b\u66f4\u52a0\u7684\u8fdb\u6b65\uff0c\u62e5\u6709\u66f4\u597d\u7684\u4f53\u9a8c\uff0c\u8ba9\u6211\u4eec\u653e\u5f03\u4f7f\u7528\u90a3\u4e9b\u8fc7\u65f6\u3001\u4e0d\u5b89\u5168\u7684\u6d4f\u89c8\u5668\u3002</p>\u60a8\u53ef\u4ee5\u4e0b\u8f7d<ul><li><a href="http://www.mozilla.com/" target="_blank">\u706b\u72d0</a></li><li><a href="http://www.google.com/chrome" target="_blank">\u8c37\u6b4c\u6d4f\u89c8\u5668</a></li><li><a href="http://windows.microsoft.com/en-US/internet-explorer/downloads/ie" target="_blank">IE8 / IE9</a></li><li><a href="http://www.maxthon.com/" target="_blank">\u9068\u6e38</a>\u6216\u8005<a href="http://www.google.com" target="_blank">\u5176\u5b83\u6d4f\u89c8\u5668</a>.</li></ul>
+noticeBoardLabel=¹«¸æ
--- a/bootstyle/macro-comments.ftl
+++ b/bootstyle/macro-comments.ftl
@ -0,0 +1,152 @@
+<#macro comments commentList article>
+<!-- comments -->
+<div id="comments" class="comments article-comments">
+    <#list commentList as comment>
+        <div class="media bs-docs-example-child" id="media_${comment.oId}">
+            <#if "http://" == comment.commentURL>
+                <a class="pull-left" title="${comment.commentName}"><img class="media-object img-polaroid" data-src="holder.js/64x64" style="width: 64px; height: 64px;" src="${comment.commentThumbnailURL}"></a>
+            <#else>
+                <a class="pull-left" href="${comment.commentURL}" target="_blank"><img class="media-object img-polaroid" data-src="holder.js/64x64" style="width: 64px; height: 64px;" src="${comment.commentThumbnailURL}"></a>
+            </#if>
+            <div class="media-body" id="${comment.oId}">
+                <h4 class="media-heading">
+                    <#if "http://" == comment.commentURL>
+                        <a>${comment.commentName}</a>
+                    <#else>
+                        <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+                    </#if>
+                    <#if comment.isReply>
+                        <i class="icon-share-alt"></i>
+                        <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+                           onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+                           onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
+                    </#if>
+                    <span class="pull-right" style="font-size: 12px;font-weight: normal;color: #676767;">
+                        <i class="icon-time"></i> ${comment.commentDate?string("yyyy-MM-dd HH:mm:ss")}
+                        <i class="icon-comment"></i><a rel="nofollow" href="javascript:replyTo('${comment.oId}');">${replyLabel}</a>
+                    </span>
+                </h4>
+                ${comment.commentContent}
+                <!-- Nested media object -->
+                <div class="media" ref="#media_${comment.commentOriginalCommentId}">
+                </div>
+            </div>
+        </div>
+    </#list>
+</div>
+
+<!-- Leave a comment -->
+<#if article.commentable>
+<form class="well form-horizontal" id="commentForm">
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-user"></i></span>
+            <input type="text" id="commentName" placeholder="${commentNameLabel}">
+        </div>
+    </div>
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-envelope"></i></span>
+            <input type="text" id="commentEmail" placeholder="${commentEmailLabel}">
+        </div>
+    </div>
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-globe"></i></span>
+            <input type="text" id="commentURL" placeholder="${commentURLLabel}">
+        </div>
+    </div>
+    <div class="control-group">
+        <span id="emotions">
+            <span class="em00" title="${em00Label}"></span>
+            <span class="em01" title="${em01Label}"></span>
+            <span class="em02" title="${em02Label}"></span>
+            <span class="em03" title="${em03Label}"></span>
+            <span class="em04" title="${em04Label}"></span>
+            <span class="em05" title="${em05Label}"></span>
+            <span class="em06" title="${em06Label}"></span>
+            <span class="em07" title="${em07Label}"></span>
+            <span class="em08" title="${em08Label}"></span>
+            <span class="em09" title="${em09Label}"></span>
+            <span class="em10" title="${em10Label}"></span>
+            <span class="em11" title="${em11Label}"></span>
+            <span class="em12" title="${em12Label}"></span>
+            <span class="em13" title="${em13Label}"></span>
+            <span class="em14" title="${em14Label}"></span>
+        </span>
+        <div>
+            <textarea rows="7" cols="96" id="comment" class="input-block-level"></textarea>
+        </div>
+    </div>
+    <div class="control-group">
+        <div class="input-prepend">
+            <span class="add-on"><i class="icon-check"></i></span>
+            <input type="text" id="commentValidate"/>
+            <img id="captcha" alt="validate" src="${servePath}/captcha.do" class="img-polaroid" style="margin-left: 5px;" />
+        </div>
+    </div>
+    <div class="form-actions form-actions-m pagination-right">
+        <span class="pull-left text-error" id="commentErrorTip"></span>
+        <button id="submitCommentButton" type="button" onclick="page.submitComment();" class="btn btn-primary">${submmitCommentLabel}</button>
+    </div>
+</form>
+<#if externalRelevantArticlesDisplayCount?? && 0 != externalRelevantArticlesDisplayCount>
+<div id="externalRelevantArticles" class="article-relative"></div>
+</#if>
+</#if>
+</#macro>
+
+<#macro comment_script oId>
+<script type="text/javascript" src="${staticServePath}/js/page${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<script type="text/javascript">
+    var page = new Page({
+        "nameTooLongLabel": "${nameTooLongLabel}",
+        "mailCannotEmptyLabel": "${mailCannotEmptyLabel}",
+        "mailInvalidLabel": "${mailInvalidLabel}",
+        "commentContentCannotEmptyLabel": "${commentContentCannotEmptyLabel}",
+        "captchaCannotEmptyLabel": "${captchaCannotEmptyLabel}",
+        "captchaErrorLabel": "${captchaErrorLabel}",
+        "loadingLabel": "${loadingLabel}",
+        "oId": "${oId}",
+        "skinDirName": "${skinDirName}",
+        "blogHost": "${blogHost}",
+        "randomArticles1Label": "${randomArticlesLabel}",
+        "externalRelevantArticles1Label": "${externalRelevantArticlesLabel}"
+    });
+
+    var addComment = function (result, state) {
+        var html = new Array();
+        html.push('<div class="media bs-docs-example-child" id="media_'+result.oId+'">');
+        html.push('<a class="pull-left" href="#" target="_blank">');
+        html.push('<img class="media-object img-polaroid" data-src="holder.js/64x64" style="width: 64px; height: 64px;" src="'+result.commentThumbnailURL+'">');
+        html.push('</a>');
+        html.push('<div class="media-body" id="'+result.oId+'">');
+        html.push('<h4 class="media-heading">');
+        html.push(result.replyNameHTML);
+        if (state !== "") {
+            html.push('&nbsp;<i class="icon-share-alt"></i>');
+            html.push('&nbsp;<a href="#'+page.currentCommentId+'">'+page.currentCommentId+'</a>');
+        }
+        html.push('<span class="pull-right" style="font-size: 12px;font-weight: normal;color: #676767;">');
+        html.push('<i class="icon-time"></i> '+ result.commentDate.substring(0, 19));
+        html.push('&nbsp;<i class="icon-comment"></i>');
+        html.push('<a rel="nofollow" href="javascript:replyTo(\''+result.oId+'\');">${replyLabel}</a>');
+        html.push('</span>');
+        html.push('</h4>');
+        html.push(Util.replaceEmString($("#comment" + state).val().replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\n/g,"<br/>")));
+        return html.join('');
+    }
+
+    var replyTo = function (id) {
+        var commentFormHTML = "<form class='well form-horizontal' id='replyForm'>";
+        page.addReplyForm(id, commentFormHTML,'</form>');
+    };
+
+    (function () {
+        page.load();
+        // emotions
+        page.replaceCommentsEm("#comments .article-body");
+            <#nested>
+    })();
+</script>
+</#macro>
--- a/bootstyle/macro-head.ftl
+++ b/bootstyle/macro-head.ftl
@ -0,0 +1,12 @@
+<#macro head title>
+<meta charset="utf-8" />
+<title>${title}</title>
+<#nested>
+<meta http-equiv="Window-target" content="_top" />
+<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/bootstrap/css/bootstrap${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
+<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/bootstrap/css/bootstrap-responsive${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
+<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
+<link href="${servePath}/blog-articles-feed.do" title="ATOM" type="application/atom+xml" rel="alternate" />
+<link rel="icon" type="image/png" href="${staticServePath}/favicon.png" />
+${htmlHead}
+</#macro>
--- a/bootstyle/page.ftl
+++ b/bootstyle/page.ftl
@ -0,0 +1,25 @@
+<#include "macro-head.ftl">
+<#include "macro-comments.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${page.pageTitle} - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${page.pageTitle}" />
+        <meta name="description" content="${metaDescription}" />
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <#include "header.ftl">
+        <div class="main">
+            <div class="wrapper">
+                <div class="article-body article">
+                    ${page.pageContent}
+                </div>
+                <@comments commentList=pageComments article=page></@comments>
+            </div>
+        </div>
+        <#include "footer.ftl">
+        <@comment_script oId=page.oId></@comment_script>
+    </body>
+</html>
--- a/bootstyle/preview.png
+++ b/bootstyle/preview.png
--- a/bootstyle/side.ftl
+++ b/bootstyle/side.ftl
@ -0,0 +1,136 @@
+<#if "" != noticeBoard>
+<section class="widget-1 widget">
+    <div class="widget-inner">
+        <h4>${noticeBoardLabel}</h4>
+        <p>${noticeBoard}</p>
+    </div>
+</section>
+</#if>
+
+<#if 0 != recentComments?size>
+<section id="widget_recent_comments" class="widget-2 widget comments">
+    <div class="widget-inner"><h4>${recentCommentsLabel}</h4>
+        <ul>
+            <#list recentComments as comment>
+            <li class="recentcomments">
+                <a target="_blank" rel="external nofollow" href="${comment.commentURL}" class="url">${comment.commentName}:</a>
+                <a rel="external nofollow" class=" breakline url" href="${comment.commentSharpURL}">
+                    ${comment.commentContent}
+                </a>
+            </li>
+            </#list>
+        </ul>
+    </div>
+</section>
+</#if>
+
+<#if 0 != mostCommentArticles?size>
+<section class="widget-3 widget">
+    <div class="widget-inner">
+        <h4>${mostCommentArticlesLabel}</h4>
+        <ul>
+            <#list mostCommentArticles as article>
+            <li>
+                <a href="${article.articlePermalink}">
+                    [${article.articleCommentCount}] ${article.articleTitle}
+                </a>
+            </li>
+            </#list>
+        </ul>
+    </div>
+</section>
+</#if>
+
+<#if 0 != mostViewCountArticles?size>
+<section class="widget-4 widget">
+    <div class="widget-inner">
+        <h4>${mostViewCountArticlesLabel}</h4>
+        <ul>
+            <#list mostViewCountArticles as article>
+            <li>
+                <a href="${article.articlePermalink}">
+                    [${article.articleViewCount}] ${article.articleTitle}
+                </a>
+            </li>
+            </#list>
+        </ul>
+    </div>
+</section>
+</#if>
+
+<#if 0 != mostUsedTags?size>
+<section class="widget-5 widget">
+    <div class="widget-inner">
+        <h4>${popTagsLabel}</h4>
+        <ul>
+            <#list mostUsedTags as tag>
+                <span class="tag">
+                    <#if (tag.tagPublishedRefCount/3 > 5 ) >
+					<a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagPublishedRefCount}">
+                        <span class="badge badge-inverse">${tag.tagTitle}</span>
+                    </a>
+                    <#elseif (tag.tagPublishedRefCount/3 > 4 ) >
+                        <a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagPublishedRefCount}">
+                            <span class="badge badge-info">${tag.tagTitle}</span>
+                        </a>
+                    <#elseif (tag.tagPublishedRefCount/3 > 3 ) >
+                        <a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagPublishedRefCount}">
+                            <span class="badge badge-success">${tag.tagTitle}</span>
+                        </a>
+                    <#elseif (tag.tagPublishedRefCount/3 > 2 ) >
+                        <a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagPublishedRefCount}">
+                            <span class="badge badge-important">${tag.tagTitle}</span>
+                        </a>
+                    <#elseif (tag.tagPublishedRefCount/3 > 1 ) >
+                        <a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagPublishedRefCount}">
+                            <span class="badge badge-warning">${tag.tagTitle}</span>
+                        </a>
+                    <#elseif (tag.tagPublishedRefCount/3 > 0 ) >
+                        <a href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagPublishedRefCount}">
+                            <span class="badge">${tag.tagTitle}</span>
+                        </a>
+                    </#if>
+				</span>
+            </#list>
+        </ul>
+    </div>
+</section>
+</#if>
+
+<#if 0 != archiveDates?size>
+<section class="widget-6 widget">
+    <div class="widget-inner">
+        <h4>${archiveLabel}</h4>
+        <ul>
+            <#list archiveDates as archiveDate>
+            <#if "en" == localeString?substring(0, 2)>
+                <li><a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
+                       title="${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})">
+                ${archiveDate.monthName} ${archiveDate.archiveDateYear}</a>(${archiveDate.archiveDatePublishedArticleCount})</li>
+            <#else>
+                <li><a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
+                       title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
+                ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}</a>(${archiveDate.archiveDatePublishedArticleCount})</li>
+            </#if>
+            </#list>
+        </ul>
+    </div>
+</section>
+</#if>
+
+<#if 0 != links?size>
+<section class="widget-7 widget">
+    <div class="widget-inner">
+        <h4>${linkLabel}</h4>
+        <ul>
+            <#list links as link>
+                <li>
+                    <a href="${link.linkAddress}" title="${link.linkTitle}" target="_blank">
+                        ${link.linkTitle}
+                    </a>
+                </li>
+            </#list>
+        </ul>
+    </div>
+</section>
+</#if>
--- a/bootstyle/skin.properties
+++ b/bootstyle/skin.properties
@ -0,0 +1,27 @@
+#
+# Copyright (C) 2009, 2010, 2011, B3log Team
+#
+# Licensed under the Apache License, Version 2.0 (the "License");
+# you may not use this file except in compliance with the License.
+# You may obtain a copy of the License at
+#
+#     http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing, software
+# distributed under the License is distributed on an "AS IS" BASIS,
+# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+# See the License for the specific language governing permissions and
+# limitations under the License.
+#
+
+#
+# Description: ease skin.
+# Version: 1.0.0.3, Nov 21, 2012
+# Author: Liyuan Li
+# Author: Liang Ding
+#
+
+name=bootstyle
+version=1.0.0
+forSolo=0.5.5
+memo=Bootstrap style for B3log
--- a/bootstyle/tag-articles.ftl
+++ b/bootstyle/tag-articles.ftl
@ -0,0 +1,31 @@
+<#include "macro-head.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${tag.tagTitle} - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
+        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body class="home page top-navbar">
+        <#include "header.ftl">
+        <div id="wrap" class="container" role="document">
+            <div id="content" class="row">
+                <div id="main" class="span8" role="main">
+                    <h4>
+                        <a rel="alternate" href="${servePath}/tag-articles-feed.do?oId=${tag.oId}">
+                        ${tag1Label}
+                        ${tag.tagTitle}
+                            (${tag.tagPublishedRefCount})
+                        </a>
+                    </h4>
+                    <#include "article-list.ftl">
+                </div>
+                <aside id="sidebar" class="span4">
+                <#include "side.ftl">
+                </aside>
+            </div>
+        </div>
+        <#include "footer.ftl">
+    </body>
+</html>
--- a/bootstyle/tags.ftl
+++ b/bootstyle/tags.ftl
@ -0,0 +1,38 @@
+<#include "macro-head.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${allTagsLabel} - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${allTagsLabel}"/>
+        <meta name="description" content="<#list tags as tag>${tag.tagTitle}<#if tag_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body class="home page top-navbar">
+        <#include "header.ftl">
+        <div id="wrap" class="container" role="document">
+            <div id="content" class="row">
+                <div id="main" class="span8" role="main">
+                    <ul id="tags" class="other-main">
+                    <#list tags as tag>
+                        <li>
+                            <a rel="tag" data-count="${tag.tagPublishedRefCount}"
+                               href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" title="${tag.tagTitle}">
+                                <span>${tag.tagTitle}</span>
+                                (<b>${tag.tagPublishedRefCount}</b>)
+                            </a>
+                        </li>
+                    </#list>
+                    </ul>
+                    <div class="clear"></div>
+                </div>
+                <aside id="sidebar" class="span4">
+                <#include "side.ftl">
+                </aside>
+            </div>
+        </div>
+        <#include "footer.ftl">
+        <script type="text/javascript">
+            Util.buildTags();
+        </script>
+    </body>
+</html>