「修正：滚动条 & 字数统计」

修正：滚动条 & 字数统计

2021/09/05 字数统计： 1.5k 阅读时间： 2 mins 访问次数： ... 评论统计： ...

　　昨天因为写了两份滚动条 css 在毛象痛骂 firefox，西风很无奈地告诉我：你看这个属性的 webkit 前缀就告诉你它是 webkit hack 出来的，非 webkit 的浏览器用不了不是很正常吗……
　　完全外观至上的我：我知道，但是我就是要骂。
　　其实我根本不知道 webkit 是啥——我猜大概是某种协议标准，总之 chrome 和其它主流浏览器基本都是支持的，firefox 喜欢独自美丽，它用的是独立的 css 属性。
　　……可是你的滚动条样式也一点不美丽啊？？

　　今天这一整天基本都是在瞎整，但居然给我整成功了也是很神奇。
　　这大概就是硅基生命的天赋吧……【你

　　那么今日成果：

完成了手机端界面大致框架
使用 perfect-scrollbar 替代了浏览器默认滚动条
修正了 hexo-symbols-count-time 字数统计错误的问题

修了但没完全修的滚动条

　　在我仔细研究了主题源文件之后发现它是自带了 Perfect-scrollbar 生成可以用 css 完全控制样式的伪滚动条的，原本的 JS 文件长这样：

Ps.initialize($('.sidebar')[0]);

$('.category-list-container > a, .tag-list-container > a, .archive-list-container > a').click(function(e){
  $(this).next().slideToggle('fast');
});

$('.sidebar-toggle').click(function(e){
  $('.sidebar').toggleClass('in');
});

$('.main-content').click(function(e){
  $('.sidebar').removeClass('in');
});

　　以我贫瘠的 JS 水平只能看出第一行创建了 .sidebar 类名下所有元素的滚动条，第二条是控制侧边栏那个归档时间轴的，第三和第四条通过更改 classname 用来控制移动端 UI 的侧边栏开关。
　　理解了这几行代码以后我就顺便把手机端的 UI 也整好了，虽然现在看起来还比较粗糙但至少可以保持一个正常的浏览效果了，还是比较满意的。

　　然后是滚动条部分，我直接复制了 Ps.initialize 并改了我需要的类名放在第一行的底下，然后……然后所有的按钮事件就都失效了……
　　目前的解决办法是把这堆玩意直接复制到 main.js 的最底端，能跑，但不完全能跑。首先控制台给我报了个不明所以的 t is undefined ，另外 Ps.initialize 这个命令好像只支持执行单个对象，所以只有第一个代码框可以滚动。
　　谷歌搜索 perfect-scrollbar + 多个滚动条，屁都没找到，我自己试了下普通 js 的遍历写法好像不管用，不知道是 jQuery 的选择器写错了还是咋了，总之我决定暂时放弃修正这个问题……具体怎么操作估计只有等我看懂 perfect-scrollbar 的源码才能解决了？
　　实现应该是能实现的吧……

　　瞅了一眼我今天干的事仿佛刚学完五十音图就开始写日文歌词……对吧，简直是一模一样的不知天高地厚的行为啊！！

　　好，我换英文搜索之后找到了这个 issue ，稍微修改了一下回答中给出的语法，它现在能跑了，诶？？？
　　那么万一有人想抄作业，创建多个 perfect-scrollbar 的方法大概是这样：

1
2
3

$('.classname').each(function(){
  Ps.initialize($(this)[0]); 
});

　　所用库版本为 jQuery = v2.1.3 ，perfect-scrollbar = v0.6.10。
　　甚至控制台都不报错了诶，诶？？？

修正字数统计

　　之前吐槽过 next 的字数统计插件是不是压根单纯统计了文件大小，~~我真是又菜又跳又爱玩……~~新建文档逐字输入后检查结果发现计算的逻辑似乎是没有问题的，是我输入的统计对象有问题。post-content 是经过 markdown 引擎渲染之后的 html 代码，统计了致死量 html 标签后输出结果的准确性可想而知。
　　实际上 hexo-symbols-count-time 插件有自带的移除 html 标签的功能，在 hexo 目录下的 _config.yml 中添加如下内容即可启用：

1 2	symbols_count_time: exclude_codeblock: true

　　添加后需要修改相关的 layout.ejs 如下：

<% if (theme.symbols_count_time){ %>

  <span class="word-count">字数统计：
    <span class="word-count-symbol"><%- symbolsCount(post) %></span>
  </span>
  <span class="word-count">阅读时间：
    <span class="word-count-time"><%- symbolsTime(post, 2, 300, 'mins') %></span>
  </span>

<% } %>

　　实际上就是把上次写的 post.content 修改为 post，因为这个 post 实际上是插件输入 post.content 后又删除了 html 标签再输出的结果。然后因为字数统计正常了也修正了一下计算阅读时间的参数……
　　今天真是折腾了不少东西，好了周末了该打游戏了！

無色人間。