搜索

yilia主题目录优化

 字数 1.5k 

记得之前在yilia主题常见问题及解决办法下文章中解决了移动端不显示目录的问题
这篇文章分享一下自己优化yilia主题目录的代码，主要体现在以下几个方面：
1.通过jquery封装的animate()锚点跳转方法替换主题自带的a标签跳转，解决添加aplayer播放器可能出现的锚点跳转失效问题
2.实现浏览器根据当前页面位置实时更新页面url（需手动设置生效）
3.目录随着页面位置滚动，实现动态目录

  • 更新：
    • Hexo 5.0.0 Released 可能导致目录锚点跳转失效的解决办法
      • 近期，更新hexo5.0，发现本篇文章介绍的目录锚点跳转功能已失效，控制台提示Uncaught Error错误，发现依然是url转码导致
      • 解决办法：对toToc()函数中$(this).attr('href')修改为decodeURI($(this).attr('href'))，即添加decodeURI()函数
      • 对currentActive.attr('href')添加decodeURI()函数，即decodeURI(currentActive.attr('href'))
    • 动态目录失效
      • hexo5.0，对目录a标签href内容添加encodeURI()函数进行编码，使动态目录失效
      • 解决办法：将$('.toc-link[href="' + currentId + '"]')中currentId添加编码函数encodeURI()，即$('.toc-link[href="' + encodeURI(currentId) + '"]')
        • 注意：此方法可能不适用所有hexo版本，取决于hexo是否对目录a标签href内容添加encodeURI()函数进行编码

效果参看本博客

参考资料

参考hexo-theme-butterfly主题实现动态目录功能，在此表示感谢
因为主题目录布局不同，没有在yilia主题目录上实现页面当前位置百分比（你已经读了%）
感觉没有必要，因为yilia主题的目录是鼠标悬停显示的，不同于其它主题那样固定在页面的某个位置，显示页面当前所在目录位置很有必要

代码实现

