💄 UI

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

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

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

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

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

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

9IPHP/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

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
@@ -65,13 +65,5 @@
             </div>
         </div>
         <#include "footer.ftl">
-
-        <script>
-            var $commentContents = $(".comments .vditor-reset");
-            for (var i = 0; i < $commentContents.length; i++) {
-                var str = $commentContents[i].innerHTML;
-                $commentContents[i].innerHTML = Util.replaceEmString(str);
-            }
-        </script>
     </body>
 </html>

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
@@ -19,11 +19,10 @@
 -->
 <footer class="footer fn-clear">
     &copy; ${year}
+    <a href="${servePath}">${blogTitle}</a>
     ${footerContent}
-    <a href="${servePath}">${blogTitle}</a>  &nbsp;   • &nbsp;
+    <br/>
-    <a href="https://solo.b3log.org" target="_blank">Solo</a> ${version}  <br/>
+    Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
-
-    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">${skinDirName}</a>
     <sup>[<a href="https://github.com/9IPHP/9IPHP" target="_blank">ref</a>]</sup>

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

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

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

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

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

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

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

9IPHP/page.ftl

@@ -1,48 +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 "../../common-template/macro-common_head.ftl">
-<#include "macro-comments.ftl">
-<#include "../../common-template/macro-comment_script.ftl">
-<!DOCTYPE html>
-<html>
-    <head>
-        <@head title="${page.pageTitle} - ${blogTitle}">
-            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
-        </@head>
-    </head>
-    <body>
-        <#include "header.ftl">
-        <div class="wrapper">
-            <div class="main-wrap">
-                <main>
-                    <article class="post">
-                        <div class="vditor-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>

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

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

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

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

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

Andrea/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

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

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

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

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

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

Andrea/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

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
@@ -18,8 +18,8 @@
 
 -->
 <div class="copyright">
-    &copy; ${year} - <a href="${servePath}">${blogTitle}</a>${footerContent}<br/>
+    &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/>
+    Powered by <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>

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

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

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
@@ -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

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
@@ -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

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

Andrea/page.ftl

@@ -1,62 +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 "../../common-template/macro-common_head.ftl">
-<#include "macro-comments.ftl">
-<#include "../../common-template/macro-comment_script.ftl">
-<!DOCTYPE html>
-<html>
-    <head>
-        <@head title="${page.pageTitle} - ${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">
-                        <div class="article">
-                            <div class="vditor-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>

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

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

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

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

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

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

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

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

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

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

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

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

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

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
@@ -21,7 +21,7 @@
 <div class="footer">
     <@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> ${version}
+    &copy; ${year} <a href="${servePath}">${blogTitle}</a> ${footerContent} Powered by <a href="https://solo.b3log.org" target="_blank">Solo</a>
     <div>
         Theme <a rel="friend" href="https://github.com/b3log/solo-skins" target="_blank">${skinDirName}</a>
         by

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

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

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

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

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

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

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

Bruce/page.ftl

@@ -1,52 +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 "../../common-template/macro-common_head.ftl">
-<#include "macro-comments.ftl">
-<#include "../../common-template/macro-comment_script.ftl">
-<!DOCTYPE html>
-<html>
-    <head>
-        <@head title="${page.pageTitle} - ${blogTitle}">
-            <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
-        </@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 vditor-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>

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

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

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

Bubble/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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <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="ft__center">
+            ${archiveDate.archiveDatePublishedArticleCount} ${cntArticleLabel}
+        </div>
+        <#include "article-list.ftl">
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

Bubble/archives.ftl

@@ -0,0 +1,62 @@
+<#--
+
+    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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${archiveLabel}</h2>
+        <div class="ft__center">
+        ${archiveDates?size} ${cntMonthLabel}
+        ${statistic.statisticPublishedBlogArticleCount} ${cntArticleLabel}
+        </div>
+        <div class="articles">
+            <#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>
+            <br><br><br>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

Bubble/article-list.ftl

@@ -0,0 +1,94 @@
+<#--
+
+    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">
+            <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}">${article.authorName}</a>
+                &nbsp;·&nbsp;
+                <#list article.articleTags?split(",") as articleTag>
+                    <a rel="tag" class="item__tag" href="${servePath}/tags/${articleTag?url('UTF-8')}">
+                        ${articleTag}
+                    </a> &nbsp;
+                </#list>
+                <#if article.articleCommentCount != 0>
+                    &nbsp;·&nbsp;
+                    <a class="item__tag" href="${servePath}${article.articlePermalink}#comments">
+                        ${article.articleCommentCount} ${commentLabel}
+                    </a>
+                </#if>
+                <#if article.articleViewCount != 0>
+                    &nbsp;·&nbsp;
+                    <a class="item__tag" href="${servePath}${article.articlePermalink}">
+                        ${article.articleViewCount} ${viewLabel}
+                    </a>
+                </#if>
+            </div>
+        </article>
+    </#list>
+
+    <#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>
+</div>

Bubble/article.ftl

@@ -0,0 +1,125 @@
+<#--
+
+    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 "macro-header.ftl">
+    <@header type="article"></@header>
+    <div class="article__top" style="background-image: url(${article.articleImg1URL})">
+        <div style="background-image: url(${article.articleImg1URL})"></div>
+        <canvas id="articleTop"></canvas>
+    </div>
+    <div class="article">
+        <div class="ft__center">
+            <div class="article__meta">
+                <time>
+                    ${article.articleCreateDate?string("yyyy-MM-dd")}
+                </time>
+                /
+                <#list article.articleTags?split(",") as articleTag>
+                    <a rel="tag"
+                       href="${servePath}/tags/${articleTag?url('UTF-8')}">${articleTag}</a> &nbsp;
+                </#list>
+            </div>
+            <h2 class="article__title">
+                ${article.articleTitle}
+                <#if article.articlePutTop>
+                    <sup>
+                        ${topArticleLabel}
+                    </sup>
+                </#if>
+                <#if article.hasUpdated>
+                    <sup>
+                        ${updatedLabel}
+                    </sup>
+                </#if>
+            </h2>
+            <#include "../../common-template/share.ftl">
+        </div>
+        <div class="wrapper">
+            <section class="vditor-reset articles article__content">
+                ${article.articleContent}
+                <#if "" != article.articleSign.signHTML?trim>
+                    <div>
+                        ${article.articleSign.signHTML}
+                    </div>
+                </#if>
+            </section>
+        </div>
+
+    </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>
+<script type="text/javascript"
+        src="${staticServePath}/skins/${skinDirName}/js/TweenMax${miniPostfix}.js?${staticResourceVersion}"
+        charset="utf-8"></script>
+<#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>

Bubble/author-articles.ftl

@@ -0,0 +1,44 @@
+<#--
+
+    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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <h2 class="other__title">
+            <a href="${servePath}" class="ft__a">${blogTitle}</a> - ${authorName}
+        </h2>
+        <#include "article-list.ftl">
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

Bubble/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
@@ -18,37 +18,27 @@
 
 -->
 <#include "../../common-template/macro-common_head.ftl">
-<#include "macro-comments.ftl">
-<#include "../../common-template/macro-comment_script.ftl">
 <!DOCTYPE html>
 <html>
 <head>
