「记录：侧边栏激活 & 高亮代码框」

记录：侧边栏激活 & 高亮代码框

2021/10/02 字数统计： 1.6k 阅读时间： 3 mins 访问次数： ... 评论统计： ...

　　一种迷惑行为：嫌 Next 过于臃肿选了个简洁版的主题然后挨个往里重写 Next 自带的功能，最后搞出来了一个不是 Next 胜似 Next 的更加臃肿的东西……
　　但是今天也是没做搜索的一天，我甚至直接把搜索按钮给隐藏了，哈哈 :4o-3:

　　是说昨天说好剪固定队笑话视频，结果只剪了个音频，视频连新建工程都没有开【小声，一整天全扑在折腾博客上了。
　　今天的代码也是用 jQuery 写的，为什么这么快就接受了 jQuery 呢，主要是因为 jQuery 的选择器语法和 css 基本一模一样，极大程度减少了我的学习成本。

侧边栏激活

　　所以这具体是个什么需求呢，需求就是当你点开这篇文章的时候，左边侧边栏归档列表里的 2021 是亮着的。
　　其实代码给我的折磨远远没有 css 给我的多。昨天晚上我为了显示简洁直接把除了正文页面以外的浏览统计都清空了，然后修正好所有的代码和 css 样式以后去 leancloud 瞅了一眼数据，首页访问量赫然一个 389，我觉得再折腾几次 Leancloud 的免费请求次数都不够我霍霍的……

思路

　　这次在代码构思上没走什么弯路，一开始就是打算：

获取当前页面链接
遍历侧边栏按钮的 href 属性，检查返回的字符串中是否含有当前页面链接
如果有，则添加 class active
修改 css，将 a:hover 的样式复制给 a.active

　　然而在实现的过程中真是走了不少弯路……
　　开始试图利用 hexo 自带的函数 url_for()，但是研究了半天也不知道怎么把这玩意写进 JS，于是放弃了，改用 JS 直接获取页面链接：

1
2
3

let actURL = window.location.pathname.split('/')[1]
// 将当前页面的 url 按 `/` 切分，并将所有部分收集到一个数组中
// [0] 会返回主域名，[1] 则返回主域名之后的第一截，以此类推

　　追加一行 console.log(actURL) 就可以在控制台检查获得的结果了。

　　然后在匹配链接的时候真是频频遭遇滑铁卢，错误的代码就不放了，反正要么不亮要么全亮，气得我晚饭都吃得郁郁寡欢……

实现

　　最终实现的代码如下：

let actURL = window.location.pathname.split('/')[1],
// 获取普通分页链接
  actYear = window.location.pathname.split('/')[2];
  // 获取归档分页的年份
if (actURL.length > 0) {
// 在首页执行第一行代码会返回一个空字符串
// 从而导致之后的事件报错
// 所以先判断一下字符串是否有内容，如果没有就直接激活主页链接
  if (actURL.indexOf('archives') >= 0) {
  // 判断页面链接中是否包含关键字 `archives`
  // 直译是请求关键字在对象内第一次出现的位置
    $('.archive-list-container a:first').addClass('active');
    // 激活归档按钮
    $('#linklist a[href*=' + actYear + ']').addClass('active');
    // 激活匹配链接的侧边栏按钮
    // 因为归档年份是唯一的，所以不用 each 遍历
  } else {
    $('#linklist a[href*=' + actURL + ']').each(function() {
      $(this).addClass('active');
    })
    // 如果不是归档页面，则激活所有匹配链接的按钮
  }
} else {
  $('#linklist a:first').addClass('active');
  // 如果未获取到分页链接，则激活首页按钮
}

　　是说我也开始用两个半角空格缩进了，这个 tab 排版实在是太丑了……
　　不知道手机端的支持情况怎么样，如果不支持……那也算了，反正手机端平时也看不到侧边栏，加不上 class 也不影响普通 css 样式，摸了摸了【

高亮代码框

　　显然本篇发送的时候高亮代码框已经实现了，虽然配色并不是很高亮，但是我只是想大概分一下颜色而已……
　　毕竟这个站整体配色还是黑白为主，实测代码框如果用了很鲜艳的颜色会非常突兀。以及页面主体实际上是灰色的，所以也在一定程度上限制了配色的明度……总之暂时调试的结果就是这样。
　　是说其实绝大多数主题都是自带高亮代码框的，我现在用的这个也不例外，写 markdown 的时候在代码框开头标记好文字就会自动把关键词切分好，只要自己在 css 里调整需要的颜色就行。

　　是说开始折腾这个玩意我才发现我之前做的所有代码框样式包括 PS 滚动条，全部都是「未知文本」限定……

　　如果你的主题没有自带高亮代码框，那么可以看看这个库：highlight.js ，把 JS 和 css 链接进 layout 文件应该就可以用了。

修正：减少无效 waline 请求

　　之前就有说过我写东西的时候喜欢一边写 md 一边在网页里疯狂刷新预览排版效果，然后 waline 自带的访问统计就嗖嗖往上涨，一篇文章（尤其是笔记类）从起稿到发布起码要刷新 50+ 次，多发几篇数据就很感人了。
　　而且白嫖的 Leancloud 是有请求次数限制的！！！这样下去绝对不行！！！

　　于是把 waline 的设置代码放进了 layout 文件里，如下：

<% if (page.comment != false) { %>

  <script type="text/javascript">
    Waline({
      el: '#waline',
      serverURL: 'https://waline-4o-cx.vercel.app/',
      visitor: true,
    });
  </script>
  
<% } %>

　　其实我自己还追加了很多功能开关 ex 只有 post 页面显示评论框但所有的页面都要开启访客统计（因为关掉访客统计的同时也会关掉统计数据展示，我也是真™服了这个设计），如果没有那么多开关需求的话在 if 里放一个 waline-set.js 的链接就可以了。
　　写完 layout 以后修改所有的 scaffolds 模板文件，在前缀部分加上 comment: false，等写作完毕之后再删掉这一行就可以避免本地浏览时发送过多请求的问题……
　　好嘛我知道这个方法不太优雅，但是有用，能跑就行 :4o-3:

無色人間。