更新菜单样式

Author: diguage

.github/workflows/ci.yml

@@ -60,11 +60,22 @@ jobs:
         run: |
           asciidoctor -a toc=left -a stylesdir=assets/styles/ -a linkcss -r asciidoctor-multipage -r asciidoctor-comment-links -b multipage_html5 -D . index.adoc
 
+      - name: Add Scroll TOC JS 🐌
+        run: |
+          mkdir -p assets/scripts
+          touch assets/scripts/scroll-toc.js
+          cat > assets/scripts/scroll-toc.js <<- EOF
+            document.querySelector('#toc li a span.toc-current')
+              .scrollIntoView({ behavior: "smooth", block: "start", inline: "nearest" });
+          EOF
+          sed -i 's@</body>@<script src="assets/scripts/scroll-toc.js"></script></body>@g' *.html
+          sed -i 's@\(.toc-current{\)@\1color:#d14;font-size:130%;@g' *.html
+
       - name: Add Reward Qrcode 💰
         run: |
-          find . -name "*.html" | grep -v "preface.html" | xargs -I {} sed -i "s|<div id=\"content\">|<div id=\"content\"><div class=\"sect2\"><h3 id=\"_友情支持\">友情支持</h3><div class=\"paragraph\"><p>如果您觉得这个笔记对您有所帮助，看在D瓜哥码这么多字的辛苦上，请友情支持一下，D瓜哥感激不尽，😜</p></div><table class=\"tableblock frame-none grid-all stretch\"><colgroup><col style=\"width: 50%;\"><col style=\"width: 50%;\"></colgroup><tbody><tr><td class=\"tableblock halign-center valign-top\"><p class=\"tableblock\"><span class=\"image\"><img src=\"assets/images/alipay.png\" alt=\"支付宝\" width=\"85%\" title=\"支付宝\"></span></p></td><td class=\"tableblock halign-center valign-top\"><p class=\"tableblock\"><span class=\"image\"><img src=\"assets/images/wxpay.jpg\" alt=\"微信\" width=\"85%\" title=\"微信\"></span></p></td></tr></tbody></table><div class=\"paragraph\"><p>有些打赏的朋友希望可以加个好友，欢迎关注D 瓜哥的微信公众号，这样就可以通过公众号的回复直接给我发信息。</p></div><div class=\"paragraph\"><p><span class=\"image\"><img src=\"assets/images/wx-jikerizhi.png\" alt=\"wx jikerizhi\" width=\"98%\"></span></p></div><div class=\"admonitionblock tip\"><table><tbody><tr><td class=\"icon\"><i class=\"fa icon-tip\" title=\"Tip\"></i></td><td class=\"content\"><strong>公众号的微信号是: <code>jikerizhi</code></strong>。<em>因为众所周知的原因，有时图片加载不出来。 如果图片加载不出来可以直接通过搜索微信号来查找我的公众号。</em></td></tr></tbody></table></div></div>|" {}
+          find . -name "*.html" | grep -v "preface.html" | xargs -I {} sed -i 's|<div id="content">|<div id="content"><div class="sect2"><h3 id="_友情支持">友情支持</h3><div class="paragraph"><p>如果您觉得这个笔记对您有所帮助，看在D瓜哥码这么多字的辛苦上，请友情支持一下，D瓜哥感激不尽，😜</p></div><table class="tableblock frame-none grid-all stretch"><colgroup><col style="width: 50%;"><col style="width: 50%;"></colgroup><tbody><tr><td class="tableblock halign-center valign-top"><p class="tableblock"><span class="image"><img src="assets/images/alipay.png" alt="支付宝" width="85%" title="支付宝"></span></p></td><td class="tableblock halign-center valign-top"><p class="tableblock"><span class="image"><img src="assets/images/wxpay.jpg" alt="微信" width="85%" title="微信"></span></p></td></tr></tbody></table><div class="paragraph"><p>有些打赏的朋友希望可以加个好友，欢迎关注D 瓜哥的微信公众号，这样就可以通过公众号的回复直接给我发信息。</p></div><div class="paragraph"><p><span class="image"><img src="assets/images/wx-jikerizhi.png" alt="wx jikerizhi" width="98%"></span></p></div><div class="admonitionblock tip"><table><tbody><tr><td class="icon"><i class="fa icon-tip" title="Tip"></i></td><td class="content"><strong>公众号的微信号是: <code>jikerizhi</code></strong>。<em>因为众所周知的原因，有时图片加载不出来。 如果图片加载不出来可以直接通过搜索微信号来查找我的公众号。</em></td></tr></tbody></table></div></div>|' {}
           find . -name "*.html" | grep -v "index.html" | xargs -I {} sed -i 's|</head>|<script>var _hmt = _hmt \|\| [];(function () {var hm = document.createElement("script");hm.src = "https://hm.baidu.com/hm.js?ae79ae5854e141fa6c9a217b5dcf0e45";var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(hm, s);})();</script></head>|' {}
-          sed -i "s|<div class=\"ulist\">|<div class=\"sect2\"><h3 id=\"_官网及版本库\">官网及版本库</h3><div class=\"paragraph\"><p>本文档的版本库托管在 Github 上，另外单独发布。</p></div><div class=\"dlist\"><dl><dt class=\"hdlist1\">“地瓜哥”博客网</dt><dd><p><a href=\"https://www.diguage.com/\" class=\"bare\" target=\"_blank\" rel=\"noopener\">https://www.diguage.com/</a> 。D瓜哥的个人博客。欢迎光临，不过，内容很杂乱，请见谅。不见谅，你来打我啊，😂😂</p></dd><dt class=\"hdlist1\">本文档官网</dt><dd><p><a href=\"https://notes.diguage.com/mysql/\" class=\"bare\" target=\"_blank\" rel=\"noopener\">https://notes.diguage.com/mysql/</a> 。为了方便阅读，这里展示了处理好的文档。阅读请点击这个网址。</p></dd><dt class=\"hdlist1\">本文档版本库</dt><dd><p><a href=\"https://github.com/diguage/mysql-notes\" class=\"bare\" target=\"_blank\" rel=\"noopener\">https://github.com/diguage/mysql-notes</a> 。欢迎大家发送 PR。</p></dd></dl></div></div><div class=\"ulist\"><h3>目录</h3>|" index.html
+          sed -i 's|<div class="ulist">|<div class="sect2"><h3 id="_官网及版本库">官网及版本库</h3><div class="paragraph"><p>本文档的版本库托管在 Github 上，另外单独发布。</p></div><div class="dlist"><dl><dt class="hdlist1">“地瓜哥”博客网</dt><dd><p><a href="https://www.diguage.com/" class="bare" target="_blank" rel="noopener">https://www.diguage.com/</a> 。D瓜哥的个人博客。欢迎光临，不过，内容很杂乱，请见谅。不见谅，你来打我啊，😂😂</p></dd><dt class="hdlist1">本文档官网</dt><dd><p><a href="https://notes.diguage.com/mysql/" class="bare" target="_blank" rel="noopener">https://notes.diguage.com/mysql/</a> 。为了方便阅读，这里展示了处理好的文档。阅读请点击这个网址。</p></dd><dt class="hdlist1">本文档版本库</dt><dd><p><a href="https://github.com/diguage/mysql-notes" class="bare" target="_blank" rel="noopener">https://github.com/diguage/mysql-notes</a> 。欢迎大家发送 PR。</p></dd></dl></div></div><div class="ulist"><h3>目录</h3>|' index.html
           sed -i 's|&lt;code&gt;|<code>|' index.html
           sed -i 's|&lt;/code&gt;|</code>|' index.html