This commit is contained in:
Van 2019-03-22 18:02:41 +08:00
parent 034e929f62
commit 3ca8f083f2
No known key found for this signature in database
GPG Key ID: 7059B8783A78F16C
6 changed files with 65 additions and 35 deletions

View File

@ -84,7 +84,11 @@
</#if>
</div>
</div>
<div class="post__toc"></div>
<div class="post__toc">
<#if article?? && article.articleToC?? && article.articleToC?size &gt; 0>
<#include "../../common-template/toc.ftl"/>
</#if>
</div>
<div class="body--gray post__gray">
<div class="wrapper comment">
<@comments commentList=articleComments article=article></@comments>

File diff suppressed because one or more lines are too long

View File

@ -19,11 +19,12 @@
* skin style
*
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
* @version 0.1.0.3, Mar 16, 2019
* @version 0.2.0.0, Mar 22, 2019
*/
@import "../../../scss/reset";
@import "../../../scss/function";
@import "../../../scss/nprogress";
@import "../../../scss/toc";
@import "icon";
@import "vditor/src/assets/scss/classic";
@ -34,6 +35,12 @@ $gray: #5f5f5f !default;
$gray-lighter: #e0e0e0 !default;
$gray-lightest: #f7f7f7 !default;
.user__site {
display: inline-block;
margin: 40px 5px 0;
height: 20px;
}
body {
display: flex;
flex-direction: column;
@ -64,9 +71,6 @@ a:active, a:focus, a:hover {
.vditor-reset {
font-size: 14px;
.b3-solo-list {
display: none;
}
a {
color: $black;
@ -239,8 +243,8 @@ a:active, a:focus, a:hover {
}
&__nav {
text-align: center;
height: 65px;
line-height: 65px;
height: 95px;
line-height: 95px;
a {
padding: 0 25px;
}
@ -522,37 +526,21 @@ a:active, a:focus, a:hover {
display: none;
}
.b3-solo-list {
.article__toc {
overflow: initial;
border-left: 1px solid $gray-lighter;
margin: 0;
font-size: 14px;
line-height: 24px;
li.current a {
color: $red;
}
a {
display: block;
margin-top: -24px;
}
}
.b3-solo-list-h2,
.b3-solo-list-h4,
.b3-solo-list-h5,
.b3-solo-list-h3 {
margin-left: 0;
}
.b3-solo-list-h2 a {
margin-left: 10px;
}
.b3-solo-list-h3 a {
margin-left: 20px;
}
.b3-solo-list-h4 a {
margin-left: 30px;
}
.b3-solo-list-h5 a {
margin-left: 40px;
}
li {
&:before {
position: relative;
@ -563,6 +551,8 @@ a:active, a:focus, a:hover {
height: 7px;
content: '';
border-radius: 50%;
}
&.current:before {
background-color: $red;
}
}

View File

@ -18,6 +18,10 @@
-->
<footer class="footer">
<#include "../../common-template/macro-user_site.ftl"/>
<div class="ft__center">
<@userSite dir="n"/>
</div>
<nav class="footer__nav mobile__none">
<#list pageNavigations as page>
<a class="ft__link" href="${page.pagePermalink}" target="${page.pageOpenTarget}" rel="section">

View File

@ -55,6 +55,8 @@ var Skin = {
this.className = 'current'
}
})
Skin._initToc()
})
$('.header__nav a').each(function () {
@ -69,20 +71,50 @@ var Skin = {
})
},
_initToc: function () {
if ($('.vditor-reset .b3-solo-list li').length === 0 || $(window).width() < 746) {
$('.post__toc .b3-solo-list').remove()
if ($('.article__toc').length === 0) {
return
}
$('.post__toc').css('left', $('.post').offset().left + $('.post').outerWidth())
$('.post__toc').html($('.b3-solo-list')).css('left', $('.post').offset().left + $('.post').outerWidth())
var $articleTocs = $('.vditor-reset [id^=b3_solo_h]'),
$articleToc = $('.article__toc');
$(window).unbind('scroll').scroll(function (event) {
if ($('.article__toc li').length === 0) {
return false;
}
$(window).scroll(function () {
if ($(window).scrollTop() > 72) {
$('.post__toc').show()
} else {
$('.post__toc').hide()
return
}
})
// 界面各种图片加载会导致帖子目录定位
var toc = [];
$articleTocs.each(function (i) {
toc.push({
id: this.id,
offsetTop: this.offsetTop
});
});
// 当前目录样式
var scrollTop = $(window).scrollTop();
for (var i = 0, iMax = toc.length; i < iMax; i++) {
if (scrollTop < toc[i].offsetTop - 20) {
$articleToc.find('li').removeClass('current');
var index = i > 0 ? i - 1 : 0;
$articleToc.find('a[href="#' + toc[index].id + '"]').parent().addClass('current');
break;
}
}
if (scrollTop >= toc[toc.length - 1].offsetTop - 20) {
$articleToc.find('li').removeClass('current');
$articleToc.find('li:last').addClass('current');
}
});
$(window).scroll()
},

View File

@ -1 +1 @@
var Skin={init:function(){new Headroom($("header")[0],{tolerance:0,offset:70,classes:{initial:"header",pinned:"header--down",unpinned:"header--up",top:"header",notTop:"header",bottom:"header",notBottom:"header"}}).init(),Util.initPjax(function(){0===$(".post__fix").length?$("body").addClass("body--gray"):$("body").removeClass("body--gray"),$(".header__nav a").each(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})}),$(".header__nav a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})},_initToc:function(){0===$(".vditor-reset .b3-solo-list li").length||$(window).width()<746?$(".post__toc .b3-solo-list").remove():($(".post__toc").html($(".b3-solo-list")).css("left",$(".post").offset().left+$(".post").outerWidth()),$(window).scroll(function(){72<$(window).scrollTop()?$(".post__toc").show():$(".post__toc").hide()}),$(window).scroll())},_initShare:function(){var t=$(".post__share"),e=t.find(".post__code"),o=e.data("url"),i=e.data("avatar"),n=encodeURIComponent(e.data("title")+" - "+e.data("blogtitle")),a=encodeURIComponent(o),s={};s.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+a+"&pic="+i,s.qqz="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+a+"&sharesource=qzone&title="+n+"&pics="+i,s.twitter="https://twitter.com/intent/tweet?status="+n+" "+a,t.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===e.find("canvas").length?$.ajax({method:"GET",url:Label.staticServePath+"/js/lib/jquery.qrcode.min.js",dataType:"script",cache:!0,success:function(){e.qrcode({width:128,height:128,text:o})}}):e.find("canvas").slideToggle(),!1):void window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})},initArticle:function(){new Headroom($(".post__fix")[0],{tolerance:0,offset:48,classes:{initial:"post__fix",pinned:"post__fix--pinned",unpinned:"post__fix--unpinned",top:"post__fix",notTop:"post__fix",bottom:"post__fix",notBottom:"post__fix"}}).init(),Skin._initShare(),Skin._initToc()}};Skin.init();
var Skin={init:function(){new Headroom($("header")[0],{tolerance:0,offset:70,classes:{initial:"header",pinned:"header--down",unpinned:"header--up",top:"header",notTop:"header",bottom:"header",notBottom:"header"}}).init(),Util.initPjax(function(){0===$(".post__fix").length?$("body").addClass("body--gray"):$("body").removeClass("body--gray"),$(".header__nav a").each(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})}),$(".header__nav a").each(function(){this.href===location.href&&(this.className="current")}).click(function(){$(".header__nav a").removeClass("current"),this.href===location.href&&(this.className="current")})},_initToc:function(){0===$(".vditor-reset .article__toc li").length||$(window).width()<746?$(".post__toc .article__toc").remove():($(".post__toc").html($(".article__toc")).css("left",$(".post").offset().left+$(".post").outerWidth()),$(window).scroll(function(){72<$(window).scrollTop()?$(".post__toc").show():$(".post__toc").hide()}),$(window).scroll())},_initShare:function(){var t=$(".post__share"),e=t.find(".post__code"),o=e.data("url"),i=e.data("avatar"),n=encodeURIComponent(e.data("title")+" - "+e.data("blogtitle")),a=encodeURIComponent(o),s={};s.weibo="http://v.t.sina.com.cn/share/share.php?title="+n+"&url="+a+"&pic="+i,s.qqz="https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url="+a+"&sharesource=qzone&title="+n+"&pics="+i,s.twitter="https://twitter.com/intent/tweet?status="+n+" "+a,t.find("span").click(function(){var t=$(this).data("type");if(t)return"wechat"===t?(0===e.find("canvas").length?$.ajax({method:"GET",url:Label.staticServePath+"/js/lib/jquery.qrcode.min.js",dataType:"script",cache:!0,success:function(){e.qrcode({width:128,height:128,text:o})}}):e.find("canvas").slideToggle(),!1):void window.open(s[t],"_blank","top=100,left=200,width=648,height=618")})},initArticle:function(){new Headroom($(".post__fix")[0],{tolerance:0,offset:48,classes:{initial:"post__fix",pinned:"post__fix--pinned",unpinned:"post__fix--unpinned",top:"post__fix",notTop:"post__fix",bottom:"post__fix",notBottom:"post__fix"}}).init(),Skin._initShare(),Skin._initToc()}};Skin.init();