「目录 & 自定义滚动栏」

目录 & 自定义滚动栏

2021/09/04 字数统计： 3.1k 阅读时间： 5 mins 访问次数： ... 评论统计： ...

　　本篇文章又名：css 从入门到崩溃 / 一个透明滚动条引发的血案 / 不要靠近 position: absolute / Flex，yyds。
　　FUCK U CSS！

　　今日成果：

修改了日期样式和字体，现在看起来更像尼尔 UI 了
添加了正文目录
- 但是目前看起来不太尼尔
- 以及二级目录默认展开很容易超出屏幕边界
  - 暂时加了个滚动条，看起来不太美观（尤其在 firefox 上）但是能用就行
设置了透明滚动条（chrome 限定）
- 理论上 firefox 是可以实现的，但用的是完全不同的 css 属性，我没有耐心了【尖叫
修正了代码框拖动滚动条时装饰线会消失的问题
为了实现以上功能几乎全盘重写了 layout
- 包括未雨绸缪地为 #hekation 新建了图层
初步调整了移动端页面显示效果

hexo-toc 目录

　　如果你不知道 toc 是什么，请看右边这一串 →
　　谷歌的教程告诉我要装插件，但我试了一下这是 hexo 的自带功能。
　　虽然他自动生成的 toc 框架像个智障而且我找不到在哪改 layout，这么一看我选择手写了分类汇总页面真是个明智的决定，不然我可能会提早一周进入硅基生命更年期【咬牙

layout 与参数设定

　　依旧以「Chan」主题举例，其它用 ejs 写的主题也可以直接复制，但是需要修改一下文件路径。
　　在 layout_partials\post 文件夹下新建 toc.ejs，写入以下内容：

<% if (theme.toc){ %>
// 判断主题是否开启 toc

  <div class="article-toc">
    <%- toc(post.content, {max_depth:4}) %>
  </div>

<% } %>

　　这玩意确实有官方文档，在辅助函数的最底下，但是它很显然并不是用现代汉语 ~~而是某种程序员专用汉语~~ 写的，我直接复制过来翻译一下吧就……

调用方式：在 layout 中插入 <%- toc(str, [options]) %>
可用参数（即用来替代 options 的内容）
- class ：类名，可填入任意字符
  用来修改生成的 toc 元素的 classname，如留空则输出 class="toc"
- list_number ：是否显示编号，只能填入 true 或 false
  默认为 true ，建议留空，因为它关掉的应该是绝大多数人希望保留的那个编号……
  如果不知道我在说什么自己开一下试试就知道了【流汗黄豆.jpg
- max_depth ：最大目录深度，可填入数字 1~6
  其实「深度」这个词看起来就不太现代汉语但是我找不到更加信达雅的翻译方式……
  用来控制需要添加到目录中的最低级标题，以本站为例正文中用到的通常是 <h3> 和 <h4> ，所以填入了 4
  建议保持最终生成效果在两层，过多的折叠层数会导致排版非常困难
- min_depth ：最小目录深度，可填入数字 1~6
  控制需要添加到目录中的最高级标题，一般直接留空即可

　　注意输入参数的时候要用这个花括号 {}，如果希望全部维持默认参数，可以直接输入 <%- toc(post.content) %> 。
　　然后在正文页面的 layout 文件中使用 <%- partial('post/toc') %> 就可以插入目录了，运行 hexo s --debug 可以查看效果，如果 debug logs 里提示文件不存在请检查：

相对引用目录是否正确
layout 文件中是否有错漏的标点

修正默认 toc 样式

　　按以上步骤操作成功后你的文章列表里就会出现这么一串令人绝望的东西：

img-center

　　是的，虽然我也难以置信，但 hexo 默认的 toc 确实存在完全重复的两层数字标号。这个时候你也许会想起前文提到过的 list_number 参数并尝试把它设置成 false ，但是，没想到吧！这个参数用来关的是后面那个带层数的数字标！这个伪元素它一直在哦！
　　~~总之我再放一个流汗黄豆在这里~~
　　那么只能通过 css 来去掉 css 伪元素，具体操作方式是为 .toc li::marker 添加样式 content: none; ，如果你在前面的参数中修改了类名，记得用你自己的类名替换掉 .toc 。
　　css 部分请自由发挥，如果需要抄作业可以参考本站源码。

自定义滚动栏

