modified: src/main/webapp/js/page.js

	modified:   src/main/webapp/skins/finding/css/finding.css
	modified:   src/main/webapp/skins/yilia/article.ftl
	modified:   src/main/webapp/skins/yilia/css/yilia.css
	modified:   src/main/webapp/skins/yilia/footer.ftl
	deleted:    src/main/webapp/skins/yilia/images/header-bg.jpg
	deleted:    src/main/webapp/skins/yilia/images/next.jpg
	deleted:    src/main/webapp/skins/yilia/images/preview.jpg
	modified:   src/main/webapp/skins/yilia/js/yilia.js
	src/main/webapp/js/lib/highlight/

src/main/webapp/js/page.js

@@ -18,9 +18,9 @@
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
  * @author <a href="mailto:DL88250@gmail.com">Liang Ding</a>
- * @version 1.1.3.5, Jul 23, 2014
+ * @version 1.2.3.5, Nov 2, 2015
  */
-var Page = function(tips) {
+var Page = function (tips) {
     this.currentCommentId = "";
     this.tips = tips;
 };
@@ -29,13 +29,13 @@ $.extend(Page.prototype, {
      * @description 评论时点击表情，在评论内容中插入相关代码
      * @param {String} name 用于区别回复评论还是对文章的评论
      */
-    insertEmotions: function(name) {
+    insertEmotions: function (name) {
         var _it = this;
         if (name === undefined) {
             name = "";
         }
 
-        $("#emotions" + name + " span").click(function() {
+        $("#emotions" + name + " span").click(function () {
             var $comment = $("#comment" + name);
             var endPosition = _it._getCursorEndPosition($comment[0]);
             var key = "[" + this.className + "]",
@@ -58,7 +58,7 @@ $.extend(Page.prototype, {
      * @param {Dom} textarea 评论框对象
      * @returns {Num} 光标位置
      */
-    _getCursorEndPosition: function(textarea) {
+    _getCursorEndPosition: function (textarea) {
         textarea.focus();
         if (textarea.setSelectionRange) { // W3C
             return textarea.selectionEnd;
@@ -80,7 +80,7 @@ $.extend(Page.prototype, {
      * @description 评论校验
      * @param {String} state 用于区别回复评论还是对文章的评论
      */
-    validateComment: function(state) {
+    validateComment: function (state) {
         if (Util.isLoggedIn()) {
             var commenterContent = $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "");
             if (2 > commenterContent.length || commenterContent.length > 500) {
@@ -120,7 +120,7 @@ $.extend(Page.prototype, {
      * @description 把评论中的标识替换为图片
      * @param {Dom} selector
      */
-    replaceCommentsEm: function(selector) {
+    replaceCommentsEm: function (selector) {
         var $commentContents = $(selector);
         for (var i = 0; i < $commentContents.length; i++) {
             var str = $commentContents[i].innerHTML;
@@ -131,7 +131,7 @@ $.extend(Page.prototype, {
      * @description 初始化 SyantaxHighlighter
      * @param {Array} languages 需要加载的语言 
      */
-    _initSyntaxHighlighter: function(languages) {
+    _initSyntaxHighlighter: function (languages) {
         // load brush js
         for (var i = 0; i < languages.length; i++) {
             switch (languages[i]) {
@@ -274,7 +274,7 @@ $.extend(Page.prototype, {
      * @description 加载 SyntaxHighlighter 
      * @param {String} SHTheme SyntaxHighLighter 样式
      */
-    _loadSyntaxHighlighter: function(SHTheme) {
+    _loadSyntaxHighlighter: function (SHTheme) {
         var cssName = SHTheme ? SHTheme : "shCoreEclipse",
                 that = this;
         // load css
@@ -290,11 +290,11 @@ $.extend(Page.prototype, {
             url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shCore.js",
             dataType: "script",
             cache: true,
-            success: function() {
+            success: function () {
                 // get brush settings
                 var languages = [],
                         isScrip = false;
-                $(".article-body pre, .code-highlight pre").each(function() {
+                $(".article-body pre, .code-highlight pre").each(function () {
                     var name = this.className.split(";")[0];
                     var language = name.substr(7, name.length - 1);
                     if (this.className.indexOf("html-script: true") > -1 &&
@@ -311,7 +311,7 @@ $.extend(Page.prototype, {
                         url: latkeConfig.staticServePath + "/js/lib/SyntaxHighlighter/scripts/shBrushXml.js",
                         dataType: "script",
                         cache: true,
-                        success: function() {
+                        success: function () {
                             that._initSyntaxHighlighter(languages);
                         }
                     });
@@ -326,10 +326,10 @@ $.extend(Page.prototype, {
      * @param {Obj} obj 语法高亮配置参数
      * @param {Obj} obj.SHTheme 语法高亮 SyntaxHighLighter 样式
      */
-    parseLanguage: function(obj) {
+    parseLanguage: function (obj) {
         var isPrettify = false,
                 isSH = false;
-        $(".article-body pre, .code-highlight pre").each(function() {
+        $(".article-body pre, .code-highlight pre").each(function () {
             if (this.className.indexOf("brush") > -1) {
                 isSH = true;
             }
@@ -338,8 +338,10 @@ $.extend(Page.prototype, {
                 isPrettify = true;
             }
         });
+
         if (isSH) {
             this._loadSyntaxHighlighter(obj ? (obj.SHTheme ? obj.SHTheme : undefined) : undefined);
+            return false;
         }
 
         if (isPrettify) {
@@ -355,37 +357,56 @@ $.extend(Page.prototype, {
                 url: latkeConfig.staticServePath + "/js/lib/google-code-prettify/prettify.js",
                 dataType: "script",
                 cache: true,
-                success: function() {
+                success: function () {
                     prettyPrint();
                 }
             });
+            return false;
+        }
+
+
+        // otherelse use highlight
+        // load css
+        if (document.createStyleSheet) {
+            document.createStyleSheet(latkeConfig.staticServePath + "/js/lib/highlight/styles/default.css");
+        } else {
+            $("head").append($("<link rel='stylesheet' href='" + latkeConfig.staticServePath + "/js/lib/highlight/styles/github.css'>"));
         }
+        $.ajax({
+            url: latkeConfig.staticServePath + "/js/lib/highlight/highlight.pack.js",
+            dataType: "script",
+            cache: true,
+            success: function () {
+                hljs.initHighlightingOnLoad();
+            }
+        });
+
     },
     /*
      * @description 文章/自定义页面加载
      * @param {Obj} obj 配置设定
      * @param {Obj} obj.language 代码高亮配置
      */
-    load: function(obj) {
+    load: function (obj) {
         var that = this;
         // emotions
         that.insertEmotions();
         // language
         that.parseLanguage(obj ? (obj.language ? obj.language : undefined) : undefined);
         // submit comment
-        $("#commentValidate").keypress(function(event) {
+        $("#commentValidate").keypress(function (event) {
             if (event.keyCode === 13) {
                 that.submitComment();
             }
         });
 
-        $("#comment").keypress(function(event) {
+        $("#comment").keypress(function (event) {
             if (event.keyCode === 13 && event.ctrlKey) {
                 that.submitComment();
             }
         });
         // captcha
-        $("#captcha").click(function() {
+        $("#captcha").click(function () {
             $(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
         });
         // cookie
@@ -406,13 +427,13 @@ $.extend(Page.prototype, {
      * @description 加载随机文章
      * @param {String} headTitle 随机文章标题
      */
-    loadRandomArticles: function(headTitle) {
+    loadRandomArticles: function (headTitle) {
         var randomArticles1Label = this.tips.randomArticles1Label;
         // getRandomArticles
         $.ajax({
             url: latkeConfig.servePath + "/get-random-articles.do",
             type: "POST",
-            success: function(result, textStatus) {
+            success: function (result, textStatus) {
                 var randomArticles = result.randomArticles;
                 if (!randomArticles || 0 === randomArticles.length) {
                     $("#randomArticles").remove();
@@ -439,11 +460,11 @@ $.extend(Page.prototype, {
      * @param {String} id 文章 id
      * @param {String} headTitle 相关文章标题
      */
-    loadRelevantArticles: function(id, headTitle) {
+    loadRelevantArticles: function (id, headTitle) {
         $.ajax({
             url: latkeConfig.servePath + "/article/id/" + id + "/relevant/articles",
             type: "GET",
-            success: function(data, textStatus) {
+            success: function (data, textStatus) {
                 var articles = data.relevantArticles;
                 if (!articles || 0 === articles.length) {
                     $("#relevantArticles").remove();
@@ -464,7 +485,7 @@ $.extend(Page.prototype, {
                         + listHtml + "</ul>";
                 $("#relevantArticles").append(relevantArticleListHtml);
             },
-            error: function() {
+            error: function () {
                 $("#relevantArticles").remove();
             }
         });
@@ -474,7 +495,7 @@ $.extend(Page.prototype, {
      * @param {String} tags 文章 tags
      * @param {String} headTitle 站外相关文章标题
      */
-    loadExternalRelevantArticles: function(tags, headTitle) {
+    loadExternalRelevantArticles: function (tags, headTitle) {
         var tips = this.tips;
         try {
             $.ajax({
@@ -483,10 +504,10 @@ $.extend(Page.prototype, {
                 type: "GET",
                 cache: true,
                 dataType: "jsonp",
-                error: function() {
+                error: function () {
                     $("#externalRelevantArticles").remove();
                 },
-                success: function(data, textStatus) {
+                success: function (data, textStatus) {
                     var articles = data.articles;
                     if (!articles || 0 === articles.length) {
                         $("#externalRelevantArticles").remove();
@@ -518,7 +539,7 @@ $.extend(Page.prototype, {
      * @param {String} commentId 回复评论时的评论 id
      * @param {String} state 区分回复文章还是回复评论的标识
      */
-    submitComment: function(commentId, state) {
+    submitComment: function (commentId, state) {
         if (!state) {
             state = '';
         }
@@ -536,7 +557,7 @@ $.extend(Page.prototype, {
                 "oId": tips.oId,
                 "commentContent": $("#comment" + state).val().replace(/(^\s*)|(\s*$)/g, "")
             };
-            
+
             if (!Util.isLoggedIn()) {
                 requestJSONObject = {
                     "oId": tips.oId,
@@ -550,7 +571,7 @@ $.extend(Page.prototype, {
                 Cookie.createCookie("commentEmail", requestJSONObject.commentEmail, 365);
                 Cookie.createCookie("commentURL", $("#commentURL" + state).val().replace(/(^\s*)|(\s*$)/g, ""), 365);
             }
-            
+
             if (state === "Reply") {
                 requestJSONObject.commentOriginalCommentId = commentId;
             }
@@ -561,7 +582,7 @@ $.extend(Page.prototype, {
                 cache: false,
                 contentType: "application/json",
                 data: JSON.stringify(requestJSONObject),
-                success: function(result) {
+                success: function (result) {
                     if (!result.sc) {
                         $("#commentErrorTip" + state).html(result.msg);
                         $("#comment" + state).val("").focus();
@@ -600,7 +621,7 @@ $.extend(Page.prototype, {
      * @param {String} commentFormHTML 评论表单HTML
      * @param {String} endHTML 判断该表单使用 table 还是 div 标签，然后进行构造
      */
-    addReplyForm: function(id, commentFormHTML, endHTML) {
+    addReplyForm: function (id, commentFormHTML, endHTML) {
         var that = this;
         if (id === this.currentCommentId) {
             if ($("#commentNameReply").val() === "") {
@@ -621,7 +642,7 @@ $.extend(Page.prototype, {
         }
 
         // change id, bind event and set value
-        $("#replyForm input, #replyForm textarea").each(function() {
+        $("#replyForm input, #replyForm textarea").each(function () {
             this.id = this.id + "Reply";
         });
         $("#commentNameReply").val(Cookie.readCookie("commentName"));
@@ -634,25 +655,25 @@ $.extend(Page.prototype, {
         $("#commentURLReply").val(Cookie.readCookie("commentURL"));
         $("#replyForm #emotions").attr("id", "emotionsReply");
         this.insertEmotions("Reply");
-        $("#commentReply").unbind().keypress(function(event) {
+        $("#commentReply").unbind().keypress(function (event) {
             if (event.keyCode === 13 && event.ctrlKey) {
                 that.submitComment(id, 'Reply');
                 event.preventDefault();
             }
         });
-        $("#commentValidateReply").unbind().keypress(function(event) {
+        $("#commentValidateReply").unbind().keypress(function (event) {
             if (event.keyCode === 13) {
                 that.submitComment(id, 'Reply');
                 event.preventDefault();
             }
         });
         $("#replyForm #captcha").attr("id", "captchaReply").
-                attr("src", latkeConfig.servePath + "/captcha.do?" + new Date().getTime()).click(function() {
+                attr("src", latkeConfig.servePath + "/captcha.do?" + new Date().getTime()).click(function () {
             $(this).attr("src", latkeConfig.servePath + "/captcha.do?code=" + Math.random());
         });
         $("#replyForm #commentErrorTip").attr("id", "commentErrorTipReply").html("").hide();
         $("#replyForm #submitCommentButton").attr("id", "submitCommentButtonReply");
-        $("#replyForm #submitCommentButtonReply").unbind("click").removeAttr("onclick").click(function() {
+        $("#replyForm #submitCommentButtonReply").unbind("click").removeAttr("onclick").click(function () {
             that.submitComment(id, 'Reply');
         });
         if ($("#commentNameReply").val() === "") {
@@ -669,7 +690,7 @@ $.extend(Page.prototype, {
      * @description 隐藏回复评论的浮出层
      * @parma {String} id 被回复的评论 id
      */
-    hideComment: function(id) {
+    hideComment: function (id) {
         $("#commentRef" + id).hide();
     },
     /* 
@@ -679,7 +700,7 @@ $.extend(Page.prototype, {
      * @param {Int} top 位置相对浮出层的高度
      * @param {String} [parentTag] it 如果嵌入在 position 为 relative 的元素 A 中时，需取到 A 元素
      */
-    showComment: function(it, id, top, parentTag) {
+    showComment: function (it, id, top, parentTag) {
         var positionTop = parseInt($(it).position().top);
         if (parentTag) {
             positionTop = parseInt($(it).parents(parentTag).position().top);
@@ -700,7 +721,7 @@ $.extend(Page.prototype, {
      * @parma {String} commentHTML 回复内容 HTML
      * @param {String} state 用于区分评论文章还是回复评论
      */
-    addCommentAjax: function(commentHTML, state) {
+    addCommentAjax: function (commentHTML, state) {
         if ($("#comments").children().length > 0) {
             $($("#comments").children()[0]).before(commentHTML);
         } else {

src/main/webapp/skins/finding/css/finding.css

@@ -18,7 +18,7 @@
  * skin finding style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.0.0.0, Jun 4, 2015
+ * @version 1.0.1.0, Nov 2, 2015
 */
 /* start reset */
 html {
@@ -427,6 +427,7 @@ pre code, pre tt {
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
     font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
+    outline: none;
 }
 
 .form button {

src/main/webapp/skins/yilia/article.ftl

@@ -11,7 +11,7 @@
     <body>
         <#include "side.ftl">
         <main>
-            <article class="post">
+            <article class="post article-body">
                 <header>
                     <h2>
                         <a rel="bookmark" href="${servePath}${article.articlePermalink}">
@@ -49,7 +49,23 @@
                         ${article.articleSign.signHTML}
                     </div>
                     </#if>
+
+                    <#if nextArticlePermalink?? || previousArticlePermalink??>
+                    <aside class="fn-clear">
+                        <#if previousArticlePermalink??>
+                        <a class="fn-left" rel="prev" href="${servePath}${previousArticlePermalink}">
+                            <strong>&lt;</strong> ${previousArticleTitle}
+                        </a>
+                        </#if>
+                        <#if nextArticlePermalink??>
+                        <a class="fn-right" rel="next" href="${servePath}${nextArticlePermalink}">
+                            ${nextArticleTitle} <strong>&gt;</strong>
+                        </a>
+                        </#if>
+                    </aside>
+                    </#if>
                 </section>
+
                 <footer class="fn-clear share">
                     <div class="fn-right">
                         <span class="icon icon-t-weibo" data-type="tencent"></span>
@@ -59,30 +75,9 @@
                     </div>
                 </footer>
             </article>
+
             <@comments commentList=articleComments article=article></@comments>
 
-            <#if nextArticlePermalink?? || previousArticlePermalink??>
-            <aside class="read-next">
-                <#if nextArticlePermalink??>
-                <div class="read-next-story " style="background-image: url('${staticServePath}/skins/${skinDirName}/images/next.jpg')"
-                     onclick="window.location = '${servePath}${nextArticlePermalink}'">
-                    <section class="post">
-                        <h2>${nextArticleTitle}</h2>
-                        <p>${nextArticleAbstract}</p>
-                    </section>
-                </div>
-                </#if>
-                <#if previousArticlePermalink??>
-                <div class="read-next-story prev " style="background-image: url('${staticServePath}/skins/${skinDirName}/images/preview.jpg')"
-                     onclick="window.location = '${servePath}${previousArticlePermalink}'">
-                    <section class="post">
-                        <h2>${previousArticleTitle}</h2>
-                        <p>${previousArticleAbstract}</p>
-                    </section>
-                </div>
-                </#if>
-            </aside>
-            </#if>
             <#include "footer.ftl">
 
             <@comment_script oId=article.oId>

src/main/webapp/skins/yilia/css/yilia.css

@@ -18,7 +18,7 @@
  * skin yilia style
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.0.0.0, Nov 1, 2015
+ * @version 1.1.0.0, Nov 2, 2015
 */
 /* start reset */
 html {
@@ -65,7 +65,7 @@ h4, h5, h6 {
     -webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
     -moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
     -o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
-    color: #2E2E2E;
+    color: #666;
     line-height: 1.15em;
     font-family: "Open Sans", "Microsoft Yahei", 'Helvetica';
     text-rendering: geometricPrecision;
@@ -149,11 +149,16 @@ hr {
 }
 
 blockquote {
-    -moz-box-sizing: border-box;
     box-sizing: border-box;
-    margin: 1.75em 0 1.75em -2.2em;
+    margin: 1.75em 0 1.75em 0;
     padding: 0 0 0 1.75em;
-    border-left: #4A4A4A 0.4em solid;
+    border-left: 5px solid;
+    transition: all 0.3s ease;
+}
+
+
+blockquote:hover {
+    border-color: #b0a0aa;
 }
 
 blockquote p {
@@ -191,18 +196,7 @@ code, tt {
 }
 
 pre {
-    -moz-box-sizing: border-box;
-    box-sizing: border-box;
-    margin: 0 0 1.75em 0;
-    border: #E3EDF3 1px solid;
-    width: 100%;
-    padding: 10px;
-    font-family: Inconsolata, monospace, "Microsoft Yahei", 'Helvetica';
     font-size: 0.9em;
-    white-space: pre;
-    overflow: auto;
-    background: #F7FAFB;
-    border-radius: 3px;
 }
 
 pre code, pre tt {
@@ -305,8 +299,125 @@ pre code, pre tt {
 .icon-login:before {
     content: "\e611";
 }
+
+.form {
+    width: 100%;
+    padding: 30px;
+}
+
+#captcha,
+#captchaReply {
+    height: 27px;
+    display: inline-block;
+    vertical-align: inherit;
+}
+
+.form input,
+.form textarea,
+.form button {
+    border: 1px solid #CCCCCC;
+    background-color: #FAFAFA;
+    border-radius: 3px;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
+    padding: 7px 8px;
+    width: 100%;
+    box-sizing: border-box;
+    outline: none;
+    font-family: "Merriweather", "Microsoft Yahei", 'Helvetica';
+}
+
+.form button {
+    width: auto;
+    vertical-align: bottom;
+    transition: all 0.3s ease;
+    cursor: pointer;
+}
+
+.form button:hover {
+    background-color: #b0a0aa;
+    color: #FFF;
+    box-shadow: 0 0 0;
+    border-color: #b0a0aa;
+}
+
+.form input:focus,
+.form textarea:focus {
+    background-color: #FFF;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgba(176, 160, 170, 0.5);
+    border: 1px solid #b0a0aa;
+}
 /* end common */
 
+/* start emotions */
+.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, 
+.em10, .em11, .em12, .em13, .em14 {
+    background-image: url("../images/emotions/emotions-ease.png");
+    float: left;
+    height: 24px;
+    margin-right: 5px;
+    width: 24px;
+}
+
+#emotions span {
+    cursor: pointer;
+}
+
+.em01 {
+    background-position: -24px 0;
+}
+
+.em02 {
+    background-position: -48px 0;
+}
+
+.em03 {
+    background-position: -72px 0;
+}
+.em04 {
+    background-position: -96px 0;
+}
+
+.em05 {
+    background-position: 0px -24px;
+}
+
+.em06 {
+    background-position: -24px -24px;
+}
+
+.em07 {
+    background-position: -48px -24px;
+}
+
+.em08 {
+    background-position: -72px -24px;
+}
+
+.em09 {
+    background-position: -96px -24px;
+}
+
+.em10 {
+    background-position: 0 -48px;
+}
+
+.em11 {
+    background-position: -24px -48px ;
+}
+
+.em12 {
+    background-position: -48px -48px;
+}
+
+.em13 {
+    background-position: -72px -48px;
+}
+
+.em14 {
+    background-position: -96px -48px;
+}
+/* end emotions */
+
 /* start side */
 .side {
     position: fixed;
@@ -448,9 +559,9 @@ article header:hover {
 }
 
 article header h2 {
-   margin: 0;
-  font-size: 26px;
-  padding-right: 110px;
+    margin: 0;
+    font-size: 26px;
+    padding-right: 110px;
 }
 
 article header a {
@@ -490,14 +601,6 @@ article footer {
     border-top: 1px solid #ddd;
 }
 
-.post section.tags {
-    margin: 0;
-}
-
-.post header {
-    padding-bottom: 0;
-}
-
 .tags .tag:hover,
 article .abstract a:hover{
     opacity: 0.7;
@@ -512,11 +615,6 @@ article .abstract a:hover{
     transition: all 0.2s ease-out 0s;
 }
 
-.post .tags .avatar {
-    bottom: inherit;
-    margin-top: 4px;
-}
-
 .share span {
     transition: all 0.2s ease-out 0s;
     cursor: pointer;
@@ -630,8 +728,52 @@ nav.pagination:hover .extend {
     opacity: 1;
 }
 
+article.post {
+    visibility: visible;
+}
+
+.post .tags .avatar {
+    bottom: inherit;
+    margin-top: 4px;
+}
+
+.post section.tags {
+    margin: 0;
+}
+
+.post header {
+    padding-bottom: 0;
+}
+
 .post .share {
-    padding: 0;
+    padding: 10px 0 0 0;
+    margin-top: 15px;
+    font-size: 14px;
+}
+
+.post aside a {
+    color: #DDD;
+}
+
+.post aside a > strong {
+    background: #ddd;
+    color: #fff;
+    border-radius: 50%;
+    width: 16px;
+    height: 16px;
+    display: inline-block;
+    transition: background 0.3s;
+    vertical-align: middle;
+    line-height: 18px;
+    text-align: center;
+}
+
+.post aside a:hover {
+    color: #4d4d4d;
+}
+
+.post aside a:hover > strong {
+    background-color: #4d4d4d;    
 }
 /* end article */
 
@@ -644,6 +786,53 @@ footer.footer {
     opacity: 0.6;
     margin: 0 30px 30px;
 }
+
+footer.footer .icon-goup {
+    position: fixed;
+    bottom: 35px;
+    right: 5px;
+    -webkit-animation: upbounce 4s 2s infinite;
+    animation: upbounce 4s 2s infinite;
+    z-index: 10;
+    font-size: 20px;
+    cursor: pointer;
+    color: #b0a0aa;
+    transition: all 0.3s ease;
+}
+
+footer.footer .icon-goup:hover {
+    color: #4a4a4a;
+}
+
+@-webkit-keyframes upbounce {
+    0%, 10%, 25%, 40%, 50% {
+        -webkit-transform: translateY(0);
+        transform: translateY(0);
+    }
+    20% {
+        -webkit-transform: translateY(-10px);
+        transform: translateY(-10px);
+    }
+    30% {
+        -webkit-transform: translateY(-5px);
+        transform: translateY(-5px);
+    }
+}
+
+@keyframes upbounce {
+    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);
+    }
+}
 /* end footer */
 
 /* start responsive */

src/main/webapp/skins/yilia/footer.ftl

@@ -18,6 +18,7 @@
             <a href="http://b3log.org/services/#solo" target="_blank">Solo</a> ${version}
         </span>
     </div>
+    <span onclick="Util.goTop()" class="icon-goup"></span>
 </footer>
 
 

src/main/webapp/skins/yilia/js/yilia.js

@@ -17,7 +17,7 @@
  * @fileoverview util and every page should be used.
  *
  * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
- * @version 1.0.0.0, Nov 1, 2015
+ * @version 1.1.0.0, Nov 2, 2015
  */
 
 /**
@@ -31,15 +31,19 @@ var Yilia = {
     init: function () {
         Util.killIE();
         this.resetTags();
-        $(window).scroll(function () {
-            $("article:not(.show)").each(function () {
-                if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) {
-                    $(this).addClass("show");
-                }
+        if ($("article").length > 0 && $("article.post").length === 0) {
+            $(window).scroll(function () {
+                $("article:not(.show)").each(function () {
+                    if ($(this).offset().top <= $(window).scrollTop() + $(window).height() - $(this).height() / 7) {
+                        $(this).addClass("show");
+                    }
+                });
             });
-        });
-        
-        $(window).scroll();
+
+            $(window).scroll();
+        } else if ($("article.post").length === 1) {
+            $("article.post").addClass('show');
+        }
     },
     resetTags: function () {
         $("a.tag").each(function (i) {