Merge branch 'feature/add-heading-anchors'

_includes/refactor-content.html

@@ -147,6 +147,43 @@
 
 {% endif %}
 
+<!-- Create heading anchors -->
+
+{% assign heading_levels = '2,3,4,5' | split: ',' %}
+{% assign _heading_content = _content %}
+
+{% for level in heading_levels %}
+  {% capture mark_start %}<h{{ level }} id="{% endcapture %}
+  {% capture mark_end %}</h{{ level }}>{% endcapture %}
+
+  {% if _heading_content contains mark_start %}
+    {% assign _new_content = nil %}
+    {% assign heading_snippets = _heading_content | split: mark_start %}
+
+    {% for snippet in heading_snippets %}
+      {% if forloop.first %}
+        {% assign _new_content = snippet %}
+        {% continue %}
+      {% endif %}
+
+      {% assign id = snippet | split: '"' | first %}
+      {% capture anchor %}<a href="#{{ id }}"><i class="fas fa-hashtag"></i></a>{% endcapture %}
+
+      {% assign left = snippet | split: mark_end | first %}
+      {% assign right = snippet | replace: left, '' %}
+
+      {% assign _new_content = _new_content | append: mark_start
+          | append: left | append: anchor | append: mark_end | append: right
+      %}
+
+    {% endfor %}
+
+    {% assign _heading_content = _new_content %}
+
+  {% endif %}
+{% endfor %}
+
+{% assign _content = _heading_content %}
 
 <!-- return -->
 

_javascript/utils/smooth-scroll.js

