💯 子模块目录调整

2018-09-01 10:11:54 +08:00
parent aeff137ee1
commit 0efe4b58c0
662 changed files with 2155 additions and 5125 deletions
--- a/metro-hot/archive-articles.ftl
+++ b/metro-hot/archive-articles.ftl
@@ -0,0 +1,75 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!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>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>
+                        ${archive1Label}
+                        <#if "en" == localeString?substring(0, 2)>
+                        ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear} (${archiveDate.archiveDatePublishedArticleCount})
+                        <#else>
+                        ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} (${archiveDate.archiveDatePublishedArticleCount})
+                        </#if>
+                    </h2>
+                    <#if 0 != paginationPageCount>
+                    <div class="pagination">
+                        <#if 1 != paginationPageNums?first>
+                        <a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
+                           title="${previousPageLabel}"><</a>
+                        </#if>
+                        <#list paginationPageNums as paginationPageNum>
+                        <#if paginationPageNum == paginationCurrentPageNum>
+                        <span>${paginationPageNum}</span>
+                        <#else>
+                        <a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
+                        </#if>
+                        </#list>
+                        <#if paginationPageNums?last != paginationPageCount>
+                        <a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
+                        </#if>
+                    </div>
+                    </#if>
+                </div>
+            </div> 
+            <div class="fn-clear">
+                <div class="main">
+                    <#include "article-list.ftl"/>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/archives.ftl
+++ b/metro-hot/archives.ftl
@@ -0,0 +1,64 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
+        <meta name="description" content="${metaDescription},${archiveLabel}"/>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>${dateArticlesLabel}</h2>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <#if 0 != archiveDates?size>
+                    <div class="archives fn-clear">
+                        <#list archiveDates as archiveDate>
+                        <#if "en" == localeString?substring(0, 2)>
+                        <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
+                           title="${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})">
+                            ${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})</a>
+                        <#else>
+                        <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
+                           title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
+                            ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})</a>
+                        </#if>
+                        </#list>
+                    </div>
+                    </#if>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/article-list.ftl
+++ b/metro-hot/article-list.ftl
@@ -0,0 +1,92 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<div class="article-list fn-clear">
+    <#list articles as article>
+    <div>
+        <div class="article-abstract">
+            <div class="fn-clear">
+                <div class="article-date" data-ico="&#xe200;">
+                    <#if article.hasUpdated>
+                    ${article.articleUpdateDate?string("yy-MM-dd HH:mm")}
+                    <#else>
+                    ${article.articleCreateDate?string("yy-MM-dd HH:mm")}
+                    </#if>  
+                </div>
+                <div class="fn-right">
+                    <a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${article.articlePermalink}#comments">
+                        ${article.articleCommentCount}
+                    </a>
+                    <a rel="nofollow" data-ico="&#xe185;" href="${servePath}${article.articlePermalink}">
+                        ${article.articleViewCount}
+                    </a>
+                    <a rel="nofollow" data-ico="&#x0060;" href="${servePath}/authors/${article.authorId}">
+                        ${article.authorName}
+                    </a>
+                </div>
+            </div>
+
+            <h2 class="article-title">
+                <#if article.hasUpdated>
+                <span>
+                    [${updatedLabel}]
+                </span>
+                </#if>
+                <#if article.articlePutTop>
+                <span>
+                    [${topArticleLabel}]
+                </span>
+                </#if>
+                <a rel="bookmark" title="${article.articleTitle}" href="${servePath}${article.articlePermalink}">
+                    ${article.articleTitle}
+                </a>
+            </h2>
+            <div class="article-body">
+                ${article.articleAbstract}
+            </div>
+            <div data-ico="&#x003b;" title="${tagLabel}" class="article-tags">
+                <#list article.articleTags?split(",") as articleTag>
+                <a  rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
+                    ${articleTag}</a><#if articleTag_has_next>, </#if>
+                </#list>
+            </div>
+        </div>
+    </div>
+    </#list>
+</div>
+
+<#if 0 != paginationPageCount>
+<div class="pagination">
+    <#if 1 != paginationPageNums?first>
+    <a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
+       title="${previousPageLabel}"><</a>
+    </#if>
+    <#list paginationPageNums as paginationPageNum>
+    <#if paginationPageNum == paginationCurrentPageNum>
+    <span>${paginationPageNum}</span>
+    <#else>
+    <a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
+    </#if>
+    </#list>
+    <#if paginationPageNums?last != paginationPageCount>
+    <a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
+    </#if>
+    </#if>
+</div>
+
--- a/metro-hot/article.ftl
+++ b/metro-hot/article.ftl
@@ -0,0 +1,129 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-comments.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${article.articleTitle} - ${blogTitle}">
+        <meta name="keywords" content="${article.articleTags}" />
+        <meta name="description" content="${article.articleAbstract?html}" />
+        </@head>
+        <#if previousArticlePermalink??>
+            <link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
+        </#if>
+        <#if nextArticlePermalink??>
+            <link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
+        </#if>
+            <!-- Open Graph -->
+            <meta property="og:locale" content="zh_CN"/>
+            <meta property="og:type" content="article"/>
+            <meta property="og:title" content="${article.articleTitle}"/>
+            <meta property="og:description" content="${article.articleAbstract?html}"/>
+            <meta property="og:image" content="${article.authorThumbnailURL}"/>
+            <meta property="og:url" content="${servePath}${article.articlePermalink}"/>
+            <meta property="og:site_name" content="Solo"/>
+            <!-- Twitter Card -->
+            <meta name="twitter:card" content="summary"/>
+            <meta name="twitter:description" content="${article.articleAbstract?html}"/>
+            <meta name="twitter:title" content="${article.articleTitle}"/>
+            <meta name="twitter:image" content="${article.authorThumbnailURL}"/>
+            <meta name="twitter:url" content="${servePath}${article.articlePermalink}"/>
+            <meta name="twitter:site" content="@DL88250"/>
+            <meta name="twitter:creator" content="@DL88250"/>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl">
+                <div class="article-header">
+                    <span class="article-date" data-ico="&#xe200;">
+                        <#if article.hasUpdated>
+                        ${article.articleUpdateDate?string("yy-MM-dd HH:mm")}
+                        <#else>
+                        ${article.articleCreateDate?string("yy-MM-dd HH:mm")}
+                        </#if>
+                    </span>
+
+                    <h2>  
+                        <#if article.hasUpdated>
+                        <span>
+                            [${updatedLabel}]
+                        </span>
+                        </#if>
+                        <#if article.articlePutTop>
+                        <span>
+                            [${topArticleLabel}]
+                        </span>
+                        </#if>
+                        ${article.articleTitle}
+                    </h2>
+                    <div data-ico="&#x003b;" title="${tagLabel}">
+                        <#list article.articleTags?split(",") as articleTag>
+                        <a rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a><#if articleTag_has_next>,</#if>
+                        </#list>
+                    </div>
+                    <div class="article-info">
+                        <a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${article.articlePermalink}#comments">
+                            ${article.articleCommentCount}
+                        </a>
+                        <a rel="nofollow" data-ico="&#xe185;" href="${servePath}${article.articlePermalink}">
+                            ${article.articleViewCount}
+                        </a>
+                        <a rel="nofollow" data-ico="&#x0060;" href="${servePath}/authors/${article.authorId}">
+                            ${article.authorName}
+                        </a>
+                    </div>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <div class="article-body">
+                        ${article.articleContent}
+                        <#if "" != article.articleSign.signHTML?trim>
+                        ${article.articleSign.signHTML}
+                        </#if>
+                    </div>
+                    <@comments commentList=articleComments article=article></@comments>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=true />
+            </div>
+        </div>
+        <#include "footer.ftl">
+        <@comment_script oId=article.oId>
+        MetroHot.tips = {
+            externalRelevantArticlesDisplayCount: "${externalRelevantArticlesDisplayCount}",
+        blogHost: "${blogHost}"
+        }
+        <#if 0 != randomArticlesDisplayCount>
+        MetroHot.loadRandomArticles();
+        </#if>
+        <#if 0 != relevantArticlesDisplayCount>
+        MetroHot.loadRelevantArticles('${article.oId}', '<h4>${relevantArticles1Label}</h4>');
+        </#if>
+        <#if 0 != externalRelevantArticlesDisplayCount>
+        MetroHot.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>");
+        </#if>
+        </@comment_script>   
+    </body>
+</html>
--- a/metro-hot/author-articles.ftl
+++ b/metro-hot/author-articles.ftl
@@ -0,0 +1,50 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${authorName} - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${authorName}"/>
+        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>${author1Label}${authorName} </h2>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <#include "article-list.ftl"/>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/category-articles.ftl
+++ b/metro-hot/category-articles.ftl
@@ -0,0 +1,72 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${category.categoryTitle} - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${category.categoryTitle}"/>
+        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>
+                        ${categoryLabel}:
+                        ${category.categoryTitle}
+                        (${category.categoryTagCnt})<small> ${category.categoryDescription}</small>
+                    </h2>
+                    <#if 0 != paginationPageCount>
+                    <div class="pagination">
+                        <#if 1 != paginationPageNums?first>
+                        <a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
+                           title="${previousPageLabel}"><</a>
+                        </#if>
+                        <#list paginationPageNums as paginationPageNum>
+                        <#if paginationPageNum == paginationCurrentPageNum>
+                        <span>${paginationPageNum}</span>
+                        <#else>
+                        <a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
+                        </#if>
+                        </#list>
+                        <#if paginationPageNums?last != paginationPageCount>
+                        <a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
+                        </#if>
+                    </div>
+                    </#if>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <#include "article-list.ftl"/>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/category.ftl
+++ b/metro-hot/category.ftl
@@ -0,0 +1,59 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${categoryLabel} - ${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${categoryLabel}"/>
+        <meta name="description" content="<#list mostUsedCategories as category>${category.categoryTitle}<#if category_has_next>,</#if></#list>"/>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>${categoryLabel}</h2>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <ul id="tags" class="archives fn-clear">
+                        <#list mostUsedCategories as category>
+                            <li>
+                                <a href="${servePath}/category/${category.categoryURI}">
+                                    <span>${category.categoryTitle}</span>
+                                    (<b>${category.categoryTagCnt}</b>)</a>
+                                </a>
+                            </li>
+                        </#list>
+                    </ul>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/common-comment.ftl
+++ b/metro-hot/common-comment.ftl
@@ -0,0 +1,48 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<div id="${comment.oId}" class="fn-clear">
+    <img title="${comment.commentName}"
+         alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
+    <div class="comment-main">
+        <div class="fn-clear">
+        <#if "http://" == comment.commentURL>
+            <span>${comment.commentName}</span>
+        <#else>
+            <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+        </#if>
+
+        <#if comment.isReply>
+            <span class="at">@</span>
+            <a class="user-name" href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+               onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+               onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
+        </#if>
+
+        <#if article.commentable>
+            <a data-ico="&#x0056;" rel="nofollow" href="javascript:replyTo('${comment.oId}');" title="${replyLabel}"></a>
+        </#if>
+
+            <div class="fn-right" data-ico="&#xe200;">
+            ${comment.commentDate2?string("yy-MM-dd HH:mm")}
+            </div>
+        </div>
+        <div class="article-body">${comment.commentContent}</div>
+    </div>
+</div>
--- a/metro-hot/copyright.ftl
+++ b/metro-hot/copyright.ftl
@@ -0,0 +1,26 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<div class="footer">
+    <span class="ft-gray">&copy; ${year}</span> -
+    <a href="${servePath}">${blogTitle}</a>${footerContent} Powered by <a href="https://b3log.org" target="_blank">B3log 开源</a> • <a href="https://solo.b3log.org" target="_blank">Solo</a> ${version}&nbsp;&nbsp;
+    Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">metro-hot</a>
+    by
+    <a rel="friend" rel="friend" href="http://vanessa.b3log.org" target="_blank">Vanessa</a>.
+</div>
--- a/metro-hot/css/font/IcoMoon.eot
+++ b/metro-hot/css/font/IcoMoon.eot
--- a/metro-hot/css/font/IcoMoon.svg
+++ b/metro-hot/css/font/IcoMoon.svg
--- a/metro-hot/css/font/IcoMoon.ttf
+++ b/metro-hot/css/font/IcoMoon.ttf
--- a/metro-hot/css/font/IcoMoon.woff
+++ b/metro-hot/css/font/IcoMoon.woff
--- a/metro-hot/css/metro-hot-responsive.css
+++ b/metro-hot/css/metro-hot-responsive.css
@@ -0,0 +1,215 @@
+/**
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/*
+* skin metro-hot responsive style
+*
+* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+* @version 1.0.0.6, Sep 30, 2013
+*/
+@media (max-width: 860px) and (min-width: 460px) {
+    .wrapper {
+        width: 720px;
+    }
+
+    .main {
+        width: 460px;
+    }
+
+    .form {
+        width: auto;
+    }
+
+    .form input {
+        width: 395px;
+    }
+
+    .form textarea {
+        width: 434px;
+    }
+
+    .em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, .em10, .em11, .em12, .em13, .em14 {
+        margin-right: 4px;
+    }
+
+    #comments .article-body {
+        width: 340px;
+    }
+
+    #dynamic #comments .article-body {
+        width: 283px;
+    }
+
+    .most-comment,
+    .most-view {
+        width: 300px;
+        margin-bottom: 20px;
+        margin-top: 40px;
+    }
+
+    .most-comment .text,
+    .most-view .text {
+        width: 195px;
+    }
+
+    .tags-tile,
+    .links-tile,
+    .archives-tile {
+        width: 670px;
+    }
+
+    .tags-tile .text,
+    .links-tile .text,
+    .archives-tile .text {
+        width: 580px;
+    }
+
+    .links-tile,
+    .tags-tile {
+        margin-left: 0;
+    }
+}
+
+@media (max-width: 460px) {
+    .side,
+    .top-info,
+    .header > .fn-left,
+    .comment-main {
+        float: none;
+    }
+
+    .wrapper,
+    .article-list > div,
+    .main,
+    .side {
+        width: 300px;
+    }
+
+    .sub-nav > .pagination,
+    .footer,
+    #comments > div > img,
+    #emotions {
+        display: none;
+    }
+
+    #search {
+        width: 237px;
+    }
+
+
+    .side-tile {
+        width: 94px;
+    }
+
+    .online-count, 
+    .user, 
+    .notice-board,
+    .share,
+    .article-relative {
+        width: 249px;   
+    }
+
+    .main .pagination,
+    .main > .article-body,
+    .comment-disabled,
+    #comments > div {
+        margin-right: 0;
+    }
+
+    .side > div,
+    #comments .article-body {
+        position: static !important;
+        width: auto !important;
+    }
+
+    .share div.text {
+        left: 173px;
+    }
+
+    .form {
+        width: auto;
+    }
+
+    .form input {
+        width: 240px;
+    }
+
+    .form textarea {
+        width: 285px;
+        height: 150px;
+    }
+
+    #dynamic .main {
+        margin-bottom: 20px;
+    }
+
+    .tags-tile {
+        margin-bottom: 50px;
+    }
+
+    .article-title {
+        width: 280px;
+    }
+
+    .archives {
+        margin-right: 0;
+    }
+
+    .article-info > a {
+        padding: 3px;
+        font-size: 12px;
+    }
+
+    #dynamic #comments {
+        padding-left: 15px;
+    }
+
+    .tags-tile .title,
+    .links-tile .title,
+    .most-comment .title,
+    .most-view .title {
+        float: right;
+        font-size: 15px;
+        font-weight: bold;
+        margin: 20px 0 0 40px;
+    }
+
+    .most-comment,
+    .most-view {
+        width: 249px;
+        margin-left: 0;
+    }
+
+    .most-comment .text,
+    .most-view .text {
+        margin-right: 0;
+        width: 274px;
+        font-size: 12px;
+        font-weight: normal;
+    }
+
+    .tags-tile,
+    .links-tile {
+        width: 249px;
+        margin-left: 0;
+    }
+
+    .tags-tile .text,
+    .links-tile .text {
+        width: 249px;
+    }
+}
--- a/metro-hot/css/metro-hot-responsive.min.css
+++ b/metro-hot/css/metro-hot-responsive.min.css
@@ -0,0 +1,18 @@
+/**
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+@media (max-width:860px) and (min-width:460px){.wrapper{width:720px}.main{width:460px}.form{width:auto}.form input{width:395px}.form textarea{width:434px}.em00,.em01,.em02,.em03,.em04,.em05,.em06,.em07,.em08,.em09,.em10,.em11,.em12,.em13,.em14{margin-right:4px}#comments .article-body{width:340px}#dynamic #comments .article-body{width:283px}.most-comment,.most-view{width:300px;margin-bottom:20px;margin-top:40px}.most-comment .text,.most-view .text{width:195px}.archives-tile,.links-tile,.tags-tile{width:670px}.archives-tile .text,.links-tile .text,.tags-tile .text{width:580px}.links-tile,.tags-tile{margin-left:0}}@media (max-width:460px){#comments>div,.archives,.comment-disabled,.main .pagination,.main>.article-body{margin-right:0}.comment-main,.header>.fn-left,.side,.top-info{float:none}.article-list>div,.main,.side,.wrapper{width:300px}#comments>div>img,#emotions,.footer,.sub-nav>.pagination{display:none}#search{width:237px}.side-tile{width:94px}.article-relative,.notice-board,.online-count,.share,.user{width:249px}#comments .article-body,.side>div{position:static!important;width:auto!important}.share div.text{left:173px}.form{width:auto}.form input{width:240px}.form textarea{width:285px;height:150px}#dynamic .main{margin-bottom:20px}.tags-tile{margin-bottom:50px}.article-title{width:280px}.article-info>a{padding:3px;font-size:12px}#dynamic #comments{padding-left:15px}.links-tile .title,.most-comment .title,.most-view .title,.tags-tile .title{float:right;font-size:15px;font-weight:700;margin:20px 0 0 40px}.most-comment,.most-view{width:249px;margin-left:0}.most-comment .text,.most-view .text{margin-right:0;width:274px;font-size:12px;font-weight:400}.links-tile,.tags-tile{width:249px;margin-left:0}.links-tile .text,.tags-tile .text{width:249px}}
--- a/metro-hot/css/metro-hot.css
+++ b/metro-hot/css/metro-hot.css
@@ -0,0 +1,988 @@
+/**
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+@charset "utf-8";
+/*
+* skin metro-hot style
+*
+* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+* @version 1.1.0.0, Sep 21, 2017
+*/
+/* start base */
+@font-face {
+    font-family: 'IcoMoon';
+    src: url('font/IcoMoon.eot');
+    src: url('font/IcoMoon.eot?#iefix') format('embedded-opentype'),
+        url('font/IcoMoon.svg#IcoMoon') format('svg'),
+        url('font/IcoMoon.woff') format('woff'),
+        url('font/IcoMoon.ttf') format('truetype');
+    font-weight: normal;
+    font-style: normal;
+}
+
+/* Use the following CSS code if you want to use data attributes for inserting your icos */
+[data-ico]:before {
+    font-family: 'IcoMoon';
+    content: attr(data-ico);
+    speak: none;
+    cursor: pointer;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+    -ms-text-size-adjust: 100%;
+}
+
+body {
+    font-family: Verdana, arial, '\5fae\8f6f\96c5\9ed1';
+    font-size: 12px;
+    background-color: #292929;
+    min-height: 1990px;
+    margin: 0;
+    color: #D1D2D1;
+}
+
+a {
+    outline: 0;
+    text-decoration: none;
+    color: #BDBEBD;
+}
+
+a:hover {
+    color: #FFF;
+}
+
+a:focus {
+    color: #9E0B0E !important;
+}
+
+sub,
+sup {
+    position: relative;
+    font-size: 70%;
+    line-height: 0;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+img {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+    -ms-interpolation-mode: bicubic;
+}
+
+button,
+input,
+select,
+textarea {
+    margin: 0;
+    font-size: 100%;
+    vertical-align: middle;
+    font-family: '\5fae\8f6f\96c5\9ed1';
+    outline: none;
+}
+
+button,
+input {
+    line-height: normal;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    padding: 0;
+    border: 0;
+}
+
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    cursor: pointer;
+    -webkit-appearance: button;
+}
+
+input[type="search"] {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    -webkit-appearance: textfield;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+textarea {
+    overflow: auto;
+    vertical-align: top;
+}
+
+::selection {
+    background-color: #D5D5D5;
+    color: #FCFCFC;
+}
+
+::-moz-selection {
+    background-color: #D5D5D5;
+    color: #FCFCFC;
+}
+
+.fn-clear:before,
+.fn-clear:after {
+    display: table;
+    content: "";
+}
+
+.fn-clear:after {
+    clear: both;
+}
+
+.fn-left {
+    float: left;
+}
+
+.fn-right {
+    float: right;
+}
+
+.fn-none {
+    display: none;
+}
+
+.fn-ellipsis {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    word-wrap: normal;
+}
+
+
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, 
+.em10, .em11, .em12, .em13, .em14 {
+    cursor: pointer;
+    background-image: url("../../../images/emotions/emotions.png");
+    background-size: 120px;
+    float: left;
+    height: 24px;
+    margin-right: 8px;
+    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;
+}
+
+.footer a:hover,
+.article-relative a:hover,
+.article-abstract .article-title a:hover,
+.article-abstract .article-tags a:hover,
+.article-body a {
+    text-decoration: underline;
+}
+
+.article-body a:hover {
+    text-decoration: none;
+}
+/* end base */
+
+/* start frame */
+.wrapper {
+    height: auto;
+    margin: 30px auto 10px;
+    width: 1190px;
+}
+
+.footer {
+    background-color: #141414;
+    color: #FFF;
+    padding: 30px;
+    margin-right: 10px;
+}
+
+.main {
+    float: left;
+    width: 920px;
+}
+
+/* end frame */
+
+/* start header */
+.header {
+    position: relative;
+}
+
+.header .title {
+    color: #E61E1E;
+    padding: 30px 0;
+}
+
+.header .title:hover {
+    color: #CA1B1E;
+}
+
+.header .title > span:before {
+    color: inherit;
+}
+
+.top-info {
+    font-size: 38px;
+    height: 46px;
+    line-height: 46px;
+}
+
+.top-info > hr {
+    background-color: #7B7B7B;
+    border: 0 none;
+    display: inline-block;
+    height: 42px;
+    margin: 2px 10px;
+    padding: 0;
+    vertical-align: top;
+    width: 1px;
+}
+
+.top-info a {
+    color: #FFF;
+}
+
+.top-info a:hover {
+    color: #CA1B1E;
+}
+
+#showTop {
+    display: none;
+}
+
+.sub-nav {
+    background-color: #E61E1E;
+    color: #FFF;
+    padding: 30px;
+    margin: 30px 0;
+}
+
+.sub-nav > h2 {
+    float: left;
+    margin: 0;
+}
+
+.pagination {
+    float: right;
+    margin-top: 5px;
+}
+
+.pagination > a,
+.pagination > span {
+    background-color: #EA4040;
+    color: #FFF;
+    padding: 6px 7px;
+    text-align: center;
+    font-weight: bold;
+}
+
+.pagination > a:hover,
+.pagination > span {
+    color: #E61E1E;
+    background-color: #FFF;
+}
+
+.navigation {
+    background-color: #FFF;
+    border: 2px solid #BABABA;
+    left: 0;
+    list-style: none outside none;
+    margin: 0;
+    min-width: 223px;
+    padding: 0;
+    position: absolute;
+    top: 63px;
+    z-index: 1;
+    display: none;
+}
+
+.navigation a {
+    background-color: #FFF;
+    border-bottom: 1px solid #BABABA;
+    color: #333;
+    display: block;
+    padding: 10px 15px;
+}
+
+.navigation a:hover {
+    background-color: #E61E1E;
+    color: #FFFFFF;
+}
+
+.navigation a.lats {
+    border-bottom-width: 0;
+}
+
+.navigation .page-icon {
+    float: left;
+    height: 14px;
+    width: 14px;
+    margin: 2px 5px 0 0;
+}
+/* end header */
+
+/* start article list */
+.main .pagination {
+    float: none;
+    padding: 20px 0 25px;
+    text-align: right;
+    margin-right: 10px;
+    line-height: 34px;
+}
+
+.article-list > div {
+    background-color: #323232;
+    float: left;
+    height: 220px;
+    margin: 5px 10px 5px 0;
+    overflow: hidden;
+    position: relative;
+    width: 450px;
+}
+
+.article-abstract {
+    background-color: #3E3E3E;
+    opacity: 0.9;
+    filter: alpha(opacity=90);
+    position: absolute;
+    top: 0;
+    width: 100%;
+    transition: all 1.2s;
+    height: 100%;
+}
+
+.article-image {
+    top: 151px;
+}
+
+.article-list > div:hover .article-image {
+    top: 0;
+}
+
+.article-list > div > img {
+    max-width: 100%;
+    transition: all 1.2s;
+    display: block;
+    margin: 0 auto;
+}
+
+.article-list > div:hover > img {
+    transform: scale(1.2);
+}
+
+.article-date {
+    float: left;
+    margin: 10px;
+}
+
+.article-title {
+    height: 24px;
+    line-height: 24px;
+    margin: 0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 430px;
+    font-weight: normal;
+}
+
+.article-title span {
+    color: #E61E1E;
+}
+
+.article-title a {
+    color: #F8F7F7;
+}
+
+.article-title sup {
+    color: #9E0B0E;
+}
+
+.article-abstract .fn-right {
+    display: none;
+    position: absolute;
+    right: 0;
+}
+
+.article-abstract:hover .fn-right {
+    display: block;
+}
+
+.article-abstract .fn-right > a {
+    background-color: #FFF;
+    color: #E61E1E;
+    float: left;
+    padding: 10px;
+    transition: all 0.8s;
+}
+
+.article-abstract .fn-right > a:hover {
+    color: #FFF;
+    background-color: #E61E1E;
+}
+
+.article-abstract > .article-tags {
+    margin: 10px 0 0 10px;
+}
+
+.article-abstract > .article-body {
+    margin: 10px;
+    overflow: hidden;
+    white-space: inherit;
+    word-wrap: break-word;
+    padding: 10px;
+    height: 95px;
+}
+/* end article list */
+
+/* start side */
+.side {
+    float: right;
+    width: 240px;
+}
+
+#search {
+    background-color: #FFF;
+    border: 0 none;
+    color: #3A3A3A;
+    height: 50px;
+    margin-top: 5px;
+    padding: 0 10px;
+    width: 177px;
+    transition: all 0.3s ease-out 0s;
+}
+
+.side form > span {
+    background-color: #FFF;
+    color: #3A3A3A;
+    float: right;
+    font-size: 25px;
+    height: 32px;
+    margin-top: 5px;
+    padding: 9px;
+}
+
+.side-tile {
+    color: #FFF;
+    float: left;
+    margin-top: 20px;
+    padding: 15px 25px 15px 25px;
+    position: relative;
+    background-color: #F09609;
+    width: 65px;
+    transition: all 0.3s ease-out 0s;
+}
+
+.side-tile:hover,
+.side form input:focus,
+.form input:focus,
+.form textarea:focus,
+.form button:hover,
+#dynamic .footer:hover {
+    outline: 3px solid #BABABA;
+}
+
+.side-tile > span {
+    display: block;
+    font-size: 60px;
+    text-align: center;
+    width: 60px;;
+}
+
+.side-tile > .title {
+    line-height: 17px;
+}
+
+.side-tile > .text {
+    font-size: 15px;
+    font-weight: bold;
+    left: 93px;
+    line-height: 30px;
+    position: absolute;
+    top: 20px;
+}
+
+.side-tile > .text a {
+    color: #FFF;
+}
+
+.online-count,
+.user,
+.notice-board,
+.share,
+.article-relative {
+    width: 188px;
+}
+
+.translate,
+.register,
+.logout,
+.prev,
+.prev-disabled {
+    margin-left: 10px;
+}
+
+.translate {
+    background-color: #2E8BCC;
+}
+
+.login,
+.settings {
+    background-color: #008641;
+}
+
+.logout,
+.register {
+    background-color: #7B4F9D;
+}
+
+.next,
+.prev {
+    background-color: #E61E1E;
+}
+
+.next-disabled,
+.prev-disabled {
+    color: #BDBEBD;
+    background-color: #EA4040;
+}
+
+.user {
+    background-color: #393;
+}
+
+.user img {
+    margin: 0 10px 10px 0;
+    height: 60px;
+    width: 60px;
+}
+
+.online-count,
+.share {
+    background-color: #20608E;
+}
+
+.share div.text {
+    color: #BDBEBD;
+    font-size: 43px;
+    font-weight: normal;
+    left: 128px;
+    line-height: 54px;
+    top: 5px;
+    width: 105px;
+}
+
+.share .text span:hover {
+    color: #FFF;
+}
+
+.online-count .text,
+.article-relative .text {
+    font-size: 12px;
+    font-weight: normal;
+    left: 104px;
+    line-height: 19px;
+    text-align: left;
+    top: 12px;
+}
+
+.article-relative .text { 
+    left: 70px;
+    overflow: hidden;
+    top: 10px;
+    white-space: nowrap;
+    width: 158px;
+    word-break: keep-all;
+}
+
+.article-relative .text ul {
+    margin: 0;
+} 
+
+.notice-board {
+    background-color: #2E8BCC;
+    overflow: hidden;
+    height: auto;
+}
+
+.user .text,
+.notice-board .text {
+    top: 36px;
+}
+/* end side */
+
+/* start others */
+#goCmt,
+#goTop {
+    background-color: #141414;
+    bottom: 10px;
+    font-size: 30px;
+    height: 35px;
+    padding: 5px 7px;
+    position: fixed;
+    right: 30px;
+    width: 30px;
+    z-index: 10;
+}
+
+#goCmt {
+    bottom: 55px;
+}
+
+.archives {
+    background-color: #323232;
+    padding: 10px;
+    margin: 5px 10px 30px 0;
+}
+
+.archives li {
+    list-style: none;
+    float: left;
+}
+
+.archives a {
+    background-color: #E61E1E;
+    color: #FFF;
+	line-height: 15px;
+    float: left;
+    margin: 10px;
+    padding: 10px 15px;
+    white-space: nowrap;
+    transition: all 0.8s;
+}
+
+.archives a:hover {
+    background-color: #FFF;
+    color: #E61E1E;
+}
+/* end others */
+
+/* start article */
+.article-header {
+    background-color: #E61E1E;
+    margin: 30px 0;
+    padding: 20px 30px;
+    position: relative;
+}
+
+.article-info {
+    position: absolute;
+    right: 0;
+    top: 0;
+}
+
+.article-info > a {
+    background-color: #FFF;
+    color: #E61E1E;
+    transition: all 0.8s;
+    font-size: 14px;
+    float: left;
+    padding: 14px;
+    border-bottom: 1px solid #FFF;
+    border-left: 1px solid #FFF;
+}
+
+.article-info > a:hover {
+    background-color: #E61E1E;
+    color: #FFF;
+}
+
+.article-header h2 {
+    color: #FFF;
+}
+
+.article-header h2 > span {
+    font-weight: normal;    
+    color: #D1D2D1;
+}
+
+.article-header .article-date {
+    float: none;
+    margin: 0;
+}
+
+.article-body {
+    background-color: #323232;
+    margin-bottom: 30px;
+    overflow: hidden;
+    padding: 10px;
+    white-space: normal;
+    word-break: break-all;
+    font-size: 14px;
+    word-wrap: break-word;
+}
+
+.main > .article-body {
+    margin-right: 10px;
+    margin-top: 20px;
+}
+
+pre.prettyprint {
+    background-color: #F7F7F7;
+}
+/* end article */
+
+/* start comment */
+#comments {
+    position: relative;
+}
+
+#comments > div {
+    margin-bottom: 20px;
+    margin-right: 10px;
+}
+
+#comments > div.fn-clear > img {
+    width: 80px;
+}
+
+#comments .article-body {
+    margin: 10px 0;
+    width: 800px;
+}
+
+#comments .user-name {
+    color: #E61E1E;
+    font-weight: bold;
+}
+
+#comments .user-name:hover {
+    color: #CA1B1E;
+}
+
+.comment-info a {
+    color: #F8F7F7;
+}
+
+.at {
+    font-size: 15px;
+    color: #FFF;
+    font-weight: bold;
+}
+
+.comment-main {
+    float: right;
+}
+
+.comment-body-ref {
+    background-color: #EA4040;
+    left: 79px;
+    padding: 10px;
+    position: absolute;
+    width: 900px;
+    z-index: 1;
+}
+
+.comment-disabled {
+    background-color: #EA4040;
+    color: #FFFFFF;
+    margin: 0 10px 30px 0;
+    padding: 5px 20px;
+}
+
+.form  {
+    width: 600px;
+    margin-bottom: 30px;
+}
+
+.form input,
+.form textarea {
+    height: 30px;
+    margin: 5px 10px 5px 0;
+    padding: 0 5px;
+    transition: all 0.3s ease-out 0s;
+    width: 456px;
+}
+
+.form textarea {
+    width: 600px;
+    height: 300px;
+    margin: 0 0 10px;
+}
+
+.form button {
+    background-color: #E61E1E;
+    border: 0 none;
+    color: #FFFFFF;
+    cursor: pointer;
+    font-size: 15px;
+    transition: all 0.3s ease-out 0s;
+    padding: 10px 50px;
+}
+
+.tip {
+    color: #CA1B1E;
+}
+/* end comment */
+
+/* start dynamic */
+#dynamic #comments {
+    background-color: #EA4040;
+    margin-top: 5px;
+    padding: 25px 15px 15px 25px;
+}
+
+#dynamic #comments .article-body {
+    width: 743px;
+}
+
+#dynamic .article-relative .text {
+    left: 110px;
+}
+
+#dynamic .footer {
+    margin: 20px 0 10px;
+    float: left;
+    transition: all 0.3s ease-out 0s;
+}
+
+.most-comment,
+.most-view,
+.links-tile,
+.tags-tile {
+    position: static;
+    background-color: #F09609;
+    width: 535px;
+    margin-top: 20px;
+}
+
+.most-view {
+    margin-left: 20px;
+    background-color: #2E8BCC;
+}
+
+.tags-tile {
+    margin-left: 20px;
+    background-color: #339933;
+}
+
+.links-tile {
+    background-color: #7B4F9D;
+}
+
+.tags-tile span,
+.links-tile span,
+.most-comment span,
+.most-view span {
+    font-size: 60px;
+}
+
+.tags-tile .text,
+.links-tile .text,
+.most-comment .text,
+.most-view .text {
+    position: static;
+    width: 430px;
+}
+
+.tags-tile a,
+.links-tile a {
+    background-color: #EA4040;
+    color: #D1D2D1;
+    float: left;
+    font-size: 12px;
+    line-height: 20px;
+    margin: 6px;
+    padding: 5px 10px;
+    transition: all 0.8s ease 0s;
+    white-space: nowrap;
+}
+
+.tags-tile a:hover,
+.links-tile a:hover {
+    background-color: #FFF;
+    color: #EA4040;
+}
+
+.most-comment .text,
+.most-view .text {
+    margin-right: 20px;
+    line-height: 24px;
+}
+
+.most-comment .text a:hover,
+.most-view .text a:hover {
+    text-decoration: underline;
+}
+
+.most-comment .text span,
+.most-view .text span {
+    color: #D1D2D1;
+    font-size: 13px;
+    font-weight: normal;
+}
+/* end dynamic */
--- a/metro-hot/css/metro-hot.min.css
+++ b/metro-hot/css/metro-hot.min.css
--- a/metro-hot/dynamic.ftl
+++ b/metro-hot/dynamic.ftl
@@ -0,0 +1,223 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${dynamicLabel}"/>
+        <meta name="description" content="${metaDescription},${dynamicLabel}"/>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="article-header">
+                    <h2>${blogSubtitle}</h2>
+                </div>
+            </div>
+
+            <div class="fn-clear" id="dynamic">
+                <div class="main">
+                    <#if 0 != recentComments?size>
+                    <div id="comments">
+                        <#list recentComments as comment>
+                        <#if comment_index < 6>
+                        <div id="${comment.oId}" class="fn-clear">
+                            <img title="${comment.commentName}"
+                                 alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
+                            <div class="comment-main">
+                                <div class="fn-clear comment-info">
+                                    <#if "http://" == comment.commentURL>
+                                    <span>${comment.commentName}</span>
+                                    <#else>
+                                    <a href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+                                    </#if>
+
+                                    <a class="fn-right" rel="bookmark" data-ico="&#xe185;" href="${servePath}${comment.commentSharpURL}">
+                                        ${viewLabel}
+                                    </a>
+                                    <div class="fn-right" data-ico="&#xe200;">
+                                        ${comment.commentDate?string("yy-MM-dd HH:mm")}&nbsp; &nbsp;
+                                    </div>
+                                </div>
+                                <div class="article-body">${comment.commentContent}</div>
+                            </div>
+                        </div>
+                        </#if>
+                        </#list>
+                    </div>
+                    </#if>
+                </div>
+                <div class="side">
+                    <div>
+                        <form action="${servePath}/search">
+                            <input placeholder="Search" id="search" type="text" name="keyword" /><span onclick="$(this).parent().submit()" data-ico="&#x0067;"></span>
+                            <input type="submit" value="" class="fn-none" />
+                        </form>
+
+                        <#if "" != noticeBoard>
+                        <div class="notice-board side-tile">
+                            <span data-ico="&#xe1e9;"></span>
+                            <div class="title">
+                                ${noticeBoard}
+                            </div>
+                            <div class="text">
+                                ${noticeBoardLabel}
+                            </div>
+                        </div>
+                        </#if>
+
+                        <a rel="alternate" href="${servePath}/blog-articles-rss.do" class="user side-tile">
+                            <span data-ico="&#xe135;"></span>
+                            <div class="text">
+                                RSS
+                            </div>
+                        </a>
+
+                        <div class="online-count side-tile">
+                            <span data-ico="&#xe037;"></span>
+                            <div class="text">
+                                ${viewCount1Label}
+                                ${statistic.statisticBlogViewCount}<br/>
+                                ${articleCount1Label}
+                                ${statistic.statisticPublishedBlogArticleCount}<br/>
+                                ${commentCount1Label}
+                                ${statistic.statisticPublishedBlogCommentCount}<br/>
+                            </div>
+                        </div>
+
+                        <#include "copyright.ftl">
+                    </div>
+                </div>
+            </div>
+
+            <div class="fn-clear">
+                <#if 0 != mostCommentArticles?size>
+                <div class="side-tile most-comment fn-clear">
+                    <div class="fn-left">
+                        <span data-ico="&#xe14e;"></span>
+                        <div class="title">
+                            ${mostCommentArticlesLabel}
+                        </div>
+                    </div>
+                    <div class="text fn-right">
+                        <ul>
+                            <#list mostCommentArticles as article>
+                            <li>
+                                <a href="${servePath}${article.articlePermalink}" title="${article.articleTitle}" rel="nofollow">
+                                    ${article.articleTitle}
+                                </a>
+                                <span data-ico="&#xe14e;">
+                                    ${article.articleCommentCount}
+                                </span>
+                            </li>
+                            </#list>
+                        </ul>
+                    </div>
+                </div>
+                </#if>
+
+
+                <#if 0 != mostViewCountArticles?size>
+                <div class="side-tile most-view fn-clear">
+                    <div class="fn-left">
+                        <span data-ico="&#xe185;"></span>
+                        <div class="title">
+                            ${mostViewCountArticlesLabel}
+                        </div>
+                    </div>
+                    <div class="text fn-right">
+                        <ul>
+                            <#list mostViewCountArticles as article>
+                            <li>
+                                <a href="${servePath}${article.articlePermalink}" title="${article.articleTitle}" rel="nofollow">
+                                    ${article.articleTitle}
+                                </a>
+                                <span data-ico="&#xe185;">
+                                    ${article.articleViewCount}
+                                </span>
+                            </li>
+                            </#list>
+                        </ul>
+                    </div>
+                </div>
+                </#if>
+            </div>
+
+            <div class="fn-clear">
+                <#if 0 != links?size>
+                <div class="side-tile links-tile fn-clear">
+                    <div class="fn-left">
+                        <span data-ico="&#xe14a;"></span>
+                        <div class="title">
+                            ${linkLabel}
+                        </div>
+                    </div>
+                    <div class="text fn-right">
+                        <#list links as link>
+                        <a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}" target="_blank">
+                            ${link.linkTitle}
+                        </a>
+                        </#list>
+                    </div>
+                </div>
+                </#if>
+
+                <#if 0 != mostUsedTags?size>
+                <div class="side-tile tags-tile fn-clear">
+                    <div class="fn-left">
+                        <span data-ico="&#x003b;"></span>
+                        <div class="title">
+                            ${popTagsLabel}
+                        </div>
+                    </div>
+                    <div class="text fn-right">
+                        <#list mostUsedTags as tag>
+                        <a rel="tag" href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}" 
+                           title="${tag.tagTitle}(${tag.tagPublishedRefCount})">
+                            ${tag.tagTitle}
+                        </a>
+                        </#list>
+                    </div>
+                </div>
+                </#if>
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+        <script>
+            $("#comments .article-body").each(function () {
+                this.innerHTML = Util.replaceEmString($(this).html());
+            });
+
+            if ($(".side").height() < $(".main").height()) {
+                $(".main").height($(".side").height() - 5).css({
+                    "overflow": "auto",
+                    "margin-top": "5px"
+                });
+
+                $("#comments").css("margin-top", "0");
+            }
+        </script> 
+    </body>
+</html>
--- a/metro-hot/footer.ftl
+++ b/metro-hot/footer.ftl
@@ -0,0 +1,62 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<script type="text/javascript">
+    var latkeConfig = {
+        "servePath": "${servePath}",
+        "isLoggedIn": "${isLoggedIn?string}",
+        "staticServePath": "${staticServePath}"
+    };
+    
+    var Label = {
+        "tag1Label": "${tag1Label}",
+        "viewLabel": "${viewLabel}",
+        "commentLabel": "${commentLabel}",
+        "topArticleLabel": "${topArticleLabel}",
+        "updatedLabel": "${updatedLabel}",
+        "contentLabel": "${contentLabel}",
+        "abstractLabel": "${abstractLabel}",
+        "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}/js/${skinDirName}${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<script>
+    Util.parseMarkdown();
+</script>
+${plugins}
--- a/metro-hot/header.ftl
+++ b/metro-hot/header.ftl
@@ -0,0 +1,59 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<div class="fn-clear header">
+    <h1 class="fn-left">
+        <a class="title" href="javascript: void(0)">
+            ${blogTitle}
+            <span data-ico="&#xe0f3;"></span>
+        </a>
+    </h1>
+    <ul class="navigation">
+        <li>
+            <a rel="nofollow" href="${servePath}/">${indexLabel}</a>
+        </li>
+        <#list pageNavigations as page>
+        <li>
+            <a href="${page.pagePermalink}" target="${page.pageOpenTarget}"><#if page.pageIcon != ''><img class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}</a>
+        </li>
+        </#list>
+        <li>
+            <a href="${servePath}/dynamic.html">${dynamicLabel}</a>
+        </li>
+        <li>
+            <a href="${servePath}/category.html">${categoryLabel}</a>
+        </li>
+        <li>
+            <a href="${servePath}/tags.html">${allTagsLabel}</a>
+        </li>
+        <li>
+            <a href="${servePath}/archives.html">${archiveLabel}</a>
+        </li>
+        <li class="last">
+            <a href="${servePath}/links.html">${linkLabel}</a>
+        </li>
+    </ul>
+    <div class="fn-right top-info">
+        <a title="${loginLabel}" id="login" data-ico="&#xe03f;"></a>
+        <a href="${servePath}/admin-index.do#main" title="${adminLabel}" id="settings" data-ico="&#x0070;"></a>
+        <hr>
+        <a id="logout" title="${logoutLabel}" data-ico="&#xe040;"></a>
+        <a href="${servePath}/register" title="${registerLabel}" id="register" data-ico="&#xe02b;"></a>
+    </div>
+</div>
--- a/metro-hot/images/ajax-loader.gif
+++ b/metro-hot/images/ajax-loader.gif
--- a/metro-hot/images/icons.png
+++ b/metro-hot/images/icons.png
--- a/metro-hot/index.ftl
+++ b/metro-hot/index.ftl
@@ -0,0 +1,72 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${blogTitle}">
+        <#if metaKeywords??>
+        <meta name="keywords" content="${metaKeywords}"/>
+        </#if>
+        <#if metaDescription??>
+        <meta name="description" content="${metaDescription}"/>
+        </#if>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>${blogSubtitle}</h2>
+                    <#if 0 != paginationPageCount>
+                    <div class="pagination">
+                        <#if 1 != paginationPageNums?first>
+                        <a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
+                           title="${previousPageLabel}"><</a>
+                        </#if>
+                        <#list paginationPageNums as paginationPageNum>
+                        <#if paginationPageNum == paginationCurrentPageNum>
+                        <span>${paginationPageNum}</span>
+                        <#else>
+                        <a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
+                        </#if>
+                        </#list>
+                        <#if paginationPageNums?last != paginationPageCount>
+                        <a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
+                        </#if>
+                    </div>
+                    </#if>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <#include "article-list.ftl"/>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/js/metro-hot.js
+++ b/metro-hot/js/metro-hot.js
@@ -0,0 +1,310 @@
+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+/**
+ * @fileoverview metro-hot js.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 1.0.1.0, Sep 30, 2013
+ */
+
+var MetroHot = {
+    headerH: $("#header").height() + 30 + ($("#header > div").get(1) ? 30 : 0),
+    responsiveType: "large",
+    goTranslate: function() {
+        window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href);
+    },
+    init: function() {
+        // logout
+        var logoutHref = "";
+        $("#admin a").each(function() {
+            if ($(this).attr("href").indexOf("/logout?goto=") > -1) {
+                logoutHref = $(this).attr("href");
+            }
+        });
+        $("#logout, .logout").attr("href", logoutHref);
+
+        // 头部标题点击事件
+        $(".header .title, .navigation").mouseover(function() {
+            $(".navigation").show();
+        }).mouseout(function() {
+            $(".navigation").hide();
+        });
+        $(".header .title").click(function() {
+            window.location.href = latkeConfig.servePath;
+        });
+
+        // 当先用户在线数目
+        var onlineVisitorCnt = $("#top > span").first().text();
+        $(".online-count .text").append(onlineVisitorCnt.substr(1, onlineVisitorCnt.length));
+
+        // 登录与否的显示设置
+        var isLogin = $("#admin").data("login");
+        if (isLogin) {
+            $(".user .text").html($("#admin > span").text());
+            $(".login, .register, #login, #register, .logout, .settings").hide();
+        } else {
+            $(".login, .register, .user, .clear, .logout, .settings, #logout, #settings").hide();
+        }
+
+        if ($("#dynamic").length === 1) {
+            // 滚动处理
+            $(window).scroll(function() {
+                var y = $(window).scrollTop();
+                if (y > MetroHot.headerH) {
+                    $("#goTop").fadeIn("slow");
+                } else {
+                    $("#goTop").hide();
+                }
+            }).click(function(event) {
+                if (event.target.className === "title" || event.target.parentElement.className === "title") {
+                    return;
+                }
+                $(".navigation").slideUp();
+            });
+
+            $("body").css("min-height", "inherit");
+            return;
+        }
+
+        // 侧边栏点击事件
+        $("#login, .login").attr("href", $("#admin > a").first().attr("href"));
+
+        // 滚动处理
+        $(window).scroll(function() {
+            var y = $(window).scrollTop();
+            if (y > MetroHot.headerH) {
+                if (isLogin) {
+                    $(".logout, .settings").show();
+                } else {
+                    $(".login, .register").show();
+                }
+            } else {
+                if (isLogin) {
+                    $(".logout, .settings").hide();
+                } else {
+                    $(".login, .register").hide();
+                }
+            }
+
+            if (y > MetroHot.headerH) {
+                $("#goTop").fadeIn("slow");
+            } else {
+                $("#goTop").hide();
+            }
+
+            if ($(".side > div").height() < 620) {
+                if (y > MetroHot.headerH) {
+                    $(".side > div").css({
+                        "position": "fixed",
+                        "top": "0px",
+                        "width": "240px"
+                    });
+                } else {
+                    $(".side > div").css("position", "static");
+                }
+            } else {
+                if (y + Util.getWinHeight() > $(".side > div").height() + MetroHot.headerH) {
+                    $(".side > div").css({
+                        "position": "fixed",
+                        "top": "auto",
+                        "bottom": "10px",
+                        "width": "240px"
+                    });
+                } else {
+                    $(".side > div").css("position", "static");
+                }
+            }
+        }).click(function(event) {
+            if (event.target.className === "title" || event.target.parentElement.className === "title") {
+                return;
+            }
+            $(".navigation").slideUp();
+        }).resize(function() {
+            var windowW = window.innerWidth,
+                    type = "large";
+            if (windowW > 460 && windowW <= 860) {
+                type = "mid";
+            } else if (window < 460) {
+                type = "small";
+            }
+            if (MetroHot.responsiveType !== type) {
+                $(window).scroll();
+                MetroHot.responsiveType === type;
+            }
+        });
+
+        $(window).scroll();
+    },
+    initArticleList: function() {
+        $(".article-list .article-abstract").each(function() {
+            var $it = $(this);
+            var $images = $it.find("img");
+            if ($images.length > 0) {
+                $it.addClass("article-image");
+                $images.hide();
+
+                $it.before("<img onload='MetroHot.loadImg(this);' src='" + $($images[0]).attr("src") + "'/>");
+            }
+        });
+    },
+    /**
+     * @description 计算图片 margin-top
+     * @param {BOM} it 图片元素
+     */
+    loadImg: function(it) {
+        it.style.marginTop = ("margin-top", (220 - it.height) / 2 + "px");
+    },
+    /**
+     * @description 分享按钮
+     */
+    share: function() {
+        var title = encodeURIComponent($("title").text()),
+                url = window.location.href,
+                pic = $(".article-body img").attr("src");
+        var urls = {};
+        urls.tencent = "http://share.v.t.qq.com/index.php?c=share&a=index&title=" + title +
+                "&url=" + url + "&pic=" + pic;
+        urls.sina = "http://v.t.sina.com.cn/share/share.php?title=" +
+                title + "&url=" + url + "&pic=" + pic;
+        urls.google = "https://plus.google.com/share?url=" + url;
+        urls.twitter = "https://twitter.com/intent/tweet?status=" + title + " " + url;
+        $(".share span").click(function() {
+            var key = $(this).attr("title").toLowerCase();
+            window.open(urls[key], "_blank", "top=100,left=200,width=648,height=618");
+        });
+    },
+    /*
+     * @description 加载随机文章
+     */
+    loadRandomArticles: function() {
+        // getRandomArticles
+        $.ajax({
+            url: latkeConfig.servePath + "/get-random-articles.do",
+            type: "POST",
+            success: function(result, textStatus) {
+                var randomArticles = result.randomArticles;
+                if (!randomArticles || 0 === randomArticles.length) {
+                    $("#randomArticles").remove();
+                    return;
+                }
+
+                var listHtml = "";
+                for (var i = 0; i < randomArticles.length && i < 5; i++) {
+                    var article = randomArticles[i];
+                    var title = article.articleTitle;
+                    var randomArticleLiHtml = "<li>" + "<a rel='nofollow' title='" + title + "' href='" + latkeConfig.servePath +
+                            article.articlePermalink + "'>" + title + "</a></li>";
+                    listHtml += randomArticleLiHtml;
+                }
+
+                var randomArticleListHtml = "<ul>" + listHtml + "</ul>";
+                $("#randomArticles .text").append(randomArticleListHtml);
+            }
+        });
+    },
+    /*
+     * @description 加载相关文章
+     * @param {String} id 文章 id
+     */
+    loadRelevantArticles: function(id) {
+        $.ajax({
+            url: latkeConfig.servePath + "/article/id/" + id + "/relevant/articles",
+            type: "GET",
+            success: function(data, textStatus) {
+                var articles = data.relevantArticles;
+                if (!articles || 0 === articles.length) {
+                    $("#relevantArticles").remove();
+                    return;
+                }
+                var listHtml = "";
+                for (var i = 0; i < articles.length && i < 5; i++) {
+                    var article = articles[i];
+                    var title = article.articleTitle;
+                    var articleLiHtml = "<li>"
+                            + "<a rel='nofollow' title='" + title + "' href='"
+                            + latkeConfig.servePath + article.articlePermalink + "'>"
+                            + title + "</a></li>";
+                    listHtml += articleLiHtml;
+                }
+
+                var relevantArticleListHtml = "<ul>"
+                        + listHtml + "</ul>";
+                $("#relevantArticles .text").append(relevantArticleListHtml);
+            },
+            error: function() {
+                $("#relevantArticles").remove();
+            }
+        });
+    },
+    /*
+     * @description 加载站外相关文章
+     * @param {String} tags 文章 tags
+     */
+    loadExternalRelevantArticles: function(tags) {
+        var tips = this.tips;
+        try {
+            $.ajax({
+                url: "http://rhythm.b3log.org:80/get-articles-by-tags.do?tags=" + tags
+                        + "&blogHost=" + tips.blogHost + "&paginationPageSize=" + tips.externalRelevantArticlesDisplayCount,
+                type: "GET",
+                cache: true,
+                dataType: "jsonp",
+                error: function() {
+                    $("#externalRelevantArticles").remove();
+                },
+                success: function(data, textStatus) {
+                    var articles = data.articles;
+                    if (!articles || 0 === articles.length) {
+                        $("#externalRelevantArticles").remove();
+                        return;
+                    }
+                    var listHtml = "";
+                    for (var i = 0; i < articles.length && i < 5; i++) {
+                        var article = articles[i];
+                        var title = article.articleTitle;
+                        var articleLiHtml = "<li>"
+                                + "<a rel='nofollow' title='" + title + "' target='_blank' href='" + article.articlePermalink + "'>"
+                                + title + "</a></li>";
+                        listHtml += articleLiHtml;
+                    }
+
+                    var randomArticleListHtml = "<ul>" + listHtml + "</ul>";
+                    $("#externalRelevantArticles .text").append(randomArticleListHtml);
+                }
+            });
+        } catch (e) {
+            // 忽略相关文章加载异常：load script error
+            $("#externalRelevantArticles").remove();
+        }
+    },
+    goCmt: function() {
+        $("html, body").animate({
+            scrollTop: $(".comment-disabled").get(0).offsetTop
+        });
+    }
+};
+
+(function() {
+    MetroHot.init();
+    Util.killIE();
+    if ($(".article-header").length > 0) {
+        MetroHot.share();
+    } else {
+        MetroHot.initArticleList();
+    }
+})();
--- a/metro-hot/js/metro-hot.min.js
+++ b/metro-hot/js/metro-hot.min.js
@@ -0,0 +1,18 @@
+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-2018, b3log.org & hacpai.com
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <https://www.gnu.org/licenses/>.
+ */
+var MetroHot={headerH:$("#header").height()+30+($("#header > div").get(1)?30:0),responsiveType:"large",goTranslate:function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)},init:function(){var t="";$("#admin a").each(function(){$(this).attr("href").indexOf("/logout?goto=")>-1&&(t=$(this).attr("href"))}),$("#logout, .logout").attr("href",t),$(".header .title, .navigation").mouseover(function(){$(".navigation").show()}).mouseout(function(){$(".navigation").hide()}),$(".header .title").click(function(){window.location.href=latkeConfig.servePath});var e=$("#top > span").first().text();$(".online-count .text").append(e.substr(1,e.length));var i=$("#admin").data("login");if(i?($(".user .text").html($("#admin > span").text()),$(".login, .register, #login, #register, .logout, .settings").hide()):$(".login, .register, .user, .clear, .logout, .settings, #logout, #settings").hide(),1===$("#dynamic").length)return $(window).scroll(function(){$(window).scrollTop()>MetroHot.headerH?$("#goTop").fadeIn("slow"):$("#goTop").hide()}).click(function(t){"title"!==t.target.className&&"title"!==t.target.parentElement.className&&$(".navigation").slideUp()}),void $("body").css("min-height","inherit");$("#login, .login").attr("href",$("#admin > a").first().attr("href")),$(window).scroll(function(){var t=$(window).scrollTop();t>MetroHot.headerH?i?$(".logout, .settings").show():$(".login, .register").show():i?$(".logout, .settings").hide():$(".login, .register").hide(),t>MetroHot.headerH?$("#goTop").fadeIn("slow"):$("#goTop").hide(),$(".side > div").height()<620?t>MetroHot.headerH?$(".side > div").css({position:"fixed",top:"0px",width:"240px"}):$(".side > div").css("position","static"):t+Util.getWinHeight()>$(".side > div").height()+MetroHot.headerH?$(".side > div").css({position:"fixed",top:"auto",bottom:"10px",width:"240px"}):$(".side > div").css("position","static")}).click(function(t){"title"!==t.target.className&&"title"!==t.target.parentElement.className&&$(".navigation").slideUp()}).resize(function(){var t=window.innerWidth,e="large";t>460&&t<=860?e="mid":window<460&&(e="small"),MetroHot.responsiveType!==e&&($(window).scroll(),MetroHot.responsiveType)}),$(window).scroll()},initArticleList:function(){$(".article-list .article-abstract").each(function(){var t=$(this),e=t.find("img");e.length>0&&(t.addClass("article-image"),e.hide(),t.before("<img onload='MetroHot.loadImg(this);' src='"+$(e[0]).attr("src")+"'/>"))})},loadImg:function(t){t.style.marginTop=(220-t.height)/2+"px"},share:function(){var t=encodeURIComponent($("title").text()),e=window.location.href,i=$(".article-body img").attr("src"),o={};o.tencent="http://share.v.t.qq.com/index.php?c=share&a=index&title="+t+"&url="+e+"&pic="+i,o.sina="http://v.t.sina.com.cn/share/share.php?title="+t+"&url="+e+"&pic="+i,o.google="https://plus.google.com/share?url="+e,o.twitter="https://twitter.com/intent/tweet?status="+t+" "+e,$(".share span").click(function(){var t=$(this).attr("title").toLowerCase();window.open(o[t],"_blank","top=100,left=200,width=648,height=618")})},loadRandomArticles:function(){$.ajax({url:latkeConfig.servePath+"/get-random-articles.do",type:"POST",success:function(t,e){var i=t.randomArticles;if(!i||0===i.length)return void $("#randomArticles").remove();for(var o="",r=0;r<i.length&&r<5;r++){var a=i[r],n=a.articleTitle;o+="<li><a rel='nofollow' title='"+n+"' href='"+latkeConfig.servePath+a.articlePermalink+"'>"+n+"</a></li>"}var l="<ul>"+o+"</ul>";$("#randomArticles .text").append(l)}})},loadRelevantArticles:function(t){$.ajax({url:latkeConfig.servePath+"/article/id/"+t+"/relevant/articles",type:"GET",success:function(t,e){var i=t.relevantArticles;if(!i||0===i.length)return void $("#relevantArticles").remove();for(var o="",r=0;r<i.length&&r<5;r++){var a=i[r],n=a.articleTitle;o+="<li><a rel='nofollow' title='"+n+"' href='"+latkeConfig.servePath+a.articlePermalink+"'>"+n+"</a></li>"}var l="<ul>"+o+"</ul>";$("#relevantArticles .text").append(l)},error:function(){$("#relevantArticles").remove()}})},loadExternalRelevantArticles:function(t){var e=this.tips;try{$.ajax({url:"http://rhythm.b3log.org:80/get-articles-by-tags.do?tags="+t+"&blogHost="+e.blogHost+"&paginationPageSize="+e.externalRelevantArticlesDisplayCount,type:"GET",cache:!0,dataType:"jsonp",error:function(){$("#externalRelevantArticles").remove()},success:function(t,e){var i=t.articles;if(!i||0===i.length)return void $("#externalRelevantArticles").remove();for(var o="",r=0;r<i.length&&r<5;r++){var a=i[r],n=a.articleTitle;o+="<li><a rel='nofollow' title='"+n+"' target='_blank' href='"+a.articlePermalink+"'>"+n+"</a></li>"}var l="<ul>"+o+"</ul>";$("#externalRelevantArticles .text").append(l)}})}catch(t){$("#externalRelevantArticles").remove()}},goCmt:function(){$("html, body").animate({scrollTop:$(".comment-disabled").get(0).offsetTop})}};!function(){MetroHot.init(),Util.killIE(),$(".article-header").length>0?MetroHot.share():MetroHot.initArticleList()}();
--- a/metro-hot/lang/lang_en_US.properties
+++ b/metro-hot/lang/lang_en_US.properties
@@ -0,0 +1,84 @@
+#
+# Solo - A small and beautiful blogging system written in Java.
+# Copyright (c) 2010-2018, b3log.org & hacpai.com
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+
+#
+# Description: Language configurations(en_US) for skin "ease".
+# Version: 1.0.0.4, Sep 30, 2013
+# Author: Liyuan Li
+#
+nextArticleLabel=Next
+previousArticleLabel=Previous
+newestArticleLabel=Newest
+lastArticleLabel=Last
+registerLabel=Register
+clearCachePageLabel=Clear Cache
+translateLabel=Translate
+shareLabel=Share
+
+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
+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=Up
+topArticleLabel=Top
+replyLabel=Reply
+
+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>
--- a/metro-hot/lang/lang_zh_CN.properties
+++ b/metro-hot/lang/lang_zh_CN.properties
@@ -0,0 +1,84 @@
+#
+# Solo - A small and beautiful blogging system written in Java.
+# Copyright (c) 2010-2018, b3log.org & hacpai.com
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+
+#
+# Description: Language configurations(zh_CN) for skin "ease".
+# Version: 1.0.0.4, Sep 30, 2013
+# Author: Liyuan Li
+#
+registerLabel=\u6CE8\u518C
+clearCachePageLabel=\u6E05\u9664\u7F13\u5B58
+translateLabel=\u7FFB\u8BD1
+nextArticleLabel=\u65B0\u4E00\u7BC7
+previousArticleLabel=\u65E7\u4E00\u7BC7
+newestArticleLabel=\u6700\u65B0\u4E00\u7BC7
+lastArticleLabel=\u6700\u540E\u4E00\u7BC7
+shareLabel=\u5206\u4EAB
+
+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=\u66F4
+topArticleLabel=\u9876
+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
+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
+
+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\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>
--- a/metro-hot/links.ftl
+++ b/metro-hot/links.ftl
@@ -0,0 +1,61 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.ftl">
+<!DOCTYPE html>
+<html>
+    <head>
+        <@head title="${blogTitle}">
+        <meta name="keywords" content="${metaKeywords},${linkLabel}"/>
+        <meta name="description" content="${metaDescription},${linkLabel}"/>
+        </@head>
+    </head>
+    <body>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>${linkLabel}</h2>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <#if 0 != links?size>
+                    <ul class="archives fn-clear">
+                        <#list links as link>
+                        <li>
+                            <a rel="friend" href="${link.linkAddress}" title="${link.linkDescription}" target="_blank">
+                                <img src="${faviconAPI}<#list link.linkAddress?split('/') as x><#if x_index=2>${x}<#break></#if></#list>" width="16" height="16" />
+                                ${link.linkTitle}
+                            </a>
+                        </li>
+                        </#list>
+                    </ul>
+                    </#if>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/macro-comments.ftl
+++ b/metro-hot/macro-comments.ftl
@@ -0,0 +1,149 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#macro comments commentList article>
+<#if article.commentable>
+<div class="comment-disabled">
+    <h3>${postCommentsLabel}</h3>
+</div>
+
+<table id="commentForm" class="form">
+    <tbody>
+        <#if !isLoggedIn>
+        <tr>
+            <td colspan="2">
+                <input type="text" id="commentName"/>
+                <label for="commentName">${commentNameLabel}</label>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <input type="text" id="commentEmail"/>
+                <label for="commentEmail">${commentEmailLabel}</label>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <input type="text" id="commentURL"/>
+                <label for="commentURL">${commentURLLabel}</label>
+            </td>
+        </tr>
+        </#if>
+        <tr>
+            <td id="emotions" colspan="2">
+                <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>
+                <label>${commentEmotionsLabel}</label>
+            </td>
+        </tr>
+        <tr>
+            <td colspan="2">
+                <textarea rows="10" cols="96" id="comment"></textarea>
+            </td>
+        </tr>
+        <#if !isLoggedIn>
+        <tr>
+            <td colspan="2">
+                <input type="text" id="commentValidate"/>
+                <img id="captcha" alt="validate" src="${servePath}/captcha.do" />
+            </td>
+        </tr>
+        </#if>
+        <tr>
+            <td>
+                <span id="commentErrorTip" class="tip"></span>
+            </td>
+            <td align="right">
+                <button id="submitCommentButton" onclick="page.submitComment();">${submmitCommentLabel}</button>
+            </td>
+        </tr>
+    </tbody>
+</table>
+<#else>
+<div class="comment-disabled">
+    <h3>${notAllowCommentLabel}</h3>
+</div>
+</#if>
+
+<#if commentList?size == 0>
+<div class="comment-disabled">
+    <h3>${noCommentLabel}</h3>
+</div>
+<div id="comments"></div>
+<#else>
+<div class="comment-disabled">
+    <h3>${commentLabel}</h3>
+</div>
+<div id="comments">
+    <#list commentList as comment>
+    <#include "common-comment.ftl"/>
+    </#list>
+</div>
+</#if>
+<span id="goTop" onclick="Util.goTop();" data-ico="&#xe042;" class="side-tile"></span>
+<span id="goCmt" onclick="MetroHot.goCmt();" data-ico="&#x005b;" class="side-tile"></span>
+</#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 replyTo = function(id) {
+                        var commentFormHTML = "<table class='form' id='replyForm'>";
+                        page.addReplyForm(id, commentFormHTML);
+                        $("#replyForm label").each(function() {
+                            $this = $(this);
+                            $this.attr("for", $this.attr("for") + "Reply");
+                        });
+                    };
+
+                    $(document).ready(function() {
+                        page.load();
+                        // emotions
+                        page.replaceCommentsEm("#comments .article-body");
+                        <#nested>
+                    });
+</script>
+</#macro>
--- a/metro-hot/macro-head.ftl
+++ b/metro-hot/macro-head.ftl
@@ -0,0 +1,39 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#macro head title>
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>${title}</title>
+<#nested>
+<meta name="author" content="${blogTitle?html}" />
+<meta name="generator" content="Solo" />
+<meta name="copyright" content="B3log" />
+<meta name="owner" content="B3log Team" />
+<meta name="revised" content="${blogTitle?html}, ${year}" />
+<meta http-equiv="Window-target" content="_top" />
+<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
+<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/${skinDirName}-responsive${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
+<link href="${servePath}/blog-articles-rss.do" title="RSS" type="application/rss+xml" rel="alternate" />
+<link rel="icon" type="image/png" href="${servePath}/favicon.png" />
+<link rel="manifest" href="${servePath}/manifest.json">
+<link rel="search" type="application/opensearchdescription+xml" title="${title}" href="/opensearch.xml">
+${htmlHead}
+</#macro>
--- a/metro-hot/macro-side.ftl
+++ b/metro-hot/macro-side.ftl
@@ -0,0 +1,188 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#macro side isArticle>
+<div class="side">
+    <div class="fn-clear">
+        <#if !isArticle>
+        <form action="${servePath}/search">
+            <input placeholder="Search" id="search" type="text" name="keyword" /><span onclick="$(this).parent().submit()" data-ico="&#x0067;"></span>
+            <input type="submit" value="" class="fn-none" />
+        </form>
+
+        <#if "" != noticeBoard>
+        <div class="notice-board side-tile">
+            <span data-ico="&#xe1e9;"></span>
+            <div class="title">
+                ${noticeBoard}
+            </div>
+            <div class="text">
+                ${noticeBoardLabel}
+            </div>
+        </div>
+        </#if>
+
+        <div class="online-count side-tile">
+            <span data-ico="&#xe037;"></span>
+            <div class="text">
+                ${viewCount1Label}
+                ${statistic.statisticBlogViewCount}<br/>
+                ${articleCount1Label}
+                ${statistic.statisticPublishedBlogArticleCount}<br/>
+                ${commentCount1Label}
+                ${statistic.statisticPublishedBlogCommentCount}<br/>
+            </div>
+        </div>
+        </#if>
+
+        <a rel="alternate" href="${servePath}/blog-articles-rss.do" class="atom side-tile">
+            <span data-ico="&#xe135;"></span>
+            <div class="title">
+                RSS
+            </div>
+        </a>
+
+        <a href="javascript: MetroHot.goTranslate();" class="translate side-tile">
+            <span data-ico="&#x0038;"></span>
+            <div class="title">
+                ${translateLabel}
+            </div>
+        </a>
+
+        <#if isArticle>
+        <div class="share side-tile">
+            <span data-ico="&#xe1fe;"></span>
+            <div class="title">
+                ${shareLabel}
+            </div>
+            <div class="text">
+                <span data-ico="&#xe0c1;" title="Tencent"></span>
+                <span data-ico="&#xe185;" title="Sina"></span>
+                <span data-ico="&#xe092;" title="Twitter"></span>
+                <span data-ico="&#xe08e;" title="Google"></span>
+            </div>
+        </div>
+
+        <#if relevantArticlesDisplayCount??>
+        <#if nextArticlePermalink??>
+        <a class="next side-tile" title="${nextArticleTitle}"
+           href="${servePath}${nextArticlePermalink}">
+            <span data-ico="&#xe107;"></span>
+            <div class="title">
+                ${nextArticleLabel}
+            </div>
+        </a>
+        <#else>
+        <div class="next-disabled side-tile">
+            <span data-ico="&#xe107;"></span>
+            <div class="title">
+                ${newestArticleLabel}
+            </div>
+        </div>
+        </#if>    
+
+        <#if previousArticlePermalink??>
+        <a class="prev side-tile" title="${previousArticleTitle}" rel="prev" 
+           href="${servePath}${previousArticlePermalink}">
+            <span data-ico="&#xe106;"></span>
+            <div class="title">
+                ${previousArticleLabel}
+            </div>
+        </a> 
+        <#else>
+        <div class="prev-disabled side-tile">
+            <span data-ico="&#xe106;"></span>
+            <div class="title">
+                ${lastArticleLabel}
+            </div>
+        </div>
+        </#if>
+
+        <#if 0 != relevantArticlesDisplayCount>
+        <div id="relevantArticles" class="side-tile article-relative">
+            <span data-ico="&#xe020;"></span>
+            <div class="title">
+                ${relevantArticlesLabel}
+            </div>
+            <div class="text">
+            </div>
+        </div>
+        </#if>
+
+        <#if 0 != randomArticlesDisplayCount>
+        <div id="randomArticles" class="side-tile article-relative">
+            <span data-ico="&#xe024;"></span>
+            <div class="title">
+                ${randomArticlesLabel}
+            </div>
+            <div class="text">
+            </div>
+        </div>
+        </#if>
+
+        <#if externalRelevantArticlesDisplayCount?? && 0 != externalRelevantArticlesDisplayCount>
+        <div id="externalRelevantArticles" class="side-tile article-relative">
+            <span data-ico="&#xe021;"></span>
+            <div class="title">
+                ${externalRelevantArticlesLabel}
+            </div>
+            <div class="text">
+            </div>
+        </div>
+        </#if>
+        </#if>
+        </#if>
+
+        <a class="login side-tile">
+            <span data-ico="&#xe03f;"></span>
+            <div class="title">
+                ${loginLabel}
+            </div>
+        </a>
+
+        <a href="${servePath}/register" class="register side-tile">
+            <span data-ico="&#xe02b;"></span>
+            <div class="title">
+                ${registerLabel}
+            </div>
+        </a>
+
+        <div class="user side-tile">
+            <span>
+                <img src="<#if gravatar??>${gravatar}</#if>"/>
+            </span>
+            <div class="text"></div>
+        </div>
+
+        <a href="${servePath}/admin-index.do#main" class="settings side-tile">
+            <span data-ico="&#x0070;"></span>
+            <div class="title">
+                ${adminLabel}
+            </div>
+        </a>
+
+        <a href="${servePath}/register" class="logout side-tile">
+            <span data-ico="&#xe040;"></span>
+            <div class="title">
+                ${logoutLabel}
+            </div>
+        </a>
+    </div>
+</div>
+</#macro>
--- a/metro-hot/page.ftl
+++ b/metro-hot/page.ftl
@@ -0,0 +1,61 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.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}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl">
+                <div class="article-header">
+                    <h2>${blogSubtitle}</h2>
+                    
+                    <div class="article-info">
+                        <a rel="nofollow" data-ico="&#xe14e;" href="${servePath}${page.pagePermalink}#comments">
+                            ${page.pageCommentCount}
+                        </a>
+                       
+                    </div>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <div class="article-body">
+                        ${page.pageContent}
+                    </div>
+                    <@comments commentList=pageComments article=page></@comments>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=true />
+            </div>
+        </div>
+        <#include "footer.ftl">
+        <@comment_script oId=page.oId></@comment_script>
+    </body>
+</html>
--- a/metro-hot/preview.png
+++ b/metro-hot/preview.png
--- a/metro-hot/skin.properties
+++ b/metro-hot/skin.properties
@@ -0,0 +1,26 @@
+#
+# Solo - A small and beautiful blogging system written in Java.
+# Copyright (c) 2010-2018, b3log.org & hacpai.com
+#
+# This program is free software: you can redistribute it and/or modify
+# it under the terms of the GNU Affero General Public License as published by
+# the Free Software Foundation, either version 3 of the License, or
+# (at your option) any later version.
+#
+# This program is distributed in the hope that it will be useful,
+# but WITHOUT ANY WARRANTY; without even the implied warranty of
+# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+# GNU Affero General Public License for more details.
+#
+# You should have received a copy of the GNU Affero General Public License
+# along with this program.  If not, see <https://www.gnu.org/licenses/>.
+#
+
+#
+# Description: metro-hot skin.
+# Version: 1.0.0.1, Jul 4, 2013
+# Author: Liyuan Li
+#
+
+name=metro-hot
+memo=metro-hot
--- a/metro-hot/tag-articles.ftl
+++ b/metro-hot/tag-articles.ftl
@@ -0,0 +1,74 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.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>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>
+                        <a id="tag" rel="alternate" href="${servePath}/tag-articles-feed.do?oId=${tag.oId}">
+                            ${tag1Label}
+                            ${tag.tagTitle}
+                            (${tag.tagPublishedRefCount})
+                        </a>
+                    </h2>
+                    <#if 0 != paginationPageCount>
+                    <div class="pagination">
+                        <#if 1 != paginationPageNums?first>
+                        <a id="previousPage" href="${servePath}${path}/${paginationPreviousPageNum}"
+                           title="${previousPageLabel}"><</a>
+                        </#if>
+                        <#list paginationPageNums as paginationPageNum>
+                        <#if paginationPageNum == paginationCurrentPageNum>
+                        <span>${paginationPageNum}</span>
+                        <#else>
+                        <a href="${servePath}${path}/${paginationPageNum}">${paginationPageNum}</a>
+                        </#if>
+                        </#list>
+                        <#if paginationPageNums?last != paginationPageCount>
+                        <a id="nextPage" href="${servePath}${path}/${paginationNextPageNum}" title="${nextPagePabel}">></a>
+                        </#if>
+                    </div>
+                    </#if>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <#include "article-list.ftl"/>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>
--- a/metro-hot/tags.ftl
+++ b/metro-hot/tags.ftl
@@ -0,0 +1,60 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-2018, b3log.org & hacpai.com
+
+    This program is free software: you can redistribute it and/or modify
+    it under the terms of the GNU Affero General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    This program is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU Affero General Public License for more details.
+
+    You should have received a copy of the GNU Affero General Public License
+    along with this program.  If not, see <https://www.gnu.org/licenses/>.
+
+-->
+<#include "macro-head.ftl">
+<#include "macro-side.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>
+        ${topBarReplacement}
+        <div class="wrapper">
+            <div id="header">
+                <#include "header.ftl" />
+                <div class="sub-nav fn-clear">
+                    <h2>${allTagsLabel}</h2>
+                </div>
+            </div>
+            <div class="fn-clear">
+                <div class="main">
+                    <ul id="tags" class="archives fn-clear">
+                        <#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>
+                    <#include "copyright.ftl"/>
+                </div>
+                <@side isArticle=false />
+            </div>
+        </div>
+        <span id="goTop" onclick="Util.goTop()" data-ico="&#xe042;" class="side-tile"></span>
+        <#include "footer.ftl"/>
+    </body>
+</html>