此代码基于jquery实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
/*
toc目录优化，jq实现锚点跳转
*/
// 隐藏子目录
$('.toc-child').hide()
// 目录锚点跳转
$('.toc-link').on('click', function (e) {
    e.preventDefault()
    toToc($(this).attr('href'))
})
function toToc (name) {
  //pc锚点跳转
  var scrollPositionTop = $(name).position().top+50
  $('#container').animate({
    scrollTop: scrollPositionTop
  },1000)
  //mobile锚点跳转
  var scrollOffset = $(name).offset()
  $('body,html').animate({
    scrollTop: scrollOffset.top-50
  })
};
// 更新锚点url
var isanchor = yiliaConfig.anchor
var updateAnchor = function (anchor) {
  if (window.history.replaceState && anchor !== window.location.hash) {
    window.history.replaceState(undefined, undefined, anchor)
  }
}
// 显示子目录
var expandToc = function ($item) {
  if ($item.is(':visible')) {
    return
  }
  $item.fadeIn(400)
}
// 目录滚动
var autoScrollToc = function () {
  if ($('.toc-link').hasClass('active')) {
    var activePosition = $('.active').position().top
    var articleScrolltop = $('.tooltip-content .toc-article').scrollTop()
    if (activePosition > $('.tooltip-content .toc-article').height()-50) {
      $('.tooltip-content .toc-article').scrollTop(articleScrolltop + 150)
    }
    if (activePosition < 50) {
      $('.tooltip-content .toc-article').scrollTop(articleScrolltop - 150)
    }
  }
}
// pc动态目录
$('#container').scroll(function() {
  var currentTop = $(this).scrollTop()
  findPcHeadPosition(currentTop)
  autoScrollToc()
})
// find head position & add active class
// DOM Hierarchy:
// ol.toc > (li.toc-item, ...)
// li.toc-item > (a.toc-link, ol.toc-child > (li.toc-item, ...))
var findPcHeadPosition = function (top) {
// assume that we are not in the post page if no TOC link be found,
// thus no need to update the status
  if ($('.toc-link').length === 0) {
    return false
  }
  var list = $('.article-entry').find('h1,h2,h3,h4,h5,h6')
  var currentId = ''
  list.each(function () {
    var head = $(this)
    if (top > head.position().top) {
      currentId = '#' + $(this).attr('id')
    }
  })

  if (currentId === '') {
    $('.toc-link').removeClass('active')
    $('.toc-child').hide()
  }

  var currentActive = $('.toc-link.active')
  if (currentId && currentActive.attr('href') !== currentId) {
    if (isanchor) updateAnchor(currentId)

    $('.toc-link').removeClass('active')

    var _this = $('.toc-link[href="' + currentId + '"]')
    _this.addClass('active')

    var parents = _this.parents('.toc-child')
    // Returned list is in reverse order of the DOM elements
    // Thus `parents.last()` is the outermost .toc-child container
    // i.e. list of subsections
    var topLink = (parents.length > 0) ? parents.last() : _this
    expandToc(topLink.closest('.toc-item').find('.toc-child'))
    topLink
    // Find all top-level .toc-item containers, i.e. sections
    // excluding the currently active one
    .closest('.toc-item').siblings('.toc-item')
    // Hide their respective list of subsections
    .find('.toc-child').hide()
  }
}
// mobile动态目录
$(window).scroll(function() {
  var currentTop = $(this).scrollTop()||document.documentElement.scrollTop
  findMobileHeadPosition(currentTop+50)
  autoScrollToc()
})
var findMobileHeadPosition = function (top) {
// assume that we are not in the post page if no TOC link be found,
// thus no need to update the status
  if ($('.toc-link').length === 0) {
    return false
  }
  var list = $('.article-entry').find('h1,h2,h3,h4,h5,h6')
  var currentId = ''
  list.each(function () {
    var head = $(this)
    if (top > head.offset().top-25) {
      currentId = '#' + $(this).attr('id')
    }
  })

  if (currentId === '') {
    $('.toc-link').removeClass('active')
    $('.toc-child').hide()
  }

  var currentActive = $('.toc-link.active')
  if (currentId && currentActive.attr('href') !== currentId) {
    if (isanchor) updateAnchor(currentId)

    $('.toc-link').removeClass('active')

    var _this = $('.toc-link[href="' + currentId + '"]')
    _this.addClass('active')

    var parents = _this.parents('.toc-child')
    // Returned list is in reverse order of the DOM elements
    // Thus `parents.last()` is the outermost .toc-child container
    // i.e. list of subsections
    var topLink = (parents.length > 0) ? parents.last() : _this
    expandToc(topLink.closest('.toc-item').find('.toc-child'))
    topLink
    // Find all top-level .toc-item containers, i.e. sections
    // excluding the currently active one
    .closest('.toc-item').siblings('.toc-item')
    // Hide their respective list of subsections
    .find('.toc-child').hide()
  }
}

以上代码是基于yilia主题优化的，在其他主题使用可能不生效
在yilia\layout\_partial\after-footer.ejs文件中的yiliaConfig变量中添加anchor获取主题配置文件中anchor的值

1
anchor: <%=theme.anchor%>

主题配置

在主题的script.ejs文件中创建一个script标签，将上面的代码粘贴到script标签中即可
主题配置文件中（_config.yml）添加如下配置，实现浏览器根据当前页面位置实时更新页面url：

1
2
3
# anchor 目录锚点url
# 当您在文章中滚动时，URL将根据标头ID进行更新。
anchor: true

切记在yiliaConfig变量中添加anchor
既然实现动态目录，自然要对动态目录添加一些样式，在主题的css文件中添加相应样式：

1
2
3
4
5
/* 动态目录 */
.toc-container.tooltip-left .tooltip-east .tooltip-content .active {
    font-weight: bold;
    color: red;
}

将当前目录加粗，并且显示为红色进行区分，根据自己需要更改

文章作者: akbcd
文章链接: https://akbcd.github.io/2020/06/08/yilia主题目录优化/
版权声明: 本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 akbcd !

扫一扫，分享到微信

微信分享二维码

标签：

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia根目录）执行以下命令：
    npm i hexo-generator-json-content --save
    3、在根目录_config.yml里添加配置：

    jsonContent:
  meta: false
  pages: false
  posts:
    title: true
    date: true
    path: true
    text: false
    raw: false
    content: false
    slug: false
    updated: false
    comments: false
    link: false
    permalink: false
    excerpt: false
    categories: false
    tags: true