　　今日血压的主要来源。
　　滚动栏的设置方法参考这里（firefox 除外，它用的是独立属性）

　　css 就不写笔记了……接下来都是吐槽时间……
　　设置完滚动条样式之后发现滚动条把整个 body 朝左挪了一个滚动条的宽度，并且无法通过 position:fixed 消除影响，视觉效果就是背景图出现了一条缝。于是尝试另起一层放背景图，发现滚动条永远浮在浏览器窗口的正上方，不管我把背景图放哪都没用，而且我整个页面的坐标莫名其妙地短斤少两了好几个像素。
　　最后的解决方式是重写了主 layout 文件和布局 css ，移除了所有 position 定位改用 flex 。一开始就把不同的部分写在不同的文件里真是太好了……

　　总之血泪教训：慎用一切将元素移除出正常数据流的 css 属性，ex position:absolute 和 float ，一旦发现什么问题重写的时候真的会想死【

ERROR

警告：检测到前方有大量程序错误，请注意绕行

　　在毛象吐槽自己这一周搓博客的心路历程仿佛打零式首周，从开开心心到骂骂咧咧再到心态爆炸。但是下午点了奶茶喝完就把整个 layout 改完了，心情甚至还不错。
　　总之代码还是比野队队友能指望那么一些的，只要你还看得懂自己写了什么，它就永远不会辜负你……大概……

　　想起首周在野队玩了近 50 小时钻石星辰心力交瘁的时候找前导师抱怨，没有收到期待的安慰反而被一顿臭骂，大意是「那么多的废物嘴上说要打首周最后半途而废你要和他们一样吗」。
　　我告诉自己她只是刀子嘴豆腐心想用激将法鼓励我坚持下去，但关了手机还是扑进被子里号啕大哭，因为我真的太™累了。
　　后来打了绝才知道她那一瞬间是真的觉得我是废物。我那个时候就应该远离她的，我为什么不跑呢。
　　大体来说我还是希望即使我没成功也有人能承认我曾经努力过。
　　现实世界里哪有那么多往前多走一步就能拯救世界的英雄，绝大多数人都只是还差一根稻草就会被压死的骆驼罢了。

　　↑ 以上是一字不差从毛象复制过来的原文。为什么要再发一遍呢，我也不知道。
　　从在神兵队的最后一周开始我几乎就成了个绝本祥林嫂，退队拉黑了所有人之后尤其如此。直到现在我还是很不理解为什么一个「收留心碎零式人」「你居然觉得我们 6.0 之前能过本吗」「今天谁鸽」的休闲观光队会突然变成压力堪比首周的爆肝进度队。如果想正常开荒过本一开始的时候为什么要摆出那么吊儿郎当的态度甚至连攻略都懒得看呢，打着休闲队打着玩的旗号组满了人最后又反过来指责队友不够认真是不是太任性了点？
　　更何况我也没有不认真。攻略和第一视角我都认真看了，每天开荒也都录屏看回放找自己犯的错，可惜我是压力到了临界值就会开始运动神经失调的那类人，甚至因为这个破本诱发了进食障碍直到最近才康复。但是，不是所有的努力都是能有成果的，做不到就是做不到，尤其是在全队都给我施压的环境下我更做不到。想来你明明是知道我首周打完 12s 门神在进本体的一瞬间大脑一片空白连自己的技能都不认识了最后直接下线跑路的，为什么还要这样不停地给我压力呢。
　　说白了我就是这么菜啊……你是我的导师从入坑看到现在还不清楚吗，嫌我菜干嘛还要拉我打绝呢。难道你是误以为我是什么天才豆芽占星，头一次下绝本就能轻轻松松谈笑风生地打进本体然后随便看两天攻略直接过本吗？那确实对不起，是我让你失望了。我确实没有能力在一周内同时处理完全陌生的机制再根据随机的击杀速度排好团辅和奶轴，我对占星的理解也确实不那么透彻，能在首周打过前三层全凭作业抄得认真。我印象里起码提前半个月我就在对着国际服的第一视角做表格扒奶轴了，你也可以理解我完全不会打，只不过把其他人的操作背下来再执行了一个及格的分数而已。
　　当然我也知道大概率是我自作多情了，我可能无非就是一个被你拉去凑人头的奶妈罢了。总之……还是感谢你从我入坑以来对我的照顾，但是以后不要再联系了，就当我死了吧。

無色人間。