-<@head title="${page.pageTitle} - ${blogTitle}">
+<@head title="${category.categoryTitle} - ${blogTitle}">
     <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
 </@head>
 </head>
-<body>
+<body class="fn__flex-column">
-<#include "header.ftl">
+<div id="pjax" class="fn__flex-1">
-<div class="main" id="pjax">
     <#if pjax><!---- pjax {#pjax} start ----></#if>
-    <div class="content">
+<#include "macro-header.ftl">
-    <main>
+    <@header type='index'></@header>
-        <article class="module">
+    <div class="wrapper">
-            <div class="module__content">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${category.categoryTitle}</h2>
-                <div class="vditor-reset">
+        <div class="ft__center">
-                ${page.pageContent}
+            ${category.categoryDescription}
         </div>
+        <#include "article-list.ftl">
     </div>
-        </article>
-        <@comments commentList=pageComments article=page></@comments>
-    </main>
-    </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>

Bubble/category.ftl

@@ -0,0 +1,56 @@
+<#--
+
+    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="${categoryLabel} - ${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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <h2 class="other__title">
+            <a href="${servePath}" class="ft__a">${blogTitle}</a> - ${categoryLabel}
+        </h2>
+        <div class="ft__center">
+            ${categories?size} ${cntLabel}${categoryLabel}
+        </div>
+        <div class="articles">
+            <br>
+            <#list categories as category>
+                <a href="${servePath}/category/${category.categoryURI}"
+                   class="other__item">
+                    ${category.categoryTitle} -
+                    <b>${category.categoryTagCnt}</b> ${tagsLabel}
+                </a>
+            </#list>
+            <br><br>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

Bubble/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>

Bubble/css/base.scss