@@ -8,6 +8,11 @@
 */
 
 $(function() {
+  const REM = 16; /* 16px */
+  const $topbarTitle = $("#topbar-title");
+  const topbarHeight = $("#topbar-wrapper").outerHeight();
+  const SCROLL_MARK = "scroll-focus";
+
   $("a[href*='#']")
     .not("[href='#']")
     .not("[href='#0']")
@@ -15,42 +20,49 @@ $(function() {
 
       if (this.pathname.replace(/^\//, "") === location.pathname.replace(/^\//, "")) {
         if (location.hostname === this.hostname) {
-
-          const REM = 16; /* 16px */
-
           const hash = decodeURI(this.hash);
-          let isFnRef = RegExp(/^#fnref:/).test(hash);
-          let isFn = isFnRef? false : RegExp(/^#fn:/).test(hash);
+          let toFootnoteRef = RegExp(/^#fnref:/).test(hash);
+          let toFootnote = toFootnoteRef? false : RegExp(/^#fn:/).test(hash);
           let selector = hash.includes(":") ? hash.replace(/\:/g, "\\:") : hash;
-          let target = $(selector);
+          let $target = $(selector);
 
-          if (target.length) {
+          let parent = $(this).parent().prop("tagName");
+          let isAnchor = RegExp(/^H\d/).test(parent);
+
+          if (typeof $target !== "undefined") {
             event.preventDefault();
 
             if (history.pushState) { /* add hash to URL */
               history.pushState(null, null, hash);
             }
 
-            let curOffset = $(this).offset().top;
-            let destOffset = target.offset().top;
-            const scrollUp = (destOffset < curOffset);
-            const topbarHeight = $("#topbar-wrapper").outerHeight();
+            let curOffset = isAnchor? $(this).offset().top : $(window).scrollTop();
+            let destOffset = $target.offset().top;
 
-            if (scrollUp && isFnRef) {
-              /* Avoid the top-bar covering `fnref` when scrolling up
-                because `fnref` has no `%anchor`(see: module.scss) style. */
+            if (destOffset < curOffset) { // scroll up
+              if (toFootnoteRef) {
+                // Avoid the top-bar covering `fnref` when scrolling up
+                // because `fnref` has no `%anchor`(see: module.scss) style.
                 destOffset -= (topbarHeight + REM / 2);
               }
 
+              if (isAnchor && $topbarTitle.is(":hidden")) {
+                destOffset += topbarHeight;
+              }
+
+            } else { // scroll down
+              if (!isAnchor && !toFootnote) { // the ToC item
+                destOffset += topbarHeight;
+              }
+            }
+
             $("html,body").animate({
               scrollTop: destOffset
             }, 800, () => {
 
-              const $target = $(target);
+              // const $target = $($target);
               $target.focus();
 
-              const SCROLL_MARK = "scroll-focus";
-
               /* clean up old scroll mark */
               if ($(`[${SCROLL_MARK}=true]`).length) {
                 $(`[${SCROLL_MARK}=true]`).attr(SCROLL_MARK, false);
@@ -62,7 +74,7 @@ $(function() {
               }
 
               /* set scroll mark to footnotes */
-              if (isFn || isFnRef) {
+              if (toFootnote || toFootnoteRef) {
                 $target.attr(SCROLL_MARK, true);
               }
 

_layouts/page.html

@@ -15,10 +15,18 @@ layout: default
         {{- site.data.locales[lang].tabs[tab_key] | default: page.title -}}
       </h1>
       <div class="post-content">
+        {% if page.layout == 'page' %}
           {% include refactor-content.html content=content %}
+        {% else %}
+          {{ content }}
+        {% endif %}
       </div>
     {% else %}
+      {% if page.layout == 'post' %}
         {% include refactor-content.html content=content %}
+      {% else %}
+        {{ content }}
+      {% endif %}
     {% endif %}
     </div>
   </div> <!-- #core-wrapper -->

_sass/addon/commons.scss

@@ -48,23 +48,23 @@ body {
 h1 {
   @extend %heading;
 
-  font-size: 1.8rem;
+  font-size: 1.9rem;
 }
 
 h2 {
   @extend %heading;
   @extend %section;
-  @extend %anchor;
+  @extend %anchor-relative;
 
-  font-size: 1.4rem;
+  font-size: 1.5rem;
 }
 
 h3 {
   @extend %heading;
   @extend %section;
-  @extend %anchor;
+  @extend %anchor-relative;
 
-  font-size: 1.25rem;
+  font-size: 1.2rem;
 }
 
 h4 {
@@ -362,7 +362,7 @@ img[data-src] {
 .post {
   h1 {
     margin-top: 3rem;
-    margin-bottom: 1rem;
+    margin-bottom: 1.5rem;
   }
 
   a {
@@ -1126,7 +1126,7 @@ $sidebar-display: "sidebar-display";
 
     h1 {
       margin-top: 2.2rem;
-      font-size: 1.55rem;
+      font-size: 1.75rem;
     }
   }
 

_sass/addon/module.scss

@@ -10,6 +10,44 @@
   font-family: 'Lato', 'Microsoft Yahei', sans-serif;
 }
 
+%section {
+  padding-top: 3.5rem;
+  margin-top: -2.5rem;
+
+  #core-wrapper & {
+    line-height: 1.2;
+    margin-bottom: 1rem;
+  }
+}
+
+%anchor {
+  > a {
+    font-size: 70%;
+    visibility: hidden;
+    margin-left: 0.25rem;
+    border-bottom: none !important;
+    opacity: 0;
+    transition: opacity 0.25s ease-in, visibility 0s ease-in 0.25s;
+  }
+
+  &:hover {
+    > a {
+      visibility: visible;
+      opacity: 1;
+      transition: opacity 0.25s ease-in, visibility 0s ease-in 0s;
+    }
+  }
+}
+
+%anchor-relative {
+  @extend %anchor;
+
+  > a {
+    position: relative;
+    bottom: 1px;
+  }
+}
+
 %tag-hover {
   background: var(--tag-hover);
   transition: background 0.35s ease-in-out;
@@ -47,18 +85,6 @@
   border-bottom: none;
 }
 
-%section {
-  #core-wrapper & {
-    line-height: 1.2;
-    margin-bottom: 1rem;
-  }
-}
-
-%anchor {
-  padding-top: 3.5rem;
-  margin-top: -2.5rem;
-}
-
 %cursor-pointer {
   cursor: pointer;
 }