xiaoluoboding / ghost-theme-kaldorei

🎨 A Simple And Elegant Ghost Theme Derive From Default Theme Casper

Home Page:http://blog.xlbd.me

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

TOC :active link effect not working

josegomes123 opened this issue · comments

commented

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 :active effect 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.

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

I guess the title you typed may contain special characters

commented

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

@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. 😂