Commit 97c20e04 authored by Van's avatar Van

🎇 fixed #12255

parent 187e8f7f
...@@ -18,7 +18,7 @@ ...@@ -18,7 +18,7 @@
* skin style * skin style
* *
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a> * @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.1.0, Feb 18, 2017 * @version 0.2.1.0, Mar 14, 2017
*/ */
/* start common */ /* start common */
html { html {
...@@ -574,10 +574,6 @@ a[class*=" icon-"]:hover { ...@@ -574,10 +574,6 @@ a[class*=" icon-"]:hover {
background-position: -96px -48px; background-position: -96px -48px;
} }
.b3-solo-list {
display: none;
}
#commentForm, #commentForm,
#replyForm { #replyForm {
width: 100%; width: 100%;
...@@ -944,6 +940,30 @@ aside .tag.tooltipped { ...@@ -944,6 +940,30 @@ aside .tag.tooltipped {
margin-right: 10px; margin-right: 10px;
line-height: 22px; line-height: 22px;
} }
aside.has-toc > ul > li {
list-style: none;
float: left;
width: 50%;
margin: 0;
cursor: pointer;
line-height: 18px;
font-size: 16px;
text-align: center;
font-weight: 400;
}
aside.has-toc ul > li.current {
color: #ff4d3a;
}
aside .b3-solo-list {
font-size: 14px;
}
aside.has-toc > section:last-child {
margin-top: 20px;
}
/* end side */ /* end side */
/* start article list */ /* start article list */
......
...@@ -72,20 +72,22 @@ var Skin = { ...@@ -72,20 +72,22 @@ var Skin = {
$('.responsive .list').slideToggle(); $('.responsive .list').slideToggle();
}); });
}, },
_initArticleCommon: function () { _initArticleCommon: function (tocLabel, siteViewLabel) {
// TOC // TOC
if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) { if ($('.b3-solo-list li').length > 0 && $(window).width() > 1000) {
// add color to sidebar menu // add color to sidebar menu
$('.sidebar-toggle').addClass('has-toc'); $('aside').addClass('has-toc');
// append toc to sidebar menu // append toc to sidebar menu
var articleTocHTML = '<ul><li class="current" data-tab="toc">' + Label.tocLabel + '</li><li data-tab="site">' + Label.siteViewLabel + '</li></ul><section></section>'; var articleTocHTML = '<ul class="fn-clear"><li class="current" data-tab="toc">' + tocLabel
$('.sidebar').prepend(articleTocHTML); + '</li><li data-tab="site">' + siteViewLabel + '</li></ul><section></section>';
var $sectionF = $('.sidebar section:first').html($('.b3-solo-list')), $('aside').prepend(articleTocHTML);
$sectionL = $('.sidebar section:last'); var $sectionF = $('aside section:first').html($('.b3-solo-list')),
$sectionF.height($(window).height() - 90); $sectionL = $('aside section:last');
$sectionF.height($(window).height() - 154).css({ 'overflow': 'auto', 'width': $('aside').width() + 'px'});
$sectionL.hide();
// 切换 tab // 切换 tab
$('.sidebar > ul > li').click(function () { $('aside > ul > li').click(function () {
if ($(this).data('tab') === 'toc') { if ($(this).data('tab') === 'toc') {
$sectionL.animate({ $sectionL.animate({
"opacity": '0', "opacity": '0',
...@@ -95,7 +97,7 @@ var Skin = { ...@@ -95,7 +97,7 @@ var Skin = {
$sectionF.animate({ $sectionF.animate({
"opacity": '1', "opacity": '1',
"top": '0' "top": '0'
}, 300); }, 300).show();
}); });
} else { } else {
$sectionF.animate({ $sectionF.animate({
...@@ -106,16 +108,31 @@ var Skin = { ...@@ -106,16 +108,31 @@ var Skin = {
$sectionL.animate({ $sectionL.animate({
"opacity": '1', "opacity": '1',
"top": '0' "top": '0'
}, 300); }, 300).show();
}); }).hide();
} }
$('.sidebar > ul > li').removeClass('current'); $('aside > ul > li').removeClass('current');
$(this).addClass('current'); $(this).addClass('current');
}); });
$(window).scroll(function () {
if ($(window).scrollTop() > 125) {
$('aside section:eq(0)').css({
position: "fixed",
top: "51px",
backgroundColor: "#fff"
})
} else {
$('aside section:eq(0)').css({
position: "inherit",
borderLeft: 0
})
}
});
} }
}, },
initArticle: function () { initArticle: function (tocLabel, siteViewLabel) {
this._initArticleCommon(); this._initArticleCommon(tocLabel, siteViewLabel);
} }
}; };
Skin.init(); Skin.init();
\ No newline at end of file
...@@ -13,4 +13,4 @@ ...@@ -13,4 +13,4 @@
* See the License for the specific language governing permissions and * See the License for the specific language governing permissions and
* limitations under the License. * limitations under the License.
*/ */
var Skin={_initCommon:function(i){$("body").on("click",".content-reset img",function(){window.open(this.src)});var t=$("header .banner"),n=$("header .navbar");$(window).scroll(function(){return $(window).scrollTop()>125?i.show():i.hide(),!($(window).width()<701)&&void($(window).scrollTop()>t.height()?(n.addClass("pin"),$(".main-wrap").parent().css("margin-top","86px")):(n.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0")))})},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},_initArticleCommon:function(){if($(".b3-solo-list li").length>0&&$(window).width()>1e3){$(".sidebar-toggle").addClass("has-toc");var i='<ul><li class="current" data-tab="toc">'+Label.tocLabel+'</li><li data-tab="site">'+Label.siteViewLabel+"</li></ul><section></section>";$(".sidebar").prepend(i);var t=$(".sidebar section:first").html($(".b3-solo-list")),n=$(".sidebar section:last");t.height($(window).height()-90),$(".sidebar > ul > li").click(function(){"toc"===$(this).data("tab")?n.animate({opacity:"0",top:"-50px"},300,function(){t.show().css("top","-50px"),t.animate({opacity:"1",top:"0"},300)}):t.animate({opacity:"0",top:"-50px"},300,function(){t.hide().css("top","-50px"),n.animate({opacity:"1",top:"0"},300)}),$(".sidebar > ul > li").removeClass("current"),$(this).addClass("current")})}},initArticle:function(){this._initArticleCommon()}};Skin.init(); var Skin={_initCommon:function(i){$("body").on("click",".content-reset img",function(){window.open(this.src)});var t=$("header .banner"),n=$("header .navbar");$(window).scroll(function(){return $(window).scrollTop()>125?i.show():i.hide(),!($(window).width()<701)&&void($(window).scrollTop()>t.height()?(n.addClass("pin"),$(".main-wrap").parent().css("margin-top","86px")):(n.removeClass("pin"),$(".main-wrap").parent().css("margin-top","0")))})},init:function(){this._initCommon($(".icon-up")),$(".navbar nav a").each(function(){this.href===location.href&&(this.className="current")}),$(".responsive .list a").each(function(){this.href===location.href&&$(this).parent().addClass("current")}),$(".responsive .icon-list").click(function(){$(".responsive .list").slideToggle()})},_initArticleCommon:function(i,t){if($(".b3-solo-list li").length>0&&$(window).width()>1e3){$("aside").addClass("has-toc");var n='<ul class="fn-clear"><li class="current" data-tab="toc">'+i+'</li><li data-tab="site">'+t+"</li></ul><section></section>";$("aside").prepend(n);var o=$("aside section:first").html($(".b3-solo-list")),s=$("aside section:last");o.height($(window).height()-154).css({overflow:"auto",width:$("aside").width()+"px"}),s.hide(),$("aside > ul > li").click(function(){"toc"===$(this).data("tab")?s.animate({opacity:"0",top:"-50px"},300,function(){o.show().css("top","-50px"),o.animate({opacity:"1",top:"0"},300).show()}):o.animate({opacity:"0",top:"-50px"},300,function(){o.hide().css("top","-50px"),s.animate({opacity:"1",top:"0"},300).show()}).hide(),$("aside > ul > li").removeClass("current"),$(this).addClass("current")}),$(window).scroll(function(){$(window).scrollTop()>125?$("aside section:eq(0)").css({position:"fixed",top:"51px",backgroundColor:"#fff"}):$("aside section:eq(0)").css({position:"inherit",borderLeft:0})})}},initArticle:function(i,t){this._initArticleCommon(i,t)}};Skin.init();
\ No newline at end of file \ No newline at end of file
File mode changed from 100755 to 100644
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
# #
# Description: B3log Solo language configurations(en_US). # Description: B3log Solo language configurations(en_US).
# Version: 1.0.0.0, Feb 17, 2017 # Version: 1.1.0.0, Mar 14, 2017
# Author: Liyuan Li # Author: Liyuan Li
# #
siteViewLabel=Site
onlineVisitorLabel=Visitor onlineVisitorLabel=Visitor
tocLabel=Article ToC tocLabel=Article ToC
readLabel=Read More readLabel=Read More
......
...@@ -16,10 +16,11 @@ ...@@ -16,10 +16,11 @@
# #
# Description: B3log Solo default language configurations(zh_CN). # Description: B3log Solo default language configurations(zh_CN).
# Version: 1.0.0.0, Feb 17, 2017 # Version: 1.1.0.0, Mar 14, 2017
# Author: Liyuan Li # Author: Liyuan Li
# #
siteViewLabel=\u7AD9\u70B9\u6982\u8981
onlineVisitorLabel=\u8BBF\u5BA2 onlineVisitorLabel=\u8BBF\u5BA2
tocLabel=\u6587\u7AE0\u76EE\u5F55 tocLabel=\u6587\u7AE0\u76EE\u5F55
readLabel=\u9605\u8BFB\u5168\u6587 readLabel=\u9605\u8BFB\u5168\u6587
......
...@@ -91,7 +91,7 @@ ...@@ -91,7 +91,7 @@
}; };
(function () { (function () {
page.load(); page.load();
Skin.initArticle(); Skin.initArticle("${tocLabel}", "${siteViewLabel}");
// emotions // emotions
page.replaceCommentsEm("#comments .comment-content"); page.replaceCommentsEm("#comments .comment-content");
<#nested> <#nested>
......
<aside> <aside>
<#if noticeBoard??> <section>
<div class="ad content-reset"> <#if noticeBoard??>
${noticeBoard} <div class="ad content-reset">
</div> ${noticeBoard}
</#if>
<#if 0 != mostUsedTags?size>
<div class="module">
<header><h2>${popTagsLabel}</h2></header>
<main>
<#list mostUsedTags as tag>
<a rel="tag" title="${tag.tagTitle}(${tag.tagPublishedRefCount})"
href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
class="tag tooltipped tooltipped-n" aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}">
${tag.tagTitle}</a>
</#list>
</main>
</div>
</#if>
<div class="module meta">
<header>
<h2>${adminUser.userName}</h2>
</header>
<main class="fn-clear">
<img src="${adminUser.userAvatar}" aria-label="${adminUser.userName}"/>
<div class="fn-right">
<a href="${servePath}/archives.html">
${statistic.statisticPublishedBlogArticleCount}
<span class="ft-gray">${articleLabel}</span></a><br/>
<a href="${servePath}/dynamic.html">
${statistic.statisticPublishedBlogCommentCount}
<span class="ft-gray">${commentLabel}</span></a><br/>
${statistic.statisticBlogViewCount} <span class="ft-gray">${viewLabel}</span><br/>
${onlineVisitorCnt} <span class="ft-gray">${onlineVisitorLabel}</span>
</div> </div>
</main> </#if>
</div>
<#if 0 != mostCommentArticles?size> <#if 0 != mostUsedTags?size>
<div class="module"> <div class="module">
<header><h2>${mostCommentArticlesLabel}</h2></header> <header><h2>${popTagsLabel}</h2></header>
<main class="list"> <main>
<ul> <#list mostUsedTags as tag>
<#list mostCommentArticles as article> <a rel="tag" title="${tag.tagTitle}(${tag.tagPublishedRefCount})"
<li> href="${servePath}/tags/${tag.tagTitle?url('UTF-8')}"
<a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}" class="tag tooltipped tooltipped-n" aria-label="${tag.tagPublishedRefCount} ${countLabel}${articleLabel}">
class="tooltipped tooltipped-e" ${tag.tagTitle}</a>
href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
</li>
</#list> </#list>
</ul> </main>
</main> </div>
</div> </#if>
</#if>
<#if 0 != mostViewCountArticles?size> <div class="module meta">
<div class="module"> <header>
<header><h2>${mostViewCountArticlesLabel}</h2></header> <h2>${adminUser.userName}</h2>
<main class="list"> </header>
<ul> <main class="fn-clear">
<#list mostViewCountArticles as article> <img src="${adminUser.userAvatar}" aria-label="${adminUser.userName}"/>
<li> <div class="fn-right">
<a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}" <a href="${servePath}/archives.html">
class="tooltipped tooltipped-e" ${statistic.statisticPublishedBlogArticleCount}
href="${servePath}${article.articlePermalink}"> <span class="ft-gray">${articleLabel}</span></a><br/>
${article.articleTitle} <a href="${servePath}/dynamic.html">
</a> ${statistic.statisticPublishedBlogCommentCount}
</li> <span class="ft-gray">${commentLabel}</span></a><br/>
</#list> ${statistic.statisticBlogViewCount} <span class="ft-gray">${viewLabel}</span><br/>
</ul> ${onlineVisitorCnt} <span class="ft-gray">${onlineVisitorLabel}</span>
</div>
</main> </main>
</div> </div>
</#if>
<#if 0 != mostCommentArticles?size>
<div class="module">
<header><h2>${mostCommentArticlesLabel}</h2></header>
<main class="list">
<ul>
<#list mostCommentArticles as article>
<li>
<a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}"
class="tooltipped tooltipped-e"
href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
</li>
</#list>
</ul>
</main>
</div>
</#if>
<#if 0 != mostViewCountArticles?size>
<div class="module">
<header><h2>${mostViewCountArticlesLabel}</h2></header>
<main class="list">
<ul>
<#list mostViewCountArticles as article>
<li>
<a rel="nofollow" aria-label="${article.articleCommentCount} ${commentLabel}"
class="tooltipped tooltipped-e"
href="${servePath}${article.articlePermalink}">
${article.articleTitle}
</a>
</li>
</#list>
</ul>
</main>
</div>
</#if>
</section>
</aside> </aside>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment