xiaoluoboding / ghost-theme-kaldorei

🎨 A Simple And Elegant Ghost Theme Derive From Default Theme Casper
http://blog.xlbd.me
MIT License
292 stars 74 forks source link

TOC :active link effect not working #50

Closed josegomes123 closed 3 years ago

josegomes123 commented 3 years ago

Hi there, first of all great work with the theme. I have been using it as a base to adapt the default casper theme with many of the functionalities of your theme.

I can't seem to be able to get the toc item contents :activeeffect on scroll. Can you redirect me to the correct part of the code I can look at? Im not too familiar with jQuery just pure javascript.

xiaoluoboding commented 3 years ago

Sorry for the delay, take a look the core toc logic

I guess the title you typed may contain special characters

josegomes123 commented 3 years ago

No problem, I actually implemented it myself in vanilla JS using some other examples available online and it's working fine now

// TOC Highlighting
window.addEventListener("DOMContentLoaded", function () {
    var observer = new IntersectionObserver(function (entries) {
      entries.forEach(function (entry) {
        var id = entry.target.getAttribute("id");

        if (entry.intersectionRatio > 0) {
          document
            .querySelector('nav li a[href="#'.concat(id, '"]'))
            .parentElement.classList.add("active");
        } else {
          document
            .querySelector('nav li a[href="#'.concat(id, '"]'))
            .parentElement.classList.remove("active");
        }
      });
    }); // Track all sections that have an `id` applied

    document.querySelectorAll("h1[id], h2[id], h3[id], h4[id], h5[id], h6[id]").forEach(function (section) {
      observer.observe(section);
    });
  });

I also converted the casper theme from scratch again using your theme heavily as an inspiration, so thank you a lot for releasing it, it gave me a good basis to learn handlebars and play around with customizing ghost themes!

I changed a lot of your original Jquery to vanilla JS implementations and changed the search implementation to a newer plugin (because yours wasn't working for some reason). Only thing I couldn't get to work at all was the archives page.

If you wanna see the finished product https://comprarcriptomoedas.com/ , it was all possible because of your theme, so thank you.

Also I was thinking about maybe releasing my version to the public on github, would that be a problem for you? With credit obviously

xiaoluoboding commented 3 years ago

@ze-gomes First of all. I'm really happy ghost-theme-kaldorei could help you a lot.

Your works are awesome. Please feel free to release your own ghost theme. someone will need it one day.

I'm using JAMStack for my personal website, powered by VuePress. I also consider refactoring it using VitePress

I just want to say, ghost-theme-kaldorei is really an old project for me. Maybe I should archive it. 😂