整个探索的过程断断续续花费了我一些时间，写下这篇文章记录下这个工作的过程，并不复杂，但是有值得以后学习的地方。
问题
-
maupassant主题的目录显示在正文中，一旦目录过长就会严重影响正文的排版。 - 将目录固定在页面上的需求
探索之路
当初选用maupassant主题就是因为其侧栏特别简约实用，如果在打开文章浏览时将目录也放入侧栏内问题不就解决了吗？于是开始扒主题源码，了解侧栏的机制并开始着手制作目录栏。
第一回
- 新建
toc.pug文件在_widgets文件夹下：
.widget
if page.toc
.widget-title
i(class='fa fa-bars')= ' ' + __('contents')
div(id='stoc' class='stoc-article')
!= toc(page.content, {list_number: theme.toc_number})
- 之后在主题配置文件
_config.yml中添加侧栏toc：
widgets:
- toc
- about
- search
- category
- tag
- archivelist
- recent_posts
- links
- 在
style.scss中修改基本样式
.stoc-article {
padding: 0.7em 0.7em 0 0;
}
#stoc {
line-height: 1em;
.toc {
padding: 0;
margin: 0.5em;
line-height: 1.8em;
li {
list-style-type: none;
}
}
.toc-child {
margin-left: 1em;
padding-left: 0;
}
}
- 本地执行
hexo server预览
图源：hushhw.cn
到这里我以为完结撒花啦🎉，当我发布出去后发现并没有显示出来，之后做了判断验证确实是无法显示，这个问题困扰了我很久，为什么if page.toc这句判断失败而本地预览却可以呢？侧栏无法识别当前page吗？
问题搁置了许久，问题没有解决就很闹心，今天在研究博客整体框架时突然想到把目录的配置提前，放到文章生成前的base.pug文件内，以引入的形式引入到post.pug能不能成功呢？
第二回
- 新建
base-post.pug页面（为了避免破坏其他页面的排版），主要代码复制于base.pug，修改的部分如下：
#layout.pure-g
.pure-u-1.pure-u-md-3-4: .content_container
block content
if page.toc != true
.pure-u-1.pure-u-md-1-4: #sidebar
each item in theme.widgets
!= partial('_widget/' + item + '.pug', null, {cache: !config.relative_link})
else
.pure-u-1.pure-u-md-1-4: #posttoc
i(class='fa fa-bars')= ' TOC '
div(id='stoc' class='stoc-article')
!= toc(page.content, {list_number: theme.toc_number})
.pure-u-1.pure-u-md-3-4
!= partial('_partial/footer.pug')
代码进行前面类似的判断，如果当前文章在font-matter设置了toc: true即显示目录，否则显示侧栏。
- 在
style.scss中修改基本样式
#posttoc{
position: fixed;
margin-top: 25px;
}
.stoc-article {
padding: 0.7em 0.7em 0 0;
}
#stoc {
line-height: 1em;
.toc {
padding: 0;
margin: 0.5em;
line-height: 1.8em;
li {
list-style-type: none;
}
}
.toc-child {
margin-left: 1em;
padding-left: 0;
}
}
- 本地预览及推送发布均成功显示，说明这个尝试是可行的，终于算是解决了这个问题：
图源：hushhw.cn
另外，是否可以把目录伪装成侧栏中的一栏呢？
把代码改成如下即可：
#layout.pure-g
.pure-u-1.pure-u-md-3-4: .content_container
block content
if page.toc != true
.pure-u-1.pure-u-md-1-4: #sidebar
each item in theme.widgets
!= partial('_widget/' + item + '.pug', null, {cache: !config.relative_link})
else
.pure-u-1.pure-u-md-1-4: #sidebar
#posttoc
.widget
.widget-title
i(class='fa fa-bars')= ' ' + __('contents')
div(id='stoc' class='stoc-article')
!= toc(page.content, {list_number: theme.toc_number})
each item in theme.widgets
!= partial('_widget/' + item + '.pug', null, {cache: !config.relative_link})
.pure-u-1.pure-u-md-3-4
!= partial('_partial/footer.pug')
把目录的样式改成侧栏，然后在目录后面遍历出侧栏其它栏目。
第三回
继续优化第二个问题固定目录栏并优化移动端隐藏目录栏。
- 增加移动端判断并修改类名等
#layout.pure-g
.pure-u-1.pure-u-md-3-4: .content_container
block content
if page.toc != true
.pure-u-1.pure-u-md-1-4: #sidebar
each item in theme.widgets
!= partial('_widget/' + item + '.pug', null, {cache: !config.relative_link})
else
if theme.toc_on_small_screens
.pure-u-1.pure-u-md-1-4: #sidebar-toc
div(id="sidebar-stoc" class="stoc-article")
strong(class="stoc-title")
i(class='fa fa-blind')= ' Contents '
div(id="stoc" class='toc-nav')
!= toc(page.content, {list_number: theme.toc_number})
else
.pure-u-1-4.hidden_mid_and_down: #sidebar-toc
div(id="sidebar-stoc" class="stoc-article")
strong(class="stoc-title")
i(class='fa fa-blind')= ' Contents '
div(id="stoc" class='toc-nav')
!= toc(page.content, {list_number: theme.toc_number})
.pure-u-1.pure-u-md-3-4
!= partial('_partial/footer.pug')
- 修改样式
#sidebar-toc {
padding-left: 15px;
margin-top: 40px;
padding-bottom: 20px;
word-wrap: break-word;
}
.stoc-article{
position: absolute;
padding: 1em 1em 0 1em;
margin-left: 1em;
border-left: rgba(88,88,88,0.1) 1px solid;
}
.stoc-title{
font-size: 150%;
}
#sidebar-stoc {
width: inherit;
line-height: 1em;
font-size: 0.9em;
float: left;
overflow: auto;
}
.stoc-fixed{
position: fixed;
top: 60px;
margin-top: 0;
max-height: 81%;
overflow: hidden;
z-index: 1;
}
.toc-nav {
padding: 0.7em 0.7em 0 0;
}
#stoc {
line-height: 1em;
.toc {
padding: 0;
margin: 0.5em;
line-height: 1.8em;
li {
list-style-type: none;
}
}
.toc-child {
margin-left: 1em;
padding-left: 0;
}
}
- 添加
toc.js文件放在source/js文件夹中
var toc = document.getElementById('sidebar-stoc')
if (toc != null) {
window.addEventListener("scroll", scrollcatelogHandler);
var tocPosition = toc.offsetTop;
var height_header = $("#header").height();
function scrollcatelogHandler(e) {
var event = e || window.event,
target = event.target || event.srcElement;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > tocPosition -60) {
toc.classList.add("stoc-fixed");
} else {
toc.classList.remove("stoc-fixed");
}
}
}
就是现在正在使用的样式啦！
总结
基本实现了预期功能，前后折腾了很长时间，但是这种心想事成的感觉还是很nice的呢！
后面如果有新的bug再慢慢解决吧。
更新2019.2.17
点击无法跳转，我枯了。。。
多方查找原因终于找到了根源，居然是因为aplayer播放器与toc不兼容，要是没有看到别人的文章我感觉一辈子都解决不了这个问题了。
于是把播放器配置设置开关在font-matter中，在需要使用音乐播放器的页面才设为music: true，其它用到目录的页面关闭使用。
网友评论