From 0abad2539aa5d603931b084b30f4f0ac0e2df980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=87=A1=E6=A2=A6=E6=98=9F=E5=B0=98?= Date: Thu, 6 Oct 2022 10:02:19 +0800 Subject: [PATCH] :lipstick: Fixed the TOC enable in global set & implement the auto follow in TOC list with content scroll. --- assets/css/_common/components/post/index.scss | 2 + .../_common/outline/sidebar/sidebar-toc.scss | 21 ++++++---- assets/css/main.scss | 1 + assets/js/utils.js | 10 ++++- exampleSite/content/post/math-formula.md | 36 ++++++++-------- exampleSite/content/post/no-header-title.md | 41 +++++++++++++++++++ layouts/partials/sidebar.html | 5 +-- 7 files changed, 85 insertions(+), 31 deletions(-) create mode 100644 exampleSite/content/post/no-header-title.md diff --git a/assets/css/_common/components/post/index.scss b/assets/css/_common/components/post/index.scss index 179fc44..186c464 100644 --- a/assets/css/_common/components/post/index.scss +++ b/assets/css/_common/components/post/index.scss @@ -42,6 +42,7 @@ } } +@if $toc_number { .autonumber { h2 { counter-reset: h3; @@ -66,6 +67,7 @@ content: counter(h2) "." counter(h3) "." counter(h4) ". "; } } +} } @import 'post-collapse'; diff --git a/assets/css/_common/outline/sidebar/sidebar-toc.scss b/assets/css/_common/outline/sidebar/sidebar-toc.scss index 29eba64..085143d 100644 --- a/assets/css/_common/outline/sidebar/sidebar-toc.scss +++ b/assets/css/_common/outline/sidebar/sidebar-toc.scss @@ -2,6 +2,10 @@ font-size: $font-size-small; padding: 0 8px; + .active-current { + color: $orange; + } + ul { list-style: none; @@ -15,22 +19,22 @@ > ul { border-left: 1px solid; - margin-left: 6px; + margin-left: 4px; li { position: relative; padding-left: 0; - + &:before { position: absolute; content: ' '; top: 0.14em; left: -0.75em; - width: 0.68em; + width: 0.65em; height: 0.815em; border-style: none none dashed none; border-width: 0.05em; - } + } } } @@ -42,10 +46,11 @@ a { transition: all $transition-ease; border: none; - - &:before { - content: counters(item, ".") ". "; - counter-increment: item; + @if $toc_number { + &:before { + content: counters(item, ".") ". "; + counter-increment: item; + } } &:hover { diff --git a/assets/css/main.scss b/assets/css/main.scss index 0907ec5..7d0f14e 100644 --- a/assets/css/main.scss +++ b/assets/css/main.scss @@ -70,6 +70,7 @@ $social_icons_only : {{ $P.socialIcons.iconsOnly }}; $social_icons_transition : {{ $P.socialIcons.transition }}; $links_settings_layout : {{ $P.linksSets.layout }}; $toc_enable : {{ $P.toc.enable }}; +$toc_number : {{ $P.toc.number }}; $toc_expand_all : {{ $P.toc.expandAll }}; $toc_wrap : {{ $P.toc.wrap }}; diff --git a/assets/js/utils.js b/assets/js/utils.js index a8fe09a..3df4db7 100644 --- a/assets/js/utils.js +++ b/assets/js/utils.js @@ -464,7 +464,13 @@ NexT.utils = { },*/ registerSidebarTOC: function() { - this.sections = [...document.querySelectorAll('.post-toc li a.nav-link')].map(element => { + const toc = document.getElementById('TableOfContents'); + if (!toc.hasChildNodes()) { + const tocActive = document.querySelector('.sidebar-inner'); + tocActive.classList.remove('sidebar-nav-active', 'sidebar-toc-active'); + tocActive.classList.add('sidebar-overview-active'); + } + this.sections = [...document.querySelectorAll('.post-toc li a')].map(element => { const target = document.getElementById(decodeURI(element.getAttribute('href')).replace('#', '')); // TOC item animation navigate. element.addEventListener('click', event => { @@ -527,7 +533,7 @@ NexT.utils = { }, activateNavByIndex: function(index) { - const target = document.querySelectorAll('.post-toc li a.nav-link')[index]; + const target = document.querySelectorAll('.post-toc li a')[index]; if (!target || target.classList.contains('active-current')) return; document.querySelectorAll('.post-toc .active').forEach(element => { diff --git a/exampleSite/content/post/math-formula.md b/exampleSite/content/post/math-formula.md index ac0f252..3a3e965 100644 --- a/exampleSite/content/post/math-formula.md +++ b/exampleSite/content/post/math-formula.md @@ -34,22 +34,22 @@ math: mathjax **注意：** 使用[支持的TeX功能](https://docs.mathjax.org/en/latest/input/tex/index.html)的联机参考资料。 -### 例子 +## 例子 -## 重复的分数 +### 重复的分数 $$ \frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} \equiv 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {1+\frac{e^{-6\pi}} {1+\frac{e^{-8\pi}} {1+\cdots} } } } $$ -## 总和记号 +### 总和记号 $$ \left( \sum_{k=1}^n a_k b_k \right)^2 \leq \left( \sum_{k=1}^n a_k^2 \right) \left( \sum_{k=1}^n b_k^2 \right) $$ -## 几何级数之和 +### 几何级数之和 我把接下来的两个例子分成了几行，这样它在手机上表现得更好。这就是为什么它们包含 `\displaystyle`。 $$ @@ -76,24 +76,24 @@ $$ \displaystyle= \frac{(k+1)((k+1)+1)}{2} $$ -## 乘记号 +### 乘记号 $$ \displaystyle 1 + \frac{q^2}{(1-q)}+\frac{q^6}{(1-q)(1-q^2)}+\cdots = \displaystyle \prod_{j=0}^{\infty}\frac{1}{(1-q^{5j+2})(1-q^{5j+3})}, \displaystyle\text{ for }\lvert q\rvert < 1. $$ -## 随文数式 +### 随文数式 这是一些线性数学: $$ k_{n+1} = n^2 + k_n^2 - k_{n-1} $$ ， 然后是更多的文本。 -## 希腊字母 +### 希腊字母 $$ \Gamma\ \Delta\ \Theta\ \Lambda\ \Xi\ \Pi\ \Sigma\ \Upsilon\ \Phi\ \Psi\ \Omega \alpha\ \beta\ \gamma\ \delta\ \epsilon\ \zeta\ \eta\ \theta\ \iota\ \kappa\ \lambda\ \mu\ \nu\ \xi \ \omicron\ \pi\ \rho\ \sigma\ \tau\ \upsilon\ \phi\ \chi\ \psi\ \omega\ \varepsilon\ \vartheta\ \varpi\ \varrho\ \varsigma\ \varphi $$ -## 箭头 +### 箭头 $$ \gets\ \to\ \leftarrow\ \rightarrow\ \uparrow\ \Uparrow\ \downarrow\ \Downarrow\ \updownarrow\ \Updownarrow $$ @@ -122,7 +122,7 @@ $$ $$ -## 微积分学 +### 微积分学 $$ \int u \frac{dv}{dx}\,dx=uv-\int \frac{du}{dx}v\,dx $$ @@ -136,13 +136,13 @@ $$ $$ -## 洛伦茨方程 +### 洛伦茨方程 $$ \begin{aligned} \dot{x} & = \sigma(y-x) \\\\ \dot{y} & = \rho x - y - xz \\\\ \dot{z} & = -\beta z + xy \end{aligned} $$ -## 交叉乘积 +### 交叉乘积 这在KaTeX中是可行的，但在这种环境中馏分的分离不是很好。 $$ @@ -162,25 +162,25 @@ $$ $$ -## 有弹性的括号 +### 有弹性的括号 $$ \left(\frac{x^2}{y^3}\right) $$ -## 评估范围 +### 评估范围 $$ \left.\frac{x^3}{3}\right|_0^1 $$ -## 诊断标准 +### 诊断标准 $$ f(n) = \begin{cases} \frac{n}{2}, & \text{if } n\text{ is even} \\\\ 3n+1, & \text{if } n\text{ is odd} \end{cases} $$ -## 麦克斯韦方程组 +### 麦克斯韦方程组 $$ \begin{aligned} \nabla \times \vec{\mathbf{B}} -\, \frac1c\, \frac{\partial\vec{\mathbf{E}}}{\partial t} & = \frac{4\pi}{c}\vec{\mathbf{j}} \\\\ \nabla \cdot \vec{\mathbf{E}} & = 4 \pi \rho \\\\ \nabla \times \vec{\mathbf{E}}\, +\, \frac1c\, \frac{\partial\vec{\mathbf{B}}}{\partial t} & = \vec{\mathbf{0}} \\\\ \nabla \cdot \vec{\mathbf{B}} & = 0 \end{aligned} $$ @@ -194,19 +194,19 @@ $$ {n \choose k} $$ -## 分数在分数 +### 分数在分数 $$ \frac{\frac{1}{x}+\frac{1}{y}}{y-z} $$ -## ｎ次方根 +### ｎ次方根 $$ \sqrt[n]{1+x+x^2+x^3+\ldots} $$ -## 矩阵 +### 矩阵 $$ \begin{pmatrix} a_{11} & a_{12} & a_{13}\\\\ a_{21} & a_{22} & a_{23}\\\\ a_{31} & a_{32} & a_{33} \end{pmatrix} \begin{bmatrix} 0 & \cdots & 0 \\\\ \vdots & \ddots & \vdots \\\\ 0 & \cdots & 0 \end{bmatrix} diff --git a/exampleSite/content/post/no-header-title.md b/exampleSite/content/post/no-header-title.md new file mode 100644 index 0000000..13c85f7 --- /dev/null +++ b/exampleSite/content/post/no-header-title.md @@ -0,0 +1,41 @@ +--- +title: "没有H1-6标题头的文章" +description: "用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭。" +keywords: "toc,header" + +date: 2022-10-06T09:02:26+08:00 +lastmod: 2022-10-06T09:02:26+08:00 + +categories: + - 示例 +tags: + - toc + - 标题 + +url: "post/no-header-title.html" +--- + +刘慈欣2018克拉克奖获奖感言（部分内容节选）。 + +> 用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭。 + + + +先生们、女士们，晚上好， + +很荣幸获得Clarke Award for Imagination in Service to Society Award。 + +这个奖项是对想象力的奖励，而想象力是人类所拥有的一种似乎只应属于神的能力，它存在的意义也远超出我们的想象。有历史学家说过，人类之所以能够超越地球上的其它物种建立文明，主要是因为他们能够在自己的大脑中创造出现实中不存在的东西。在未来，当人工智能拥有超过人类的智力时，想象力也许是我们对于它们所拥有的惟一优势。 + +科幻小说是基于想象力的文学，而最早给我留下深刻印象的是Arthur . Clarke的作品。除了Jules Verne和George Wells外，Clarke的作品是最早进入中国的西方现代科幻小说。在上世纪八十年代初，中国出版了他的《2001:A Space Odyssey》和《Rendezvous With Rama》。当时文革刚刚结束，旧的生活和信仰已经崩塌，新的还没有建立起来，我和其他年轻人一样，心中一片迷茫。这两本书第一次激活了我想象力，思想豁然开阔许多，有小溪流进大海的感觉。读完《2001:A Space Odyssey》的那天深夜，我走出家门仰望星空，那时的中国的天空还没有太多的污染，能够看到银河，在我的眼中，星空与过去完全不一样了，我第一次对宇宙的宏大与神秘产生了敬畏感，这是一种宗教般的感觉。而后来读到的《Rendezvous With Rama》，也让我惊叹如何可以用想象力构造一个栩栩如生的想象世界。正是Clarke带给我的这些感受，让我后来成为一名科幻作家。 + +现在，三十多年过去了，我渐渐发现，我们这一代在上世纪六十年代出生于中国的人，很可能是人类历史上最幸运的人，因为之前没有任何一代人，像我们这样目睹周围的世界发生了如此巨大的变化，我们现在生活的世界，与我们童年的世界已经完全是两个不同的世界，而这种变化还在加速发生着。中国是一个充满着未来感的国度，中国的未来可能充满着挑战和危机，但从来没有像现在这样具有吸引力，这就给科幻小说提供了肥沃的土壤，使其在中国受到了空前的关注，作为一个在六十年代出生在中国的科幻小说家，则是幸运中的幸运。 + +我期待有那么一天，像那些曾经描写过信息时代的科幻小说一样，描写太空航行的科幻小说也变的平淡无奇了，那时的火星和小行星带都是乏味的地方，有无数的人在那里谋生；木星和它众多的卫星已成为旅游胜地，阻止人们去那里的唯一障碍就是昂贵的价格。 + +但即使在这个时候，宇宙仍是一个大的无法想象的存在，距我们最近的恒星仍然遥不可及。浩瀚的星空永远能够承载我们无穷的想象力。 + +谢谢大家。 + + +> [点击阅读全文](https://weread.qq.com/web/reader/ce032b305a9bc1ce0b0dd2akecc32f3013eccbc87e4b62e) diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index 83c493c..c4c5b0e 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -4,7 +4,8 @@