This commit is contained in:
parent
034e929f62
commit
3ca8f083f2
|
@ -84,7 +84,11 @@
|
|||
</#if>
|
||||
</div>
|
||||
</div>
|
||||
<div class="post__toc"></div>
|
||||
<div class="post__toc">
|
||||
<#if article?? && article.articleToC?? && article.articleToC?size > 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
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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()
|
||||
},
|
||||
|
|
|
@ -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();
|
Loading…
Reference in New Issue