diff --git a/timeline/article.ftl b/timeline/article.ftl index 7ac79e8..20196c5 100644 --- a/timeline/article.ftl +++ b/timeline/article.ftl @@ -1,99 +1,99 @@ -<#include "macro-head.ftl"> -<#include "macro-comments.ftl"> - - - - <@head title="${article.articleTitle} - ${blogTitle}"> - - - - - - ${topBarReplacement} - <#include "header.ftl"> -
-
-
-
- -

- - ${article.articleTitle} - - <#if article.hasUpdated> - - ${updatedLabel} - - - <#if article.articlePutTop> - - ${topArticleLabel} - - -

-
- ${article.articleContent} -
- <#if "" != article.articleSign.signHTML?trim> -

- ${article.articleSign.signHTML} -

- - - <#list article.articleTags?split(",") as articleTag><#if articleTag_has_next>, - - - - - - - - <#if article.articleCommentCount == 0> - ${noCommentLabel} - <#else> - ${article.articleCommentCount} - - - - - - ${article.articleViewCount} - - -
-
- <#if nextArticlePermalink??> -
- - « - ${nextArticleTitle} - -
- - <#if previousArticlePermalink??> -
- - ${previousArticleTitle} - » - -
- -
- <@comments commentList=articleComments article=article> -
-
-
- <#include "footer.ftl"> - <@comment_script oId=article.oId> - page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; - - - +<#include "macro-head.ftl"> +<#include "macro-comments.ftl"> + + + + <@head title="${article.articleTitle} - ${blogTitle}"> + + + + + + ${topBarReplacement} + <#include "header.ftl"> +
+
+
+
+ +

+ + ${article.articleTitle} + + <#if article.hasUpdated> + + ${updatedLabel} + + + <#if article.articlePutTop> + + ${topArticleLabel} + + +

+
+ ${article.articleContent} +
+ <#if "" != article.articleSign.signHTML?trim> +

+ ${article.articleSign.signHTML} +

