🚦

Merge branch 'master' of https://github.com/b3log/solo-skins
fix https://github.com/b3log/solo-skins/issues/29
2019-04-19 16:42:15 +08:00 · 2019-04-19 16:41:13 +08:00 · 2019-04-19 16:41:09 +08:00 · 2019-04-19 10:38:32 +08:00 · 2019-04-18 17:36:32 +08:00 · 2019-04-13 09:36:20 +08:00
547 changed files with 8358 additions and 17367 deletions
--- a/9IPHP/archive-articles.ftl
+++ b/9IPHP/archive-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,14 +17,13 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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 title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveLabel} - ${blogTitle}">
+             <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+         </@head>
    </head>
    <body>
        <#include "header.ftl">
--- a/9IPHP/archives.ftl
+++ b/9IPHP/archives.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${archiveLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
-        <meta name="description" content="${metaDescription},${archiveLabel}"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/9IPHP/article-list.ftl
+++ b/9IPHP/article-list.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -38,26 +38,26 @@
            </h1>

            <div class="meta">
-                <span class="tooltipped tooltipped-n" aria-label="${createDateLabel}">
+                <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="${createDateLabel}">
                    <i class="icon-date"></i>
                    <time>
                        ${article.articleCreateDate?string("yyyy-MM-dd")}
                    </time>
                </span>
                &nbsp; | &nbsp;
-                <span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}">
+                <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="${commentCountLabel}">
                    <i class="icon-comments"></i>
                    <a href="${servePath}${article.articlePermalink}#comments">
                        ${article.articleCommentCount} ${commentLabel}</a>
                </span>
                &nbsp; | &nbsp;
-                <span class="tooltipped tooltipped-n" aria-label="${viewCountLabel}">
+                <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="${viewCountLabel}">
                    <i class="icon-views"></i>
                    ${article.articleViewCount} ${viewLabel}
                </span>
            </div>
        </header>
-        <div class="content-reset">
+        <div class="vditor-reset">
            ${article.articleAbstract}
        </div>
        <footer class="fn-clear tags">
--- a/9IPHP/article.ftl
+++ b/9IPHP/article.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,50 +17,34 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <#include "macro-comments.ftl">
 <#include "../../common-template/macro-comment_script.ftl">
 <!DOCTYPE html>
 <html>
-    <head>
-        <@head title="${article.articleTitle} - ${blogTitle}">
-        <meta name="keywords" content="${article.articleTags}" />
-        <meta name="description" content="${article.articleAbstract?html}" />
-        </@head>
+<head>
+    <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
+        <link rel="stylesheet"
+              href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        <#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>
+    </@head>
+</head>
+<body>
        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <article class="post">
-                        <header>
-                            <h1>
-                                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
-                                    ${article.articleTitle}
-                                </a>
+<div class="wrapper">
+    <div class="main-wrap">
+        <main>
+            <article class="post">
+                <header>
+                    <h1>
+                        <a rel="bookmark" href="${servePath}${article.articlePermalink}">
+                        ${article.articleTitle}
+                        </a>
                                <#if article.articlePutTop>
                                    <sup>
                                        ${topArticleLabel}
@@ -71,94 +55,94 @@
                                        ${updatedLabel}
                                    </sup>
                                </#if>
-                            </h1>
-                            <div class="meta">
-                                <span class="tooltipped tooltipped-n" aria-label="${createDateLabel}">
+                    </h1>
+                    <div class="meta">
+                                <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="${createDateLabel}">
                                    <i class="icon-date"></i>
                                    <time>
-                                        ${article.articleCreateDate?string("yyyy-MM-dd")}
+                                    ${article.articleCreateDate?string("yyyy-MM-dd")}
                                    </time>
                                </span>
-                                                &nbsp; | &nbsp;
-                                                <span class="tooltipped tooltipped-n" aria-label="${commentCountLabel}">
+                        &nbsp; | &nbsp;
+                        <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="${commentCountLabel}">
                                    <i class="icon-comments"></i>
                                    <a href="${servePath}${article.articlePermalink}#comments">
                                        ${article.articleCommentCount} ${commentLabel}</a>
                                </span>
-                                                &nbsp; | &nbsp;
-                                                <span class="tooltipped tooltipped-n" aria-label="${viewCountLabel}">
+                        &nbsp; | &nbsp;
+                        <span class="vditor-tooltipped vditor-tooltipped__n" aria-label="${viewCountLabel}">
                                    <i class="icon-views"></i>
-                                    ${article.articleViewCount} ${viewLabel}
+                        ${article.articleViewCount} ${viewLabel}
                                </span>
-                            </div>
-                        </header>
+                    </div>
+                </header>

-                        <div class="content-reset">
-                            ${article.articleContent}
+                <div class="vditor-reset">
+                ${article.articleContent}
                            <#if "" != article.articleSign.signHTML?trim>
                                <div>
                                    ${article.articleSign.signHTML}
                                </div>
                            </#if>
-                        </div>
+                </div>

-                        <footer class="tags">
+                <footer class="tags">
                            <#list article.articleTags?split(",") as articleTag>
                                <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
                                    ${articleTag}</a>
                            </#list>

-                            <#-- div class="copyright">
-                                ${articleCP1Label}
-                                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
-                                    ${article.articleTitle}
-                                </a> -
-                                <a href="${servePath}">
-                                    ${blogTitle}
-                                </a>
-                            </div -->
+                <#-- div class="copyright">
+                    ${articleCP1Label}
+                    <a rel="bookmark" href="${servePath}${article.articlePermalink}">
+                        ${article.articleTitle}
+                    </a> -
+                    <a href="${servePath}">
+                        ${blogTitle}
+                    </a>
+                </div -->

-                            <div class="rel fn-clear">
+                    <div class="rel fn-clear">
                                <#if previousArticlePermalink??>
                                    <a href="${servePath}${previousArticlePermalink}" rel="prev"
-                                       class="fn-left tooltipped tooltipped-n"
+                                       class="fn-left vditor-tooltipped vditor-tooltipped__n"
                                       aria-label="${previousArticleTitle}">
                                        ${previousArticleLabel}
                                    </a>
                                </#if>
                                <#if nextArticlePermalink??>
                                    <a href="${servePath}${nextArticlePermalink}" rel="next"
-                                       class="fn-right tooltipped tooltipped-n"
+                                       class="fn-right vditor-tooltipped vditor-tooltipped__n"
                                       aria-label="${nextArticleTitle}">
                                        ${nextArticleLabel}
                                    </a>
                                </#if>
-                            </div>
-                        </footer>
+                    </div>
+                </footer>
                        <@comments commentList=articleComments article=article></@comments>
-                        <br>
-                        <div id="externalRelevantArticles" class="list"></div>
-                        <div id="relevantArticles" class="list"></div>
-                        <div id="randomArticles" class="list"></div>
-                    </article>
-                </main>
+                <br>
+                <div id="externalRelevantArticles" class="list"></div>
+                <div id="relevantArticles" class="list"></div>
+                <div id="randomArticles" class="list"></div>
+            </article>
+        </main>
                <#include "side.ftl">
-            </div>
-        </div>
+    </div>
+</div>
        <#include "footer.ftl">
        <@comment_script oId=article.oId commentable=article.commentable>
        page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
-        <#if 0 != randomArticlesDisplayCount>
+            <#if 0 != randomArticlesDisplayCount>
        page.loadRandomArticles();
-        </#if>
-        <#if 0 != externalRelevantArticlesDisplayCount>
+            </#if>
+            <#if 0 != externalRelevantArticlesDisplayCount>
        page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>"
            , "<header class='title'><h2>${externalRelevantArticlesLabel}</h2></header>");
-        </#if>
-        <#if 0 != relevantArticlesDisplayCount>
+            </#if>
+            <#if 0 != relevantArticlesDisplayCount>
        page.loadRelevantArticles('${article.oId}', '<h4>${relevantArticlesLabel}</h4>');
-        </#if>
-        Skin.initArticle('${tocLabel}', '${siteViewLabel}')
-        </@comment_script>    
-    </body>
+            </#if>
+        Skin.initToc()
+        </@comment_script>
+</body>
 </html>
--- a/9IPHP/category-articles.ftl
+++ b/9IPHP/category-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/9IPHP/common-comment.ftl
+++ b/9IPHP/common-comment.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -19,7 +19,7 @@
 -->
 <li id="${comment.oId}">
    <div>
-        <div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}"
+        <div class="avatar vditor-tooltipped vditor-tooltipped__n" aria-label="${comment.commentName}"
             style="background-image: url(${comment.commentThumbnailURL})"></div>
        <main>
            <div class="fn-clear">
@@ -40,7 +40,7 @@
                    <a class="reply-btn" href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">${replyLabel}</a>
                </#if>
            </div>
-            <div class="content-reset">
+            <div class="vditor-reset">
                ${comment.commentContent}
            </div>
        </main>
--- a/9IPHP/css/base.css
+++ b/9IPHP/css/base.css
--- a/9IPHP/css/base.scss
+++ b/9IPHP/css/base.scss
--- a/9IPHP/dynamic.ftl
+++ b/9IPHP/dynamic.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${dynamicLabel}"/>
-        <meta name="description" content="${metaDescription},${dynamicLabel}"/>
+        <@head title="${dynamicLabel} - ${blogTitle}">
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
@@ -36,7 +35,7 @@
                            <#list recentComments as comment>
                                <li id="${comment.oId}">
                                    <div>
-                                        <div class="avatar tooltipped tooltipped-n" aria-label="${comment.commentName}"
+                                        <div class="avatar vditor-tooltipped vditor-tooltipped__n" aria-label="${comment.commentName}"
                                             style="background-image: url(${comment.commentThumbnailURL})"></div>
                                        <main>
                                            <div class="fn-clear">
@@ -48,7 +47,7 @@
                                                <time class="ft-gray">${comment.commentDate?string("yyyy-MM-dd HH:mm")}</time>
                                                <a class="reply-btn" href="${servePath}${comment.commentSharpURL}">${viewLabel}»</a>
                                            </div>
-                                            <div class="content-reset">
+                                            <div class="vditor-reset">
                                                ${comment.commentContent}
                                            </div>
                                        </main>
@@ -57,7 +56,7 @@
                            </#list>
                        </ul>
                    <#else>
-                    <div class="content-reset ft-center">
+                    <div class="vditor-reset ft-center">
                        ${noDynamicLabel}
                    </div>
                    </#if>
@@ -68,7 +67,7 @@
        <#include "footer.ftl">

        <script>
