Skip to content

增加目录折叠展开功能 #131

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

增加目录折叠展开功能 #131

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,10 @@ category:
# 快捷键
shortcutKey: true

#WW 是否启用目录展开/折叠功能
toc_collapse:
type: 0 # 0：关闭该功能 1：启用该功能，并默认全部折叠。2：启用该功能，并默认全部展开

# 左下角自定义菜单
menu:
about: # '关于' 按钮
Expand Down
3 changes: 2 additions & 1 deletion layout/_partial/nav-right.ejs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@
<i class="iconfont icon-tag" data-title="标签"></i>
</div>
<div id="outline-panel" style="display: none">
<i class="iconfont icon-file-tree" data-title="展开/收缩全部目录"></i>
<div class="right-title">大纲</div>
<i class="iconfont icon-list" data-title="切换到文章列表"></i>
</div>
Expand All @@ -39,6 +40,6 @@

</div>
</nav>
<div id="outline-list">
<div id="outline-list" toc-collapse-type="<%=theme.toc_collapse.type %>">
</div>
</div>
21 changes: 20 additions & 1 deletion source/css/_partial/nav-right.styl
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ right-top-height = 45px
top: 0
width: 100%
font-size 15px
#default-panel, #outline-panel
#default-panel
text-align center
height right-top-height
.right-title
Expand All @@ -43,6 +43,22 @@ right-top-height = 45px
&.icon-file-tree
right 15px
font-size 18px
#outline-panel
text-align center
height right-top-height
.right-title
height right-top-height
line-height right-top-height
font-size 18px
.iconfont
position absolute
top 50%
transform: translate(0, -50%)
cursor pointer
font-size 16px
&.icon-file-tree
left 15px
font-size 18px
&.icon-list
right 15px
#search-panel
Expand Down Expand Up @@ -210,6 +226,9 @@ right-top-height = 45px
height: 4px
background-color: currentColor
border-radius: 50%
// 折叠目录按钮样式
.toc-collapse-btn
color: #007fff
nav, #local-search-result
clear both
width 100%
Expand Down
90 changes: 90 additions & 0 deletions source/js/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,10 @@ jQuery.expr[':'].contains_author = function (a, i, m) {
var blog_path = $('.theme_blog_path').val();
blog_path= blog_path.lastIndexOf("/") === blog_path.length-1?blog_path.slice(0, blog_path.length-1):blog_path;

//WW 目录栏折叠/展开icon符号
var ICON_TOC_CLOSE = "⯈"; // 参考图标：▷ 》❯ ⯈⯆ ⮟⏷
var ICON_TOC_OPEN = "⯆";

/*使用pjax加载页面，速度更快，交互更友好*/
var content = $(".pjax");
var container = $("#post");
Expand Down Expand Up @@ -463,6 +467,63 @@ function syncOutline(_this) {
}
}

//WW 增加目录收缩按钮
function add_collapse_btn() {
if ($("#outline-list").attr("toc-collapse-type") == 0) {
// 隐藏一键全部展开/折叠按钮
$('#outline-panel > .icon-file-tree').hide();
return
}

// 增加收缩/展开按钮
$("#outline-list .toc-link").each(function () {
var sub_menus = $(this).siblings("ol");
// 是否有子菜单
if (sub_menus.length == 0) {
$(this).prepend($('<span class="toc-collapse-btn">&ensp;&ensp;</span>'))
} else {
var collapse_btn = $("#outline-list").attr("toc-collapse-type") == 1 ?
'<span class="toc-collapse-btn">' + ICON_TOC_CLOSE + '</span>' :
'<span class="toc-collapse-btn">' + ICON_TOC_OPEN + '</span>';

$(this).prepend($(collapse_btn))

// 按钮点击事件，收缩/展开菜单
$(this).children(".toc-collapse-btn").click(function(){
if ($(this).text() == ICON_TOC_OPEN) {
$(this).text(ICON_TOC_CLOSE);
} else {
$(this).text(ICON_TOC_OPEN);
}

$($(this).parent()).siblings("ol").each(function() {
if ($(this).is(":visible")) {
$(this).hide()
} else {
$(this).show()
}

});
return false // 不再往下执行，防止触发文章跳转。因为span是在a里。
});
}

})

// 初始化时默认折叠所有二级及二级以上菜单
if ($("#outline-list").attr("toc-collapse-type") == 1) {
$("#outline-list .toc-child").each(function () {
$(this).hide()
})
} else if ($("#outline-list").attr("toc-collapse-type") == 2) {
$("#outline-list .toc-child").each(function () {
$(this).show()
})
}

}


$(function () {
bind();
$('[data-title]').quberTip({
Expand Down Expand Up @@ -566,6 +627,31 @@ $(function () {
$('#title-list-nav').show()
})

//WW 一键展开/折叠全部菜单
$('#outline-panel > .icon-file-tree').on('click', function (e) {
var is_collapse_all = $(this).attr("toc-collapse-all");

if (is_collapse_all == "0") {
$(this).attr("toc-collapse-all", "1")
$(".toc-child").hide() // 全部折叠

$(".toc-collapse-btn").each(function () {
if ($(this).text() == ICON_TOC_CLOSE || $(this).text() == "⯆") {
$(this).text(ICON_TOC_CLOSE)
}
})

} else {
$(this).attr("toc-collapse-all", "0")
$(".toc-child").show() // 全部展开
$(".toc-collapse-btn").each(function () {
if ($(this).text() == ICON_TOC_CLOSE || $(this).text() == "⯆") {
$(this).text(ICON_TOC_OPEN)
}
})
}
})

$('.nav-left>ul').css('height', 'calc(100vh - '+($('.avatar_target img').outerHeight(true) + $('.author').outerHeight(true)+$('.nav-left .icon').outerHeight(true)+$('.left-bottom').outerHeight(true))+'px)');
if ($('#local-search-result').length>0) {
// 全文搜索
Expand Down Expand Up @@ -701,6 +787,10 @@ function bind() {
});
return false;
});

//WW 增加目录自动折叠功能
add_collapse_btn()

if ($("#comments").hasClass("disqus")) {
var $disqusCount = $(".disqus-comment-count");
$disqusCount.bind("DOMNodeInserted", function (e) {
Expand Down