From e4bc95172cef5cdd0f87cb5da56c363619829c2d Mon Sep 17 00:00:00 2001
From: Cell <1024@lruihao.cn>
Date: Mon, 25 Dec 2023 17:38:04 +0800
Subject: [PATCH] :recycle: Refactor: use Hugo render hooks for heading link
rendering
---
assets/css/_page/_single.scss | 4 +-
assets/js/theme.js | 20 ++-----
hugo.toml | 12 ++++
layouts/_default/_markup/render-heading.html | 61 ++++++++++++++++++++
4 files changed, 80 insertions(+), 17 deletions(-)
create mode 100644 layouts/_default/_markup/render-heading.html
diff --git a/assets/css/_page/_single.scss b/assets/css/_page/_single.scss
index c8815cf9..c865c39b 100644
--- a/assets/css/_page/_single.scss
+++ b/assets/css/_page/_single.scss
@@ -142,7 +142,7 @@
> h4,
> h5,
> h6 {
- > .header-mark::before {
+ > .heading-mark::before {
content: '|';
margin-right: 0.3125rem;
color: $single-link-color;
@@ -153,7 +153,7 @@
}
}
- > h2 > .header-mark::before {
+ > h2 > .heading-mark::before {
content: '#';
}
diff --git a/assets/js/theme.js b/assets/js/theme.js
index cc2f759d..51d02c0f 100644
--- a/assets/js/theme.js
+++ b/assets/js/theme.js
@@ -460,14 +460,6 @@ class FixIt {
});
}
- initHeaderLink() {
- for (let num = 1; num <= 6; num++) {
- this.util.forEach(document.querySelectorAll('.single .content > h' + num), ($header) => {
- $header.classList.add('header-link');
- $header.insertAdjacentHTML('afterbegin', ``);
- });
- }
- }
/**
* init table of contents
*/
@@ -502,7 +494,7 @@ class FixIt {
$toc.style.marginTop = `${$postMeta.offsetTop + $postMeta.clientHeight}px`;
const $tocLinkElements = $tocCore.querySelectorAll('a:first-child');
const $tocLiElements = $tocCore.getElementsByTagName('li');
- const $headerLinkElements = document.getElementsByClassName('header-link');
+ const $headingElements = document.getElementsByClassName('heading-element');
const headerHeight = document.getElementById('header-desktop').offsetHeight;
document.querySelector('.container').addEventListener('resize', () => {
$toc.style.marginBottom = `${document.querySelector('.container').clientHeight - document.querySelector('.post-footer').offsetTop}px`;
@@ -516,10 +508,10 @@ class FixIt {
$tocLi.classList.remove('has-active');
});
const INDEX_SPACING = 20 + (document.body.dataset.headerDesktop !== 'normal' ? headerHeight : 0) + this.breadcrumbHeight;
- let activeTocIndex = $headerLinkElements.length - 1;
- for (let i = 0; i < $headerLinkElements.length - 1; i++) {
- const thisTop = $headerLinkElements[i].getBoundingClientRect().top;
- const nextTop = $headerLinkElements[i + 1].getBoundingClientRect().top;
+ let activeTocIndex = $headingElements.length - 1;
+ for (let i = 0; i < $headingElements.length - 1; i++) {
+ const thisTop = $headingElements[i].getBoundingClientRect().top;
+ const nextTop = $headingElements[i + 1].getBoundingClientRect().top;
if ((i == 0 && thisTop > INDEX_SPACING) || (thisTop <= INDEX_SPACING && nextTop > INDEX_SPACING)) {
activeTocIndex = i;
break;
@@ -930,7 +922,6 @@ class FixIt {
this.initLightGallery();
this.initHighlight();
this.initTable();
- this.initHeaderLink();
this.initMath();
this.initMermaid();
this.initEcharts();
@@ -1158,7 +1149,6 @@ class FixIt {
this.initLightGallery();
this.initHighlight();
this.initTable();
- this.initHeaderLink();
this.initMath();
this.initMermaid();
this.initEcharts();
diff --git a/hugo.toml b/hugo.toml
index e0c604a9..094a46f9 100644
--- a/hugo.toml
+++ b/hugo.toml
@@ -473,6 +473,18 @@ enableEmoji = true
warning = 180
# If the article expires, close the comment or not
closeComment = false
+ # FixIt 0.3.0 | NEW page heading config
+ [params.page.heading]
+ [params.page.heading.number]
+ # whether to enable auto heading numbering
+ enable = false
+ [params.page.heading.number.format]
+ h1 = "{title}"
+ h2 = "{h2} {title}"
+ h3 = "{h2}.{h3} {title}"
+ h4 = "{h2}.{h3}.{h4} {title}"
+ h5 = "{h2}.{h3}.{h4}.{h5} {title}"
+ h6 = "{h2}.{h3}.{h4}.{h5}.{h6} {title}"
# FixIt 0.2.16 | CHANGED KaTeX mathematical formulas (https://katex.org)
[params.page.math]
enable = true
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
new file mode 100644
index 00000000..7a71f2ab
--- /dev/null
+++ b/layouts/_default/_markup/render-heading.html
@@ -0,0 +1,61 @@
+{{- /* Read the config and format */ -}}
+{{- $params := .Page.Scratch.Get "params" -}}
+{{- $h1Format := $params.heading.number.format.h1 | default "{title}" -}}
+{{- $h2Format := $params.heading.number.format.h2 | default "{h2} {title}" -}}
+{{- $h3Format := $params.heading.number.format.h3 | default "{h2}.{h3} {title}" -}}
+{{- $h4Format := $params.heading.number.format.h4 | default "{h2}.{h3}.{h4} {title}" -}}
+{{- $h5Format := $params.heading.number.format.h5 | default "{h2}.{h3}.{h4}.{h5} {title}" -}}
+{{- $h6Format := $params.heading.number.format.h6 | default "{h2}.{h3}.{h4}.{h5}.{h6} {title}" -}}
+
+{{- if $params.heading.number.enable -}}
+ {{- /* Set the count for child level to 0 */ -}}
+ {{- .Page.Scratch.SetInMap "heading-counter" (string (add .Level 1)) 0 -}}
+{{- end -}}
+
+
+
+
+ {{- if $params.heading.number.enable -}}
+ {{- /* Add 1 to the current level */ -}}
+ {{- $headingMap := .Page.Scratch.Get "heading-counter" -}}
+ {{- $count := (string .Level) | index $headingMap | int | add 1 -}}
+ {{- .Page.Scratch.SetInMap "heading-counter" (string .Level) $count -}}
+
+ {{- /* Get the counters for all levels */ -}}
+ {{- $h1 := "1" | index $headingMap | int | string -}}
+ {{- $h2 := "2" | index $headingMap | int | string -}}
+ {{- $h3 := "3" | index $headingMap | int | string -}}
+ {{- $h4 := "4" | index $headingMap | int | string -}}
+ {{- $h5 := "5" | index $headingMap | int | string -}}
+ {{- $h6 := "6" | index $headingMap | int | string -}}
+
+ {{- /* Apply the level based on the format */ -}}
+ {{- $title := "" -}}
+ {{- if .Level | eq 1 -}}
+ {{- $title = $h1Format -}}
+ {{- else if .Level | eq 2 -}}
+ {{- $title = $h2Format -}}
+ {{- else if .Level | eq 3 -}}
+ {{- $title = $h3Format -}}
+ {{- else if .Level | eq 4 -}}
+ {{- $title = $h4Format -}}
+ {{- else if .Level | eq 5 -}}
+ {{- $title = $h5Format -}}
+ {{- else if .Level | eq 6 -}}
+ {{- $title = $h6Format -}}
+ {{- end -}}
+
+ {{- $title = replace $title "{h1}" $h1 -}}
+ {{- $title = replace $title "{h2}" $h2 -}}
+ {{- $title = replace $title "{h3}" $h3 -}}
+ {{- $title = replace $title "{h4}" $h4 -}}
+ {{- $title = replace $title "{h5}" $h5 -}}
+ {{- $title = replace $title "{h6}" $h6 -}}
+ {{- $title = replace $title "{title}" .Text -}}
+ {{- $title | safeHTML -}}
+
+ {{- else -}}
+ {{- .Text | safeHTML -}}
+ {{- end -}}
+
+{{- /* EOF */ -}}