-            var $commentContents = $(".comments .content-reset");
+            var $commentContents = $(".comments .vditor-reset");
            for (var i = 0; i < $commentContents.length; i++) {
                var str = $commentContents[i].innerHTML;
                $commentContents[i].innerHTML = Util.replaceEmString(str);
--- a/9IPHP/footer.ftl
+++ b/9IPHP/footer.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -21,32 +21,17 @@
    &copy; ${year}
    ${footerContent}
    <a href="${servePath}">${blogTitle}</a>  &nbsp;   • &nbsp;
-    <a href="https://solo.b3log.org" target="_blank">Solo</a> ${version}  <br/>
+    <a href="https://solo.b3log.org" target="_blank">Solo</a><br/>

    Powered by <a href="https://b3log.org" target="_blank">B3log</a> 开源 &nbsp;
    <span class="ft-warn">&heartsuit;</span>
-    Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">9IPHP</a> by <a href="https://github.com/9IPHP/9IPHP" target="_blank">9IPHP</a> & <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
+    Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
+    <sup>[<a href="https://github.com/9IPHP/9IPHP" target="_blank">ref</a>]</sup>
+    by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
 </footer>
 <div class="icon-up" onclick="Util.goTop()"></div>
-
-<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/common${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
-<script type="text/javascript">
-    var latkeConfig = {
-        "servePath": "${servePath}",
-        "staticServePath": "${staticServePath}",
-        "isLoggedIn": "${isLoggedIn?string}",
-        "userName": "${userName}"
-    };
-
-    var Label = {
-        "markedAvailable": ${markedAvailable?c},
-        "skinDirName": "${skinDirName}"
-    };
-    Util.initSW();
-    Util.parseMarkdown();
-    Util.killIE(10)
-    Util.previewImg()
-</script>
+<script src="${staticServePath}/js/lib/compress/pjax.min.js"></script>
+<script src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
+<script src="${staticServePath}/skins/${skinDirName}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
+<#include "../../common-template/label.ftl">
 ${plugins}
--- a/9IPHP/header.ftl
+++ b/9IPHP/header.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -28,15 +28,15 @@
            <small> &nbsp; ${blogSubtitle}</small>
            <div class="fn-right">
                <#if isLoggedIn>
-                    <a href="${servePath}/admin-index.do#main" title="${adminLabel}">
-                        <i class="icon-setting"></i> ${adminLabel}
+                    <a class="fn__flex-inline" href="${servePath}/admin-index.do#main" title="${adminLabel}">
+                        <i class="icon-setting"></i>&nbsp;${adminLabel}
                    </a>
-                    <a href="${logoutURL}">
-                        <i class="icon-logout"></i> ${logoutLabel}
+                    <a class="fn__flex-inline" href="${logoutURL}">
+                        <i class="icon-logout"></i>&nbsp;${logoutLabel}
                    </a>
                    <#else>
-                    <a href="${servePath}/start">
-                        <i class="icon-login"></i> ${startToUseLabel}
+                    <a class="fn__flex-inline" href="${servePath}/start">
+                        <i class="icon-login"></i>&nbsp;${startToUseLabel}
                    </a>
                </#if>
            </div>
--- a/9IPHP/images/code-bg.png
+++ b/9IPHP/images/code-bg.png
--- a/9IPHP/index.ftl
+++ b/9IPHP/index.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,17 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${blogTitle}">
-        <#if metaKeywords??>
-        <meta name="keywords" content="${metaKeywords}"/>
-        </#if>
-        <#if metaDescription??>
-        <meta name="description" content="${metaDescription}"/>
-        </#if>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/9IPHP/js/common.js
+++ b/9IPHP/js/common.js
@@ -1,6 +1,6 @@
 /*
 * Solo - A small and beautiful blogging system written in Java.
- * Copyright (c) 2010-2019, b3log.org & hacpai.com
+ * Copyright (c) 2010-present, b3log.org
 *
 * 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
@@ -27,110 +27,73 @@
 * @static
 */
 var Skin = {
-    _initCommon: function ($goTop) {
-        var $banner = $('header .banner'),
-        $navbar = $('header .navbar');
+  _initCommon: function ($goTop) {
+    var $banner = $('header .banner'),
+      $navbar = $('header .navbar')

-        $(window).scroll(function () {
-            if ($(window).scrollTop() > 125) {
-                $goTop.show();
-            } else {
-                $goTop.hide();
-            }
+    $(window).scroll(function () {
+      if ($(window).scrollTop() > 125) {
+        $goTop.show()
+      } else {
+        $goTop.hide()
+      }

-            if ($(window).width() < 701) {
-                return false;
-            }
+      if ($(window).width() < 701) {
+        return false
+      }

-            if ($(window).scrollTop() > $banner.height()) {
-                $navbar.addClass('pin');
-                $('.main-wrap').parent().css('margin-top', '86px')
-            } else {
-                $navbar.removeClass('pin');
-                $('.main-wrap').parent().css('margin-top', '0')
-            }
-        });
-    },
-    init: function () {
-        this._initCommon($('.icon-up'));
+      if ($(window).scrollTop() > $banner.height()) {
+        $navbar.addClass('pin')
+        $('.main-wrap').parent().css('margin-top', '81px')
+        $('.article__toc').css('position', 'fixed')
+      } else {
+        $navbar.removeClass('pin')
+        $('.main-wrap').parent().css('margin-top', '0')
+        $('.article__toc').css('position', 'inherit')
+      }
+    })

-        $('.navbar nav a').each(function () {
-            if (this.href === location.href) {
-                this.className = 'current'
-            }
-        });
+    $(window).scroll()
+  },
+  init: function () {
+    this._initCommon($('.icon-up'))

-        $('.responsive .list a').each(function () {
-            if (this.href === location.href) {
-                $(this).parent().addClass('current');
-            }
-        });
+    $('.navbar nav a').each(function () {
+      if (this.href === location.href) {
+        this.className = 'current'
+      }
+    })

-        $('.responsive .icon-list').click(function () {
-            $('.responsive .list').slideToggle();
-        });
-    },
-    _initArticleCommon: function (tocLabel, siteViewLabel) {
-        // TOC
-        if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
-            // add color to sidebar menu
-            $('aside').addClass('has-toc');
+    $('.responsive .list a').each(function () {
+      if (this.href === location.href) {
+        $(this).parent().addClass('current')
+      }
+    })

-            // append toc to sidebar menu
-            var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel
-            + '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>';
-            $('aside').prepend(articleTocHTML);
-            var $sectionF = $('aside section:first').html($('.b3-solo-list')),
-                    $sectionL = $('aside section:last');
-            $sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width':  $('aside').width() + 'px'});
-            $sectionL.hide();
-            // 切换 tab
-            $('aside > ul > li').click(function () {
-                if ($(this).data('tab') === 'toc') {
-                    $sectionL.animate({
-                        "opacity": '0',
-                        "top": '-50px'
-                    }, 300, function () {
-                        $sectionF.show().css('top', '-50px');
-                        $sectionF.animate({
-                            "opacity": '1',
-                            "top": '0'
-                        }, 300).show();
-                    });
-                } else {
-                    $sectionF.animate({
-                        "opacity": '0',
-                        "top": '-50px'
-                    }, 300, function () {
-                        $sectionF.hide().css('top', '-50px');
-                        $sectionL.animate({
-                            "opacity": '1',
-                            "top": '0'
-                        }, 300).show();
-                    }).hide();
-                }
-                $('aside > ul > li').removeClass('current');
-                $(this).addClass('current');
-            });
-
-            $(window).scroll(function () {
-                if ($(window).scrollTop() > 125) {
-                    $('aside section:eq(0)').css({
-                        position: "fixed",
-                        top: "51px",
-                        backgroundColor: "#fff"
-                    })
-                } else {
-                    $('aside section:eq(0)').css({
-                        position: "inherit",
-                        borderLeft: 0
-                    })
-                }
-            });
-        }
-    },
-    initArticle: function (tocLabel, siteViewLabel) {
-        this._initArticleCommon(tocLabel, siteViewLabel);
+    $('.responsive .icon-list').click(function () {
+      $('.responsive .list').slideToggle()
+    })
+  },
+  initToc: function () {
+    var $articleToc = $('.article__toc')
+    if ($articleToc.length === 0) {
+      return false
    }
-};
-Skin.init();
+
+    $articleToc.css({
+      width: $articleToc.parent().width(),
+      left: $articleToc.parent().offset().left,
+    }).find('a').click(function () {
+      $articleToc.find('li').removeClass('toc--current')
+      $(this).parent().addClass('toc--current')
+      var id = $(this).attr('href')
+      setTimeout(function () {
+        $(window).scrollTop($(id).offset().top - 60)
+      })
+    })
+  },
+}
+
+$(document).ready(function () {
+  Skin.init()
+})
--- a/9IPHP/js/common.min.js
+++ b/9IPHP/js/common.min.js
@@ -1 +1 @@
-var Skin={_initCommon:function(i){var t=$("header .banner"),n=$("header .navbar");$(window).scroll(function(){if(125<$(window).scrollTop()?i.show():i.hide(),$(window).width()<701)return!1;$(window).scrollTop()>t.height()?(n.addClass("pin"),$(".main-wrap").parent().css("margin-top","86px")):(n.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0"))})},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},_initArticleCommon:function(i,t){if(0<$(".b3-solo-list li").length&&1e3<$(window).width()){$("aside").addClass("has-toc");var n='<ul class="fn-clear"><li class="current" data-tab="toc">'+i+'</li><li data-tab="site">'+t+"</li></ul><section></section>";$("aside").prepend(n);var o=$("aside section:first").html($(".b3-solo-list")),s=$("aside section:last");o.height($(window).height()-154).css({overflow:"auto",width:$("aside").width()+"px"}),s.hide(),$("aside > ul > li").click(function(){"toc"===$(this).data("tab")?s.animate({opacity:"0",top:"-50px"},300,function(){o.show().css("top","-50px"),o.animate({opacity:"1",top:"0"},300).show()}):o.animate({opacity:"0",top:"-50px"},300,function(){o.hide().css("top","-50px"),s.animate({opacity:"1",top:"0"},300).show()}).hide(),$("aside > ul > li").removeClass("current"),$(this).addClass("current")}),$(window).scroll(function(){125<$(window).scrollTop()?$("aside section:eq(0)").css({position:"fixed",top:"51px",backgroundColor:"#fff"}):$("aside section:eq(0)").css({position:"inherit",borderLeft:0})})}},initArticle:function(i,t){this._initArticleCommon(i,t)}};Skin.init();
+var Skin={_initCommon:function(i){var n=$("header .banner"),t=$("header .navbar");$(window).scroll(function(){if(125<$(window).scrollTop()?i.show():i.hide(),$(window).width()<701)return!1;$(window).scrollTop()>n.height()?(t.addClass("pin"),$(".main-wrap").parent().css("margin-top","81px"),$(".article__toc").css("position","fixed")):(t.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0"),$(".article__toc").css("position","inherit"))}),$(window).scroll()},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},initToc:function(){var n=$(".article__toc");if(0===n.length)return!1;n.css({width:n.parent().width(),left:n.parent().offset().left}).find("a").click(function(){n.find("li").removeClass("toc--current"),$(this).parent().addClass("toc--current");var i=$(this).attr("href");setTimeout(function(){$(window).scrollTop($(i).offset().top-60)})})}};$(document).ready(function(){Skin.init()});
--- a/9IPHP/js/isotope.pkgd.js
+++ b/9IPHP/js/isotope.pkgd.js
--- a/9IPHP/js/isotope.pkgd.min.js
+++ b/9IPHP/js/isotope.pkgd.min.js
--- a/9IPHP/lang/lang_en_US.properties
+++ b/9IPHP/lang/lang_en_US.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
--- a/9IPHP/lang/lang_zh_CN.properties
+++ b/9IPHP/lang/lang_zh_CN.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
--- a/9IPHP/links.ftl
+++ b/9IPHP/links.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${linkLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${linkLabel}"/>
-        <meta name="description" content="${metaDescription},${linkLabel}"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/9IPHP/macro-comments.ftl
+++ b/9IPHP/macro-comments.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
--- a/9IPHP/macro-head.ftl
+++ b/9IPHP/macro-head.ftl
@@ -1,37 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, 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" />
-<title>${title}</title>
-<#nested>
-<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
-<meta name="author" content="${blogTitle?html}" />
-<meta name="generator" content="Solo" />
-<meta name="owner" content="B3log Team" />
-<meta name="revised" content="${blogTitle?html}, ${year}" />
-<meta name="copyright" content="B3log" />
-<meta http-equiv="Window-target" content="_top" />
-<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}" charset="utf-8" />
-<link href="${servePath}/rss.xml" 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/9IPHP/page.ftl
+++ b/9IPHP/page.ftl
@@ -1,49 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, 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 "../../common-template/macro-comment_script.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>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <article class="post">
-                        <div class="content-reset">
-                        ${page.pageContent}
-                        </div>
-                        <@comments commentList=pageComments article=page></@comments>
-                    </article>
-                </main>
-                <#include "side.ftl">
-            </div>
-        </div>
-        <#include "footer.ftl">
-        <@comment_script oId=page.oId commentable=page.commentable></@comment_script>
-    </body>
-</html>
--- a/9IPHP/side.ftl
+++ b/9IPHP/side.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,48 +17,54 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
+<#include "../../common-template/macro-user_site.ftl">
 <aside>
+    <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+        <#include "../../common-template/toc.ftl"/>
+    <#else>
    <section>
        <#if noticeBoard??>
-            <div class="ad content-reset">
-                ${noticeBoard}
-            </div>
+        <div class="ad vditor-reset">
+            ${noticeBoard}
+        </div>
        </#if>

        <#if 0 != mostUsedCategories?size>
-            <div class="module">
-                <header><h2>${categoryLabel}</h2></header>
-                <main>
-                    <#list mostUsedCategories as category>
-                        <a href="${servePath}/category/${category.categoryURI}"
-                           aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
-                           class="tag tooltipped tooltipped-n">
-                                ${category.categoryTitle}</a>
-                    </#list>
-                </main>
-            </div>
+        <div class="module">
+            <header><h2>${categoryLabel}</h2></header>
+            <main>
+                <#list mostUsedCategories as category>
+                    <a href="${servePath}/category/${category.categoryURI}"
+                       aria-label="${category.categoryTagCnt} ${cntLabel}${tagsLabel}"
+                       class="tag vditor-tooltipped vditor-tooltipped__n">
+                        ${category.categoryTitle}</a>
+                </#list>
+            </main>
+        </div>
        </#if>

        <#if 0 != mostUsedTags?size>
-            <div class="module">
-                <header><h2>${tagsLabel}</h2></header>
-                <main>
-                    <#list mostUsedTags as tag>
-                        <a rel="tag"
-                           href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
-                           class="tag tooltipped tooltipped-n"
-                           aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}">
-                                ${tag.tagTitle}</a>
-                    </#list>
-                </main>
-            </div>
+        <div class="module">
+            <header><h2>${tagsLabel}</h2></header>
+            <main>
+                <#list mostUsedTags as tag>
+                    <a rel="tag"
+                       href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
+                       class="tag vditor-tooltipped vditor-tooltipped__n"
+                       aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}">
+                        ${tag.tagTitle}</a>
+                </#list>
+            </main>
+        </div>
        </#if>

        <div class="module meta">
            <header>
-                <h2>${adminUser.userName}</h2>
+                <h2 class="ft__center">
+                    <@userSite dir="nw"></@userSite>
+                </h2>
            </header>
-            <main class="fn-clear">
+            <main class="fn__clear">
                <img src="${adminUser.userAvatar}" aria-label="${adminUser.userName}"/>
                <div class="fn-right">
                    <a href="${servePath}/archives.html">
@@ -74,41 +80,42 @@
        </div>

        <#if 0 != mostCommentArticles?size>
-            <div class="module">
-                <header><h2>${mostCommentArticlesLabel}</h2></header>
-                <main class="list">
-                    <ul>
-                        <#list mostCommentArticles as article>
-                            <li>
-                                <a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}"
-                                   class="tooltipped tooltipped-e"
-                                   href="${servePath}${article.articlePermalink}">
-                                    ${article.articleTitle}
-                                </a>
-                            </li>
-                        </#list>
-                    </ul>
-                </main>
-            </div>
+        <div class="module">
+            <header><h2>${mostCommentArticlesLabel}</h2></header>
+            <main class="list">
+                <ul>
+                    <#list mostCommentArticles as article>
+                        <li>
+                            <a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}"
+                               class="vditor-tooltipped vditor-tooltipped__e"
+                               href="${servePath}${article.articlePermalink}">
+                                ${article.articleTitle}
+                            </a>
+                        </li>
+                    </#list>
+                </ul>
+            </main>
+        </div>
        </#if>

        <#if 0 != mostViewCountArticles?size>
-            <div class="module">
-                <header><h2>${mostViewCountArticlesLabel}</h2></header>
-                <main class="list">
-                    <ul>
-                        <#list mostViewCountArticles as article>
-                            <li>
-                                <a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}"
-                                   class="tooltipped tooltipped-e"
-                                   href="${servePath}${article.articlePermalink}">
-                                    ${article.articleTitle}
-                                </a>
-                            </li>
-                        </#list>
-                    </ul>
-                </main>
-            </div>
+        <div class="module">
+            <header><h2>${mostViewCountArticlesLabel}</h2></header>
+            <main class="list">
+                <ul>
+                    <#list mostViewCountArticles as article>
+                        <li>
+                            <a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}"
+                               class="vditor-tooltipped vditor-tooltipped__e"
+                               href="${servePath}${article.articlePermalink}">
+                                ${article.articleTitle}
+                            </a>
+                        </li>
+                    </#list>
+                </ul>
+            </main>
+        </div>
        </#if>
    </section>
+    </#if>
 </aside>
--- a/9IPHP/skin.properties
+++ b/9IPHP/skin.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
--- a/9IPHP/tag-articles.ftl
+++ b/9IPHP/tag-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${tag.tagTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        <@head title="${tag.tagTitle} ${tagLabel} - ${blogTitle}">
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/9IPHP/tags.ftl
+++ b/9IPHP/tags.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${allTagsLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${allTagsLabel}"/>
-        <meta name="description" content="<#list tags as tag>${tag.tagTitle}<#if tag_has_next>,</#if></#list>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
@@ -37,7 +36,7 @@
                    </div>
                    <div class="tags">
                        <#list tags as tag>
-                            <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
+                            <a rel="tag" class="tag"
                               href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
                                <span>${tag.tagTitle}</span>
                                (<b>${tag.tagPublishedRefCount}</b>)
@@ -49,16 +48,5 @@
            </div>
        </div>
        <#include "footer.ftl">
-            <script type="text/javascript" src="${staticServePath}/skins/${skinDirName}/js/isotope.pkgd.min.js" charset="utf-8"></script>
-            <script>
-            $('.tags').isotope({
-                transitionDuration: '1.5s',
-                filter: 'a',
-                layoutMode: 'fitRows'
-            });
-            $('.tags').isotope({
-                sortBy: 'random'
-            });
-            </script>
    </body>
 </html>
--- a/Andrea/archive-articles.ftl
+++ b/Andrea/archive-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,14 +17,13 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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 title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveLabel} - ${blogTitle}">
+             <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+         </@head>
    </head>
    <body>
        ${topBarReplacement}
--- a/Andrea/archives.ftl
+++ b/Andrea/archives.ftl
@@ -0,0 +1,71 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+        <@head title="${allTagsLabel} - ${blogTitle}">
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+        </@head>
+</head>
+<body>
+${topBarReplacement}
+        <#include "side-tool.ftl">
+<div class="wrapper">
+            <#include "header.ftl">
+    <div>
+        <div class="main">
+            <div class="main-content vditor-content">
+                <#if 0 != archiveDates?size>
+                    <ul id="tags" class="fn__clear">
+                    <#list archiveDates as archiveDate>
+                        <li>
+                            <#if "en" == localeString?substring(0, 2)>
+                                <a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
+                                    ${archiveDate.monthName} ${archiveDate.archiveDateYear}(${archiveDate.archiveDatePublishedArticleCount})
+                                </a>
+                            <#else>
+                                    <a class="post-title" href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
+                                        ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})
+                                    </a>
+                            </#if>
+                        </li>
+                    </#list>
+                    </ul>
+                </#if>
+                <div class="clear"></div>
+            </div>
+            <div class="main-footer"></div>
+        </div>
+        <div class="side-navi">
+                    <#include "side.ftl">
+        </div>
+        <div class="clear"></div>
+        <div class="brush">
+            <div class="brush-icon"></div>
+            <div id="brush"></div>
+        </div>
+        <div class="footer">
+                    <#include "footer.ftl">
+        </div>
+    </div>
+</div>
+</body>
+</html>
--- a/Andrea/article-list.ftl
+++ b/Andrea/article-list.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -55,7 +55,7 @@
            </div>
        </div>
        <div class="clear"></div>
-        <div class="article-abstract content-reset">
+        <div class="article-abstract vditor-reset">
            ${article.articleAbstract}
            <div class="clear"></div>
            <a class="right underline" href="${servePath}${article.articlePermalink}">
--- a/Andrea/article.ftl
+++ b/Andrea/article.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,38 +17,22 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <#include "macro-comments.ftl">
 <#include "../../common-template/macro-comment_script.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${article.articleTitle} - ${blogTitle}">
-        <meta name="keywords" content="${article.articleTags}" />
-        <meta name="description" content="${article.articleAbstract?html}" />
-        </@head>
+        <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
+            <link rel="stylesheet"
+                  href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        <#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>
    </head>
    <body>
        ${topBarReplacement}
@@ -92,7 +76,7 @@
                                </div>
                            </div>
                            <div class="clear"></div>
-                            <div class="content-reset">
+                            <div class="vditor-reset">
                                ${article.articleContent}
                                <#if "" != article.articleSign.signHTML?trim>
                                <div class="marginTop12">
--- a/Andrea/author-articles.ftl
+++ b/Andrea/author-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/Andrea/category-articles.ftl
+++ b/Andrea/category-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/Andrea/common-comment.ftl
+++ b/Andrea/common-comment.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -36,7 +36,7 @@
               onmouseout="page.hideComment('${comment.commentOriginalCommentId}')">${comment.commentOriginalCommentName}</a>
        </#if>
            &nbsp;${comment.commentDate2?string("yyyy-MM-dd HH:mm:ss")}
-            <div class="comment-content content-reset">
+            <div class="comment-content vditor-reset">
            ${comment.commentContent}
            </div>
        <#if article.commentable>
--- a/Andrea/css/base.css
+++ b/Andrea/css/base.css
--- a/Andrea/css/base.scss
+++ b/Andrea/css/base.scss
--- a/Andrea/footer.ftl
+++ b/Andrea/footer.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -19,33 +19,22 @@
 -->
 <div class="copyright">
    &copy; ${year} - <a href="${servePath}">${blogTitle}</a>${footerContent}<br/>
-    Powered by <a href="https://b3log.org" target="_blank">B3log 开源</a> • <a href="https://solo.b3log.org" target="_blank">Solo</a> ${version}<br/>
-    Theme by <a rel="friend" href="http://www.madeincima.eu/" target="_blank">Andrea</a> & <a rel="friend" href="http://vanessa.b3log.org" target="_blank">Vanessa</a>.
+    Powered by <a href="https://b3log.org" target="_blank">B3log 开源</a> • <a href="https://solo.b3log.org" target="_blank">Solo</a><br/>
+    Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a> by <a rel="friend" href="http://vanessa.b3log.org" target="_blank">Vanessa</a>.
 </div>
 <script type="text/javascript" src="${staticServePath}/js/lib/jquery/jquery.min.js" charset="utf-8"></script>
+<script src="${staticServePath}/js/common${miniPostfix}.js?${staticResourceVersion}"></script>
+<#include "../../common-template/label.ftl">
 <script type="text/javascript">
-    var latkeConfig = {
-        "servePath": "${servePath}",
-        "staticServePath": "${staticServePath}",
-        "isLoggedIn": "${isLoggedIn?string}"
-    };
-    
-    var Label = {
-        "markedAvailable": ${markedAvailable?c},
-        "adminLabel": "${adminLabel}",
-        "logoutLabel": "${logoutLabel}",
-        "skinDirName": "${skinDirName}"
-    };
-
    // init brush
    var buildBrush = function () {
-        $("#brush").height(document.documentElement.scrollHeight - document.documentElement.clientHeight).css("background-position",
-        parseInt((document.documentElement.scrollWidth - 910) / 2 - 56) + "px -150px");
+        $("#brush").height($('body').height() - $(window).height() + 200).css("background-position",
+        parseInt((document.documentElement.scrollWidth - 910) / 2 - 56) + "px -200px");
    };

    // init
    $(document).ready(function () {
-        Util.init();
+        Util.setTopBar()
        Util.replaceSideEm($("#naviComments li .side-comment"));
    
        // brush
--- a/Andrea/header.ftl
+++ b/Andrea/header.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -25,27 +25,6 @@
            </a>
        </h1>
        <span class="sub-title">${blogSubtitle}</span>
-        <div>
-            <span>
-                ${viewCount1Label}
-                <span class='error-msg'>
-                    ${statistic.statisticBlogViewCount}
-                </span>
-            </span>
-            <span>
-                ${articleCount1Label}
-                <span class='error-msg'>
-                    ${statistic.statisticPublishedBlogArticleCount}
-                </span>
-            </span>
-            <span>
-                ${commentCount1Label}
-                <span class='error-msg'>
-                    ${statistic.statisticPublishedBlogCommentCount}
-                </span>
-            </span>
-        </div>
-        <span class="clear"></span>
    </div>
    <div class="right">
        <ul>
--- a/Andrea/index.ftl
+++ b/Andrea/index.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,17 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${blogTitle}">
-        <#if metaKeywords??>
-        <meta name="keywords" content="${metaKeywords}"/>
-        </#if>
-        <#if metaDescription??>
-        <meta name="description" content="${metaDescription}"/>
-        </#if>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/Andrea/lang/lang_en_US.properties
+++ b/Andrea/lang/lang_en_US.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
@@ -18,7 +18,7 @@

 #
 # Description: Solo language configurations(en_US).
-# Version: 3.0.0.0, Feb 23, 2019
+# Version: 3.2.0.0, Mar 20, 2019
 # Author: Liang Ding
 # Author: Vanessa
 #
@@ -35,26 +35,6 @@ commentNameLabel=Name
 commentURL1Label=URL:
 commentURLLabel=URL
 commentContent1Label=Content:
-blogSyncMgmtLabel=Blog Sync Management
-syncMgmtLabel=Sync manage Blog
-syncPostLabel=Sync Post
-syncUpdateLabel=Sync Update
-syncRemoveLabel=Sync Remove
-indexMostCommentArticleDisplayCnt1Label=Most Comment Article Display Count:
-CSDNBlogLabel=CSDN Blog
-BlogJavaLabel=BlogJava
-CnBlogsLabel=CnBlogs
-tencentLabel=Tencent
-appKey1Label=App Key:
-appSecret1Label=App Secret:
-postToTencentMicroblogWhilePublishArticleLabel=Post to Tencent microblog while publish an article:
-postToCommunityLabel=Post to Community: 
-authorizeTencentMicroblog1Label=Click to authorize:
-googleLabel=Google
-OAuthConsumerSecret1Label=OAuth Consumer Secret:
-welcomeToSoloLabel=Welcome to Solo!
-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>
-keyOfSolo1Label=Solo Key: 
 ####
 updatePreferenceFailLabel=Update Fail, please check <b>Blog Host</b> configuration!
 tagsEmptyLabel=Tags is empty
@@ -65,3 +45,4 @@ canntBeLocalhostOnProductionLabel=Can not set host as localhost on production!
 noDataLable=NO Data
 ####
 confirmRemoveLabel=Are You Sure?
+moreArchiveLabel=More Archive
--- a/Andrea/lang/lang_zh_CN.properties
+++ b/Andrea/lang/lang_zh_CN.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
@@ -18,7 +18,7 @@

 #
 # Description: Solo default language configurations(zh_CN).
-# Version: 3.0.0.0, Feb 23, 2019
+# Version: 3.2.0.0, Mar 20, 2019
 # Author: Liang Ding
 # Author: Vanessa
 #
@@ -36,26 +36,6 @@ commentNameLabel=\u59D3\u540D
 commentURL1Label=URL\uFF1A
 commentURLLabel=URL
 commentContent1Label=\u8BC4\u8BBA\u5185\u5BB9\uFF1A
-blogSyncMgmtLabel=\u535A\u5BA2\u540C\u6B65\u7BA1\u7406
-syncMgmtLabel=\u540C\u6B65\u7BA1\u7406\u535A\u5BA2
-syncPostLabel=\u540C\u6B65\u53D1\u5E03
-syncUpdateLabel=\u540C\u6B65\u66F4\u65B0
-syncRemoveLabel=\u540C\u6B65\u5220\u9664
-indexMostViewArticleDisplayCnt1Label=\u8BBF\u95EE\u6700\u591A\u6700\u591A\u6587\u7AE0\u663E\u793A\u6570\u76EE\uFF1A
-CSDNBlogLabel=CSDN \u535A\u5BA2
-BlogJavaLabel=BlogJava
-CnBlogsLabel=\u535A\u5BA2\u56ED
-tencentLabel=\u817E\u8BAF
-appKey1Label=App Key:
-appSecret1Label=App Secret:
-postToTencentMicroblogWhilePublishArticleLabel=\u53D1\u6587\u7AE0\u65F6\u540C\u6B65\u5230\u817E\u8BAF\u5FAE\u535A\uFF1A
-postToCommunityLabel=\u53D1\u5E03\u5230\u793E\u533A\uFF1A
-authorizeTencentMicroblog1Label=\u70B9\u51FB\u56FE\u6807\u8FDB\u884C\u6388\u6743:
-googleLabel=Google
-OAuthConsumerSecret1Label=OAuth Consumer Secret\uFF1A
-welcomeToSoloLabel=\u6B22\u8FCE\u4F7F\u7528 Solo\uFF01
-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>
-keyOfSolo1Label=Solo Key\uFF1A
 ####
 updatePreferenceFailLabel=\u66F4\u65B0\u5931\u8D25\uFF0C\u8BF7\u4ED4\u7EC6\u68C0\u67E5\u201C\u535A\u5BA2\u5730\u5740\u201D\u7684\u914D\u7F6E\u662F\u5426\u6B63\u786E
 tagsEmptyLabel=\u6807\u7B7E\u4E0D\u80FD\u4E3A\u7A7A\uFF01
@@ -66,3 +46,4 @@ canntBeLocalhostOnProductionLabel=GAE \u73AF\u5883\u4E0A\u8BF7\u52FF\u6307\u5B9A
 noDataLable=\u65E0\u6570\u636E
 ####
 confirmRemoveLabel=\u786E\u5B9A\u5220\u9664\uFF1F
+moreArchiveLabel=\u66F4\u591A\u5B58\u6863
--- a/Andrea/macro-comments.ftl
+++ b/Andrea/macro-comments.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
--- a/Andrea/macro-head.ftl
+++ b/Andrea/macro-head.ftl
@@ -1,36 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, 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" />
-<title>${title}</title>
-<#nested>
-<meta name="author" content="${blogTitle?html}" />
-<meta name="generator" content="Solo" />
-<meta name="owner" content="B3log Team" />
-<meta name="revised" content="${blogTitle?html}, ${year}" />
-<meta name="copyright" content="B3log" />
-<meta http-equiv="Window-target" content="_top" />
-<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}" charset="utf-8" />
-<link href="${servePath}/rss.xml" 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/Andrea/page.ftl
+++ b/Andrea/page.ftl
@@ -1,63 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, 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 "../../common-template/macro-comment_script.ftl">
-<!DOCTYPE html>
-<html>
-    <head>
-        <@head title="${page.pageTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${page.pageTitle}" />
-        <meta name="description" content="${metaDescription}" />
-        </@head>
-    </head>
-    <body>
-        ${topBarReplacement}
-        <#include "side-tool.ftl">
-        <div class="wrapper">
-            <#include "header.ftl">
-            <div>
-                <div class="main">
-                    <div class="main-content">
-                        <div class="article">
-                            <div class="content-reset" style="margin-top: 0px;">
-                                ${page.pageContent}
-                            </div>
-                        </div>
-                        <@comments commentList=pageComments article=page></@comments>
-                    </div>
-                    <div class="main-footer"></div>
-                </div>
-                <div class="side-navi">
-                    <#include "side.ftl">
-                </div>
-                <div class="clear"></div>
-                <div class="brush">
-                    <div class="brush-icon"></div>
-                    <div id="brush"></div>
-                </div>
-                <div class="footer">
-                    <#include "footer.ftl">
-                </div>
-            </div>
-        </div>
-        <@comment_script oId=page.oId commentable=page.commentable></@comment_script>
-    </body>
-</html>
--- a/Andrea/side-tool.ftl
+++ b/Andrea/side-tool.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
--- a/Andrea/side.ftl
+++ b/Andrea/side.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,145 +17,196 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#if "" != noticeBoard>
 <div class="item" style="margin-top: -35px;">
-    <h4>${noticeBoardLabel}</h4>
-    <div class="marginLeft12 marginTop12">
-        ${noticeBoard}
-    </div>
+    <#include "../../common-template/macro-user_site.ftl">
+    <h4>
+    <@userSite dir="nw"></@userSite>
+    </h4>
+    <dl>
+        <dd>
+            <ul>
+                <li>
+                ${viewCount1Label}
+                    <span class='error-msg'>
+                    ${statistic.statisticBlogViewCount}
+                    </span>
+                </li>
+                <li>
+                ${articleCount1Label}
+                    <span class='error-msg'>
+                    ${statistic.statisticPublishedBlogArticleCount}
+                    </span>
+                </li>
+                <li>
+                ${commentCount1Label}
+                    <span class='error-msg'>
+                    ${statistic.statisticPublishedBlogCommentCount}
+                    </span>
+                </li>
+            </ul>
+        </dd>
+    </dl>
+
+    <#if "" != noticeBoard>
+        <div class="margin12">
+            ${noticeBoard}
+        </div>
+    </#if>
 </div>
-</#if>
-<#if 0 != recentComments?size || 0 != mostCommentArticles?size || 0 != mostViewCountArticles?size>
+
+
+<#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
 <div class="item">
    <dl>
-        <#if 0 != mostCommentArticles?size>
        <dd>
-            <h4>${mostCommentArticlesLabel}</h4>
-            <ul>
-                <#list mostCommentArticles as article>
-                <li>
-                    <a rel="nofollow" title="${article.articleTitle}" href="${servePath}${article.articlePermalink}">
-                        <sup>[${article.articleCommentCount}]</sup>
-                        ${article.articleTitle}
-                    </a>
-                </li>
-                </#list>
-            </ul>
+            <h4>${tocLabel}</h4>
+            <#include "../../common-template/toc.ftl"/>
        </dd>
-        </#if>
-        <#if 0 != recentComments?size>
-        <dd>
-            <h4>${recentCommentsLabel}</h4>
-            <ul id="naviComments">
-                <#list recentComments as comment>
-                <li>
-                    <a class="author" title="${comment.commentName}" target="_blank" href="${comment.commentURL}">
-                        ${comment.commentName}
-                    </a>:
-                    <a rel="nofollow" class='side-comment' href="${servePath}${comment.commentSharpURL}">
-                        ${comment.commentContent}
-                    </a>
-                </li>
-                </#list>
-            </ul>
-        </dd>
-        </#if>
-        <#if 0 != mostViewCountArticles?size>
-        <dd>
-            <h4>${mostViewCountArticlesLabel}</h4>
-            <ul>
-                <#list mostViewCountArticles as article>
-                <li>
-                    <a rel="nofollow" title="${article.articleTitle}"
-                       href="${servePath}${article.articlePermalink}">
-                        <sup>[${article.articleViewCount}]</sup>
-                        ${article.articleTitle}
-                    </a>
-                </li>
-                </#list>
-            </ul>
-        </dd>
-        </#if>
    </dl>
 </div>
-</#if>

-<#if 0 != mostUsedCategories?size || 0 != mostUsedTags?size>
+<#else>
+    <#if 0 != recentComments?size || 0 != mostCommentArticles?size || 0 != mostViewCountArticles?size>
    <div class="item">
        <dl>
-            <#if 0 != mostUsedCategories?size>
+            <#if 0 != mostCommentArticles?size>
            <dd>
-                <h4>${categoryLabel}</h4>
+                <h4>${mostCommentArticlesLabel}</h4>
                <ul>
-                    <#list mostUsedCategories as category>
+                    <#list mostCommentArticles as article>
                        <li>
-                            <a href="${servePath}/category/${category.categoryURI}">
-                                ${category.categoryTitle} (${category.categoryTagCnt})</a>
+                            <a rel="nofollow" title="${article.articleTitle}"
+                               href="${servePath}${article.articlePermalink}">
+                                <sup>[${article.articleCommentCount}]</sup>
+                                ${article.articleTitle}
+                            </a>
                        </li>
                    </#list>
                </ul>
            </dd>
            </#if>
-            <#if 0 != mostUsedTags?size>
+            <#if 0 != recentComments?size>
+            <dd>
+                <h4>${recentCommentsLabel}</h4>
+                <ul id="naviComments">
+                    <#list recentComments as comment>
+                        <li>
+                            <a class="author" title="${comment.commentName}" target="_blank" href="${comment.commentURL}">
+                                ${comment.commentName}
+                            </a>:
+                            <a rel="nofollow" class='side-comment' href="${servePath}${comment.commentSharpURL}">
+                                ${comment.commentContent}
+                            </a>
+                        </li>
+                    </#list>
+                </ul>
+            </dd>
+            </#if>
+            <#if 0 != mostViewCountArticles?size>
+            <dd>
+                <h4>${mostViewCountArticlesLabel}</h4>
+                <ul>
+                    <#list mostViewCountArticles as article>
+                        <li>
+                            <a rel="nofollow" title="${article.articleTitle}"
+                               href="${servePath}${article.articlePermalink}">
+                                <sup>[${article.articleViewCount}]</sup>
+                                ${article.articleTitle}
+                            </a>
+                        </li>
+                    </#list>
+                </ul>
+            </dd>
+            </#if>
+        </dl>
+    </div>
+    </#if>
+
+    <#if 0 != mostUsedCategories?size || 0 != mostUsedTags?size>
+        <div class="item">
+            <dl>
+                <#if 0 != mostUsedCategories?size>
                <dd>
-                    <h4>${tagsLabel}</h4>
+                    <h4>${categoryLabel}</h4>
                    <ul>
-                        <#list mostUsedTags as tag>
+                        <#list mostUsedCategories as category>
                            <li>
-                                <a rel="tag" title="${tag.tagTitle}(${tag.tagPublishedRefCount})" href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
-                                    ${tag.tagTitle} (${tag.tagPublishedRefCount})</a>
+                                <a href="${servePath}/category/${category.categoryURI}">
+                                    ${category.categoryTitle} (${category.categoryTagCnt})</a>
                            </li>
                        </#list>
                    </ul>
                </dd>
-            </#if>
+                </#if>
+                <#if 0 != mostUsedTags?size>
+                    <dd>
+                        <h4>${tagsLabel}</h4>
+                        <ul>
+                            <#list mostUsedTags as tag>
+                                <li>
+                                    <a rel="tag" title="${tag.tagTitle}(${tag.tagPublishedRefCount})"
+                                       href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
+                                        ${tag.tagTitle} (${tag.tagPublishedRefCount})</a>
+                                </li>
+                            </#list>
+                        </ul>
+                    </dd>
+                </#if>
+            </dl>
+        </div>
+    </#if>
+
+    <#if 0 != links?size>
+    <div class="item">
+        <dl>
+            <dd>
+                <h4>${linkLabel}</h4>
+                <ul class="navi-tags">
+                    <#list links as link>
+                        <li>
+                            <a rel="friend" href="${link.linkAddress}" title="${link.linkTitle}" target="_blank">
+                                ${link.linkTitle}</a>
+                            <img onclick="window.location='${link.linkAddress}'"
+                                 alt="${link.linkTitle}"
+                                 src="${faviconAPI}<#list link.linkAddress?split('/') as x><#if x_index=2>${x}<#break></#if></#list>"
+                                 width="16" height="16"/>
+                        </li>
+                    </#list>
+                </ul>
+            </dd>
        </dl>
    </div>
-</#if>
-
-<#if 0 != links?size>
-<div class="item">
-    <dl>
-        <dd>
-            <h4>${linkLabel}</h4>
-            <ul class="navi-tags">
-                <#list links as link>
-                <li>
-                    <a rel="friend" href="${link.linkAddress}" title="${link.linkTitle}" target="_blank">
-                        ${link.linkTitle}</a>
-                     <img onclick="window.location='${link.linkAddress}'"
-                         alt="${link.linkTitle}" 
-                         src="${faviconAPI}<#list link.linkAddress?split('/') as x><#if x_index=2>${x}<#break></#if></#list>" width="16" height="16" />
-                </li>
-                </#list>
-            </ul>
-        </dd>
-    </dl>
-</div>
-</#if>
-<#if 0 != archiveDates?size>
-<div class="item">
-    <dl>
-        <dd>
-            <h4>${archiveLabel}</h4>
-            <ul>
-                <#list archiveDates as archiveDate>
-                <#if archiveDate_index < 10>
-                <li>
-                    <#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>
+    <#if 0 != archiveDates?size>
+    <div class="item">
+        <dl>
+            <dd>
+                <h4>${archiveLabel}</h4>
+                <ul>
+                    <#list archiveDates as archiveDate>
+                    <#if archiveDate_index < 10>
+                    <li>
+                        <#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>
+                    </li>
+                    <#elseif archiveDate_index == 10>
+                    <li>
+                        <a href="${servePath}/archives.html">${moreArchiveLabel}</a>
+                    </li>
                    </#if>
-                </li>
-                </#if>
-                </#list>
-            </ul>
-        </dd>
-    </dl>
-</div>
+                    </#list>
+                </ul>
+            </dd>
+        </dl>
+    </div>
+    </#if>
 </#if>
--- a/Andrea/skin.properties
+++ b/Andrea/skin.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
@@ -18,9 +18,9 @@

 #
 # Description: Andrea skin.
-# Version: 1.0.0.8, Nov 21, 2012
+# Version: 1.0.0.8, Mar 20, 2019
 # Author: Liyuan Li
 #

 name=Andrea
-memo=Refers to http://www.madeincima.eu
+memo=https://github.com/b3log/solo-skins
--- a/Andrea/tag-articles.ftl
+++ b/Andrea/tag-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,14 +17,13 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${tag.tagTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
-        </@head>
+       <@head title="${tag.tagTitle} ${tagLabel} - ${blogTitle}">
+           <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+       </@head>
    </head>
    <body>
        ${topBarReplacement}
--- a/Andrea/tags.ftl
+++ b/Andrea/tags.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${allTagsLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${allTagsLabel}"/>
-        <meta name="description" content="<#list tags as tag>${tag.tagTitle}<#if tag_has_next>,</#if></#list>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
@@ -33,8 +32,8 @@
            <#include "header.ftl">
            <div>
                <div class="main">
-                    <div class="main-content">
-                        <ul id="tags">
+                    <div class="main-content vditor-content">
+                        <ul id="tags" class="fn__clear">
                            <#list tags as tag>
                            <li>
                                <a rel="tag" data-count="${tag.tagPublishedRefCount}"
--- a/Bruce/archive-articles.ftl
+++ b/Bruce/archive-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,14 +17,13 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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 title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveLabel} - ${blogTitle}">
+             <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+         </@head>
    </head>
    <body>
        <#include "header.ftl">
--- a/Bruce/archives.ftl
+++ b/Bruce/archives.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${archiveLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${archiveLabel}"/>
-        <meta name="description" content="${metaDescription},${archiveLabel}"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
@@ -42,12 +41,10 @@
                        <#if curYear != archiveDate.archiveDateYear?number></div>
                    
                    <div class="row"><hr/><h2>${archiveDate.archiveDateYear} ${yearLabel}</h2></#if>
-                        <span>
                            <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}"
                               title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})">
                                ${archiveDate.archiveDateMonth} ${monthLabel}(${archiveDate.archiveDatePublishedArticleCount})</a>
-                            <span class="gray">•<span>
-                        </span>
+                            <span class="gray">•</span>

                        <#assign curYear = archiveDate.archiveDateYear?number>
                        </#list>
--- a/Bruce/article-list.ftl
+++ b/Bruce/article-list.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
--- a/Bruce/article.ftl
+++ b/Bruce/article.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,38 +17,22 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <#include "macro-comments.ftl">
 <#include "../../common-template/macro-comment_script.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${article.articleTitle} - ${blogTitle}">
-        <meta name="keywords" content="${article.articleTags}" />
-        <meta name="description" content="${article.articleAbstract?html}" />
-        </@head>
+        <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
+            <link rel="stylesheet"
+                  href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        <#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>
    </head>
    <body>
        <#include "header.ftl">
@@ -79,7 +63,7 @@
                            </div>

                            <div class="row article-content code-highlight">
-                                <div class="col-sm-12 content-reset" id="abstract${article.oId}">
+                                <div class="col-sm-12 vditor-reset" id="abstract${article.oId}">
                                    ${article.articleContent}
                                    <#if "" != article.articleSign.signHTML?trim>
                                    <p>
@@ -102,9 +86,13 @@
                    </#if>
                    <div class="col-sm-2"></div>
                </div>
-            </div>  
+            </div>
        </div>

+        <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+            <#include "../../common-template/toc.ftl"/>
+        </#if>
+
        <#include "footer.ftl">
        <@comment_script oId=article.oId commentable=article.commentable>
        page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
--- a/Bruce/category-articles.ftl
+++ b/Bruce/category-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/Bruce/common-comment.ftl
+++ b/Bruce/common-comment.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,7 +17,7 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<div class="row comment" id="${comment.oId}">
+<div class="comment fn__clear" id="${comment.oId}">
    <img class="col-sm-1" title="${comment.commentName}"
         alt="${comment.commentName}" src="${comment.commentThumbnailURL}"/>
    <div class="col-sm-11">
@@ -38,6 +38,6 @@
            </#if></span>

        </div>
-        <div class="row code-highlight article-content content-reset">${comment.commentContent}</div>
+        <div class="row code-highlight article-content vditor-reset">${comment.commentContent}</div>
    </div>
 </div>
--- a/Bruce/css/_bootstrap.scss
+++ b/Bruce/css/_bootstrap.scss
@@ -1,6 +1,6 @@
-/**
+/*
 * Solo - A small and beautiful blogging system written in Java.
- * Copyright (c) 2010-2019, b3log.org & hacpai.com
+ * Copyright (c) 2010-present, b3log.org
 *
 * 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
@@ -2365,7 +2365,7 @@ output {
  display: block;
  width: 100%;
  height: 34px;
-  padding: 6px 12px;
+  padding: 6px 8px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
@@ -3943,6 +3943,9 @@ select[multiple].input-group-sm > .input-group-btn > .btn {
  line-height: 20px;
 }
@media (max-width: 767px) {
+  .comment > img {
+    display: none !important;
+  }
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
@@ -6211,4 +6214,4 @@ button.close {
    display: none !important;
  }
 }
-/*# sourceMappingURL=bootstrap.css.map */
+
--- a/Bruce/css/base.css
+++ b/Bruce/css/base.css
--- a/Bruce/css/base.scss
+++ b/Bruce/css/base.scss
@@ -1,6 +1,6 @@
-/**
+/*
 * Solo - A small and beautiful blogging system written in Java.
- * Copyright (c) 2010-2019, b3log.org & hacpai.com
+ * Copyright (c) 2010-present, b3log.org
 *
 * 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
@@ -21,12 +21,47 @@
 *
 * @author <a href="http://88250.b3log.org">Liang Ding</a>
 * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 2.0.0.0, Feb 21, 2019
+ * @version 2.1.0.0, Mar 21, 2019
 */
-
-@import "../../../scss/reset-content";
+@import "bootstrap";
+@import "../../../scss/usite";
+@import "../../../scss/toc";
+@import "../../../scss/function";
@import "vditor/src/assets/scss/classic";

+.article__toc {
+    position: fixed;
+    top: 90px;
+    bottom: 198px;
+    padding-left: 0;
+    left: 100%;
+}
+#comments {
+    position: relative;
+}
+.comment-body-ref {
+    position: absolute;
+    background-color: #fff;
+    width: 100%;
+    left: 64px;
+    border: 1px solid #ccc;
+    box-shadow: inset 0 1px 1px rgba(0,0,0,0.075);
+    border-radius: 5px;
+    padding: 10px 0;
+}
+
+.user__site {
+    display: inline-block;
+    height: 20px;
+    width: 20px;
+    margin: 0 5px 15px 0;
+    svg {
+        height: 20px;
+        width: 20px;
+        fill: currentColor;
+    }
+}
+
 body, button, input, select, textarea { 
    font: 400 1em/1.8 Avenir,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
    letter-spacing: 0.01rem;
@@ -62,19 +97,6 @@ h4, h5, h6 {
    margin-bottom: 12px;
 }

-.article-content {
-    font-size: 1.1em;
-}
-
-.article-content .task-list-item {
-    list-style: none;
-    margin-left: -1em;
-}
-
-.article-content img {
-    max-width: 100%;
-}
-
 .header {
    border-bottom: 1px solid #ddd;
    background-color: #f9f9f9;
--- a/Bruce/css/bootstrap-theme.css
+++ b/Bruce/css/bootstrap-theme.css
@@ -1,453 +0,0 @@
-/**
- * Solo - A small and beautiful blogging system written in Java.
- * Copyright (c) 2010-2019, 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/>.
- */
-.btn-default,
-.btn-primary,
-.btn-success,
-.btn-info,
-.btn-warning,
-.btn-danger {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 1px rgba(0, 0, 0, .075);
-}
-.btn-default:active,
-.btn-primary:active,
-.btn-success:active,
-.btn-info:active,
-.btn-warning:active,
-.btn-danger:active,
-.btn-default.active,
-.btn-primary.active,
-.btn-success.active,
-.btn-info.active,
-.btn-warning.active,
-.btn-danger.active {
-  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-          box-shadow: inset 0 3px 5px rgba(0, 0, 0, .125);
-}
-.btn:active,
-.btn.active {
-  background-image: none;
-}
-.btn-default {
-  text-shadow: 0 1px 0 #fff;
-  background-image: -webkit-linear-gradient(top, #fff 0%, #e0e0e0 100%);
-  background-image:      -o-linear-gradient(top, #fff 0%, #e0e0e0 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#e0e0e0));
-  background-image:         linear-gradient(to bottom, #fff 0%, #e0e0e0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe0e0e0', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #dbdbdb;
-  border-color: #ccc;
-}
-.btn-default:hover,
-.btn-default:focus {
-  background-color: #e0e0e0;
-  background-position: 0 -15px;
-}
-.btn-default:active,
-.btn-default.active {
-  background-color: #e0e0e0;
-  border-color: #dbdbdb;
-}
-.btn-default:disabled,
-.btn-default[disabled] {
-  background-color: #e0e0e0;
-  background-image: none;
-}
-.btn-primary {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #2d6ca2 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#2d6ca2));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #2d6ca2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff2d6ca2', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #2b669a;
-}
-.btn-primary:hover,
-.btn-primary:focus {
-  background-color: #2d6ca2;
-  background-position: 0 -15px;
-}
-.btn-primary:active,
-.btn-primary.active {
-  background-color: #2d6ca2;
-  border-color: #2b669a;
-}
-.btn-primary:disabled,
-.btn-primary[disabled] {
-  background-color: #2d6ca2;
-  background-image: none;
-}
-.btn-success {
-  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #419641 100%);
-  background-image:      -o-linear-gradient(top, #5cb85c 0%, #419641 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#419641));
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #419641 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff419641', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #3e8f3e;
-}
-.btn-success:hover,
-.btn-success:focus {
-  background-color: #419641;
-  background-position: 0 -15px;
-}
-.btn-success:active,
-.btn-success.active {
-  background-color: #419641;
-  border-color: #3e8f3e;
-}
-.btn-success:disabled,
-.btn-success[disabled] {
-  background-color: #419641;
-  background-image: none;
-}
-.btn-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image:      -o-linear-gradient(top, #5bc0de 0%, #2aabd2 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#2aabd2));
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #2aabd2 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff2aabd2', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #28a4c9;
-}
-.btn-info:hover,
-.btn-info:focus {
-  background-color: #2aabd2;
-  background-position: 0 -15px;
-}
-.btn-info:active,
-.btn-info.active {
-  background-color: #2aabd2;
-  border-color: #28a4c9;
-}
-.btn-info:disabled,
-.btn-info[disabled] {
-  background-color: #2aabd2;
-  background-image: none;
-}
-.btn-warning {
-  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
-  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #eb9316 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#eb9316));
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #eb9316 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffeb9316', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #e38d13;
-}
-.btn-warning:hover,
-.btn-warning:focus {
-  background-color: #eb9316;
-  background-position: 0 -15px;
-}
-.btn-warning:active,
-.btn-warning.active {
-  background-color: #eb9316;
-  border-color: #e38d13;
-}
-.btn-warning:disabled,
-.btn-warning[disabled] {
-  background-color: #eb9316;
-  background-image: none;
-}
-.btn-danger {
-  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
-  background-image:      -o-linear-gradient(top, #d9534f 0%, #c12e2a 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c12e2a));
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c12e2a 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc12e2a', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-color: #b92c28;
-}
-.btn-danger:hover,
-.btn-danger:focus {
-  background-color: #c12e2a;
-  background-position: 0 -15px;
-}
-.btn-danger:active,
-.btn-danger.active {
-  background-color: #c12e2a;
-  border-color: #b92c28;
-}
-.btn-danger:disabled,
-.btn-danger[disabled] {
-  background-color: #c12e2a;
-  background-image: none;
-}
-.thumbnail,
-.img-thumbnail {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-}
-.dropdown-menu > li > a:hover,
-.dropdown-menu > li > a:focus {
-  background-color: #e8e8e8;
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
-  background-repeat: repeat-x;
-}
-.dropdown-menu > .active > a,
-.dropdown-menu > .active > a:hover,
-.dropdown-menu > .active > a:focus {
-  background-color: #357ebd;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
-  background-repeat: repeat-x;
-}
-.navbar-default {
-  background-image: -webkit-linear-gradient(top, #fff 0%, #f8f8f8 100%);
-  background-image:      -o-linear-gradient(top, #fff 0%, #f8f8f8 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#f8f8f8));
-  background-image:         linear-gradient(to bottom, #fff 0%, #f8f8f8 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#fff8f8f8', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-  border-radius: 4px;
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15), 0 1px 5px rgba(0, 0, 0, .075);
-}
-.navbar-default .navbar-nav > .active > a {
-  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
-  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f3f3f3 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f3f3f3));
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f3f3f3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff3f3f3', GradientType=0);
-  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .075);
-}
-.navbar-brand,
-.navbar-nav > li > a {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .25);
-}
-.navbar-inverse {
-  background-image: -webkit-linear-gradient(top, #3c3c3c 0%, #222 100%);
-  background-image:      -o-linear-gradient(top, #3c3c3c 0%, #222 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#3c3c3c), to(#222));
-  background-image:         linear-gradient(to bottom, #3c3c3c 0%, #222 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff3c3c3c', endColorstr='#ff222222', GradientType=0);
-  filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
-  background-repeat: repeat-x;
-}
-.navbar-inverse .navbar-nav > .active > a {
-  background-image: -webkit-linear-gradient(top, #222 0%, #282828 100%);
-  background-image:      -o-linear-gradient(top, #222 0%, #282828 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#222), to(#282828));
-  background-image:         linear-gradient(to bottom, #222 0%, #282828 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff222222', endColorstr='#ff282828', GradientType=0);
-  background-repeat: repeat-x;
-  -webkit-box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
-          box-shadow: inset 0 3px 9px rgba(0, 0, 0, .25);
-}
-.navbar-inverse .navbar-brand,
-.navbar-inverse .navbar-nav > li > a {
-  text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
-}
-.navbar-static-top,
-.navbar-fixed-top,
-.navbar-fixed-bottom {
-  border-radius: 0;
-}
-.alert {
-  text-shadow: 0 1px 0 rgba(255, 255, 255, .2);
-  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
-          box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 1px 2px rgba(0, 0, 0, .05);
-}
-.alert-success {
-  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
-  background-image:      -o-linear-gradient(top, #dff0d8 0%, #c8e5bc 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#c8e5bc));
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #c8e5bc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffc8e5bc', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #b2dba1;
-}
-.alert-info {
-  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
-  background-image:      -o-linear-gradient(top, #d9edf7 0%, #b9def0 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#b9def0));
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #b9def0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffb9def0', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #9acfea;
-}
-.alert-warning {
-  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
-  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #f8efc0 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#f8efc0));
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #f8efc0 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fff8efc0', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #f5e79e;
-}
-.alert-danger {
-  background-image: -webkit-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
-  background-image:      -o-linear-gradient(top, #f2dede 0%, #e7c3c3 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#e7c3c3));
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #e7c3c3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffe7c3c3', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #dca7a7;
-}
-.progress {
-  background-image: -webkit-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
-  background-image:      -o-linear-gradient(top, #ebebeb 0%, #f5f5f5 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#f5f5f5));
-  background-image:         linear-gradient(to bottom, #ebebeb 0%, #f5f5f5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffebebeb', endColorstr='#fff5f5f5', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #3071a9 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3071a9));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3071a9 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3071a9', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-success {
-  background-image: -webkit-linear-gradient(top, #5cb85c 0%, #449d44 100%);
-  background-image:      -o-linear-gradient(top, #5cb85c 0%, #449d44 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#5cb85c), to(#449d44));
-  background-image:         linear-gradient(to bottom, #5cb85c 0%, #449d44 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5cb85c', endColorstr='#ff449d44', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-info {
-  background-image: -webkit-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
-  background-image:      -o-linear-gradient(top, #5bc0de 0%, #31b0d5 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#5bc0de), to(#31b0d5));
-  background-image:         linear-gradient(to bottom, #5bc0de 0%, #31b0d5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff5bc0de', endColorstr='#ff31b0d5', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-warning {
-  background-image: -webkit-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
-  background-image:      -o-linear-gradient(top, #f0ad4e 0%, #ec971f 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f0ad4e), to(#ec971f));
-  background-image:         linear-gradient(to bottom, #f0ad4e 0%, #ec971f 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff0ad4e', endColorstr='#ffec971f', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-danger {
-  background-image: -webkit-linear-gradient(top, #d9534f 0%, #c9302c 100%);
-  background-image:      -o-linear-gradient(top, #d9534f 0%, #c9302c 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9534f), to(#c9302c));
-  background-image:         linear-gradient(to bottom, #d9534f 0%, #c9302c 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9534f', endColorstr='#ffc9302c', GradientType=0);
-  background-repeat: repeat-x;
-}
-.progress-bar-striped {
-  background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:      -o-linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-  background-image:         linear-gradient(45deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
-}
-.list-group {
-  border-radius: 4px;
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .075);
-}
-.list-group-item.active,
-.list-group-item.active:hover,
-.list-group-item.active:focus {
-  text-shadow: 0 -1px 0 #3071a9;
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #3278b3 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#3278b3));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #3278b3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff3278b3', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #3278b3;
-}
-.panel {
-  -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-          box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
-}
-.panel-default > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image:      -o-linear-gradient(top, #f5f5f5 0%, #e8e8e8 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#e8e8e8));
-  background-image:         linear-gradient(to bottom, #f5f5f5 0%, #e8e8e8 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff5f5f5', endColorstr='#ffe8e8e8', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-primary > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image:      -o-linear-gradient(top, #428bca 0%, #357ebd 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#428bca), to(#357ebd));
-  background-image:         linear-gradient(to bottom, #428bca 0%, #357ebd 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff428bca', endColorstr='#ff357ebd', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-success > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
-  background-image:      -o-linear-gradient(top, #dff0d8 0%, #d0e9c6 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#dff0d8), to(#d0e9c6));
-  background-image:         linear-gradient(to bottom, #dff0d8 0%, #d0e9c6 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffdff0d8', endColorstr='#ffd0e9c6', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-info > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
-  background-image:      -o-linear-gradient(top, #d9edf7 0%, #c4e3f3 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#d9edf7), to(#c4e3f3));
-  background-image:         linear-gradient(to bottom, #d9edf7 0%, #c4e3f3 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffd9edf7', endColorstr='#ffc4e3f3', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-warning > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
-  background-image:      -o-linear-gradient(top, #fcf8e3 0%, #faf2cc 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#fcf8e3), to(#faf2cc));
-  background-image:         linear-gradient(to bottom, #fcf8e3 0%, #faf2cc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fffcf8e3', endColorstr='#fffaf2cc', GradientType=0);
-  background-repeat: repeat-x;
-}
-.panel-danger > .panel-heading {
-  background-image: -webkit-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
-  background-image:      -o-linear-gradient(top, #f2dede 0%, #ebcccc 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#f2dede), to(#ebcccc));
-  background-image:         linear-gradient(to bottom, #f2dede 0%, #ebcccc 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff2dede', endColorstr='#ffebcccc', GradientType=0);
-  background-repeat: repeat-x;
-}
-.well {
-  background-image: -webkit-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
-  background-image:      -o-linear-gradient(top, #e8e8e8 0%, #f5f5f5 100%);
-  background-image: -webkit-gradient(linear, left top, left bottom, from(#e8e8e8), to(#f5f5f5));
-  background-image:         linear-gradient(to bottom, #e8e8e8 0%, #f5f5f5 100%);
-  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffe8e8e8', endColorstr='#fff5f5f5', GradientType=0);
-  background-repeat: repeat-x;
-  border-color: #dcdcdc;
-  -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
-          box-shadow: inset 0 1px 3px rgba(0, 0, 0, .05), 0 1px 0 rgba(255, 255, 255, .1);
-}
-/*# sourceMappingURL=bootstrap-theme.css.map */
--- a/Bruce/css/bootstrap-theme.css.map
+++ b/Bruce/css/bootstrap-theme.css.map
--- a/Bruce/css/bootstrap.css.map
+++ b/Bruce/css/bootstrap.css.map
--- a/Bruce/footer.ftl
+++ b/Bruce/footer.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,41 +17,24 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
+<#include "../../common-template/macro-user_site.ftl">
 <div class="footer">
-    &copy; ${year} - <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}
+    <@userSite dir="n"></@userSite>
+    <br>
+    &copy; ${year} - <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>
    <div>
-        Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">Bruce</a>
+        Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
        by
        <a rel="friend" href="http://88250.b3log.org" target="_blank">88250</a>
    </div>
    <div><em>All rights reserved.</em></div>
 </div>

-<script type="text/javascript">
-    var latkeConfig = {
-        "servePath": "${servePath}",
-        "staticServePath": "${staticServePath}",
-        "isLoggedIn": "${isLoggedIn?string}"
-    };
-
-    var Label = {
-        "markedAvailable": ${markedAvailable?c},
-        "tag1Label": "${tag1Label}",
-        "viewLabel": "${viewLabel}",
-        "commentLabel": "${commentLabel}",
-        "topArticleLabel": "${topArticleLabel}",
-        "updatedLabel": "${updatedLabel}",
-        "contentLabel": "${fullContentLabel}",
-        "abstractLabel": "${abstractLabel}",
-        "adminLabel": "${adminLabel}",
-        "logoutLabel": "${logoutLabel}",
-        "skinDirName": "${skinDirName}"
-    };
-</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/bootstrap${miniPostfix}.js?${staticResourceVersion}" charset="utf-8"></script>
+<#include "../../common-template/label.ftl">
 <script>
-    Util.init()
+    Util.setTopBar()
 </script>
 ${plugins}
--- a/Bruce/header.ftl
+++ b/Bruce/header.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
--- a/Bruce/index.ftl
+++ b/Bruce/index.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,17 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${blogTitle}">
-        <#if metaKeywords??>
-        <meta name="keywords" content="${metaKeywords}"/>
-        </#if>
-        <#if metaDescription??>
-        <meta name="description" content="${metaDescription}"/>
-        </#if>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/Bruce/js/bootstrap.js
+++ b/Bruce/js/bootstrap.js
@@ -1,6 +1,6 @@
 /*
 * Solo - A small and beautiful blogging system written in Java.
- * Copyright (c) 2010-2019, b3log.org & hacpai.com
+ * Copyright (c) 2010-present, b3log.org
 *
 * 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
@@ -2109,6 +2109,10 @@ if (typeof jQuery === 'undefined') { throw new Error('Bootstrap\'s JavaScript re
  // ==============

  $(window).on('load', function () {
+    
+    $('.article__toc').animate({
+      'left': ($('.site').outerWidth() + $('.site').offset().left) + 'px'
+    }, 600)
    $('[data-spy="affix"]').each(function () {
      var $spy = $(this)
      var data = $spy.data()
--- a/Bruce/js/bootstrap.min.js
+++ b/Bruce/js/bootstrap.min.js
--- a/Bruce/lang/lang_en_US.properties
+++ b/Bruce/lang/lang_en_US.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
--- a/Bruce/lang/lang_zh_CN.properties
+++ b/Bruce/lang/lang_zh_CN.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
--- a/Bruce/links.ftl
+++ b/Bruce/links.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,20 +17,19 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${linkLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${linkLabel}"/>
-        <meta name="description" content="${metaDescription},${linkLabel}"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
        <#include "header.ftl">


-        <div class="container">
+        <div class="container" style="min-height: 70vh">
            <div class="row">
                <div class="col-sm-2"></div>

--- a/Bruce/macro-comments.ftl
+++ b/Bruce/macro-comments.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -18,15 +18,15 @@

 -->
 <#macro comments commentList article>
-<div class="row" id="comments">
+<div id="comments">
    <#list commentList as comment>
    <#include "common-comment.ftl"/>
    </#list>
 </div>

-<#if article.commentable>
-<div class="row cmtForm">
-    <textarea rows="3" placeholder="${postCommentsLabel}" id="comment" class="form-control"></textarea>
-</div>
-</#if>
+    <#if article.commentable>
+    <div class="cmtForm">
+        <textarea rows="3" placeholder="${postCommentsLabel}" id="comment" class="form-control"></textarea>
+    </div>
+    </#if>
 </#macro>
--- a/Bruce/macro-head.ftl
+++ b/Bruce/macro-head.ftl
@@ -1,38 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, 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" />
-<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 name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes" />
-<meta http-equiv="Window-target" content="_top" />
-<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/bootstrap${miniPostfix}.css?${staticResourceVersion}" charset="utf-8" />
-<link type="text/css" rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}" charset="utf-8" />
-<link href="${servePath}/rss.xml" 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/Bruce/page.ftl
+++ b/Bruce/page.ftl
@@ -1,53 +0,0 @@
-<#--
-
-    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, 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 "../../common-template/macro-comment_script.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>
-        <#include "header.ftl">
-
-        <div class="container">
-            <div class="row">
-                <div class="col-sm-2"></div>
-
-                <div class="col-sm-8 site">
-                    <div class="article content-reset">
-                    ${page.pageContent}
-                    </div>
-                    
-                    <@comments commentList=pageComments article=page></@comments>
-                </div>
-
-                <div class="col-sm-2"></div>
-            </div>
-        </div>
-
-        <#include "footer.ftl">
-        <@comment_script oId=page.oId commentable=page.commentable></@comment_script>
-    </body>
-</html>
--- a/Bruce/skin.properties
+++ b/Bruce/skin.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
--- a/Bruce/tag-articles.ftl
+++ b/Bruce/tag-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${tag.tagTitle} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${tag.tagTitle}"/>
-        <meta name="description" content="<#list articles as article>${article.articleTitle}<#if article_has_next>,</#if></#list>"/>
+        <@head title="${tag.tagTitle} ${tagLabel} - ${blogTitle}">
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
@@ -34,10 +33,8 @@
                <div class="col-sm-2"></div>
                <div class="col-sm-8 site article-list">
                    <h2>
-                        <a id="tag" rel="alternate" href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
                            ${tag.tagTitle}
                            (${tag.tagPublishedRefCount})
-                        </a>
                    </h2>
                    <#include "article-list.ftl">
                </div>
--- a/Bruce/tags.ftl
+++ b/Bruce/tags.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
    <head>
        <@head title="${allTagsLabel} - ${blogTitle}">
-        <meta name="keywords" content="${metaKeywords},${allTagsLabel}"/>
-        <meta name="description" content="<#list tags as tag>${tag.tagTitle}<#if tag_has_next>,</#if></#list>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
--- a/Casper/archive-articles.ftl
+++ b/Casper/archive-articles.ftl
@@ -0,0 +1,51 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+ <@head title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveLabel} - ${blogTitle}">
+     <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+ </@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+    <#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title">
+            <a href="${servePath}/archives.html" class="ft__a">${archiveLabel}</a> -
+             <#if "en" == localeString?substring(0, 2)>
+                 ${archiveDate.archiveDateMonth} ${archiveDate.archiveDateYear}
+             <#else>
+                 ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
+             </#if>
+        </h2>
+        <div class="other__meta other__meta--list">
+            ${archiveDate.archiveDatePublishedArticleCount} ${cntArticleLabel}
+        </div>
+        <#include "article-list.ftl">
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Casper/archives.ftl
+++ b/Casper/archives.ftl
@@ -0,0 +1,63 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+<@head title="${archiveLabel} - ${blogTitle}">
+    <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+</@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${archiveLabel}</h2>
+        <div class="other__meta">
+        ${archiveDates?size} ${cntMonthLabel}
+        ${statistic.statisticPublishedBlogArticleCount} ${cntArticleLabel}
+        </div>
+        <div class="other__content">
+            <#if 0 != archiveDates?size>
+            <#list archiveDates as archiveDate>
+                <div class="other__item other__item--archive">
+                    <a href="${servePath}/archives/${archiveDate.archiveDateYear}/${archiveDate.archiveDateMonth}">
+                    <#if "en" == localeString?substring(0, 2)>
+                        ${archiveDate.monthName} ${archiveDate.archiveDateYear}
+                    <#else>
+                        ${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel}
+                    </#if>
+                    </a>
+                    <span>
+                        ${archiveDate.archiveDatePublishedArticleCount}
+                        ${cntArticleLabel}
+                    </span>
+                </div>
+            </#list>
+            </#if>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Casper/article-list.ftl
+++ b/Casper/article-list.ftl
@@ -0,0 +1,107 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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="articles">
+<#list articles as article>
+    <article class="item<#if article_index % 6 ==0> item--large</#if>">
+        <a href="${servePath}${article.articlePermalink}" class="item__cover"
+           style="background-image: url(${article.articleImg1URL})">
+        </a>
+        <div class="item__main">
+            <#list article.articleTags?split(",") as articleTag>
+                <#if articleTag_index == 0>
+                    <#if article.category??>
+                    <a class="item__tag"
+                       href="${servePath}/category/${article.category.categoryURI}">${article.category.categoryTitle}</a>
+                    <#else>
+                    <a rel="tag" class="item__tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
+                        ${articleTag}
+                    </a>
+                    </#if>
+                </#if>
+            </#list>
+            <h2 class="item__title">
+                <a rel="bookmark" href="${servePath}${article.articlePermalink}">
+                    ${article.articleTitle}
+                </a>
+                <#if article.articlePutTop>
+                    <sup>
+                        ${topArticleLabel}
+                    </sup>
+                </#if>
+                <#if article.hasUpdated>
+                    <sup>
+                        ${updatedLabel}
+                    </sup>
+                </#if>
+            </h2>
+            <a class="item__abstract" pjax-title="${article.articleTitle}"
+               href="${servePath}${article.articlePermalink}">
+                <#if article.articleAbstractText?length gt 80>
+                    ${article.articleAbstractText[0..80]}
+                <#else>
+                    ${article.articleAbstractText}
+                </#if>
+
+            </a>
+            <div class="fn__clear">
+                <a href="${servePath}/authors/${article.authorId}"
+                   aria-label="${article.authorName}"
+                   class="vditor-tooltipped vditor-tooltipped__n item__avatar">
+                    <img src="${article.authorThumbnailURL}" />
+                </a>
+                <#if article.articleCommentCount != 0>
+                <a class="item__meta" href="${servePath}${article.articlePermalink}#comments">
+                    ${article.articleCommentCount} ${commentLabel}
+                </a>
+                <#else>
+                    <a class="item__meta" href="${servePath}${article.articlePermalink}">
+                        ${article.articleViewCount} ${viewLabel}
+                    </a>
+                </#if>
+            </div>
+        </div>
+    </article>
+</#list>
+</div>
+
+<#if 0 != paginationPageCount>
+<nav class="pagination">
+    <#if 1 != paginationPageNums?first>
+        <a href="${servePath}${path}?p=${paginationPreviousPageNum}"
+           aria-label="${previousPageLabel}"
+           class="pagination__item vditor-tooltipped__n vditor-tooltipped">&laquo;</a>
+        <a class="pagination__item" href="${servePath}${path}">1</a>
+        <span class="pagination__item pagination__item--omit">...</span>
+    </#if>
+    <#list paginationPageNums as paginationPageNum>
+        <#if paginationPageNum == paginationCurrentPageNum>
+            <span class="pagination__item pagination__item--active">${paginationPageNum}</span>
+        <#else>
+            <a class="pagination__item" href="${servePath}${path}?p=${paginationPageNum}">${paginationPageNum}</a>
+        </#if>
+    </#list>
+    <#if paginationPageNums?last != paginationPageCount>
+        <span class="pagination__item pagination__item--omit">...</span>
+        <a href="${servePath}${path}?p=${paginationPageCount}" class="pagination__item">${paginationPageCount}</a>
+        <a href="${servePath}${path}?p=${paginationNextPageNum}" aria-label="${nextPagePabel}"
+           class="pagination__item vditor-tooltipped__n vditor-tooltipped">&raquo;</a>
+    </#if>
+</nav>
+</#if>
--- a/Casper/article.ftl
+++ b/Casper/article.ftl
@@ -0,0 +1,122 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<#include "macro-comments.ftl">
+<#include "../../common-template/macro-comment_script.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+<@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
+    <link rel="stylesheet"
+          href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+    <#if previousArticlePermalink??>
+        <link rel="prev" title="${previousArticleTitle}" href="${servePath}${previousArticlePermalink}">
+    </#if>
+    <#if nextArticlePermalink??>
+        <link rel="next" title="${nextArticleTitle}" href="${servePath}${nextArticlePermalink}">
+    </#if>
+</@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+    <#include "marcr-header.ftl">
+    <@header type="article"></@header>
+    <div class="article__top">
+        <div class="fn__clear">
+            <div class="toc fn__none" onclick="$('.post__toc').slideToggle()">${tocLabel}</div>
+            <div class="title fn__pointer" onclick="Util.goTop()">${article.articleTitle}</div>
+            <#include "../../common-template/share.ftl">
+        </div>
+        <progress class="article__progress"></progress>
+    </div>
+    <div class="article">
+        <div class="ft__center">
+            <div class="item__meta">
+                <time>
+                ${article.articleCreateDate?string("yyyy-MM-dd")}
+                </time>
+                /
+                <#list article.articleTags?split(",") as articleTag>
+                <a class="tag" rel="tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a> &nbsp;
+                </#list>
+            </div>
+            <h2 class="item__title">
+            ${article.articleTitle}
+                <#if article.articlePutTop>
+                    <sup>
+                        ${topArticleLabel}
+                    </sup>
+                </#if>
+                <#if article.hasUpdated>
+                    <sup>
+                        ${updatedLabel}
+                    </sup>
+                </#if>
+            </h2>
+        </div>
+        <div class="item__cover" style="background-image: url(${article.articleImg1URL})"></div>
+        <section class="vditor-reset item__content item__content--article wrapper">
+        ${article.articleContent}
+            <#if "" != article.articleSign.signHTML?trim>
+                <div>
+                    ${article.articleSign.signHTML}
+                </div>
+            </#if>
+        </section>
+    </div>
+    <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+    <div class="post__toc">
+        <#include "../../common-template/toc.ftl"/>
+    </div>
+    </#if>
+    <@comments commentList=articleComments article=article></@comments>
+    <div class="article__bottom">
+        <div class="wrapper">
+            <div class="fn__flex">
+                <#if 0 != externalRelevantArticlesDisplayCount>
+                <div class="item" id="externalRelevantArticles"></div>
+                </#if>
+                <div class="item" id="randomArticles"></div>
+                <div class="item" id="relevantArticles"></div>
+            </div>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+<#if pjax><!---- pjax {#pjax} start ----></#if>
+<@comment_script oId=article.oId commentable=article.commentable>
+    page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}";
+    <#if 0 != randomArticlesDisplayCount>
+    page.loadRandomArticles('<h3>${randomArticlesLabel}</h3>');
+    </#if>
+    <#if 0 != externalRelevantArticlesDisplayCount>
+    page.loadExternalRelevantArticles("<#list article.articleTags?split(",") as articleTag>${articleTag}<#if articleTag_has_next>,</#if></#list>",
+    '<h3>${externalRelevantArticlesLabel}</h3>');
+    </#if>
+    <#if 0 != relevantArticlesDisplayCount>
+    page.loadRelevantArticles('${article.oId}', '<h3>${relevantArticlesLabel}</h3>');
+    </#if>
+    Skin.initArticle()
+</@comment_script>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</body>
+</html>
--- a/Casper/author-articles.ftl
+++ b/Casper/author-articles.ftl
@@ -0,0 +1,45 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+    <@head title="${authorName} - ${blogTitle}">
+        <link rel="stylesheet"
+              href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+    </@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+    <#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title">
+            <a href="${servePath}" class="ft__a">${blogTitle}</a> - ${authorName}
+        </h2>
+        <div class="other__meta other__meta--list">&nbsp;</div>
+        <#include "article-list.ftl">
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Casper/category-articles.ftl
+++ b/Casper/category-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,25 +17,28 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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 class="classic-wptouch-bg ">
-        <#include "header.ftl">
-		<div class="content single">
-            <div class="post">
-                <h2 >
-					${author1Label}${authorName}
-                </h2>
-        	</div>
+<head>
+<@head title="${category.categoryTitle} - ${blogTitle}">
+    <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+</@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${category.categoryTitle}</h2>
+        <div class="other__meta other__meta--list">
+            ${category.categoryDescription} &nbsp;
        </div>
        <#include "article-list.ftl">
-        <#include "footer.ftl">
-    </body>
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
 </html>
--- a/Casper/common-comment.ftl
+++ b/Casper/common-comment.ftl
@@ -0,0 +1,50 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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/>.
+
+-->
+<li id="${comment.oId}" class="item">
+    <div class="fn__clear">
+        <div class="item__avatar" style="background-image: url(${comment.commentThumbnailURL})"></div>
+        <div class="item__name">
+            <#if "http://" == comment.commentURL>
+                <span class="ft__fade">${comment.commentName}</span>
+            <#else>
+            <a class="ft__link" href="${comment.commentURL}" target="_blank">${comment.commentName}</a>
+            </#if>
+
+            <#if comment.isReply>
+            @ <a href="${servePath}${article.permalink}#${comment.commentOriginalCommentId}"
+                 onmouseover="page.showComment(this, '${comment.commentOriginalCommentId}', 20);"
+                 onmouseout="page.hideComment('${comment.commentOriginalCommentId}')"
+            >${comment.commentOriginalCommentName}</a>
+            </#if>
+        </div>
+    </div>
+    <div class="vditor-reset">
+    ${comment.commentContent}
+    </div>
+    <div class="item__meta fn__clear">
+        <time>
+        ${comment.commentDate2?string["MMM d, yyyy"]}
+        </time>
+        <#if article?? && article.commentable>
+            <a class="fn__right fn__none item__reply"
+               href="javascript:page.toggleEditor('${comment.oId}', '${comment.commentName}')">Reply</a>
+        </#if>
+    </div>
+</li>
--- a/Casper/css/base.css
+++ b/Casper/css/base.css
--- a/Casper/css/base.scss
+++ b/Casper/css/base.scss
@@ -0,0 +1,827 @@
+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-present, b3log.org
+ *
+ * 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 style
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.0.0, Mar 26, 2019
+ */
+@import "../../../scss/reset";
+@import "../../../scss/usite";
+@import "../../../scss/toc";
+@import "../../../scss/function";
+@import "../../../scss/nprogress";
+@import "vditor/src/assets/scss/classic";
+
+$fade-lighter: rgba(255, 255, 255, .8) !default;
+$gray: #738a94 !default;
+$black: #15171a !default;
+$black-bg: #090a0b !default;
+$link: #26a8ed !default;
+
+body {
+  background-color: #f4f8fb;
+}
+
+::selection {
+  text-shadow: none;
+  background-color: #cbeafb;
+}
+
+a {
+  color: $link;
+}
+
+.ft__a {
+  color: $gray;
+  &:hover {
+    color: rgba($gray, .8);
+  }
+}
+
+.wrapper {
+  max-width: 1040px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+.header {
+  color: #fff;
+  position: relative;
+  &--index {
+    &:before {
+      content: "";
+      height: 100%;
+      position: absolute;
+      background: url("../images/header-bg.jpg") no-repeat center center;
+      width: 100%;
+      top: 0;
+      background-size: cover;
+      filter: brightness(48%);
+    }
+  }
+  &--article {
+    background-color: $black-bg;
+    height: 64px;
+    .header__title {
+      display: none;
+    }
+    .header__nav a {
+      margin-bottom: 0;
+      line-height: 64px;
+    }
+  }
+  &--other {
+    height: 407px;
+    .header__title {
+      display: none;
+    }
+    &:before {
+      content: "";
+      height: 100%;
+      position: absolute;
+      background: url("../images/header-bg.jpg") no-repeat center center;
+      width: 100%;
+      top: 0;
+      background-size: cover;
+      filter: brightness(48%);
+    }
+    .header__nav a {
+      margin-bottom: 0;
+      line-height: 64px;
+    }
+  }
+  &__title {
+    position: relative;
+    text-align: center;
+  }
+  &__h1 {
+    font-size: 30px;
+    padding-top: 140px;
+    font-weight: normal;
+    img {
+      height: 32px;
+      width: 32px;
+      margin-right: 10px;
+    }
+    a {
+      color: #fff;
+      &:hover {
+        text-decoration: none;
+        color: $fade-lighter;
+      }
+    }
+  }
+  &__h2 {
+    font-size: 20px;
+    font-weight: 300;
+    margin: 5px 0 70px;
+    color: $fade-lighter;
+    line-height: 24px;
+  }
+  &__nav {
+    position: relative;
+    a {
+      font-size: 13px;
+      float: left;
+      line-height: 24px;
+      color: $fade-lighter;
+      margin: 0 20px 90px 0;
+      &:hover {
+        color: #fff;
+        text-decoration: none;
+      }
+    }
+
+    img {
+      height: 14px;
+      width: 14px;
+      margin-right: 5px;
+    }
+
+    svg {
+      margin-top: 5px;
+    }
+  }
+}
+
+.footer {
+  font-size: 13px;
+  padding: 20px 0;
+  background-color: $black-bg;
+  color: #fff;
+  a {
+    color: $fade-lighter;
+    &:hover {
+      text-decoration: none;
+      color: #fff;
+    }
+  }
+
+  .fn__right {
+    text-align: right;
+  }
+}
+
+.articles {
+  top: -70px;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  margin: 0 -20px;
+  .item {
+    flex: 1 1 300px;
+    overflow: hidden;
+    margin: 0 20px 40px;
+    min-height: 300px;
+    border-radius: 5px;
+    box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
+    transition: all .3s ease;
+    display: flex;
+    flex-direction: column;
+    background-color: #fff;
+    &--large {
+      flex-direction: row;
+      flex: 1 1 100%;
+
+      .item__cover {
+        flex: 1;
+        height: auto;
+      }
+
+      .item__main {
+        padding: 30px 40px;
+        width: 357px;
+        flex: unset;
+      }
+    }
+    &:hover {
+      box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
+      transform: translate3D(0, -1px, 0) scale(1.02);
+    }
+    &__cover {
+      background-size: cover;
+      background-position: center center;
+      height: 200px;
+    }
+    &__main {
+      padding: 25px;
+      box-sizing: border-box;
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+    }
+    &__tag {
+      display: inline-block;
+      margin-bottom: 4px;
+      color: $gray;
+      font-size: 12px;
+      line-height: 14px;
+      font-weight: 500;
+      letter-spacing: .5px;
+      text-transform: uppercase;
+      &:hover {
+        text-decoration: none;
+        color: rgba($gray, 0.8);
+      }
+    }
+    &__title {
+      margin-bottom: 10px;
+      a {
+        color: $black;
+        font-size: 18px;
+        line-height: 24px;
+        &:hover {
+          text-decoration: none;
+          color: rgba($black, 0.8);
+        }
+      }
+      sup {
+        font-size: 12px;
+        font-weight: normal;
+        color: rgba($gray, 0.8);
+      }
+    }
+
+    &__abstract {
+      line-height: 24px;
+      color: $black;
+      flex: 1;
+      &:hover {
+        text-decoration: none;
+        color: rgba($black, 0.8);
+      }
+    }
+
+    &__meta {
+      float: right;
+      margin-top: 18px;
+      color: $gray;
+      &:hover {
+        text-decoration: none;
+        color: rgba($gray, 0.8);
+      }
+    }
+
+    &__avatar {
+      margin-top: 10px;
+      float: left;
+      img {
+        height: 32px;
+        width: 32px;
+      }
+    }
+
+  }
+}
+
+.pagination {
+  text-align: center;
+  margin-top: -70px;
+
+  &__item {
+    width: 30px;
+    height: 30px;
+    background: $black;
+    border-radius: 50%;
+    display: inline-block;
+    color: #fff;
+    line-height: 30px;
+    font-size: 12px;
+    margin: 0 5px 40px;
+    &:hover {
+      opacity: 0.8;
+      text-decoration: none;
+    }
+    &--active {
+      background: $black-bg;
+      &:hover {
+        opacity: 1;
+      }
+    }
+    &--omit {
+      background-color: transparent;
+      color: $black;
+    }
+  }
+}
+
+.article {
+  background-color: #fff;
+  &__bottom {
+    background-color: #fff;
+    position: relative;
+    .fn__flex {
+      flex-wrap: wrap;
+      margin: 0 -20px;
+    }
+    .item {
+      position: relative;
+      flex: 1 1 300px;
+      margin: 40px 20px 40px;
+      box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
+      border-radius: 5px;
+      padding: 40px;
+      overflow: hidden;
+      text-align: center;
+      box-sizing: border-box;
+      &:before {
+        content: "";
+        position: absolute;
+        height: 100%;
+        top: 0;
+        left: 0;
+        width: 100%;
+        background: url(../images/header-bg.jpg) no-repeat center center;
+        background-size: cover;
+        filter: brightness(48%);
+      }
+      h3 {
+        color: #fff;
+        position: relative;
+        margin-bottom: 20px;
+      }
+      ul {
+        padding-left: 0;
+        position: relative;
+        list-style: none;
+      }
+      a {
+        display: block;
+        border-bottom: 1px solid rgba($gray, .8);
+        padding: 10px 0;
+        color: #fff;
+        margin: 0 20px;
+      }
+    }
+  }
+  &__top {
+    position: fixed;
+    width: 100%;
+    top: -61px;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-bottom: 1px solid rgba($gray, 0.1);
+    height: 60px;
+    transition: all .3s ease;
+    z-index: 1;
+    .title {
+      float: left;
+      margin-left: 20px;
+      line-height: 60px;
+      font-size: 22px;
+    }
+  }
+  &__share {
+    float: right;
+    position: relative;
+    .item {
+      height: 60px;
+      width: 60px;
+      float: left;
+      text-align: center;
+      padding: 20px 0;
+      box-sizing: border-box;
+      color: #fdc200;
+      cursor: pointer;
+      transition: all .3s ease;
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+      &[data-type="wechat"] {
+        color: #3caf36;
+        &:hover {
+          background-color: #3caf36;
+        }
+      }
+      &[data-type="twitter"] {
+        color: #18a3fa;
+        &:hover {
+          background-color: #18a3fa;
+        }
+      }
+      &[data-type="weibo"] {
+        color: #f93;
+        &:hover {
+          background-color: #f93;
+        }
+      }
+      &:hover {
+        color: #fff;
+        background-color: #fdc200;
+      }
+      &__qr {
+        position: absolute;
+        top: 61px;
+        left: 60px;
+      }
+    }
+  }
+  &__progress {
+    position: absolute;
+    right: 0;
+    bottom: -1px;
+    left: 0;
+    width: 100%;
+    height: 2px;
+    border: none;
+    background: transparent;
+    -webkit-appearance: none;
+    &::-webkit-progress-value {
+      background-color: $link;
+    }
+    &::-webkit-progress-bar {
+      background-color: transparent;
+    }
+  }
+  .item {
+    &__meta {
+      padding-top: 76px;
+      font-size: 14px;
+      text-transform: uppercase;
+      color: rgba($gray, .8);
+      a {
+        color: $gray;
+      }
+    }
+    &__title {
+      font-size: 28px;
+      margin-bottom: 40px;
+      sup {
+        font-size: 14px;
+        font-weight: normal;
+        color: rgba($gray, .8);
+      }
+    }
+    &__cover {
+      height: 800px;
+      background-size: cover;
+      background-position: center center;
+      max-width: 1404px;
+      margin: 0 auto;
+      border-radius: 5px;
+      filter: sepia(0.2) contrast(1.3) opacity(.86);
+    }
+    &__content {
+      padding: 70px 100px 0;
+      box-sizing: border-box;
+      background-color: #fff;
+      &--article {
+        margin-top: -164px;
+        position: relative;
+      }
+    }
+    &__tip {
+      margin-bottom: 40px;
+      border-radius: 5px;
+      box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
+      transition: all .3s ease;
+      padding: 20px 0;
+      text-align: center;
+      background: #f4f8fb;
+      cursor: pointer;
+      font-size: 18px;
+      &:hover {
+        box-shadow: 8px 28px 50px rgba(39, 44, 49, .07), 1px 6px 12px rgba(39, 44, 49, .04);
+        transform: translate3D(0, -1px, 0) scale(1.02);
+      }
+    }
+  }
+}
+
+.post__toc {
+  display: none;
+  position: fixed;
+  top: 84px;
+  bottom: 80px;
+  overflow: auto;
+  padding-left: 3px;
+
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .article__toc {
+    overflow: initial;
+    border-left: 1px solid rgba($gray, 0.28);
+    margin: 0;
+    font-size: 14px;
+    line-height: 24px;
+    li.current a,
+    a:hover {
+      color: $link;
+    }
+    a {
+      display: block;
+      margin-top: -24px;
+      color: $gray;
+    }
+  }
+
+  li {
+    &:before {
+      position: relative;
+      top: -2px;
+      left: -4px;
+      display: inline-block;
+      width: 7px;
+      height: 7px;
+      content: '';
+      border-radius: 50%;
+    }
+    &.current:before {
+      background-color: $link;
+    }
+  }
+}
+
+.comment {
+  background-color: #f4f8fb;
+  position: relative;
+  &__wrapper {
+    margin: 0 auto;
+    padding: 0 100px 0.1px;
+    box-sizing: border-box;
+  }
+  &-body-ref {
+    position: absolute;
+    left: 80px;
+    width: 76%;
+  }
+
+  &__title {
+    text-align: center;
+    padding: 40px 0;
+    color: $gray;
+  }
+
+  .item {
+    margin-bottom: 40px;
+    border: 1px solid $fade-lighter;
+    border-radius: 5px;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, .04);
+    list-style: none;
+    padding: 20px;
+
+    &__meta {
+      color: rgba($gray, .8);
+      font-size: 12px;
+    }
+
+    &__avatar {
+      float: left;
+      height: 40px;
+      width: 40px;
+      border-radius: 20px;
+      border: 1px solid rgba(0, 0, 0, .04);
+      margin: 0 20px 20px 0;
+      background-size: cover;
+      background-position: center center;
+    }
+
+    &__name {
+      color: rgba($gray, .8);
+      float: left;
+      line-height: 40px;
+      a {
+        color: $gray;
+        &:hover {
+          color: rgba($gray, .8);
+        }
+      }
+    }
+
+    &:hover {
+      .item__reply {
+        display: block;
+      }
+    }
+  }
+
+  #comments {
+    position: relative;
+  }
+
+  #comment {
+    position: relative;
+    margin-bottom: 30px;
+    padding: 20px;
+    border-radius: 3px;
+    background: #fff;
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+    border: 0;
+    resize: none;
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+.other {
+  position: relative;
+  &__title {
+    margin: -220px 0 5px;
+    color: #fff;
+    font-size: 28px;
+    text-align: center;
+    font-weight: 400;
+  }
+  &__meta {
+    color: #fff;
+    font-size: 14px;
+    text-align: center;
+    &--list {
+      margin-bottom: 154px;
+    }
+  }
+  &__content {
+    background-color: #fff;
+    padding: 70px 100px;
+    margin: 77px auto 40px;
+    box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
+    border-radius: 5px;
+  }
+  &__item {
+    line-height: 20px;
+    margin: 10px;
+    white-space: nowrap;
+    display: block;
+    &--archive {
+      width: 187px;
+      display: inline-block;
+    }
+    span, div {
+      color: $gray;
+      font-size: 12px;
+      word-break: break-all;
+      white-space: normal;
+    }
+  }
+}
+
+@media (max-width: 768px) {
+  .header {
+    padding: 10px 0;
+    &__h1 {
+      padding-top: 60px;
+    }
+    &__h2 {
+      margin-bottom: 40px;
+    }
+    &__nav {
+      .fn__right {
+        float: none;
+      }
+      a {
+        margin: 0 10px 0 0;
+      }
+    }
+    &--article {
+      height: auto;
+      .header__nav a {
+        line-height: 24px;
+      }
+    }
+    &--other {
+      height: 360px;
+      .header__nav a {
+        line-height: 24px;
+      }
+    }
+  }
+
+  .articles {
+    position: initial;
+    margin: 10px -5px 0 -5px;
+    .item {
+      margin: 0 5px 10px;
+      &--large {
+        flex-direction: column;
+        flex: 1 1 300px;
+
+        .item__cover {
+          height: 200px;
+        }
+
+        .item__main {
+          padding: 25px;
+          width: auto;
+          flex: 1;
+        }
+      }
+    }
+  }
+  .pagination {
+    margin-top: 0;
+    margin-bottom: 5px;
+    &__item {
+      margin-bottom: 5px;
+    }
+  }
+
+  .footer {
+    .fn__left,
+    .fn__right {
+      float: none;
+      text-align: center;
+    }
+  }
+
+  .article {
+    &__top {
+      height: 40px;
+      .title {
+        display: none;
+      }
+      .toc {
+        display: block;
+        float: left;
+        line-height: 40px;
+        padding: 0 10px;
+        cursor: pointer;
+      }
+    }
+    &__share .item {
+      height: 40px;
+      width: 40px;
+      padding: 10px 0;
+    }
+    .item {
+      &__meta {
+        padding-top: 40px;
+      }
+      &__cover {
+        display: none;
+      }
+      &__content {
+        padding: 10px 10px 0;
+        &--article {
+          margin-top: -20px;
+        }
+      }
+    }
+    &__bottom {
+      .fn__flex {
+        margin: 0 0 10px 0;
+      }
+      .item {
+        margin: 10px 0 0 0;
+      }
+    }
+  }
+
+  .comment {
+    &__title {
+      padding: 10px 0;
+    }
+    &__wrapper {
+      padding: 0 10px 0.1px;
+    }
+
+    #comment,
+    .item {
+      margin-bottom: 10px;
+      padding: 10px;
+      &__avatar {
+        margin-bottom: 10px;
+      }
+    }
+  }
+
+  .other {
+    &__title {
+      margin-top: -280px;
+    }
+    &__content {
+      padding: 20px;
+      margin: 40px auto 10px;
+    }
+    &__meta--list {
+      margin-bottom: 40px;
+    }
+  }
+
+  .post__toc {
+    left: 0;
+    background-color: #fff;
+    width: 100%;
+    top: 41px;
+    bottom: 0;
+  }
+}
--- a/Casper/footer.ftl
+++ b/Casper/footer.ftl
@@ -0,0 +1,59 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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/>.
+
+-->
+<footer class="footer">
+    <div class="wrapper fn__clear">
+        <div class="fn__left">
+            ${blogTitle} &copy; ${year} ${footerContent} &nbsp;•&nbsp;
+                Powered by <a href="https://b3log.org" target="_blank">B3log 开源</a> &nbsp;•&nbsp;
+                <a href="https://solo.b3log.org" target="_blank">Solo</a>
+                <br>
+            Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
+            <sup>[<a href="https://github.com/TryGhost/Casper" target="_blank">ref</a>]</sup>
+            by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a>
+        </div>
+        <div class="fn__right">
+            <a href="${servePath}/tags.html" rel="section">
+            ${allTagsLabel}
+            </a>
+            &nbsp;•&nbsp;
+            <a href="${servePath}/archives.html">
+            ${archiveLabel}
+            </a>
+            &nbsp;•&nbsp;
+            <a rel="archive" href="${servePath}/links.html">
+            ${linkLabel}
+            </a>
+            <br>
+            ${statistic.statisticPublishedBlogArticleCount} ${articleLabel} &nbsp;
+            ${statistic.statisticPublishedBlogCommentCount} ${commentLabel} &nbsp;
+            ${statistic.statisticBlogViewCount} ${viewLabel} &nbsp;
+            ${onlineVisitorCnt} ${onlineVisitorLabel}
+        </div>
+    </div>
+</footer>
+
+<script type="text/javascript" src="${staticServePath}/js/lib/compress/pjax.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/common${miniPostfix}.js?${staticResourceVersion}"
+        charset="utf-8"></script>
+<#include "../../common-template/label.ftl">
+${plugins}
--- a/Casper/images/header-bg.jpg
+++ b/Casper/images/header-bg.jpg
--- a/Casper/index.ftl
+++ b/Casper/index.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,22 +17,24 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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 class="classic-wptouch-bg">
-        <#include "header.ftl">
+<head>
+<@head title="${blogTitle}">
+    <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+</@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+    <#include "marcr-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
        <#include "article-list.ftl">
-        <#include "footer.ftl">
-    </body>
-</html>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Casper/js/common.js
+++ b/Casper/js/common.js
@@ -0,0 +1,119 @@
+/*
+ * Solo - A small and beautiful blogging system written in Java.
+ * Copyright (c) 2010-present, b3log.org
+ *
+ * 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 util and every page should be used.
+ *
+ * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
+ * @version 0.1.1.0, Apr 19, 2019
+ */
+
+/**
+ * @description 皮肤脚本
+ * @static
+ */
+var Skin = {
+  init: function () {
+    Util.initPjax()
+  },
+  initArticle: function () {
+    page.share()
+
+    var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
+    var $articleToc = $('.article__toc')
+    var $articleProgress = $('.article__progress')
+
+    if ($articleToc.length === 1) {
+      if ($(window).width() > 876) {
+        $('.post__toc').
+          css('left', $('.article .item__content').offset().left +
+            $('.article .item__content').outerWidth() - 80)
+      } else {
+        $('.post__toc a').click(function () {
+          $('.post__toc').hide()
+        })
+      }
+    }
+
+    $articleToc.find('a').click(function (event) {
+      const id = $(this).attr('href')
+      window.location.hash = id
+      $(window).scrollTop($(id).offset().top - 60)
+      event.preventDefault()
+      event.stopPropagation()
+      return false
+    })
+
+    $(window).unbind('scroll').scroll(function (event) {
+      if ($articleProgress.length === 0) {
+        return false
+      }
+
+      $articleProgress.attr('value', parseInt($(window).scrollTop())).
+        attr('max', parseInt($('body').outerHeight() -
+          $(window).height()))
+
+      if ($(window).scrollTop() > 236) {
+        $('.article__top').css('top', 0)
+      } else {
+        $('.article__top').css('top', -61)
+      }
+
+      if ($('.article__toc li').length === 0) {
+        return false
+      }
+
+      if ($(window).width() > 876) {
+        if ($(window).scrollTop() > 975 && $(window).scrollTop() <
+          $('.article').outerHeight() + 100) {
+          $('.post__toc').show()
+        } else {
+          $('.post__toc').hide()
+        }
+      }
+
+      // 界面各种图片加载会导致帖子目录定位
+      var toc = []
+      $articleTocs.each(function (i) {
+        toc.push({
+          id: this.id,
+          offsetTop: $(this).offset().top,
+        })
+      })
+
+      // 当前目录样式
+      var scrollTop = $(window).scrollTop()
+      for (var i = 0, iMax = toc.length; i < iMax; i++) {
+        if (scrollTop < toc[i].offsetTop - 61) {
+          $articleToc.find('li').removeClass('current')
+          var index = i > 0 ? i - 1 : 0
+          $articleToc.find('a[href="#' + toc[index].id + '"]').
+            parent().
+            addClass('current')
+          break
+        }
+      }
+      if (scrollTop >= toc[toc.length - 1].offsetTop - 61) {
+        $articleToc.find('li').removeClass('current')
+        $articleToc.find('li:last').addClass('current')
+      }
+    })
+
+    $(window).scroll()
+  },
+}
+Skin.init()
--- a/Casper/js/common.min.js
+++ b/Casper/js/common.min.js
@@ -0,0 +1 @@
+var Skin={init:function(){Util.initPjax()},initArticle:function(){page.share();var l=$(".vditor-reset [id^=b3_solo_h]"),s=$(".article__toc"),c=$(".article__progress");1===s.length&&(876<$(window).width()?$(".post__toc").css("left",$(".article .item__content").offset().left+$(".article .item__content").outerWidth()-80):$(".post__toc a").click(function(){$(".post__toc").hide()})),$(window).unbind("scroll").scroll(function(t){if(0===c.length)return!1;if(c.attr("value",parseInt($(window).scrollTop())).attr("max",parseInt($("body").outerHeight()-$(window).height())),236<$(window).scrollTop()?$(".article__top").css("top",0):$(".article__top").css("top",-61),0===$(".article__toc li").length)return!1;876<$(window).width()&&(975<$(window).scrollTop()&&$(window).scrollTop()<$(".article").outerHeight()+100?$(".post__toc").show():$(".post__toc").hide());var o=[];l.each(function(t){o.push({id:this.id,offsetTop:this.offsetTop})});for(var i=$(window).scrollTop(),e=0,r=o.length;e<r;e++)if(i<o[e].offsetTop){s.find("li").removeClass("current");var n=0<e?e-1:0;s.find('a[href="#'+o[n].id+'"]').parent().addClass("current");break}i>=o[o.length-1].offsetTop&&(s.find("li").removeClass("current"),s.find("li:last").addClass("current"))}),$(window).scroll()}};Skin.init();
--- a/Casper/links.ftl
+++ b/Casper/links.ftl
@@ -0,0 +1,54 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+<@head title="${linkLabel} - ${blogTitle}">
+    <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+</@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${linkLabel}</h2>
+        <div class="other__meta">
+        ${links?size} ${linkLabel}
+        </div>
+        <div class="other__content">
+        <#if 0 != links?size>
+            <#list links as link>
+                <div class="other__item">
+                    <a rel="friend" href="${link.linkAddress}" target="_blank">
+                        ${link.linkTitle}
+                    </a>
+                    <div>${link.linkDescription}</div>
+                </div>
+            </#list>
+        </#if>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Casper/macro-comments.ftl
+++ b/Casper/macro-comments.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -18,18 +18,20 @@

 -->
 <#macro comments commentList article>
-<div id="comments">
-    <#list commentList as comment>
-    <#include "common-comment.ftl"/>
-    </#list>
+<div class="comment">
+    <div class="comment__wrapper wrapper">
+        <div class="comment__title">
+            ${commentLabel}
+        </div>
+        <#if article.commentable>
+        <textarea rows="3" placeholder="${commentContentCannotEmptyLabel}" id="comment"></textarea>
+        </#if>
+
+        <ul id="comments">
+        <#list commentList as comment>
+            <#include 'common-comment.ftl'/>
+        </#list>
+        </ul>
+    </div>
 </div>
-<#if article.commentable>
-<div class="form">
-    <textarea rows="3" placeholder="${postCommentsLabel}" id="comment"></textarea>
-</div>
-<#if externalRelevantArticlesDisplayCount?? && 0 != externalRelevantArticlesDisplayCount>
-<div id="externalRelevantArticles" class="article-relative"></div>
-</#if>
-<span class="clear"></span>
-</#if>
 </#macro>
--- a/Casper/marcr-header.ftl
+++ b/Casper/marcr-header.ftl
@@ -0,0 +1,70 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 header type>
+<header class="header header--${type}">
+    <div class="wrapper header__title">
+        <h1 class="header__h1 fn__flex-inline">
+            <img src="${faviconURL}">
+            <a href="${servePath}" rel="start" class="header__title">${blogTitle}</a>
+        </h1>
+        <h2 class="header__h2">${blogSubtitle}</h2>
+    </div>
+    <nav class="wrapper header__nav fn__clear">
+        <a href="${servePath}" rel="start">
+            <#if type == 'article'>
+                ${blogTitle}
+            <#else>
+                ${indexLabel}
+            </#if>
+        </a>
+
+        <#list pageNavigations as page>
+            <a class="fn__flex-inline" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">
+                <#if page.pageIcon != ''><img src="${page.pageIcon}"></#if> ${page.pageTitle}
+            </a>
+        </#list>
+
+        <a href="${servePath}/search">
+            ${searchLabel}
+        </a>
+
+        <div class="fn__right">
+            <#include "../../common-template/macro-user_site.ftl">
+            <@userSite dir=""></@userSite>
+            <a rel="alternate" href="${servePath}/rss.xml">
+                RSS
+            </a>
+
+            <#if isLoggedIn>
+            <a href="${servePath}/admin-index.do#main">
+                ${adminLabel}
+            </a>
+            <a href="${logoutURL}">
+                ${logoutLabel}
+            </a>
+            <#else>
+            <a rel="alternate" href="${servePath}/start">
+                ${startToUseLabel}
+            </a>
+            </#if>
+        </div>
+    </nav>
+</header>
+</#macro>
--- a/Casper/preview.png
+++ b/Casper/preview.png
--- a/Casper/skin.properties
+++ b/Casper/skin.properties
@@ -1,6 +1,6 @@
 #
 # Solo - A small and beautiful blogging system written in Java.
-# Copyright (c) 2010-2019, b3log.org & hacpai.com
+# Copyright (c) 2010-present, b3log.org
 #
 # 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
@@ -17,11 +17,10 @@
 #

 #
-# Description: ease skin.
-# Version: 1.0.0.9, Mar 24, 2015
+# Description: skin properties.
+# Version: 0.1.0.0, Mar 26, 2018
 # Author: Liyuan Li
-# Author: Liang Ding
 #

-name=ease
-memo=\u56de\u5f52\u606c\u9759
+name=Casper
+memo=https://demo.ghost.io/
--- a/Casper/tag-articles.ftl
+++ b/Casper/tag-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,39 +17,28 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
-<#include "macro-comments.ftl">
-<#include "../../common-template/macro-comment_script.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <!DOCTYPE html>
 <html>
 <head>
-<@head title="${page.pageTitle} - ${blogTitle}">
-    <meta name="keywords" content="${metaKeywords},${page.pageTitle}"/>
-    <meta name="description" content="${metaDescription}"/>
+<@head title="${tag.tagTitle} ${tagLabel} - ${blogTitle}">
+    <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
 </@head>
 </head>
-<body>
-<#include "header.ftl">
-<div class="main">
-    <div id="pjax" class="content">
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
    <#if pjax><!---- pjax {#pjax} start ----></#if>
-    <main>
-        <article class="module">
-            <div class="module__content">
-                <div class="content-reset">
-                ${page.pageContent}
-                </div>
-            </div>
-        </article>
-        <@comments commentList=pageComments article=page></@comments>
-    </main>
-    <#if pjax><!---- pjax {#pjax} end ----></#if>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}/tags.html" class="ft__a">${allTagsLabel}</a> - ${tag.tagTitle}</h2>
+        <div class="other__meta--list other__meta">
+        ${tag.tagPublishedRefCount} ${cntArticleLabel}
+        </div>
+        <#include "article-list.ftl">
    </div>
-    <#include "side.ftl">
+<#if pjax><!---- pjax {#pjax} end ----></#if>
 </div>
 <#include "footer.ftl">
-<#if pjax><!---- pjax {#pjax} start ----></#if>
-<@comment_script oId=page.oId commentable=page.commentable></@comment_script>
-<#if pjax><!---- pjax {#pjax} end ----></#if>
 </body>
 </html>
--- a/Casper/tags.ftl
+++ b/Casper/tags.ftl
@@ -0,0 +1,64 @@
+<#--
+
+    Solo - A small and beautiful blogging system written in Java.
+    Copyright (c) 2010-present, b3log.org
+
+    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 "../../common-template/macro-common_head.ftl">
+<!DOCTYPE html>
+<html>
+<head>
+<@head title="${allTagsLabel} - ${blogTitle}">
+    <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+</@head>
+</head>
+<body class="fn__flex-column">
+<div id="pjax" class="fn__flex-1">
+    <#if pjax><!---- pjax {#pjax} start ----></#if>
+<#include "marcr-header.ftl">
+    <@header type='other'></@header>
+    <div class="wrapper other">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${allTagsLabel}</h2>
+        <div class="other__meta">
+        ${tags?size} ${tagLabel}
+        </div>
+        <div class="other__content">
+         <#list mostUsedCategories as category>
+             <span class="other__item--archive other__item">
+                 <a href="${servePath}/category/${category.categoryURI}">
+                     ${category.categoryTitle}
+                 </a>
+                 <span>${category.categoryTagCnt} ${tagLabel}</span>
+             </span>
+         </#list>
+        </div>
+        <div class="other__content">
+        <#list tags as tag>
+            <span class="other__item other__item--archive">
+                 <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="tag"
+                    href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
+                     ${tag.tagTitle}
+                 </a>
+                <span>${tag.tagPublishedRefCount} ${countLabel}</span>
+            </span>
+        </#list>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>
--- a/Community/archive-articles.ftl
+++ b/Community/archive-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,14 +17,13 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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 title="${archiveDate.archiveDateYear} ${yearLabel} ${archiveDate.archiveDateMonth} ${monthLabel} ${archiveLabel} - ${blogTitle}">
+             <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
+         </@head>
    </head>
    <body>
        ${topBarReplacement}
--- a/Community/article-list.ftl
+++ b/Community/article-list.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -67,7 +67,7 @@
            </sup>
            </#if>
        </h2>
-        <div class="content-reset">
+        <div class="vditor-reset">
            ${article.articleAbstract}
        </div>
        <div class="read-more">
--- a/Community/article.ftl
+++ b/Community/article.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,38 +17,22 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.ftl">
 <#include "macro-comments.ftl">
 <#include "../../common-template/macro-comment_script.ftl">
 <!DOCTYPE html>
 <html>
    <head>
-        <@head title="${article.articleTitle} - ${blogTitle}">
-        <meta name="keywords" content="${article.articleTags}" />
-        <meta name="description" content="${article.articleAbstract?html}" />
-        </@head>
+        <@head title="${article.articleTitle} - ${blogTitle}" description="${article.articleAbstract?html}">
+            <link rel="stylesheet"
+                  href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        <#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>
    </head>
    <body>
        ${topBarReplacement}
@@ -88,6 +72,15 @@
                            </a>
                        </li>
                    </ul>
+                    <#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
+                        <br> <br>
+                        <div class="article-date">
+                            ${tocLabel}
+                        </div>
+                        <div class="arrow-right"></div>
+                        <div class="clear"></div>
+                        <#include "../../common-template/toc.ftl"/>
+                    </#if>
                </div>
                <div class="article-main article-detail-body">
                    <h2 class="title">
@@ -103,7 +96,7 @@
                        </sup>
                        </#if>
                    </h2>
-                    <div class="content-reset">
+                    <div class="vditor-reset">
                        ${article.articleContent}
                        <#if "" != article.articleSign.signHTML?trim>
                        <div class="marginTop12">
--- a/Community/author-articles.ftl
+++ b/Community/author-articles.ftl
@@ -1,7 +1,7 @@
 <#--

    Solo - A small and beautiful blogging system written in Java.
-    Copyright (c) 2010-2019, b3log.org & hacpai.com
+    Copyright (c) 2010-present, b3log.org

    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
@@ -17,13 +17,12 @@
    along with this program.  If not, see <https://www.gnu.org/licenses/>.

 -->
-<#include "macro-head.ftl">
+<#include "../../common-template/macro-common_head.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>"/>
+            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
        </@head>
    </head>
    <body>
@@ -33,7 +32,7 @@
        </div>
        <div class="content">
            <h2>
-                ${commentName1Label}${authorName}
+                ${authorName}
            </h2>
            <#include "article-list.ftl">
        </div>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Van	4e0efa0a53	🚦	2019-04-19 16:42:15 +08:00
Van	1416debe53	Merge branch 'master' of https://github.com/b3log/solo-skins	2019-04-19 16:41:13 +08:00
Van	4abaf10a1b	fix https://github.com/b3log/solo-skins/issues/29	2019-04-19 16:41:09 +08:00
Liang Ding	bc8eb51c2b	🔖 发布 v3.6.0	2019-04-19 10:38:32 +08:00
Van	c699f2ff85	https://github.com/b3log/solo/issues/12764	2019-04-18 17:36:32 +08:00
Van	0d277a9b0e	https://github.com/b3log/solo/issues/12757	2019-04-13 09:36:20 +08:00
Liang Ding	3fbc732017	🐛 Fix https://github.com/b3log/solo/issues/12755	2019-04-08 14:30:53 +08:00
Van	cfd5d476cd	fix https://github.com/b3log/solo/issues/12748	2019-04-03 21:15:34 +08:00
Liang Ding	443cacafa3	📦 编译打包	2019-04-02 21:07:51 +08:00
Van	734a0979a7	fix https://github.com/b3log/solo/issues/12748	2019-04-02 11:37:02 +08:00
Van	8ab115ac53	2 https://github.com/b3log/solo/issues/12748	2019-04-02 11:26:55 +08:00
Van	dfc58496ed	6 https://github.com/b3log/solo/issues/12748	2019-04-02 11:08:40 +08:00
Van	72b8473caa	3 https://github.com/b3log/solo/issues/12748	2019-04-02 11:02:45 +08:00
Van	94c330ff14	4 https://github.com/b3log/solo/issues/12748	2019-04-02 11:00:10 +08:00
Van	e03cfdcbf1	https://github.com/b3log/solo/issues/12748 5	2019-04-02 10:56:49 +08:00
Liang Ding	c26beefecf	📄 更新文件头	2019-04-02 09:36:01 +08:00
Liang Ding	a5d63c7225	📦 编译打包	2019-03-31 11:00:15 +08:00
Liang Ding	87265b97bc	🎨 清理无用的多语言配置	2019-03-31 10:30:54 +08:00
Van	a2fecd75a5	💄	2019-03-29 16:25:06 +08:00
Liang Ding	91f0577fde	Casper 图片大小	2019-03-29 00:04:08 +08:00
Van	c502f892eb	fix https://github.com/b3log/solo/issues/12737	2019-03-28 23:00:58 +08:00
Van	acb13c5f18	https://github.com/b3log/solo/issues/12737 pc	2019-03-28 18:10:40 +08:00
Van	59450e3218	https://github.com/b3log/solo/issues/12737 article	2019-03-28 12:14:02 +08:00
Van	e3d7be6f23	https://github.com/b3log/solo/issues/12737 list	2019-03-26 17:22:47 +08:00
Van	f69cb9f24f	👄	2019-03-26 17:22:00 +08:00
Van	00f36effdb	🎉 https://github.com/b3log/solo/issues/12737	2019-03-26 10:59:56 +08:00
Van	f038d96741	Merge branch 'master' of https://github.com/b3log/solo-skins	2019-03-26 10:11:49 +08:00
Van	7bda7a8745	⛺ rm version	2019-03-26 10:11:46 +08:00
Liang Ding	5fbe279bcd	发布 v3.4.0	2019-03-26 08:23:53 +08:00
Van	e9cf230aba	🐛	2019-03-26 08:21:33 +08:00
Van	04be872d8c	https://github.com/b3log/solo/issues/12720 yilia	2019-03-22 19:27:08 +08:00
Van	b2fe147b13	https://github.com/b3log/solo/issues/12720 tree-house	2019-03-22 19:25:36 +08:00
Van	60a8e6df33	https://github.com/b3log/solo/issues/12720 timeline	2019-03-22 18:53:35 +08:00
Van	3ca8f083f2	https://github.com/b3log/solo/issues/12720 Pinghsu	2019-03-22 18:02:41 +08:00
Van	034e929f62	https://github.com/b3log/solo/issues/12720 owmx-3.0	2019-03-22 17:39:55 +08:00
Van	32b7923774	https://github.com/b3log/solo/issues/12720 nijigen	2019-03-22 17:10:56 +08:00
Van	53f713a45d	https://github.com/b3log/solo/issues/12720 next	2019-03-22 16:45:30 +08:00
Van	1121ffae30	https://github.com/b3log/solo/issues/12720 NeoEase	2019-03-22 16:20:33 +08:00
Van	7de1250af0	https://github.com/b3log/solo/issues/12720 metro-hot	2019-03-22 12:59:52 +08:00
Van	acffd3c0f3	https://github.com/b3log/solo/issues/12720 Media	2019-03-22 12:45:12 +08:00
Van	5245aafcca	https://github.com/b3log/solo/issues/12720 Jane	2019-03-22 12:04:02 +08:00
Van	50417e9a54	https://github.com/b3log/solo/issues/12720 i-nove	2019-03-22 11:37:24 +08:00
Van	faa1169ee8	https://github.com/b3log/solo/issues/12720 Finding	2019-03-22 10:33:09 +08:00
Van	4996aa298b	https://github.com/b3log/solo/issues/12720 favourite	2019-03-22 10:02:00 +08:00
Van	fbba7cde5c	https://github.com/b3log/solo/issues/12720 Community	2019-03-22 09:05:11 +08:00
Van	ad7e12ef30	https://github.com/b3log/solo/issues/12720 Bruce	2019-03-21 21:34:11 +08:00
Van	1558900384	https://github.com/b3log/solo/issues/12720 Andrea	2019-03-21 17:55:48 +08:00
Van	8c9b13c393	♻️ toolptiped	2019-03-20 13:50:45 +08:00
Van	4d04c02872	https://github.com/b3log/solo/issues/12720 9IPHP	2019-03-20 13:49:45 +08:00
Van	1605dceed8	♻️	2019-03-20 07:59:29 +08:00
Van	d5c44707aa	♻️	2019-03-19 20:01:39 +08:00
Van	c8131b93ca	https://github.com/b3log/solo/issues/12720	2019-03-19 19:03:09 +08:00
Van	20a63cbe49	#12720	2019-03-19 15:43:46 +08:00
Van	446f18f7d7	©️	2019-03-18 09:17:15 +08:00
Liang Ding	c0348449da	发布 v3.3.0	2019-03-17 20:50:31 +08:00
Liang Ding	a7a63eff28	🎨 可配置 favicon URL	2019-03-17 20:32:32 +08:00
Van	5153f220f2	⬆️	2019-03-16 20:23:15 +08:00
Van	46ced95f46	⬆️ https://github.com/b3log/solo/issues/12698	2019-03-16 20:04:47 +08:00
Van	7368e5b747	⬆️ https://github.com/b3log/solo/issues/12711	2019-03-16 18:28:32 +08:00
Van	32d9065772	fix https://github.com/b3log/solo/issues/12705	2019-03-16 12:09:57 +08:00
Van	d540b3a920	⬆️	2019-03-06 10:50:35 +08:00
Van	f9c09e185d	⬆️ vditor->0.3.0	2019-03-06 10:49:26 +08:00
				`@@ -0,0 +1 @@`
				var Skin={init:function(){Util.initPjax()},initArticle:function(){page.share();var l=$(".vditor-reset [id^=b3_solo_h]"),s=$(".article__toc"),c=$(".article__progress");1===s.length&&(876<$(window).width()?$(".post__toc").css("left",$(".article .item__content").offset().left+$(".article .item__content").outerWidth()-80):$(".post__toc a").click(function(){$(".post__toc").hide()})),$(window).unbind("scroll").scroll(function(t){if(0===c.length)return!1;if(c.attr("value",parseInt($(window).scrollTop())).attr("max",parseInt($("body").outerHeight()-$(window).height())),236<$(window).scrollTop()?$(".article__top").css("top",0):$(".article__top").css("top",-61),0===$(".article__toc li").length)return!1;876<$(window).width()&&(975<$(window).scrollTop()&&$(window).scrollTop()<$(".article").outerHeight()+100?$(".post__toc").show():$(".post__toc").hide());var o=[];l.each(function(t){o.push({id:this.id,offsetTop:this.offsetTop})});for(var i=$(window).scrollTop(),e=0,r=o.length;e<r;e++)if(i<o[e].offsetTop){s.find("li").removeClass("current");var n=0<e?e-1:0;s.find('a[href="#'+o[n].id+'"]').parent().addClass("current");break}i>=o[o.length-1].offsetTop&&(s.find("li").removeClass("current"),s.find("li:last").addClass("current"))}),$(window).scroll()}};Skin.init();