fix: now we can use special characters in Tag and Category (fi3ework#316

)

layout/_partial/sidebar/sidebar-categories.ejs

@@ -1,9 +1,9 @@
 <div class="sidebar-panel-categories">
     <div class="sidebar-categories-name">
     <% site.categories.each(function (category) { %>
-        <span class="sidebar-category-name" data-categories="<%- category.slug %>">
+        <span class="sidebar-category-name" data-categories="<%- category.name %>">
             <span class="iconfont-archer">&#xe60a;</span>
-            <%- category.slug %>
+            <%- category.name %>
         </span>
     <% }) %>
     </div>

src/js/tag.js

@@ -97,14 +97,17 @@ class MetaInfo {
 
     for (let postIndex = 0; postIndex < postsArr.length; postIndex++) {
       const currPostLabels = postsArr[postIndex][this.metaName]
+      const key = 'name'
       // if there is any post has a tag
       if (currPostLabels && currPostLabels.length) {
         currPostLabels.forEach((tagOrCatetory) => {
           // if this.metaName is 'categories', tagOrCatetory['slug'] will be used as key in this.indexMap
           // else if this.metaName is 'tag', tagOrCatetory['name'] will be used as key in this.indexMap
-          // check the array postsArr and you'll know why. (actually you can just use 'slug' in both case)
+          // check the array postsArr and you'll know why.
+          // console.log(tagOrCatetory)
           // const key = this.metaName === 'categories' ? 'slug' : 'name'
-          const key = 'slug'
+
+          // Hey bro, but why? If use 'name' both, we can use special characters like blank and dot.
 
           if (this.indexMap.has(tagOrCatetory[key])) {
             this.indexMap.get(tagOrCatetory[key]).push(postIndex)

src/js/toc.js

@@ -1,6 +1,6 @@
 import archerUtil from './util'
 let prevHeight = 0
-let throttleTocOnScroll = () => {}
+let throttleTocOnScroll
 const $banner = $('.banner:first')
 
 // Banner in post page will occupy a certain amount of place.
@@ -124,13 +124,14 @@ const main = () => {
     let statusTocOnclick = false
     for (let i = 0; i < tocLinks.length; i++) {
       const onclickScrollTop = headersHeights[i] - scrollOffsetHeight
-      const onclickHref = headers[i].id
+      const onclickHeaderId = headers[i].id
       const tocOnclickFunction = function () {
         // Prevent scroll default event
         statusTocOnclick = true
         // Prevent header banner default event
+        // See ./scroll.js
         window.preventPostPageBannerDefault = true
-        archerUtil.setWindowHash(onclickHref)
+        archerUtil.setWindowHash(onclickHeaderId)
         window.scrollTo({ top: onclickScrollTop })
         $banner.addClass('banner-show')
       }
@@ -183,16 +184,17 @@ const main = () => {
 
     tocOnScroll()
 
+    // Unbind existing on-scroll event
+    if (throttleTocOnScroll) $(document).off('scroll', throttleTocOnScroll)
     // Bind document on-scroll event
-    $(document).off('scroll', throttleTocOnScroll)
     throttleTocOnScroll = archerUtil.throttle(tocOnScroll, 100, true)
     $(document).on('scroll', throttleTocOnScroll)
   }
 
   initTocOnScroll()
 
   // Header's absolute position would be changed when window is resized.
-  $(window).on('resize', archerUtil.throttle(initTocOnScroll, 100, false))
+  $(window).on('resize', archerUtil.throttle(initTocOnScroll, 100, true))
 
   // Remove toc loading status
   $('.toc-wrapper').removeClass('toc-wrapper-loding')

src/scss/_dark/_partial/_comment/_gitalk-dark.scss

@@ -41,6 +41,9 @@ $gt-color-btn: #ffffff;
         background-color: darken($gt-color-btn, 5%) !important;
         border-color: $gt-color-main-lighter !important;
       }
+      .gt-btn-text {
+        color: $gt-color-main !important;
+      }
     }
     &-public {
       &:hover {