@@ -0,0 +1,937 @@
+/*
+ * 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.1.0, Jul 13, 2019
+ */
+@import "../../../scss/reset";
+@import "../../../scss/usite";
+@import "../../../scss/toc";
+@import "../../../scss/function";
+@import "vditor/src/assets/scss/classic";
+
+$fade-lighter: rgba(255, 255, 255, .8) !default;
+$gray: #738a94 !default;
+$black: #15171a !default;
+$black-bg: #232323 !default;
+$link: rgb(119, 182, 255) !default;
+
+body {
+  background-color: #f4f8fb;
+}
+
+::selection {
+  text-shadow: none;
+  background-color: #cbeafb;
+}
+
+a {
+  color: $link;
+}
+
+.ft__a {
+  color: $gray;
+
+  &:hover {
+    color: rgba($gray, .8);
+  }
+}
+
+.fn__progress {
+  position: fixed;
+  right: 0;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 2px;
+  border: none;
+  background: transparent;
+  -webkit-appearance: none;
+  z-index: 3;
+
+  &::-webkit-progress-value {
+    background-color: $link;
+    transition: width 0.2s ease 0s, opacity 0.6s ease 0s;
+  }
+
+  &::-webkit-progress-bar {
+    background-color: transparent;
+  }
+}
+
+@keyframes fade-in-down {
+  0% {
+    opacity: 0;
+    transform: translateY(-10px)
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0)
+  }
+}
+
+@keyframes bounce {
+  0%, 20%, 50%, 80%, 100% {
+    -webkit-transform: translateY(0);
+    transform: translateY(0);
+  }
+  40% {
+    -webkit-transform: translateY(-10px);
+    transform: translateY(-10px);
+  }
+  60% {
+    -webkit-transform: translateY(-5px);
+    transform: translateY(-5px);
+  }
+}
+
+@keyframes bounceInLeft {
+  from {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: rotate3d(0, 0, 1, -45deg);
+    transform: rotate3d(0, 0, 1, -45deg);
+    opacity: 0;
+  }
+
+  to {
+    -webkit-transform-origin: left bottom;
+    transform-origin: left bottom;
+    -webkit-transform: translate3d(0, 0, 0);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+}
+
+@keyframes bounceOutLeft {
+  20% {
+    opacity: 1;
+    transform: translate3d(20px, 0, 0);
+  }
+
+  to {
+    opacity: 0;
+    transform: translate3d(-2000px, 0, 0);
+  }
+}
+
+@keyframes beating {
+  0% {
+    transform: scale(1)
+  }
+
+  20% {
+    transform: scale(1.6)
+  }
+
+  30% {
+    transform: scale(1)
+  }
+
+  50% {
+    transform: scale(1.6)
+  }
+
+  70%, to {
+    transform: scale(1)
+  }
+}
+
+.wrapper {
+  max-width: 892px;
+  margin: 0 auto;
+  padding: 0 10px;
+}
+
+.header {
+  position: relative;
+  z-index: 1;
+
+  &--index {
+    height: 100vh;
+
+    &:before {
+      content: "";
+      height: 100%;
+      position: absolute;
+      background: url("../images/header-bg.jpg") no-repeat center center;
+      width: 100%;
+      top: 0;
+      background-size: cover;
+    }
+  }
+
+  &--article {
+    display: none;
+  }
+
+  &__title {
+    position: relative;
+    align-items: center;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    z-index: 1;
+  }
+
+  &__h1 {
+    letter-spacing: -1px;
+    font-weight: 700;
+    font-size: 50px;
+    text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
+    animation: fade-in-down 1s both;
+    animation-delay: .5s;
+
+    a {
+      color: #fff;
+
+      &:hover {
+        text-decoration: none;
+        color: $fade-lighter;
+      }
+    }
+  }
+
+  &__desc {
+    margin-top: 10px;
+    color: $fade-lighter;
+    line-height: 24px;
+    text-shadow: 0 3px 6px rgba(0, 0, 0, .3);
+    animation: fade-in-down .9s both;
+    animation-delay: .3s;
+
+    &--title {
+      font-size: 20px;
+      font-weight: 400;
+    }
+  }
+
+  &__down {
+    animation: bounce 4s 2s infinite;
+    color: $fade-lighter;
+    height: 34px;
+    width: 34px;
+    position: absolute;
+    bottom: 10px;
+    cursor: pointer;
+
+    &:hover {
+      color: #fff;
+    }
+  }
+}
+
+.side {
+  &__menu {
+    position: fixed;
+    z-index: 2;
+    border: 1px solid rgba(255, 255, 255, 0.6);
+    border-radius: 3px;
+    font-size: 12px;
+    text-transform: uppercase;
+    color: #fff;
+    top: 20px;
+    left: 20px;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    cursor: pointer;
+    transition: left .3s ease;
+
+    &:hover {
+      opacity: .6;
+    }
+
+    &--edge {
+      left: -3px;
+      font-size: 0;
+      background-color: #333;
+    }
+  }
+
+  &__main {
+    display: none;
+    opacity: 0;
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    z-index: 3;
+    transition: all 1s ease;
+
+    &--show {
+      opacity: 1;
+
+      .side__bg {
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+
+      .side__panel {
+        animation-name: bounceInLeft;
+      }
+    }
+  }
+
+  &__bg {
+    position: fixed;
+    width: 100%;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 3;
+    transition: background-color 1s ease;
+  }
+
+  &__panel {
+    width: 280px;
+    height: 100vh;
+    overflow: auto;
+    animation-name: bounceOutLeft;
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    position: fixed;
+    left: 0;
+    z-index: 4;
+    top: 0;
+    background-color: #000;
+
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
+
+  &__top {
+    position: fixed;
+    bottom: 20px;
+    right: 20px;
+    height: 24px;
+    width: 24px;
+    cursor: pointer;
+    color: #555;
+    opacity: .5;
+    transition: all .5s ease-out;
+
+    &--bottom {
+      transform: rotate(-180deg);
+    }
+
+    &:hover {
+      opacity: 1;
+    }
+  }
+
+  &__header {
+    background: #000 url(../images/side-bg.gif) top/contain no-repeat;
+    width: 100%;
+    height: 239px;
+    padding-top: 40px;
+  }
+
+  &__logo {
+    width: 66px;
+    height: 66px;
+    border: 4px solid hsla(0, 0%, 100%, .5);
+    border-radius: 100%;
+    box-shadow: inset 1px 1px 4px rgba(0, 0, 0, .3), 0 2px 3px rgba(0, 0, 0, .4);
+    margin: 0 auto 20px;
+    display: block;
+    transition: all .3s ease;
+
+    &:hover {
+      transform: rotate3d(0, 0, 1, -45deg);
+    }
+  }
+
+  &__close {
+    cursor: pointer;
+    height: 16px;
+    width: 16px;
+    position: absolute;
+    right: 10px;
+    top: 10px;
+  }
+
+  &__meta {
+    color: #fff;
+    text-align: center;
+  }
+
+  &__title {
+    position: relative;
+
+    &:after {
+      content: "";
+      position: absolute;
+      width: 100%;
+      height: 1px;
+      background-color: #3b3b3b;
+    }
+
+    span {
+      position: absolute;
+      top: -11px;
+      left: 91px;
+      z-index: 1;
+      padding: 0 10px;
+      background-color: #000;
+      color: #b8b8b8;
+    }
+  }
+
+  &__nav {
+    flex: 1;
+    margin: 30px 0 20px;
+    padding: 0;
+    counter-reset: item;
+
+    li {
+      height: 30px;
+      display: flex;
+
+      &:after {
+        padding-right: 20px;
+        text-align: right;
+        vertical-align: bottom;
+        color: #B8B8B8;
+        content: counter(item, lower-roman);
+        counter-increment: item;
+      }
+
+      a {
+        color: #989898;
+        text-decoration: none;
+        line-height: 1.4;
+        padding: 0 10px 0 20px;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+
+        &:after {
+          display: inline-block;
+          content: " .......................................................";
+          color: rgba(255, 255, 255, 0.2);
+          margin-left: 5px;
+        }
+
+        &:hover {
+          color: #FFF;
+        }
+      }
+
+      img {
+        float: left;
+        height: 14px;
+        width: 14px;
+        margin: 3px 4px 0 0;
+      }
+    }
+  }
+}
+
+.footer {
+  font-size: 12px;
+  padding: 20px 0;
+  background-color: $black-bg;
+  color: #888;
+  margin-top: 200px;
+  line-height: 24px;
+  text-align: center;
+
+  .wrapper {
+    position: relative;
+
+    &:after {
+      background: url(../images/footer.png) no-repeat center center / cover;
+      position: absolute;
+      bottom: 62px;
+      left: -64px;
+      width: 1040px;
+      pointer-events: none;
+      content: "";
+      height: 315px;
+    }
+  }
+
+  &__heart {
+    display: inline-block;
+    animation: beating 1s infinite;
+    animation-timing-function: ease-out;
+    margin: 0 3px 5px 8px;
+  }
+
+  svg {
+    height: 20px;
+    width: 20px;
+    margin: 0 10px 5px;
+  }
+
+  a {
+    color: $fade-lighter;
+
+    &:hover {
+      text-decoration: none;
+      color: #fff;
+    }
+  }
+}
+
+.articles {
+  margin: 40px auto;
+  box-shadow: 8px 14px 38px rgba(39, 44, 49, .06), 1px 3px 8px rgba(39, 44, 49, .03);
+  background-color: rgba(255, 255, 255, .9);
+  border-radius: 5px;
+  color: $gray;
+
+  .item {
+    border-bottom: 1px solid #f0f2f7;
+    padding: 20px;
+
+    &:last-child {
+      border-bottom-width: 0;
+    }
+
+    &__title {
+      a {
+        color: $black;
+        font-size: 24px;
+        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 {
+      display: block;
+      line-height: 24px;
+      color: $black;
+      font-size: 16px;
+      margin: 10px 0;
+
+      &:hover {
+        text-decoration: none;
+        color: rgba($black, 0.8);
+      }
+    }
+
+    &__tag {
+      display: inline-block;
+      color: $gray;
+      line-height: 14px;
+      font-weight: 500;
+      letter-spacing: .5px;
+      text-transform: uppercase;
+
+      &:hover {
+        text-decoration: none;
+        color: rgba($gray, 0.8);
+      }
+    }
+  }
+}
+
+.pagination {
+  text-align: center;
+  margin-top: 40px;
+
+  &__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,
+    &--active {
+      opacity: 0.68;
+      text-decoration: none;
+    }
+
+    &--omit {
+      background-color: transparent;
+      color: $black;
+    }
+  }
+}
+
+.other {
+  &__title {
+    margin: 40px 0 10px;
+    font-size: 28px;
+    text-align: center;
+    font-weight: 400;
+  }
+
+  &__item {
+    line-height: 20px;
+    margin: 20px 35px 0 35px;
+    white-space: nowrap;
+    display: block;
+    color: $gray;
+    word-break: break-all;
+
+    &--archive {
+      width: 150px;
+      display: inline-block;
+    }
+  }
+}
+
+.article {
+  &__bottom {
+
+    .fn__flex {
+      flex-wrap: wrap;
+    }
+
+    .item {
+      position: relative;
+      flex: 1 1 270px;
+      margin: 40px 10px 40px;
+      box-shadow: 8px 14px 38px rgba(39, 44, 49, 0.06), 1px 3px 8px rgba(39, 44, 49, 0.03);
+      border-radius: 5px;
+      padding: 20px;
+      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(68%) opacity(0.9);
+      }
+
+      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 {
+    width: 100%;
+    height: 50vh;
+    position: relative;
+    z-index: 1;
+    background-position: center;
+    background-size: cover;
+
+    div {
+      max-width: 1404px;
+      background-size: cover;
+      background-position: center center;
+      filter: sepia(0.2) contrast(1.3);
+      height: 100%;
+      margin: 0 auto;
+    }
+
+    canvas {
+      position: absolute;
+      top: 0;
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  &__meta {
+    padding-top: 40px;
+    text-transform: uppercase;
+    color: rgba($gray, .8);
+
+    a {
+      color: $gray;
+    }
+  }
+
+  &__title {
+    font-size: 28px;
+    margin: 10px 0;
+
+    sup {
+      font-size: 14px;
+      font-weight: normal;
+      color: rgba($gray, .8);
+    }
+  }
+
+  &__share {
+    margin-bottom: 40px;
+    position: relative;
+    width: 200px;
+    margin: 0 auto;
+
+    .item {
+      color: #fdc200;
+      cursor: pointer;
+      transition: all .3s ease;
+      margin: 0 10px;
+
+      svg {
+        height: 20px;
+        width: 20px;
+      }
+
+      &[data-type="wechat"] {
+        color: #3caf36;
+      }
+
+      &[data-type="twitter"] {
+        color: #18a3fa;
+      }
+
+      &[data-type="weibo"] {
+        color: #f93;
+      }
+
+      &:hover {
+        opacity: 0.6;
+      }
+
+      &__qr {
+        position: absolute;
+        top: 24px;
+        left: 60px;
+      }
+    }
+  }
+
+  &__content {
+    padding: 40px;
+    box-sizing: border-box;
+  }
+}
+
+.post__toc {
+  position: fixed;
+  top: 84px;
+  bottom: 80px;
+  overflow: auto;
+  padding-left: 3px;
+  right: 20px;
+  max-width: 160px;
+  display: none;
+
+  &::-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 {
+  &-body-ref {
+    position: absolute;
+    left: 80px;
+    right: 0;
+  }
+
+  &__title {
+    text-align: center;
+    padding: 40px 0;
+    color: $gray;
+  }
+
+  #comments {
+    position: relative;
+  }
+
+  .item {
+    margin-bottom: 40px;
+    border: 1px solid $fade-lighter;
+    border-radius: 5px;
+    background: rgba(255, 255, 255, .9);
+    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;
+      }
+    }
+  }
+
+  #comment {
+    margin-bottom: 30px;
+    padding: 20px;
+    border-radius: 3px;
+    background: rgba(255, 255, 255, .9);
+    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
+    border: 0;
+    resize: none;
+    cursor: pointer;
+    width: 100%;
+    box-sizing: border-box;
+  }
+}
+
+@media (max-width: 768px) {
+  .pagination {
+    margin-top: 5px;
+
+    &__item {
+      margin: 0 2px 5px 2px;
+    }
+  }
+
+  .footer {
+    margin-top: 0;
+
+    .wrapper:after {
+      content: none;
+    }
+  }
+
+  .post__toc {
+    display: none;
+  }
+
+  .articles {
+    margin: 10px auto;
+
+    .item {
+      padding: 10px;
+
+      &__title a {
+        font-size: 18px;
+      }
+    }
+  }
+
+  .article {
+    &__bottom .item {
+      margin: 0 0 10px 0;
+    }
+  }
+
+  .comment {
+    &__title {
+      padding: 10px 0;
+    }
+
+    #comment,
+    .item {
+      margin-bottom: 10px;
+      padding: 10px;
+    }
+
+    .item__avatar {
+      margin: 0 10px 10px 0;
+    }
+  }
+}

Bubble/footer.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/>.
+
+-->
+<footer class="footer">
+    <div class="wrapper">
+        <#include "../../common-template/macro-user_site.ftl">
+        <@userSite dir=""></@userSite> <br>
+        &copy; ${year}
+        <a href="${servePath}">${blogTitle}</a>
+        ${footerContent}
+        <span class="footer__heart">❤️</span>
+        Powered by <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://www.cnblogs.com/jajian" target="_blank">ref</a>]</sup>
+        by <a href="http://vanessa.b3log.org" target="_blank">Vanessa</a> <br>
+    </div>
+</footer>
+<svg class="side__top" version="1.1" xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 32 32">
+    <path d="M26.562 13.958c0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303v0c0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303v0zM23.305 10.7c0 0 0 0 0 0 0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303c0-0 0-0 0-0v0c0-0 0-0 0-0 0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303c0 0 0 0 0 0v0zM20.022 7.417c0 0 0 0 0 0 0 0.72 0.583 1.303 1.303 1.303s1.303-0.583 1.303-1.303c0-0 0-0 0-0v0c0-0 0-0 0-0 0-0.72-0.583-1.303-1.303-1.303s-1.303 0.583-1.303 1.303c0 0 0 0 0 0v0zM29.67 0h-27.339c-0.677 0-1.228 0.551-1.228 1.228s0.551 1.228 1.228 1.228h11.151l-10.725 10.725c-0.476 0.476-0.476 1.253 0 1.729 0.226 0.226 0.551 0.351 0.852 0.351s0.626-0.125 0.852-0.351l10.074-10.074v25.936c0 0.677 0.551 1.228 1.228 1.228s1.228-0.551 1.228-1.228v-26.011c0.476 0.426 1.203 0.426 1.679-0.050s0.476-1.253 0-1.729l-0.576-0.576h11.577c0.677 0 1.228-0.551 1.228-1.228 0-0.626-0.551-1.178-1.228-1.178z"></path>
+</svg>
+
+
+<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/circleMagic${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}

Bubble/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
@@ -18,45 +18,23 @@
 
 -->
 <#include "../../common-template/macro-common_head.ftl">
-<#include "macro-comments.ftl">
-<#include "../../common-template/macro-comment_script.ftl">
 <!DOCTYPE html>
 <html>
 <head>
-<@head title="${page.pageTitle} - ${blogTitle}">
+<@head title="${blogTitle}">
     <link rel="stylesheet" href="${staticServePath}/skins/${skinDirName}/css/base.css?${staticResourceVersion}"/>
 </@head>
 </head>
-<body>
+<body class="fn__flex-column">
-<#include "header.ftl">
+<div id="pjax" class="fn__flex-1">
-<div id="pjax">
     <#if pjax><!---- pjax {#pjax} start ----></#if>
-<#include "nav.ftl">
+    <#include "macro-header.ftl">
-<div class="main">
+    <@header type='index'></@header>
-<#if noticeBoard??>
+    <div class="wrapper">
-    <div class="board">
+        <#include "article-list.ftl">
-    ${noticeBoard}
-    </div>
-</#if>
-    <div class="wrapper content">
-        <article class="post">
-            <section class="vditor-reset">
-            ${page.pageContent}
-            </section>
-        </article>
-    </div>
-</div>
-<div class="article__bottom">
-<@comments commentList=pageComments article=page></@comments>
-</div>
-    <div style="margin-left: 20px;margin-right: 20px">
-    <#include "bottom.ftl">
     </div>
     <#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>

Bubble/js/circleMagic.js

@@ -0,0 +1,585 @@
+/*
+ * 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/>.
+ */
+;(function ($) {
+  $.fn.circleMagic = function (options) {
+
+    var width, height, canvas, ctx, animateHeader = true;
+    var circles = [];
+
+    var settings = $.extend({
+      color: 'rgba(255,255,255,.5)',
+      radius: 10,
+      density: 0.3,
+      clearOffset: 0.2
+    }, options);
+
+    //  Main
+
+    var container = this['0'];
+    initContainer();
+    addListeners();
+
+    function initContainer() {
+      width = container.offsetWidth;
+      height = container.offsetHeight;
+
+      //  create canvas element
+
+      initCanvas();
+      canvas = document.getElementById('canvas');
+      canvas.width = width;
+      canvas.height = height;
+      canvas.style.position = 'absolute';
+      canvas.style.left = '0';
+      canvas.style.bottom = '0';
+      ctx = canvas.getContext('2d');
+
+      //  create circles
+      for (var x = 0; x < width * settings.density; x++) {
+        var c = new Circle();
+        circles.push(c);
+      }
+      animate();
+    }
+
+    //Init canvas element
+    function initCanvas() {
+      var canvasElement = document.createElement('canvas');
+      canvasElement.id = 'canvas';
+      container.appendChild(canvasElement);
+      canvasElement.parentElement.style.overflow = 'hidden';
+
+    }
+
+    // Event handling
+    function addListeners() {
+      window.addEventListener('resize', resize, false);
+    }
+
+    function resize() {
+      width = container.clientWidth;
+      height = container.clientHeight;
+      container.height = height + 'px';
+      canvas.width = width;
+      canvas.height = height;
+    }
+
+    function animate() {
+      if (animateHeader) {
+        ctx.clearRect(0, 0, width, height);
+        for (var i in circles) {
+          circles[i].draw();
+        }
+      }
+      requestAnimationFrame(animate);
+    }
+
+    function randomColor() {
+      var r = Math.floor(Math.random() * 255);
+      var g = Math.floor(Math.random() * 255);
+      var b = Math.floor(Math.random() * 255);
+      var alpha = Math.random().toPrecision(2);
+      return 'rgba(' + r + ', ' + g + ', ' + b + ', ' + alpha + ')';
+    }
+
+    //  Canvas manipulation
+
+    function Circle() {
+      var that = this;
+
+      // constructor
+      (function () {
+        that.pos = {};
+        init();
+      })();
+
+      function init() {
+        that.pos.x = Math.random() * width;
+        that.pos.y = height + Math.random() * 100;
+        that.alpha = 0.1 + Math.random() * settings.clearOffset;
+        that.scale = 0.1 + Math.random() * 0.3;
+        that.speed = Math.random();
+        if (settings.color === 'random') {
+          that.color = randomColor();
+        }
+        else {
+          that.color = settings.color;
+        }
+      }
+
+      this.draw = function () {
+        if (that.alpha <= 0) {
+          init();
+        }
+        that.pos.y -= that.speed;
+        that.alpha -= 0.0005;
+        ctx.beginPath();
+        ctx.arc(that.pos.x, that.pos.y, that.scale * settings.radius, 0, 2 * Math.PI, false);
+        ctx.fillStyle = that.color;
+        ctx.fill();
+        ctx.closePath();
+      };
+    }
+  }
+})(jQuery);
+
+/**
+ * Ribbons Class File.
+ * Creates low-poly ribbons background effect inside a target container.
+ */
+(function( name, factory )
+{
+  if( typeof window === "object" )
+  {
+    window[ name ] = factory();
+  }
+
+})( "Ribbons", function()
+{
+  var _w = window,
+    _b = document.body,
+    _d = document.documentElement;
+
+  // random helper
+  var random = function()
+  {
+    if( arguments.length === 1 ) // only 1 argument
+    {
+      if( Array.isArray( arguments[0] ) ) // extract index from array
+      {
+        var index = Math.round( random( 0, arguments[0].length - 1 ) );
+        return arguments[0][ index ];
+      }
+      return random( 0, arguments[0] ); // assume numeric
+    }
+    else if( arguments.length === 2 ) // two arguments range
+    {
+      return Math.random() * ( arguments[1] - arguments[0] ) + arguments[0];
+    }
+    return 0; // default
+  };
+
+  // screen helper
+  var screenInfo = function( e )
+  {
+    var width   = Math.max( 0, _w.innerWidth || _d.clientWidth || _b.clientWidth || 0 ),
+      height  = Math.max( 0, _w.innerHeight || _d.clientHeight || _b.clientHeight || 0 ),
+      scrollx = Math.max( 0, _w.pageXOffset || _d.scrollLeft || _b.scrollLeft || 0 ) - ( _d.clientLeft || 0 ),
+      scrolly = Math.max( 0, _w.pageYOffset || _d.scrollTop || _b.scrollTop || 0 ) - ( _d.clientTop || 0 );
+
+    return {
+      width   : width,
+      height  : height,
+      ratio   : width / height,
+      centerx : width / 2,
+      centery : height / 2,
+      scrollx : scrollx,
+      scrolly : scrolly,
+    };
+  };
+
+  // mouse/input helper
+  var mouseInfo = function( e )
+  {
+    var screen = screenInfo( e ),
+      mousex = e ? Math.max( 0, e.pageX || e.clientX || 0 ) : 0,
+      mousey = e ? Math.max( 0, e.pageY || e.clientY || 0 ) : 0;
+
+    return {
+      mousex  : mousex,
+      mousey  : mousey,
+      centerx : mousex - ( screen.width / 2 ),
+      centery : mousey - ( screen.height / 2 ),
+    };
+  };
+
+  // point object
+  var Point = function( x, y )
+  {
+    this.x = 0;
+    this.y = 0;
+    this.set( x, y );
+  };
+  Point.prototype = {
+    constructor: Point,
+
+    set: function( x, y )
+    {
+      this.x = ( x || 0 );
+      this.y = ( y || 0 );
+    },
+    copy: function( point )
+    {
+      this.x = ( point.x || 0 );
+      this.y = ( point.y || 0 );
+      return this;
+    },
+    multiply: function( x, y )
+    {
+      this.x *= ( x || 1 );
+      this.y *= ( y || 1 );
+      return this;
+    },
+    divide: function( x, y )
+    {
+      this.x /= ( x || 1 );
+      this.y /= ( y || 1 );
+      return this;
+    },
+    add: function( x, y )
+    {
+      this.x += ( x || 0 );
+      this.y += ( y || 0 );
+      return this;
+    },
+    subtract: function( x, y )
+    {
+      this.x -= ( x || 0 );
+      this.y -= ( y || 0 );
+      return this;
+    },
+    clampX: function( min, max )
+    {
+      this.x = Math.max( min, Math.min( this.x, max ) );
+      return this;
+    },
+    clampY: function( min, max )
+    {
+      this.y = Math.max( min, Math.min( this.y, max ) );
+      return this;
+    },
+    flipX: function()
+    {
+      this.x *= -1;
+      return this;
+    },
+    flipY: function()
+    {
+      this.y *= -1;
+      return this;
+    },
+  };
+
+  // class constructor
+  var Factory = function( options )
+  {
+    this._canvas  = null;
+    this._context = null;
+    this._sto     = null;
+    this._width   = 0;
+    this._height  = 0;
+    this._scroll  = 0;
+    this._ribbons = [];
+    this._options = {
+      // ribbon color HSL saturation amount
+      colorSaturation: "80%",
+      // ribbon color HSL brightness amount
+      colorBrightness: "60%",
+      // ribbon color opacity amount
+      colorAlpha: 0.65,
+      // how fast to cycle through colors in the HSL color space
+      colorCycleSpeed : 6,
+      // where to start from on the Y axis on each side (top|min, middle|center, bottom|max, random)
+      verticalPosition : "center",
+      // how fast to get to the other side of the screen
+      horizontalSpeed : 150,
+      // how many ribbons to keep on screen at any given time
+      ribbonCount: 3,
+      // add stroke along with ribbon fill colors
+      strokeSize: 0,
+      // move ribbons vertically by a factor on page scroll
+      parallaxAmount : -0.5,
+      // add animation effect to each ribbon section over time
+      animateSections : true,
+    };
+    this._onDraw   = this._onDraw.bind( this );
+    this._onResize = this._onResize.bind( this );
+    this._onScroll = this._onScroll.bind( this );
+    this.setOptions( options );
+    this.init();
+  };
+
+  // class prototype
+  Factory.prototype = {
+    constructor: Factory,
+
+    // Set and merge local options
+    setOptions: function( options )
+    {
+      if( typeof options === "object" )
+      {
+        for( var key in options )
+        {
+          if( options.hasOwnProperty( key ) )
+          {
+            this._options[ key ] = options[ key ];
+          }
+        }
+      }
+    },
+
+    // Initialize the ribbons effect
+    init: function()
+    {
+      try
+      {
+        this._canvas = document.createElement( "canvas" );
+        this._canvas.style["display"] = "block";
+        this._canvas.style["position"] = "fixed";
+        this._canvas.style["margin"] = "0";
+        this._canvas.style["padding"] = "0";
+        this._canvas.style["border"] = "0";
+        this._canvas.style["outline"] = "0";
+        this._canvas.style["left"] = "0";
+        this._canvas.style["top"] = "0";
+        this._canvas.style["width"] = "100%";
+        this._canvas.style["height"] = "100%";
+        this._canvas.style["z-index"] = "-1";
+        this._onResize();
+
+        this._context = this._canvas.getContext( "2d" );
+        this._context.clearRect( 0, 0, this._width, this._height );
+        this._context.globalAlpha = this._options.colorAlpha;
+
+        window.addEventListener( "resize", this._onResize );
+        document.body.appendChild( this._canvas );
+      }
+      catch( e ) {
+        console.warn( "Canvas Context Error: " + e.toString() );
+        return;
+      }
+      this._onDraw();
+    },
+
+    // Create a new random ribbon and to the list
+    addRibbon: function()
+    {
+      // movement data
+      var dir    = ( Math.round( random( 1, 9 ) ) > 5 ) ? "right" : "left",
+        stop   = 1000,
+        hide   = 200,
+        min    = 0 - hide,
+        max    = this._width + hide,
+        movex  = 0,
+        movey  = 0,
+        startx = ( dir === "right" ) ? min : max,
+        starty = Math.round( random( 0, this._height ) );
+
+      // asjust starty based on options
+      if( /^(top|min)$/i.test( this._options.verticalPosition ) )
+      {
+        starty = 0 + hide;
+      }
+      else if( /^(middle|center)$/i.test( this._options.verticalPosition ) )
+      {
+        starty = ( this._height / 2 );
+      }
+      else if( /^(bottom|max)$/i.test( this._options.verticalPosition ) )
+      {
+        starty = this._height - hide;
+      }
+
+      // ribbon sections data
+      var ribbon = [],
+        point1 = new Point( startx, starty ),
+        point2 = new Point( startx, starty ),
+        point3 = null,
+        color  = Math.round( random( 0, 360 ) ),
+        delay  = 0;
+
+      // buils ribbon sections
+      while( true )
+      {
+        if( stop <= 0 ) break; stop--;
+
+        movex = Math.round( ( Math.random() * 1 - 0.2 ) * this._options.horizontalSpeed );
+        movey = Math.round( ( Math.random() * 1 - 0.5 ) * ( this._height * 0.25 ) );
+
+        point3 = new Point();
+        point3.copy( point2 );
+
+        if( dir === "right" )
+        {
+          point3.add( movex, movey );
+          if( point2.x >= max ) break;
+        }
+        else if( dir === "left" )
+        {
+          point3.subtract( movex, movey );
+          if( point2.x <= min ) break;
+        }
+        // point3.clampY( 0, this._height );
+
+        ribbon.push({ // single ribbon section
+          point1 : new Point( point1.x, point1.y ),
+          point2 : new Point( point2.x, point2.y ),
+          point3 : point3,
+          color  : color,
+          delay  : delay,
+          dir    : dir,
+          alpha  : 0,
+          phase  : 0,
+        });
+
+        point1.copy( point2 );
+        point2.copy( point3 );
+
+        delay += 4;
+        color += this._options.colorCycleSpeed;
+      }
+      this._ribbons.push( ribbon );
+    },
+
+    // Draw single section
+    _drawRibbonSection: function( section )
+    {
+      if( section )
+      {
+        if( section.phase >= 1 && section.alpha <= 0 )
+        {
+          return true; // done
+        }
+        if( section.delay <= 0 )
+        {
+          section.phase += 0.02;
+          section.alpha = Math.sin( section.phase ) * 1;
+          section.alpha = ( section.alpha <= 0 ) ? 0 : section.alpha;
+          section.alpha = ( section.alpha >= 1 ) ? 1 : section.alpha;
+
+          if( this._options.animateSections )
+          {
+            var mod = ( Math.sin( 1 + section.phase * Math.PI / 2 ) * 0.1 );
+
+            if( section.dir === "right" )
+            {
+              section.point1.add( mod, 0 );
+              section.point2.add( mod, 0 );
+              section.point3.add( mod, 0 );
+            } else {
+              section.point1.subtract( mod, 0 );
+              section.point2.subtract( mod, 0 );
+              section.point3.subtract( mod, 0 );
+            }
+            section.point1.add( 0, mod );
+            section.point2.add( 0, mod );
+            section.point3.add( 0, mod );
+          }
+        }
+        else { section.delay -= 0.5; }
+
+        var s = this._options.colorSaturation,
+          l = this._options.colorBrightness,
+          c = "hsla("+ section.color +", "+ s +", "+ l +", "+ section.alpha +" )";
+
+        this._context.save();
+
+        if( this._options.parallaxAmount !== 0 )
+        {
+          this._context.translate( 0, this._scroll * this._options.parallaxAmount );
+        }
+        this._context.beginPath();
+        this._context.moveTo( section.point1.x, section.point1.y );
+        this._context.lineTo( section.point2.x, section.point2.y );
+        this._context.lineTo( section.point3.x, section.point3.y );
+        this._context.fillStyle = c;
+        this._context.fill();
+
+        if( this._options.strokeSize > 0 )
+        {
+          this._context.lineWidth = this._options.strokeSize;
+          this._context.strokeStyle = c;
+          this._context.lineCap = "round";
+          this._context.stroke();
+        }
+        this._context.restore();
+      }
+      return false; // not done yet
+    },
+
+    // Draw ribbons
+    _onDraw: function()
+    {
+      // cleanup on ribbons list to rtemoved finished ribbons
+      for( var i = 0, t = this._ribbons.length; i < t; ++i )
+      {
+        if( !this._ribbons[ i ] )
+        {
+          this._ribbons.splice( i, 1 );
+        }
+      }
+
+      // draw new ribbons
+      this._context.clearRect( 0, 0, this._width, this._height );
+
+      for( var a = 0; a < this._ribbons.length; ++a ) // single ribbon
+      {
+        var ribbon = this._ribbons[ a ],
+          numSections = ribbon.length,
+          numDone = 0;
+
+        for( var b = 0; b < numSections; ++b ) // ribbon section
+        {
+          if( this._drawRibbonSection( ribbon[ b ] ) )
+          {
+            numDone++; // section done
+          }
+        }
+        if( numDone >= numSections ) // ribbon done
+        {
+          this._ribbons[ a ] = null;
+        }
+      }
+      // maintain optional number of ribbons on canvas
+      if( this._ribbons.length < this._options.ribbonCount )
+      {
+        this.addRibbon();
+      }
+      requestAnimationFrame( this._onDraw );
+    },
+
+    // Update container size info
+    _onResize: function( e )
+    {
+      var screen   = screenInfo( e );
+      this._width  = screen.width;
+      this._height = screen.height;
+
+      if( this._canvas )
+      {
+        this._canvas.width  = this._width;
+        this._canvas.height = this._height;
+
+        if( this._context )
+        {
+          this._context.globalAlpha = this._options.colorAlpha;
+        }
+      }
+    },
+
+    // Update container size info
+    _onScroll: function( e )
+    {
+      var screen   = screenInfo( e );
+      this._scroll = screen.scrolly;
+    },
+
+  };
+
+  // export
+  return Factory;
+});

Bubble/js/common.js

@@ -0,0 +1,169 @@
+/*
+ * 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, Jul 13, 2019
+ */
+
+/**
+ * @description 皮肤脚本
+ * @static
+ */
+var Skin = {
+  init: function () {
+    $('#headerDown').click(function () {
+      $('html, body').animate({scrollTop: $(window).height()}, 300)
+    })
+
+    $(window).scroll(function (event) {
+      $('.fn__progress').attr('value', parseInt($(window).scrollTop())).
+        attr('max', parseInt($('body').outerHeight() -
+          $(window).height()))
+
+      if ($(window).scrollTop() > $(window).height() / 2 - 20) {
+        $('.side__menu').addClass('side__menu--edge')
+        $('.side__top').removeClass('side__top--bottom')
+      } else {
+        $('.side__menu').removeClass('side__menu--edge')
+        $('.side__top').addClass('side__top--bottom')
+      }
+    })
+
+    $('.side__menu').click(function () {
+      $('.side__main').addClass('side__main--show').show()
+    })
+    $('.side__bg, .side__close').click(function () {
+      $('.side__main').removeClass('side__main--show')
+      setTimeout(function () {
+        $('.side__main').hide()
+      }, 1000)
+    })
+    $('.side__top').click(function () {
+      if ($(this).hasClass('side__top--bottom')) {
+        Util.goBottom()
+      } else {
+        Util.goTop()
+      }
+    })
+
+    var timer = 0
+    var blogTitle = $('.header__h1').text()
+    document.addEventListener('visibilitychange', function () {
+      if (timer) clearTimeout(timer)
+      if (document.hidden) {
+        timer = setTimeout(function () {
+          document.title = '(◍´꒳`◍)' + ' - ' + blogTitle
+        }, 500)
+      } else {
+        document.title = '(*´∇｀*) 欢迎回来！'
+        timer = setTimeout(function () {
+          document.title = blogTitle
+        }, 1000)
+      }
+    }, false)
+
+    new Ribbons({
+      colorSaturation: '60%',
+      colorBrightness: '50%',
+      colorAlpha: 0.5,
+      colorCycleSpeed: 5,
+      verticalPosition: 'random',
+      horizontalSpeed: 200,
+      ribbonCount: 3,
+      strokeSize: 0,
+      parallaxAmount: -0.2,
+      animateSections: true,
+    })
+
+    if ($('#comments').length === 1) {
+      return
+    } else {
+      $(window).scroll()
+    }
+
+    $('.header').circleMagic({
+      clearOffset: 0.3,
+      color: 'rgba(255,255,255, .2)',
+      density: 0.2,
+      radius: 15,
+    })
+  },
+  initArticle: function () {
+    page.share()
+
+    initCanvas('articleTop')
+
+    $('.post__toc').css({
+      left: document.querySelector('.article__content').
+        getBoundingClientRect().right + 20,
+      right: 'auto',
+      display: 'block'
+    })
+
+    var $articleTocs = $('.vditor-reset [id^=b3_solo_h]')
+    var $articleToc = $('.article__toc')
+
+    $articleToc.find('a').click(function (event) {
+      var id = $(this).attr('href')
+      window.location.hash = id
+      $(window).scrollTop($(id).offset().top)
+      event.preventDefault()
+      event.stopPropagation()
+      return false
+    })
+
+    $(window).scroll(function (event) {
+      if ($('.article__toc li').length === 0) {
+        return false
+      }
+
+      // 界面各种图片加载会导致帖子目录定位
+      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) {
+          $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) {
+        $articleToc.find('li').removeClass('current')
+        $articleToc.find('li:last').addClass('current')
+      }
+    })
+    $(window).scroll()
+  },
+}
+
+$(document).ready(function () {
+  Skin.init()
+})

Bubble/js/common.min.js

@@ -0,0 +1 @@
+var Skin={init:function(){$("#headerDown").click(function(){$("html, body").animate({scrollTop:$(window).height()},300)}),$(window).scroll(function(e){$(".fn__progress").attr("value",parseInt($(window).scrollTop())).attr("max",parseInt($("body").outerHeight()-$(window).height())),$(window).scrollTop()>$(window).height()/2-20?($(".side__menu").addClass("side__menu--edge"),$(".side__top").removeClass("side__top--bottom")):($(".side__menu").removeClass("side__menu--edge"),$(".side__top").addClass("side__top--bottom"))}),$(".side__menu").click(function(){$(".side__main").addClass("side__main--show").show()}),$(".side__bg, .side__close").click(function(){$(".side__main").removeClass("side__main--show"),setTimeout(function(){$(".side__main").hide()},1e3)}),$(".side__top").click(function(){$(this).hasClass("side__top--bottom")?Util.goBottom():Util.goTop()});var e=0,t=$(".header__h1").text();document.addEventListener("visibilitychange",function(){e&&clearTimeout(e),e=document.hidden?setTimeout(function(){document.title="(◍´꒳`◍) - "+t},500):(document.title="(*´∇｀*) 欢迎回来！",setTimeout(function(){document.title=t},1e3))},!1),new Ribbons({colorSaturation:"60%",colorBrightness:"50%",colorAlpha:.5,colorCycleSpeed:5,verticalPosition:"random",horizontalSpeed:200,ribbonCount:3,strokeSize:0,parallaxAmount:-.2,animateSections:!0}),1!==$("#comments").length&&($(window).scroll(),$(".header").circleMagic({clearOffset:.3,color:"rgba(255,255,255, .2)",density:.2,radius:15}))},initArticle:function(){page.share(),initCanvas("articleTop"),$(".post__toc").css({left:document.querySelector(".article__content").getBoundingClientRect().right+20,right:"auto",display:"block"});var r=$(".vditor-reset [id^=b3_solo_h]"),a=$(".article__toc");a.find("a").click(function(e){var t=$(this).attr("href");return window.location.hash=t,$(window).scrollTop($(t).offset().top),e.preventDefault(),e.stopPropagation(),!1}),$(window).scroll(function(e){if(0===$(".article__toc li").length)return!1;var t=[];r.each(function(e){t.push({id:this.id,offsetTop:$(this).offset().top})});for(var o=$(window).scrollTop(),i=0,n=t.length;i<n;i++)if(o<t[i].offsetTop){a.find("li").removeClass("current");var s=0<i?i-1:0;a.find('a[href="#'+t[s].id+'"]').parent().addClass("current");break}o>=t[t.length-1].offsetTop&&(a.find("li").removeClass("current"),a.find("li:last").addClass("current"))}),$(window).scroll()}};$(document).ready(function(){Skin.init()});

Bubble/links.ftl

@@ -0,0 +1,56 @@
+<#--
+
+    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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${linkLabel}</h2>
+        <div class="ft__center">
+            ${links?size} ${linkLabel}
+        </div>
+        <div class="articles">
+            <br>
+            <#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>
+            <br><br>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+    <#include "footer.ftl">
+</body>
+</html>

Bubble/macro-comments.ftl

@@ -0,0 +1,37 @@
+<#--
+
+    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 comments commentList article>
+<div class="comment">
+    <div class="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>
+</#macro>

Bubble/macro-header.ftl

@@ -0,0 +1,121 @@
+<#--
+
+    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>
+    <progress class="fn__progress"></progress>
+    <header class="header header--${type}">
+        <div class="wrapper header__title">
+            <h1 class="header__h1 fn__flex-inline">
+                <a href="${servePath}" rel="start">${blogTitle}</a>
+            </h1>
+            <h2 class="header__desc header__desc--title">${blogSubtitle}</h2>
+            <div class="header__desc">
+                ${noticeBoard}
+            </div>
+            <svg class="header__down" id="headerDown" viewBox="0 0 32 32" width="100%" height="100%">
+                <path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z"></path>
+            </svg>
+        </div>
+    </header>
+    <div class="side__menu">
+        <svg viewBox="0 0 32 32" width="100%" height="100%">
+            <path d="M30 18h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2s-0.9 2-2 2zM30 6.25h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2h28c1.1 0 2 0.9 2 2s-0.9 2-2 2zM2 25.75h28c1.1 0 2 0.9 2 2s-0.9 2-2 2h-28c-1.1 0-2-0.9-2-2s0.9-2 2-2z"></path>
+        </svg>
+        <span>
+            &nbsp; menu
+        </span>
+    </div>
+    <div class="side__main">
+        <div class="side__bg"></div>
+        <div class="side__panel">
+            <svg class="side__close ft__a" version="1.1" xmlns="http://www.w3.org/2000/svg" width="20" height="20"
+                 viewBox="0 0 20 20">
+                <path d="M18.362 19.324c-0.902 0.902-2.363 0.902-3.263 0l-5.098-5.827-5.098 5.825c-0.902 0.902-2.363 0.902-3.263 0-0.902-0.902-0.902-2.363 0-3.263l5.304-6.057-5.306-6.061c-0.902-0.902-0.902-2.361 0-3.263s2.361-0.902 3.263 0l5.1 5.829 5.098-5.829c0.902-0.902 2.361-0.902 3.263 0s0.902 2.363 0 3.263l-5.304 6.061 5.304 6.057c0.902 0.902 0.902 2.363 0 3.265z"></path>
+            </svg>
+
+            <div class="side__header">
+                <a href="${servePath}" rel="start"><img class="side__logo" src="${faviconURL}"></a>
+
+                <div class="side__meta">
+                    ${statistic.statisticPublishedBlogArticleCount} ${articleLabel} <br>
+                    ${statistic.statisticPublishedBlogCommentCount} ${commentLabel} <br>
+                    ${statistic.statisticBlogViewCount} ${viewLabel} <br>
+                    ${onlineVisitorCnt} ${onlineVisitorLabel}
+                </div>
+            </div>
+
+            <div class="side__title">
+                <span>ღゝ◡╹)ノ❤️</span>
+            </div>
+            <ul class="side__nav">
+                <li>
+                    <a href="${servePath}" rel="start">
+                        <#if type == 'article'>
+                            ${blogTitle}
+                        <#else>
+                            ${indexLabel}
+                        </#if>
+                    </a>
+                </li>
+                <#list pageNavigations as page>
+                    <li>
+                        <a href="${page.pagePermalink}" target="${page.pageOpenTarget}"><#if page.pageIcon != ''><img
+                                class="page-icon" src="${page.pageIcon}"></#if>${page.pageTitle}</a>
+                    </li>
+                </#list>
+                <li>
+                    <a href="${servePath}/category.html">${categoryLabel}</a>
+                </li>
+                <li>
+                    <a href="${servePath}/tags.html">${allTagsLabel}</a>
+                </li>
+                <li>
+                    <a href="${servePath}/archives.html">${archiveLabel}</a>
+                </li>
+                <li>
+                    <a href="${servePath}/links.html">${linkLabel}</a>
+                </li>
+                <li>
+                    <a rel="alternate" href="${servePath}/rss.xml">RSS</a>
+                </li>
+                <li>
+                    <a href="${servePath}/search?keyword=">Search</a>
+                </li>
+                <#if isLoggedIn>
+                    <li>
+                        <a href="${servePath}/admin-index.do#main">
+                            ${adminLabel}
+                        </a>
+                    </li>
+                    <li>
+                        <a href="${logoutURL}">
+                            ${logoutLabel}
+                        </a>
+                    </li>
+                <#else>
+                    <li>
+                        <a rel="alternate" href="${servePath}/start">
+                            ${startToUseLabel}
+                        </a>
+                    </li>
+                </#if>
+            </ul>
+        </div>
+    </div>
+</#macro>

Bubble/skin.properties

@@ -0,0 +1,26 @@
+#
+# 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/>.
+#
+
+#
+# Description: skin properties.
+# Version: 0.1.0.0, Jul 9, 2019
+# Author: Liyuan Li
+#
+
+name=Bubble
+memo=https://www.cnblogs.com/jajian

Bubble/tag-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="${tag.tagTitle} ${tagLabel} - ${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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <h2 class="other__title"><a href="${servePath}/tags.html" class="ft__a">${allTagsLabel}</a> - ${tag.tagTitle}
+        </h2>
+        <div class="ft__center">
+            ${tag.tagPublishedRefCount} ${cntArticleLabel}
+        </div>
+        <#include "article-list.ftl">
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

Bubble/tags.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="${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 "macro-header.ftl">
+    <@header type='index'></@header>
+    <div class="wrapper">
+        <h2 class="other__title"><a href="${servePath}" class="ft__a">${blogTitle}</a> - ${allTagsLabel}</h2>
+        <div class="ft__center">
+            ${tags?size} ${tagLabel}
+        </div>
+        <div class="articles">
+            <div class="fn__clear">
+                <#list tags as tag>
+                    <a rel="tag" data-count="${tag.tagPublishedRefCount}" class="other__item fn__left"
+                       href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}">
+                        ${tag.tagTitle} - <b>${tag.tagPublishedRefCount}</b> ${countLabel}
+                    </a>
+                </#list>
+            </div>
+            <br><br>
+        </div>
+    </div>
+    <#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

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 "macro-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>

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 "macro-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>

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>

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 "macro-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>

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 "macro-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>

Casper/category-articles.ftl

@@ -0,0 +1,44 @@
+<#--
+
+    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="${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 "macro-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">
+    </div>
+<#if pjax><!---- pjax {#pjax} end ----></#if>
+</div>
+<#include "footer.ftl">
+</body>
+</html>

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>