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', `<a href="#${$header.id}" class="header-mark"></a>`);
-      });
-    }
-  }
   /**
    * 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 -}}
+
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading-element">
+  <a href="#{{ .Anchor | safeURL }}" class="heading-mark"></a>
+
+  {{- 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 -}}
+</h{{ .Level }}>
+{{- /* EOF */ -}}