+ + + <#list article.articleTags?split(",") as articleTag><#if articleTag_has_next>, + + + + + + + + <#if article.articleCommentCount == 0> + ${noCommentLabel} + <#else> + ${article.articleCommentCount} + + + + + + ${article.articleViewCount} + + +
+
+ <#if nextArticlePermalink??> +
+ + « + ${nextArticleTitle} + +
+ + <#if previousArticlePermalink??> +
+ + ${previousArticleTitle} + » + +
+ +
+ <@comments commentList=articleComments article=article> +
+
+
+ <#include "footer.ftl"> + <@comment_script oId=article.oId> + page.tips.externalRelevantArticlesDisplayCount = "${externalRelevantArticlesDisplayCount}"; + + + diff --git a/timeline/css/timeline.css b/timeline/css/timeline.css index d159125..efc2784 100644 --- a/timeline/css/timeline.css +++ b/timeline/css/timeline.css @@ -1,736 +1,745 @@ -/* - * Copyright (c) 2009, 2010, 2011, 2012, B3log Team - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. -*/ -/* -* timeline skin style. -* -* @author Liyuan Li -* @version 1.0.1.0, Jan 30, 2013 -*/ -/* start reset */ -html, body { - -webkit-text-size-adjust: 100%; - -ms-text-size-adjust: 100%; - margin: 0; - padding: 0; - height: 100%; -} - -body { - font: 0.81em Verdana, arial, '\5fae\8f6f\96c5\9ed1'; - color: #666666; - background-color: #363A3D; -} - -button, -input, -select, -textarea { - margin: 0; - font-size: 100%; - vertical-align: middle; - font-family: Verdana, arial,'\5fae\8f6f\96c5\9ed1'; - outline: none; -} - -a { - color: #6599C6; - outline: medium none; - text-decoration: none; - transition: color 1s ease 0s; -} - -a:hover { - color: #000; -} - -img { - max-width: 100%; - border: 0; - vertical-align: middle; -} - -::selection { - background-color: #D5D5D5; - color: #FCFCFC; -} - -::-moz-selection { - background-color: #D5D5D5; - color: #FCFCFC; -} -/* end reset */ - -/* start function */ -.left { - float: left; -} - -.right { - float: right; -} - -.clear { - background-color: transparent; - border: 0; - clear: both; - display: block; - font-size: 0; - height: 0; - line-height: 0; - overflow: hidden; -} - -.none { - display: none; -} - -.fn-clear:before, -.fn-clear:after { - display: table; - content: ""; -} - -.fn-clear:after { - clear: both; -} -/* end function */ - -/* start common */ -.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, -.em10, .em11, .em12, .em13, .em14 { - cursor: pointer; - background-image: url("../../ease/images/emotions/emotions-ease.png"); - float: left; - height: 24px; - margin-right: 5px; - width: 24px; - transition: all .2s ease-out; - -webkit-transition: all .2s ease-out; - -moz-transition: all .2s ease-out; -} - -#emotions span:hover { - transform: scale(1.2) rotate(360deg); - -webkit-transform: scale(1.2) rotate(360deg); - -moz-transform: scale(1.2) rotate(360deg); -} - -.em01 { - background-position: -24px 0; -} -.em02 { - background-position: -48px 0; -} -.em03 { - background-position: -72px 0; -} -.em04 { - background-position: -96px 1px; -} -.em05 { - background-position: 0 -24px; -} -.em06 { - background-position: -24px -24px; -} -.em07 { - background-position: -48px -24px; -} -.em08 { - background-position: -72px -24px; -} -.em09 { - background-position: -96px -24px; -} -.em10 { - background-position: 0 -48px; -} -.em11 { - background-position: -24px -48px ; -} -.em12 { - background-position: -48px -48px; -} -.em13 { - background-position: -72px -48px; -} -.em14 { - background-position: -96px -48px; -} - -#tags { - margin: 0; -} - -#tags li { - float: left; - list-style-type: none; - height: 45px; -} - -#tags a { - background-color: #FCFCFC; - box-shadow: 0 0 2px #D5D5D5; - display: block; - margin: 5px 10px; - padding: 5px 10px; -} - -#tags a:hover { - text-shadow: 0 0 2px; - text-decoration: none; - box-shadow: 0 0 4px #D5D5D5; -} - -#tags b { - font-size: 70%; - opacity: 0.6; - filter: alpha(opacity=60); -} - -.tags1, .tags1:visited { - font-size: 12px; - color: #a7a7a7; -} - -.tags2, .tags2:visited { - font-size: 14px; - color: #808080; -} - -.tags3, .tags3:visited { - font-size: 16px; - color: #595959; -} - -.tags4, .tags4:visited { - font-size: 18px; - color: #323232; -} - -.tags5, .tags5:visited { - font-size: 20px; - color: #0a0a0a; -} - -.module { - background-color: #FFFFFF; - border: 1px solid #BEC3C7; - border-radius: 5px 5px 5px 5px; - box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); - margin-bottom: 30px; - padding: 15px; - word-wrap: break-word; - position: relative; -} - -.module > h3.title { - margin: 0 0 10px 0; - color: #444; -} - -.module > ul.list { - list-style-type: none; - padding-left: 0; - margin: 0; - overflow: hidden; -} - -.module > ul.list > li { - border-top: 1px solid #EEEEEE; - padding: 6px 0; -} -/* end common */ - -/* start icon */ -.articles .arrow, -.ico-author, -.ico-tags, -.ico-comment, -.ico-top, -.ico-view, -.ico-reply, -.ico-translate, -#search { - background-repeat: no-repeat; - background-image: url("../../timeline/images/icons.png"); -} - -.ico-author, -.ico-tags, -.ico-comment, -.ico-view, -.ico-reply { - padding-left: 20px; - background-position: -1px -63px; - margin-right: 10px; -} - -.ico-tags { - background-position: -1px -83px; -} - -.ico-comment { - background-position: -1px -41px; -} - -.ico-view { - background-position: 0 -122px; -} - -.ico-reply { - background-position: 0 -162px; -} - -.ico-translate { - background-position: 0 -186px; - cursor: pointer; - float: right; - height: 16px; - margin-left: 10px; - width: 16px; -} - -#search { - background-position: 5px -138px; - border: medium none; - border-radius: 12px 12px 12px 12px; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1); - color: #A5A099; - height: 22px; - margin-top: 13px; - padding-left: 25px; - transition: width 0.7s ease 0s; - width: 60px; -} - -#search:focus { - color: #333; - width: 140px; -} - -.ico-top { - background-color: #363A3D; - background-position: 4px -100px; - border-radius: 20em 20em 20em 20em; - bottom: 60px; - box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.15); - height: 25px; - position: fixed; - left: 90%; - width: 25px; - cursor: pointer; -} - -.ico-next, -.ico-pre { - background-color: #6599C6; - border-radius: 10em 10em 10em 10em; - color: #FFFFFF; - display: block; - float: left; - font: 20px/100% "Times New Roman",Times,serif; - height: 28px; - margin: -8px 10px 0 0; - padding: 4px 0 0; - text-align: center; - transition: background 1s ease 0s; - width: 32px; -} - -.ico-next { - float: right; - margin: -8px 0 0 10px; -} - -a:hover > .ico-next, -a:hover > .ico-pre { - background-color: #000; -} -/* end icon */ - -/* start framework */ -.wrapper { - min-width: 500px; - padding: 50px 0; - background: url("../../timeline/images/bg.png") repeat scroll 0 0 #DEE4EA; -} - -.header { - background-color: #BFBFBF; - background-image: url("../../timeline/images/nav-bg.png"), linear-gradient(#CCCCCC, #A9A9A9); - background-image: url("../../timeline/images/nav-bg.png"), -ms-linear-gradient(#CCCCCC, #A9A9A9); - background-image: url("../../timeline/images/nav-bg.png"), -o-linear-gradient(#CCCCCC, #A9A9A9); - background-image: url("../../timeline/images/nav-bg.png"), -webkit-linear-gradient(#CCCCCC, #A9A9A9); - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#CCCCCC', endColorstr='#A9A9A9'); - border-bottom: 1px solid #898989; - box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2); - height: 50px; - overflow: hidden; -} - -.container { - width: 80%; - margin: 0 auto; -} - -.footer { - border-top: 1px solid #232323; - padding: 20px 0; - color: #ddd; - font-size: 80%; -} - -.footer a { - color: #9CC0DE; -} - -.footer a:hover { - text-decoration: underline; -} -/* end framework */ - -/* start header */ -.header .title { - font-size: 150%; - margin: 3px 0 0; -} - -.header .title a { - color: #414141; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); -} - -.header li a { - color: #444; - padding: 17px; - line-height: 20px; - text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); - white-space: nowrap; -} - -.header li a.current { - border-bottom: 2px solid #D26911; -} - -.header a:hover { - color: #000; -} - -.header li { - float: left; - list-style-type: none; -} -/* end header */ - -/* start article list */ -.articles { - position: relative; - margin-top: 11px; -} - -.articles > div.fn-clear { - position: relative; - margin-bottom: 50px; -} - -.articles > div.fn-clear > h2 { - margin: 0; - text-align: center; - height: 28px; -} - -.articles > .vertical { - background-color: #9EB5C6; - border-radius: 20em 20em 20em 20em; - box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5) inset, 0 0 1px 0 rgba(255, 255, 255, 0.6); - height: 100%; - left: 50%; - margin-left: -3px; - position: absolute; - top: 0; - width: 6px -} - -.articles article { - width: 50%; - float: left; -} - -.articles article.l > div.module { - margin-right: 30px; - left: 0; -} - -.articles article.r { - left: 50%; -} - -.articles article.r > div { - margin-left: 30px; - position: relative; -} - -.articles .dot { - background-color: #FFFFFF; - border: 3px solid #60829F; - border-radius: 20em 20em 20em 20em; - height: 6px; - position: absolute; - right: -37px; - top: 22px; - width: 6px; -} - -.articles .r .dot { - left: -37px; - right: inherit; -} - -.articles .arrow { - height: 15px; - position: absolute; - right: -9px; - top: 21px; - width: 9px; -} - -.articles .r .arrow { - background-position: 0 -22px; - left: -9px; - right: inherit -} - -time.article-time { - top: -8px; - left: 50%; - position: absolute; -} - -time.article-time > span { - background-color: #FFFFFF; - border: 1px solid #A8A9A9; - border-radius: 20em 20em 20em 20em; - font-size: 80%; - margin-left: -56px; - padding: 5px 10px; -} - -article .article-title { - margin: 10px 0 0 0; -} - -article .article-title > sup { - color: #6599C6; - font-size: 70%; -} - -article .article-title a { - color: #000; - text-decoration: none; -} - -.ico > a { - color: #999999; - font-size: 80%; - text-decoration: none; -} - -.ico > a:hover { - color: #000; -} - -.article-more { - background-color: #60829F; - border-radius: 20em 20em 20em 20em; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.6); - color: #FFFFFF; - cursor: pointer; - font-weight: bold; - height: 19px; - left: 50%; - margin-left: -38px; - padding: 5px 20px; - position: absolute; - text-align: center; - top: 100%; - width: 36px; -} - -.article-archive { - background-color: #60829F; - border-radius: 20em 20em 20em 20em; - box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.6); - color: #FFFFFF; - font-size: 80%; - font-weight: normal; - padding: 5px 20px; -} -/* end article list */ - -/* start dynamic */ -.dynamic-l { - float: left; - width: 70%; -} - -.dynamic-l > div { - margin-right: 30px; -} - -.dynamic-r { - float: right; - width: 30%; -} - -.dynamic-r .tags a, -.links a { - line-height: 24px; -} -/* end dynamic */ - -/* start comments */ -#comments { - margin: 30px 0 50px; - position: relative; -} - -.comments > li > img { - height: 60px; - width: 60px; - border-radius: 30px; - float: left; - margin-right: 15px; -} - -.comments .author { - font-size: 130%; - font-style: italic; -} - -.comments > li > div > div.article-body { - padding-left: 75px; - margin: 12px 0; -} - -.module > ul > li.comment-body-ref { - background-color: #FFFFFF; - border: 1px solid #ddd; - left: 76px; - opacity: 0.8; - filter: alpha(opacity=80); - padding: 10px; - position: absolute; - width: 74%; - border-radius: 10px; -} - -.comment-body-ref .ico-reply { - display: none; -} - -.comment-form { - width: 100%; - margin: 30px 0; -} - -#commentForm { - margin-top: 0; -} - -.comment-form input[type='text'], -.comment-form textarea { - background: url("../../timeline/images/bg.png") repeat scroll 0 0 #E5E8EA; - border: 1px solid #BCBDBE; - border-radius: 5px 5px 5px 5px; - box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; - margin: 5px 5px 5px 0; - padding: 6px; -} - -.comment-form input[type='text']:focus, -.comment-form textarea:focus { - background-color: #EFEFEF; - outline: medium none; -} - -#submitCommentButton, -#submitCommentButtonReply { - background: none repeat scroll 0 0 #868889; - border: 1px solid #5D6265; - border-radius: 10em 10em 10em 10em; - box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3); - color: #FFFFFF; - cursor: pointer; - padding: 5px 20px; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); -} - -#submitCommentButton:hover, -#submitCommentButtonReply:hover { - color: #fff; - background-color: #444; -} -/* end comments */ - -/* start others */ -.nav-abs { - background-color: #6B6B6B; - border: 1px solid #898989; - border-radius: 5px 5px 5px 5px; - box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(255, 255, 255, 0.6); - color: #CCCCCC; - padding: 5px 10px; - position: absolute; - right: 30px; - top: 61px; - z-index: 1; - text-align: center; - white-space: nowrap; -} - -.nav-abs li { - background-color: #DEDDDD; - border: 1px solid #6B6B6B; - color: #616161; - cursor: pointer; - float: left; - height: 20px; - list-style-type: none; - padding: 3px 5px; - width: 28px; -} - -.nav-abs li.year { - background-color: #6B6B6B; - clear: both; - color: #CCCCCC; - float: none; - text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); - width: auto; - border-width: 0; -} - -.nav-abs li:hover { - background-color: #EFEEEE; - color: #000; -} - -.nav-abs li.year:hover, .nav-abs li.open { - background-color: #353535; - color: #fff; -} +/* + * Copyright (c) 2009, 2010, 2011, 2012, B3log Team + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. +*/ +/* +* timeline skin style. +* +* @author Liyuan Li +* @version 1.0.1.1, Feb 20, 2013 +*/ +/* start reset */ +html, body { + -webkit-text-size-adjust: 100%; + -ms-text-size-adjust: 100%; + margin: 0; + padding: 0; + height: 100%; +} + +body { + font: 0.81em Verdana, arial, '\5fae\8f6f\96c5\9ed1'; + color: #666666; + background-color: #363A3D; +} + +button, +input, +select, +textarea { + margin: 0; + font-size: 100%; + vertical-align: middle; + font-family: Verdana, arial,'\5fae\8f6f\96c5\9ed1'; + outline: none; +} + +a { + color: #6599C6; + outline: medium none; + text-decoration: none; + transition: color 1s ease 0s; +} + +a:hover { + color: #000; +} + +img { + max-width: 100%; + border: 0; + vertical-align: middle; +} + +::selection { + background-color: #D5D5D5; + color: #FCFCFC; +} + +::-moz-selection { + background-color: #D5D5D5; + color: #FCFCFC; +} +/* end reset */ + +/* start function */ +.left { + float: left; +} + +.right { + float: right; +} + +.clear { + background-color: transparent; + border: 0; + clear: both; + display: block; + font-size: 0; + height: 0; + line-height: 0; + overflow: hidden; +} + +.none { + display: none; +} + +.fn-clear:before, +.fn-clear:after { + display: table; + content: ""; +} + +.fn-clear:after { + clear: both; +} +/* end function */ + +/* start common */ +.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09, +.em10, .em11, .em12, .em13, .em14 { + cursor: pointer; + background-image: url("../../ease/images/emotions/emotions-ease.png"); + float: left; + height: 24px; + margin-right: 5px; + width: 24px; + transition: all .2s ease-out; + -webkit-transition: all .2s ease-out; + -moz-transition: all .2s ease-out; +} + +#emotions span:hover { + transform: scale(1.2) rotate(360deg); + -webkit-transform: scale(1.2) rotate(360deg); + -moz-transform: scale(1.2) rotate(360deg); +} + +.em01 { + background-position: -24px 0; +} +.em02 { + background-position: -48px 0; +} +.em03 { + background-position: -72px 0; +} +.em04 { + background-position: -96px 1px; +} +.em05 { + background-position: 0 -24px; +} +.em06 { + background-position: -24px -24px; +} +.em07 { + background-position: -48px -24px; +} +.em08 { + background-position: -72px -24px; +} +.em09 { + background-position: -96px -24px; +} +.em10 { + background-position: 0 -48px; +} +.em11 { + background-position: -24px -48px ; +} +.em12 { + background-position: -48px -48px; +} +.em13 { + background-position: -72px -48px; +} +.em14 { + background-position: -96px -48px; +} + +#tags { + margin: 0; +} + +#tags li { + float: left; + list-style-type: none; + height: 45px; +} + +#tags a { + background-color: #FCFCFC; + box-shadow: 0 0 2px #D5D5D5; + display: block; + margin: 5px 10px; + padding: 5px 10px; +} + +#tags a:hover { + text-shadow: 0 0 2px; + text-decoration: none; + box-shadow: 0 0 4px #D5D5D5; +} + +#tags b { + font-size: 70%; + opacity: 0.6; + filter: alpha(opacity=60); +} + +.tags1, .tags1:visited { + font-size: 12px; + color: #a7a7a7; +} + +.tags2, .tags2:visited { + font-size: 14px; + color: #808080; +} + +.tags3, .tags3:visited { + font-size: 16px; + color: #595959; +} + +.tags4, .tags4:visited { + font-size: 18px; + color: #323232; +} + +.tags5, .tags5:visited { + font-size: 20px; + color: #0a0a0a; +} + +.module { + background-color: #FFFFFF; + border: 1px solid #BEC3C7; + border-radius: 5px 5px 5px 5px; + box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); + margin-bottom: 30px; + padding: 15px; + word-wrap: break-word; + position: relative; +} + +.module > h3.title { + margin: 0 0 10px 0; + color: #444; +} + +.module > ul.list { + list-style-type: none; + padding-left: 0; + margin: 0; + overflow: hidden; +} + +.module > ul.list > li { + border-top: 1px solid #EEEEEE; + padding: 6px 0; +} +/* end common */ + +/* start icon */ +.articles .arrow, +.ico-author, +.ico-tags, +.ico-comment, +.ico-top, +.ico-view, +.ico-reply, +.ico-translate, +#search { + background-repeat: no-repeat; + background-image: url("../../timeline/images/icons.png"); +} + +.ico-author, +.ico-tags, +.ico-comment, +.ico-view, +.ico-reply { + padding-left: 20px; + background-position: -1px -63px; + margin-right: 10px; +} + +.ico-tags { + background-position: -1px -83px; +} + +.ico-comment { + background-position: -1px -41px; +} + +.ico-view { + background-position: 0 -122px; +} + +.ico-reply { + background-position: 0 -162px; +} + +.ico-translate { + background-position: 0 -186px; + cursor: pointer; + float: right; + height: 16px; + margin-left: 10px; + width: 16px; +} + +#search { + background-position: 5px -138px; + border: medium none; + border-radius: 12px 12px 12px 12px; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.1); + color: #A5A099; + height: 22px; + margin-top: 13px; + padding-left: 25px; + transition: width 0.7s ease 0s; + width: 60px; +} + +#search:focus { + color: #333; + width: 140px; +} + +.ico-top { + background-color: #363A3D; + background-position: 4px -100px; + border-radius: 20em 20em 20em 20em; + bottom: 60px; + box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.3) inset, 0 1px 0 rgba(255, 255, 255, 0.15); + height: 25px; + position: fixed; + left: 90%; + width: 25px; + cursor: pointer; +} + +.ico-next, +.ico-pre { + background-color: #6599C6; + border-radius: 10em 10em 10em 10em; + color: #FFFFFF; + display: block; + float: left; + font: 20px/100% "Times New Roman",Times,serif; + height: 28px; + margin: -8px 10px 0 0; + padding: 4px 0 0; + text-align: center; + transition: background 1s ease 0s; + width: 32px; +} + +.ico-next { + float: right; + margin: -8px 0 0 10px; +} + +a:hover > .ico-next, +a:hover > .ico-pre { + background-color: #000; +} +/* end icon */ + +/* start framework */ +.wrapper { + min-width: 500px; + padding: 50px 0; + background: url("../../timeline/images/bg.png") repeat scroll 0 0 #DEE4EA; +} + +.header { + background-color: #BFBFBF; + background-image: url("../../timeline/images/nav-bg.png"), linear-gradient(#CCCCCC, #A9A9A9); + background-image: url("../../timeline/images/nav-bg.png"), -ms-linear-gradient(#CCCCCC, #A9A9A9); + background-image: url("../../timeline/images/nav-bg.png"), -o-linear-gradient(#CCCCCC, #A9A9A9); + background-image: url("../../timeline/images/nav-bg.png"), -webkit-linear-gradient(#CCCCCC, #A9A9A9); + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr='#CCCCCC', endColorstr='#A9A9A9'); + border-bottom: 1px solid #898989; + box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.2); + height: 50px; + overflow: hidden; +} + +.container { + width: 80%; + margin: 0 auto; +} + +.footer { + border-top: 1px solid #232323; + padding: 20px 0; + color: #ddd; + font-size: 80%; +} + +.footer a { + color: #9CC0DE; +} + +.footer a:hover { + text-decoration: underline; +} +/* end framework */ + +/* start header */ +.header .title { + font-size: 150%; + margin: 3px 0 0; +} + +.header .title a { + color: #414141; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); +} + +.header li a { + color: #444; + padding: 17px; + line-height: 20px; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.7); + white-space: nowrap; +} + +.header li a.current { + border-bottom: 2px solid #D26911; +} + +.header a:hover { + color: #000; +} + +.header li { + float: left; + list-style-type: none; +} +/* end header */ + +/* start article list */ +.articles { + position: relative; + margin-top: 11px; +} + +.articles > div.fn-clear { + position: relative; + margin-bottom: 50px; +} + +.articles > div.fn-clear > h2 { + margin: 0; + text-align: center; + height: 28px; +} + +.articles > .vertical { + background-color: #9EB5C6; + border-radius: 20em 20em 20em 20em; + box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.5) inset, 0 0 1px 0 rgba(255, 255, 255, 0.6); + height: 100%; + left: 50%; + margin-left: -3px; + position: absolute; + top: 0; + width: 6px +} + +.articles article { + width: 50%; + float: left; +} + +.articles article.l > div.module { + margin-right: 30px; + left: 0; +} + +.articles article.r { + left: 50%; +} + +.articles article.r > div { + margin-left: 30px; + position: relative; +} + +.articles .dot { + background-color: #FFFFFF; + border: 3px solid #60829F; + border-radius: 20em 20em 20em 20em; + height: 6px; + position: absolute; + right: -37px; + top: 22px; + width: 6px; +} + +.articles .r .dot { + left: -37px; + right: inherit; +} + +.articles .arrow { + height: 15px; + position: absolute; + right: -9px; + top: 21px; + width: 9px; +} + +.articles .r .arrow { + background-position: 0 -22px; + left: -9px; + right: inherit +} + +.articles pre { + background-color: #F5F5F5; + border: 1px solid #ddd; + border-radius: 4px 4px 4px 4px; + padding: 9.5px; + white-space: pre-wrap; + word-wrap: break-word; +} + +time.article-time { + top: -8px; + left: 50%; + position: absolute; +} + +time.article-time > span { + background-color: #FFFFFF; + border: 1px solid #A8A9A9; + border-radius: 20em 20em 20em 20em; + font-size: 80%; + margin-left: -56px; + padding: 5px 10px; +} + +article .article-title { + margin: 10px 0 0 0; +} + +article .article-title > sup { + color: #6599C6; + font-size: 70%; +} + +article .article-title a { + color: #000; + text-decoration: none; +} + +.ico > a { + color: #999999; + font-size: 80%; + text-decoration: none; +} + +.ico > a:hover { + color: #000; +} + +.article-more { + background-color: #60829F; + border-radius: 20em 20em 20em 20em; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.6); + color: #FFFFFF; + cursor: pointer; + font-weight: bold; + height: 19px; + left: 50%; + margin-left: -38px; + padding: 5px 20px; + position: absolute; + text-align: center; + top: 100%; + width: 36px; +} + +.article-archive { + background-color: #60829F; + border-radius: 20em 20em 20em 20em; + box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2) inset, 0 1px 0 rgba(255, 255, 255, 0.6); + color: #FFFFFF; + font-size: 80%; + font-weight: normal; + padding: 5px 20px; +} +/* end article list */ + +/* start dynamic */ +.dynamic-l { + float: left; + width: 70%; +} + +.dynamic-l > div { + margin-right: 30px; +} + +.dynamic-r { + float: right; + width: 30%; +} + +.dynamic-r .tags a, +.links a { + line-height: 24px; +} +/* end dynamic */ + +/* start comments */ +#comments { + margin: 30px 0 50px; + position: relative; +} + +.comments > li > img { + height: 60px; + width: 60px; + border-radius: 30px; + float: left; + margin-right: 15px; +} + +.comments .author { + font-size: 130%; + font-style: italic; +} + +.comments > li > div > div.article-body { + padding-left: 75px; + margin: 12px 0; +} + +.module > ul > li.comment-body-ref { + background-color: #FFFFFF; + border: 1px solid #ddd; + left: 76px; + opacity: 0.8; + filter: alpha(opacity=80); + padding: 10px; + position: absolute; + width: 74%; + border-radius: 10px; +} + +.comment-body-ref .ico-reply { + display: none; +} + +.comment-form { + width: 100%; + margin: 30px 0; +} + +#commentForm { + margin-top: 0; +} + +.comment-form input[type='text'], +.comment-form textarea { + background: url("../../timeline/images/bg.png") repeat scroll 0 0 #E5E8EA; + border: 1px solid #BCBDBE; + border-radius: 5px 5px 5px 5px; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) inset; + margin: 5px 5px 5px 0; + padding: 6px; +} + +.comment-form input[type='text']:focus, +.comment-form textarea:focus { + background-color: #EFEFEF; + outline: medium none; +} + +#submitCommentButton, +#submitCommentButtonReply { + background: none repeat scroll 0 0 #868889; + border: 1px solid #5D6265; + border-radius: 10em 10em 10em 10em; + box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 1px 1px rgba(0, 0, 0, 0.3); + color: #FFFFFF; + cursor: pointer; + padding: 5px 20px; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); +} + +#submitCommentButton:hover, +#submitCommentButtonReply:hover { + color: #fff; + background-color: #444; +} +/* end comments */ + +/* start others */ +.nav-abs { + background-color: #6B6B6B; + border: 1px solid #898989; + border-radius: 5px 5px 5px 5px; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4) inset, 0 1px 0 rgba(255, 255, 255, 0.7), 0 -1px 0 rgba(255, 255, 255, 0.6); + color: #CCCCCC; + padding: 5px 10px; + position: absolute; + right: 30px; + top: 61px; + z-index: 1; + text-align: center; + white-space: nowrap; +} + +.nav-abs li { + background-color: #DEDDDD; + border: 1px solid #6B6B6B; + color: #616161; + cursor: pointer; + float: left; + height: 20px; + list-style-type: none; + padding: 3px 5px; + width: 28px; +} + +.nav-abs li.year { + background-color: #6B6B6B; + clear: both; + color: #CCCCCC; + float: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5); + width: auto; + border-width: 0; +} + +.nav-abs li:hover { + background-color: #EFEEEE; + color: #000; +} + +.nav-abs li.year:hover, .nav-abs li.open { + background-color: #353535; + color: #fff; +} /* end others */ \ No newline at end of file diff --git a/timeline/css/timeline.min.css b/timeline/css/timeline.min.css index 02e60f6..ab06496 100644 --- a/timeline/css/timeline.min.css +++ b/timeline/css/timeline.min.css @@ -79,6 +79,7 @@ a:hover>.ico-next,a:hover>.ico-pre{background-color:#000;} .articles .r .dot{left:-37px;right:inherit;} .articles .arrow{height:15px;position:absolute;right:-9px;top:21px;width:9px;} .articles .r .arrow{background-position:0 -22px;left:-9px;right:inherit;} +.articles pre{background-color:#F5F5F5;border:1px solid #ddd;border-radius:4px 4px 4px 4px;padding:9.5px;white-space:pre-wrap;word-wrap:break-word;} time.article-time{top:-8px;left:50%;position:absolute;} time.article-time>span{background-color:#FFFFFF;border:1px solid #A8A9A9;border-radius:20em 20em 20em 20em;font-size:80%;margin-left:-56px;padding:5px 10px;} article .article-title{margin:10px 0 0 0;} diff --git a/timeline/footer.ftl b/timeline/footer.ftl index 06b14e8..10036ae 100644 --- a/timeline/footer.ftl +++ b/timeline/footer.ftl @@ -1,74 +1,74 @@ -
-
-
- © ${year} - ${blogTitle} - Powered by - - ${b3logLabel}  - Solo, - ver ${version}   - Theme by Vanessa. -
-
- - ${viewCount1Label} - ${statistic.statisticBlogViewCount} -    - ${articleCount1Label} - ${statistic.statisticPublishedBlogArticleCount} -    - ${commentCount1Label} - ${statistic.statisticPublishedBlogCommentCount} - - -
-
-
-
- - - - -${plugins} +
+
+
+ © ${year} - ${blogTitle} + Powered by + + ${b3logLabel}  + Solo, + ver ${version}   + Theme by postline & Vanessa. +
+
+ + ${viewCount1Label} + ${statistic.statisticBlogViewCount} +    + ${articleCount1Label} + ${statistic.statisticPublishedBlogArticleCount} +    + ${commentCount1Label} + ${statistic.statisticPublishedBlogCommentCount} + + +
+
+
+
+ + + + +${plugins} diff --git a/timeline/js/timeline.js b/timeline/js/timeline.js index 4d48cb2..ef29da2 100644 --- a/timeline/js/timeline.js +++ b/timeline/js/timeline.js @@ -1,291 +1,426 @@ -/* - * Copyright (c) 2009, 2010, 2011, 2012, B3log Team - * - * Licensed under the Apache License, Version 2.0 (the "License"); - * you may not use this file except in compliance with the License. - * You may obtain a copy of the License at - * - * http://www.apache.org/licenses/LICENSE-2.0 - * - * Unless required by applicable law or agreed to in writing, software - * distributed under the License is distributed on an "AS IS" BASIS, - * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. - * See the License for the specific language governing permissions and - * limitations under the License. - */ - -/** - * @fileoverview timeline js. - * - * @author Liyuan Li - * @version 1.0.1.0, Jan 30, 2013 - */ -var timeline = { - _COLHA: 0, - _COLHB: 20, - _initArticleList: function () { - var $articles = $(".articles"); - if ($articles.length === 0 || $(".articles > .fn-clear").length > 0) { - return; - } - - $(window).resize(function () { - var colH = [timeline._COLHA, timeline._COLHB]; - $articles.find("article").each(function () { - var $it = $(this), - isLeft = colH[1] > colH[0], - top = isLeft ? colH[0] : colH[1]; - if (!$it.hasClass("r") && !$it.hasClass("l")) { - $it.css({ - "top": top + "px", - "position": "absolute" - }); - - if (isLeft) { - this.className = "l"; - } else { - this.className = "r"; - } - } - colH[( isLeft ? '0' : '1' )] += parseInt($it.outerHeight(true)); - }); - - $articles.height(colH[0] > colH[1] ? colH[0] : colH[1]); - }); - - setTimeout(function () { - $(window).resize(); - }, 500); - }, - - - _initIndexList: function () { - var $archives = $(".articles > .fn-clear"); - if ($archives.length === 0) { - return; - } - - // 如果为 index 页面，重构 archives 结构，使其可收缩 - var year = 0; - $(".nav-abs li").each(function (i) { - var $this = $(this); - $this.hide(); - if (year !== $this.data("year")) { - year = $this.data("year"); - $this.before("
  • " + year + "
    • "); - } - }); - - // 首次加载时，当没有下一页时，使用 js 隐藏"更多"按钮 - if ($(".article-more").parent().data("count") <= $(".article-more").parent().find("article").length) { - $(".article-more").remove(); - } - - $(window).resize(function () { - $archives.each(function () { - var colH = [timeline._COLHA + 60, timeline._COLHB * 4]; - - var $articles = $(this).find("article"); - if ($articles.length === 0) { - $(this).find("h2").remove(); - $(this).css("margin-bottom" , 0); - } else { - $articles.each(function () { - var $it = $(this), - isLeft = colH[1] > colH[0], - top = isLeft ? colH[0] : colH[1]; - - if (!$it.hasClass("r") && !$it.hasClass("l")) { - $it.css({ - "top": top + "px", - "position": "absolute" - }); - - if (isLeft) { - this.className = "l"; - } else { - this.className = "r"; - } - } - colH[( isLeft ? '0' : '1' )] += parseInt($it.outerHeight(true)); - }); - $(this).height(colH[0] > colH[1] ? colH[0] : colH[1]); - } - }); - }); - - setTimeout(function () { - $(window).resize(); - }, 500); - }, - - _setNavCurrent: function () { - $(".header li a").each(function () { - if($(this).prop("href") === location.href.split("#")[0]) { - this.className = "current"; - } else { - this.className = ""; - } - }) - }, - - init: function () { - $(window).scroll(function () { - if ($(window).scrollTop() > 60) { - $(".ico-top").show(); - } else { - $(".ico-top").hide(); - } - }); - timeline._initIndexList(); - timeline._initArticleList(); - timeline._setNavCurrent(); - }, - - translate: function () { - window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href); - }, - - getArchive: function (year, month, monthName) { - var archiveDate = year + month, - archive = year + "/" + month; - window.location.hash = "#" + archiveDate; - if ($("#" + archiveDate + " > article").length === 0) { - var archiveDataTitle = year + " " + Label.yearLabel + " " + month + " " + Label.monthLabel; - if (Label.localeString.substring(0, 2) === "en") { - archiveDataTitle = monthName + " " + year; - } - var archiveHTML = '

    ' + archiveDataTitle + '

    ' - + '
    ' + Label.moreLabel + '
    '; - - $("#" + archiveDate).html(archiveHTML).css("margin-bottom", "50px"); - timeline.getNextPage($("#" + archiveDate).find(".article-more")[0], archive); - } - }, - - getNextPage: function (it, archive) { - var $more = $(it), - currentPage = $more.data("page") + 1, - path = "/articles/"; - if($("#tag").length === 1) { - var pathnames = location.pathname.split("/"); - path = "/articles/tags/" + pathnames[pathnames.length - 1] + "/"; - } else if ($("#author").length === 1) { - var pathnames = location.pathname.split("/"); - path = "/articles/authors/" + pathnames[pathnames.length - 1] + "/"; - } else if (archive) { - path = "/articles/archives/" + archive + "/"; - } - $.ajax({ - url: latkeConfig.servePath + path + currentPage, - type: "GET", - beforeSend: function () { - $more.css("background", - "url(" + latkeConfig.staticServePath - + "/skins/timeline/images/ajax-loader.gif) no-repeat scroll center center #60829F").text(""); - }, - success: function(result, textStatus){ - if (!result.sc) { - $more.css("background", "none #60829F").text("Error"); - return; - } - - if (result.rslts.articles.length === 0) { - $more.remove(); - return; - } - - var articlesHTML = "", - pagination = result.rslts.pagination; - - // append articles - for (var i = 0; i < result.rslts.articles.length; i++) { - var article = result.rslts.articles[i]; - - articlesHTML += '
    ' - + '

    ' - +article.articleTitle + ''; - - if (article.hasUpdated) { - articlesHTML += '' + Label.updatedLabel + ''; - } - - if (article.articlePutTop) { - articlesHTML += '' + Label.topArticleLabel + ''; - } - - articlesHTML += '

    ' + article.articleAbstract + '

    ' - + ''; - - var articleTags = article.articleTags.split(","); - for (var j = 0; j < articleTags.length; j++) { - articlesHTML += '' + articleTags[j] + ''; - - if (j < articleTags.length - 1) { - articlesHTML += ","; - } - } - - articlesHTML += ' ' - + ' ' + (article.articleCommentCount === 0 ? Label.noCommentLabel : article.articleCommentCount) - + ' ' - + '' + article.articleViewCount - + '
    '; - } - - $more.before(articlesHTML).data("page", currentPage); - // 最后一页处理 - if (pagination.paginationPageCount <= currentPage) { - $more.remove(); - } else { - $more.css("background", "none #60829F").text(Label.moreLabel); - } - - setTimeout(function () { - $(window).resize(); - }, 500); - } - }); - }, - - toggleArchives: function (it, year) { - $(".nav-abs li").each(function (i) { - var $it = $(this); - if (!$it.hasClass("year")) { - $it.hide(); - if (year === $it.data("year") && $(it).hasClass("close")) { - $it.show(); - } - } - }); - - $(".nav-abs li.year").each(function () { - if (parseInt($(this).text()) === year) { - if ($(it).hasClass("close")) { - it.className = "year open"; - } else { - it.className = "year close"; - } - } else { - this.className = "year close"; - } - }); - } -}; - -(function () { - Util.init(); - Util.replaceSideEm($(".recent-comments-content")); - Util.buildTags("tagsSide"); - - timeline.init(); +/* + * Copyright (c) 2009, 2010, 2011, 2012, B3log Team + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + */ + +/** + * @fileoverview timeline js. + * + * @author Liyuan Li + * @version 1.0.1.1, Feb 20, 2013 + */ +var timeline = { + _COLHA: 0, + _COLHB: 20, + _initArticleList: function () { + var $articles = $(".articles"); + if ($articles.length === 0 || $(".articles > .fn-clear").length > 0) { + return; + } + + $(window).resize(function () { + var colH = [timeline._COLHA, timeline._COLHB]; + $articles.find("article").each(function () { + var $it = $(this), + isLeft = colH[1] > colH[0], + top = isLeft ? colH[0] : colH[1]; + if (parseInt($it.css("top")) !== top) { + $it.css({ + "top": top + "px", + "position": "absolute" + }); + + if (isLeft) { + this.className = "l"; + } else { + this.className = "r"; + } + } + colH[( isLeft ? '0' : '1' )] += parseInt($it.outerHeight(true)); + }); + + $articles.height(colH[0] > colH[1] ? colH[0] : colH[1]); + }); + + $(window).resize(); + $(".module img").imagesLoaded(function () { + $(window).resize(); + }); + }, + + + _initIndexList: function () { + var $archives = $(".articles > .fn-clear"); + if ($archives.length === 0) { + return; + } + + // 如果为 index 页面，重构 archives 结构，使其可收缩 + var year = 0; + $(".nav-abs li").each(function (i) { + var $this = $(this); + $this.hide(); + if (year !== $this.data("year")) { + year = $this.data("year"); + $this.before("
  • " + year + "
    • "); + } + }); + + // 首次加载时，当没有下一页时，使用 js 隐藏"更多"按钮 + if ($(".article-more").parent().data("count") <= $(".article-more").parent().find("article").length) { + $(".article-more").remove(); + } + + $(window).resize(function () { + console.log("resize"); + $archives.each(function () { + var colH = [timeline._COLHA + 60, timeline._COLHB * 4]; + + var $articles = $(this).find("article"); + if ($articles.length === 0) { + $(this).find("h2").remove(); + $(this).css("margin-bottom" , 0); + } else { + $articles.each(function () { + var $it = $(this), + isLeft = colH[1] > colH[0], + top = isLeft ? colH[0] : colH[1]; + + if (parseInt($it.css("top")) !== top) { + console.log(top); + $it.css({ + "top": top + "px", + "position": "absolute" + }); + + if (isLeft) { + this.className = "l"; + } else { + this.className = "r"; + } + } + colH[( isLeft ? '0' : '1' )] += parseInt($it.outerHeight(true)); + }); + $(this).height(colH[0] > colH[1] ? colH[0] : colH[1]); + } + }); + }); + + $(window).resize(); + $(".module img").imagesLoaded(function () { + $(window).resize(); + }); + }, + + _setNavCurrent: function () { + $(".header li a").each(function () { + if($(this).prop("href") === location.href.split("#")[0]) { + this.className = "current"; + } else { + this.className = ""; + } + }) + }, + + init: function () { + $(window).scroll(function () { + if ($(window).scrollTop() > 60) { + $(".ico-top").show(); + } else { + $(".ico-top").hide(); + } + }); + timeline._initIndexList(); + timeline._initArticleList(); + timeline._setNavCurrent(); + }, + + translate: function () { + window.open("http://translate.google.com/translate?sl=auto&tl=auto&u=" + location.href); + }, + + getArchive: function (year, month, monthName) { + var archiveDate = year + month, + archive = year + "/" + month; + window.location.hash = "#" + archiveDate; + if ($("#" + archiveDate + " > article").length === 0) { + var archiveDataTitle = year + " " + Label.yearLabel + " " + month + " " + Label.monthLabel; + if (Label.localeString.substring(0, 2) === "en") { + archiveDataTitle = monthName + " " + year; + } + var archiveHTML = '

    ' + archiveDataTitle + '

    ' + + '
    ' + Label.moreLabel + '
    '; + + $("#" + archiveDate).html(archiveHTML).css("margin-bottom", "50px"); + timeline.getNextPage($("#" + archiveDate).find(".article-more")[0], archive); + } + }, + + getNextPage: function (it, archive) { + var $more = $(it), + currentPage = $more.data("page") + 1, + path = "/articles/"; + if($("#tag").length === 1) { + var pathnames = location.pathname.split("/"); + path = "/articles/tags/" + pathnames[pathnames.length - 1] + "/"; + } else if ($("#author").length === 1) { + var pathnames = location.pathname.split("/"); + path = "/articles/authors/" + pathnames[pathnames.length - 1] + "/"; + } else if (archive) { + path = "/articles/archives/" + archive + "/"; + } + $.ajax({ + url: latkeConfig.servePath + path + currentPage, + type: "GET", + beforeSend: function () { + $more.css("background", + "url(" + latkeConfig.staticServePath + + "/skins/timeline/images/ajax-loader.gif) no-repeat scroll center center #60829F").text(""); + }, + success: function(result, textStatus){ + if (!result.sc) { + $more.css("background", "none #60829F").text("Error"); + return; + } + + if (result.rslts.articles.length === 0) { + $more.remove(); + return; + } + + var articlesHTML = "", + pagination = result.rslts.pagination; + + // append articles + for (var i = 0; i < result.rslts.articles.length; i++) { + var article = result.rslts.articles[i]; + + articlesHTML += '
    ' + + '

    ' + +article.articleTitle + ''; + + if (article.hasUpdated) { + articlesHTML += '' + Label.updatedLabel + ''; + } + + if (article.articlePutTop) { + articlesHTML += '' + Label.topArticleLabel + ''; + } + + articlesHTML += '

    ' + article.articleAbstract + '

    ' + + ''; + + var articleTags = article.articleTags.split(","); + for (var j = 0; j < articleTags.length; j++) { + articlesHTML += '' + articleTags[j] + ''; + + if (j < articleTags.length - 1) { + articlesHTML += ","; + } + } + + articlesHTML += ' ' + + ' ' + (article.articleCommentCount === 0 ? Label.noCommentLabel : article.articleCommentCount) + + ' ' + + '' + article.articleViewCount + + '
    '; + } + + $more.before(articlesHTML).data("page", currentPage); + // 最后一页处理 + if (pagination.paginationPageCount <= currentPage) { + $more.remove(); + } else { + $more.css("background", "none #60829F").text(Label.moreLabel); + } + + $(window).resize(); + $(".module img").imagesLoaded(function () { + $(window).resize(); + }); + } + }); + }, + + toggleArchives: function (it, year) { + $(".nav-abs li").each(function (i) { + var $it = $(this); + if (!$it.hasClass("year")) { + $it.hide(); + if (year === $it.data("year") && $(it).hasClass("close")) { + $it.show(); + } + } + }); + + $(".nav-abs li.year").each(function () { + if (parseInt($(this).text()) === year) { + if ($(it).hasClass("close")) { + it.className = "year open"; + } else { + it.className = "year close"; + } + } else { + this.className = "year close"; + } + }); + } +}; + +/*! +* jQuery imagesLoaded plugin v2.1.1 +* http://github.com/desandro/imagesloaded +* +* MIT License. by Paul Irish et al. +*/ + +/*jshint curly: true, eqeqeq: true, noempty: true, strict: true, undef: true, browser: true */ +/*global jQuery: false */ + +; +(function($, undefined) { + 'use strict'; + + // blank image data-uri bypasses webkit log warning (thx doug jones) + var BLANK = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=='; + + $.fn.imagesLoaded = function( callback ) { + var $this = this, + deferred = $.isFunction($.Deferred) ? $.Deferred() : 0, + hasNotify = $.isFunction(deferred.notify), + $images = $this.find('img').add( $this.filter('img') ), + loaded = [], + proper = [], + broken = []; + + // Register deferred callbacks + if ($.isPlainObject(callback)) { + $.each(callback, function (key, value) { + if (key === 'callback') { + callback = value; + } else if (deferred) { + deferred[key](value); + } + }); + } + + function doneLoading() { + var $proper = $(proper), + $broken = $(broken); + + if ( deferred ) { + if ( broken.length ) { + deferred.reject( $images, $proper, $broken ); + } else { + deferred.resolve( $images ); + } + } + + if ( $.isFunction( callback ) ) { + callback.call( $this, $images, $proper, $broken ); + } + } + + function imgLoadedHandler( event ) { + imgLoaded( event.target, event.type === 'error' ); + } + + function imgLoaded( img, isBroken ) { + // don't proceed if BLANK image, or image is already loaded + if ( img.src === BLANK || $.inArray( img, loaded ) !== -1 ) { + return; + } + + // store element in loaded images array + loaded.push( img ); + + // keep track of broken and properly loaded images + if ( isBroken ) { + broken.push( img ); + } else { + proper.push( img ); + } + + // cache image and its state for future calls + $.data( img, 'imagesLoaded', { + isBroken: isBroken, + src: img.src + } ); + + // trigger deferred progress method if present + if ( hasNotify ) { + deferred.notifyWith( $(img), [ isBroken, $images, $(proper), $(broken) ] ); + } + + // call doneLoading and clean listeners if all images are loaded + if ( $images.length === loaded.length ) { + setTimeout( doneLoading ); + $images.unbind( '.imagesLoaded', imgLoadedHandler ); + } + } + + // if no images, trigger immediately + if ( !$images.length ) { + doneLoading(); + } else { + $images.bind( 'load.imagesLoaded error.imagesLoaded', imgLoadedHandler ) + .each( function( i, el ) { + var src = el.src; + + // find out if this image has been already checked for status + // if it was, and src has not changed, call imgLoaded on it + var cached = $.data( el, 'imagesLoaded' ); + if ( cached && cached.src === src ) { + imgLoaded( el, cached.isBroken ); + return; + } + + // if complete is true and browser supports natural sizes, try + // to check for image status manually + if ( el.complete && el.naturalWidth !== undefined ) { + imgLoaded( el, el.naturalWidth === 0 || el.naturalHeight === 0 ); + return; + } + + // cached images don't fire load sometimes, so we reset src, but only when + // dealing with IE, or image is complete (loaded) and failed manual check + // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f + if ( el.readyState || el.complete ) { + el.src = BLANK; + el.src = src; + } + }); + } + + return deferred ? deferred.promise( $this ) : $this; + }; + +})(jQuery); + +(function () { + Util.init(); + Util.replaceSideEm($(".recent-comments-content")); + Util.buildTags("tagsSide"); + + timeline.init(); })(); \ No newline at end of file diff --git a/timeline/js/timeline.min.js b/timeline/js/timeline.min.js index 7246fc5..92beed9 100644 --- a/timeline/js/timeline.min.js +++ b/timeline/js/timeline.min.js @@ -16,5 +16,5 @@ * @fileoverview timeline js. * * @author Liyuan Li - * @version 1.0.1.0, Jan 30, 2013 - */var timeline={_COLHA:0,_COLHB:20,_initArticleList:function(){var e=$(".articles");if(e.length===0||$(".articles > .fn-clear").length>0)return;$(window).resize(function(){var t=[timeline._COLHA,timeline._COLHB];e.find("article").each(function(){var e=$(this),n=t[1]>t[0],r=n?t[0]:t[1];!e.hasClass("r")&&!e.hasClass("l")&&(e.css({top:r+"px",position:"absolute"}),n?this.className="l":this.className="r"),t[n?"0":"1"]+=parseInt(e.outerHeight(!0))}),e.height(t[0]>t[1]?t[0]:t[1])}),setTimeout(function(){$(window).resize()},500)},_initIndexList:function(){var e=$(".articles > .fn-clear");if(e.length===0)return;var t=0;$(".nav-abs li").each(function(e){var n=$(this);n.hide(),t!==n.data("year")&&(t=n.data("year"),n.before("
  • "+t+"
    • "))}),$(".article-more").parent().data("count")<=$(".article-more").parent().find("article").length&&$(".article-more").remove(),$(window).resize(function(){e.each(function(){var e=[timeline._COLHA+60,timeline._COLHB*4],t=$(this).find("article");t.length===0?($(this).find("h2").remove(),$(this).css("margin-bottom",0)):(t.each(function(){var t=$(this),n=e[1]>e[0],r=n?e[0]:e[1];!t.hasClass("r")&&!t.hasClass("l")&&(t.css({top:r+"px",position:"absolute"}),n?this.className="l":this.className="r"),e[n?"0":"1"]+=parseInt(t.outerHeight(!0))}),$(this).height(e[0]>e[1]?e[0]:e[1]))})}),setTimeout(function(){$(window).resize()},500)},_setNavCurrent:function(){$(".header li a").each(function(){$(this).prop("href")===location.href.split("#")[0]?this.className="current":this.className=""})},init:function(){$(window).scroll(function(){$(window).scrollTop()>60?$(".ico-top").show():$(".ico-top").hide()}),timeline._initIndexList(),timeline._initArticleList(),timeline._setNavCurrent()},translate:function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)},getArchive:function(e,t,n){var r=e+t,i=e+"/"+t;window.location.hash="#"+r;if($("#"+r+" > article").length===0){var s=e+" "+Label.yearLabel+" "+t+" "+Label.monthLabel;Label.localeString.substring(0,2)==="en"&&(s=n+" "+e);var o='

    '+s+"

    "+'
    '+Label.moreLabel+"
    ";$("#"+r).html(o).css("margin-bottom","50px"),timeline.getNextPage($("#"+r).find(".article-more")[0],i)}},getNextPage:function(e,t){var n=$(e),r=n.data("page")+1,i="/articles/";if($("#tag").length===1){var s=location.pathname.split("/");i="/articles/tags/"+s[s.length-1]+"/"}else if($("#author").length===1){var s=location.pathname.split("/");i="/articles/authors/"+s[s.length-1]+"/"}else t&&(i="/articles/archives/"+t+"/");$.ajax({url:latkeConfig.servePath+i+r,type:"GET",beforeSend:function(){n.css("background","url("+latkeConfig.staticServePath+"/skins/timeline/images/ajax-loader.gif) no-repeat scroll center center #60829F").text("")},success:function(e,t){if(!e.sc){n.css("background","none #60829F").text("Error");return}if(e.rslts.articles.length===0){n.remove();return}var i="",s=e.rslts.pagination;for(var o=0;o

    '+u.articleTitle+"",u.hasUpdated&&(i+=""+Label.updatedLabel+""),u.articlePutTop&&(i+=""+Label.topArticleLabel+""),i+="

    "+u.articleAbstract+"

    "+'';var a=u.articleTags.split(",");for(var f=0;f'+a[f]+"",f '+' '+(u.articleCommentCount===0?Label.noCommentLabel:u.articleCommentCount)+' '+''+u.articleViewCount+"
    "}n.before(i).data("page",r),s.paginationPageCount<=r?n.remove():n.css("background","none #60829F").text(Label.moreLabel),setTimeout(function(){$(window).resize()},500)}})},toggleArchives:function(e,t){$(".nav-abs li").each(function(n){var r=$(this);r.hasClass("year")||(r.hide(),t===r.data("year")&&$(e).hasClass("close")&&r.show())}),$(".nav-abs li.year").each(function(){parseInt($(this).text())===t?$(e).hasClass("close")?e.className="year open":e.className="year close":this.className="year close"})}};(function(){Util.init(),Util.replaceSideEm($(".recent-comments-content")),Util.buildTags("tagsSide"),timeline.init()})(); \ No newline at end of file + * @version 1.0.1.1, Feb 20, 2013 + */var timeline={_COLHA:0,_COLHB:20,_initArticleList:function(){var e=$(".articles");if(e.length===0||$(".articles > .fn-clear").length>0)return;$(window).resize(function(){var t=[timeline._COLHA,timeline._COLHB];e.find("article").each(function(){var e=$(this),n=t[1]>t[0],r=n?t[0]:t[1];parseInt(e.css("top"))!==r&&(e.css({top:r+"px",position:"absolute"}),n?this.className="l":this.className="r"),t[n?"0":"1"]+=parseInt(e.outerHeight(!0))}),e.height(t[0]>t[1]?t[0]:t[1])}),$(window).resize(),$(".module img").imagesLoaded(function(){$(window).resize()})},_initIndexList:function(){var e=$(".articles > .fn-clear");if(e.length===0)return;var t=0;$(".nav-abs li").each(function(e){var n=$(this);n.hide(),t!==n.data("year")&&(t=n.data("year"),n.before("
  • "+t+"
    • "))}),$(".article-more").parent().data("count")<=$(".article-more").parent().find("article").length&&$(".article-more").remove(),$(window).resize(function(){console.log("resize"),e.each(function(){var e=[timeline._COLHA+60,timeline._COLHB*4],t=$(this).find("article");t.length===0?($(this).find("h2").remove(),$(this).css("margin-bottom",0)):(t.each(function(){var t=$(this),n=e[1]>e[0],r=n?e[0]:e[1];parseInt(t.css("top"))!==r&&(console.log(r),t.css({top:r+"px",position:"absolute"}),n?this.className="l":this.className="r"),e[n?"0":"1"]+=parseInt(t.outerHeight(!0))}),$(this).height(e[0]>e[1]?e[0]:e[1]))})}),$(window).resize(),$(".module img").imagesLoaded(function(){$(window).resize()})},_setNavCurrent:function(){$(".header li a").each(function(){$(this).prop("href")===location.href.split("#")[0]?this.className="current":this.className=""})},init:function(){$(window).scroll(function(){$(window).scrollTop()>60?$(".ico-top").show():$(".ico-top").hide()}),timeline._initIndexList(),timeline._initArticleList(),timeline._setNavCurrent()},translate:function(){window.open("http://translate.google.com/translate?sl=auto&tl=auto&u="+location.href)},getArchive:function(e,t,n){var r=e+t,i=e+"/"+t;window.location.hash="#"+r;if($("#"+r+" > article").length===0){var s=e+" "+Label.yearLabel+" "+t+" "+Label.monthLabel;Label.localeString.substring(0,2)==="en"&&(s=n+" "+e);var o='

    '+s+"

    "+'
    '+Label.moreLabel+"
    ";$("#"+r).html(o).css("margin-bottom","50px"),timeline.getNextPage($("#"+r).find(".article-more")[0],i)}},getNextPage:function(e,t){var n=$(e),r=n.data("page")+1,i="/articles/";if($("#tag").length===1){var s=location.pathname.split("/");i="/articles/tags/"+s[s.length-1]+"/"}else if($("#author").length===1){var s=location.pathname.split("/");i="/articles/authors/"+s[s.length-1]+"/"}else t&&(i="/articles/archives/"+t+"/");$.ajax({url:latkeConfig.servePath+i+r,type:"GET",beforeSend:function(){n.css("background","url("+latkeConfig.staticServePath+"/skins/timeline/images/ajax-loader.gif) no-repeat scroll center center #60829F").text("")},success:function(e,t){if(!e.sc){n.css("background","none #60829F").text("Error");return}if(e.rslts.articles.length===0){n.remove();return}var i="",s=e.rslts.pagination;for(var o=0;o

    '+u.articleTitle+"",u.hasUpdated&&(i+=""+Label.updatedLabel+""),u.articlePutTop&&(i+=""+Label.topArticleLabel+""),i+="

    "+u.articleAbstract+"

    "+'';var a=u.articleTags.split(",");for(var f=0;f'+a[f]+"",f '+' '+(u.articleCommentCount===0?Label.noCommentLabel:u.articleCommentCount)+' '+''+u.articleViewCount+"
    "}n.before(i).data("page",r),s.paginationPageCount<=r?n.remove():n.css("background","none #60829F").text(Label.moreLabel),$(window).resize(),$(".module img").imagesLoaded(function(){$(window).resize()})}})},toggleArchives:function(e,t){$(".nav-abs li").each(function(n){var r=$(this);r.hasClass("year")||(r.hide(),t===r.data("year")&&$(e).hasClass("close")&&r.show())}),$(".nav-abs li.year").each(function(){parseInt($(this).text())===t?$(e).hasClass("close")?e.className="year open":e.className="year close":this.className="year close"})}};(function(e,t){"use strict";var n="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";e.fn.imagesLoaded=function(r){function c(){var t=e(f),n=e(l);s&&(l.length?s.reject(u,t,n):s.resolve(u)),e.isFunction(r)&&r.call(i,u,t,n)}function h(e){p(e.target,e.type==="error")}function p(t,r){if(t.src===n||e.inArray(t,a)!==-1)return;a.push(t),r?l.push(t):f.push(t),e.data(t,"imagesLoaded",{isBroken:r,src:t.src}),o&&s.notifyWith(e(t),[r,u,e(f),e(l)]),u.length===a.length&&(setTimeout(c),u.unbind(".imagesLoaded",h))}var i=this,s=e.isFunction(e.Deferred)?e.Deferred():0,o=e.isFunction(s.notify),u=i.find("img").add(i.filter("img")),a=[],f=[],l=[];return e.isPlainObject(r)&&e.each(r,function(e,t){e==="callback"?r=t:s&&s[e](t)}),u.length?u.bind("load.imagesLoaded error.imagesLoaded",h).each(function(r,i){var s=i.src,o=e.data(i,"imagesLoaded");if(o&&o.src===s){p(i,o.isBroken);return}if(i.complete&&i.naturalWidth!==t){p(i,i.naturalWidth===0||i.naturalHeight===0);return}if(i.readyState||i.complete)i.src=n,i.src=s}):c(),s?s.promise(i):i}})(jQuery),function(){Util.init(),Util.replaceSideEm($(".recent-comments-content")),Util.buildTags("tagsSide"),timeline.init()}(); \ No newline at end of file