Koenig Editor Block / Feature Request: H1 / H2 Header based post anchor navigation widget / block

The Ghost editor is blazing fast as far creating content. The one piece that is NOT blazing fast is linking within a given piece of content / a given story / post that has be created — for example when creating documentation, or writing longer format articles where the user may need to jump from the top to exactly what they are looking for.

I continuously find myself using HTML blocks to create anchors within the pages I am writing so that I can link within a page to make it easier for BOTH users who have seen the page to skip to what they need AND users who are sharing a given segment of the page to share exactly what they would like with the recipient.

Having built an entire site / globally distributed content system around ghost (see: https://originalskateboards.com) along with automatically added / authenticated Ghost Apps the only thing I am still unfamiliar with is how to create new content Blocks within the Admin editor.

As a Ghost administrator who creates large amounts of content (including longer form content that may depart from the average Admin user’s post) I would like to create an admin BLOCK that would automatically link to EVERY H1 or H2 that has been created on a given Post when inserted with the editor.

This would allow me to create H1s and H2s not just for SEO but also as a navigational feature that could allow users to (and Admins) to GENERALLY expedite their work as far as improving the navigation WITHIN a given Post / Page quickly.

Changes this would require to implement:

  • Headers (H1 / H2) that are inserted would need to also automatically create anchor tags.
  • A new Anchor Block would need to be added to the Admin Editor / interface so that once inserted all headers (which have automatically created anchors) would automatically have links TO THOSE Anchor Tags inserted on the page / post once added.

Ghost has transformed my business and approach to blogging and I would love to see / help it continue to evolve. Thanks for everything you guys do.

All headers already have an id added automatically which allows you to link to them and to create automatic table of contents using client-side JS.

You may also want to check out these topics, it sounds like this is a duplicate? https://forum.ghost.org/t/add-toc-aka-table-of-contents-for-markdown-engine/

2 Likes

Makes sense.

It looks like this one is generally the currently implemented Javascript (jQuery) being used by others on the forum: Here is a way to do Table of Contents (ToC)

Generally I think that works and I can see not wanting to add anything to the ghost editor that can be done client side when needed — I would however like to keep this open since while clientside Javascript (implemented by Ghost) and frameworks may conflict it is very unlikely that adding an HTML anchor could / would conflict.

The headers already have the IDs — so those are being generated — an anchor tag seems like it would be pretty easy to add there (even if it was not used / referenced by everyone). This has the added benefit of allowing external links to point to a specific header (Ala Github’s markdown implementation seen on Readme.mds: https://github.com/TryGhost/Ghost/blob/master/README.md).

I guess the counter argument is really about not adding any additional code weight to the page that won’t be used which is for sure valid.

My issue is that really there is a reasonable amount of front end Js work required to handle re-routing an externally referenced on page anchor link within the page - which is for sure beyond the code I have seen on the forum thus far.

That can be done but I feel like the anchor links are unlikely to conflict with anything else moving so they could be safer / agnostic across frameworks that could be laid on top? I really don’t know what the plan is as far as on page anchors moving into the future with HTML spec in general!

That’s what the id attribute already gives you, you can link to any heading on a post such as https://demo.ghost.io/style-test/#media. There’s no need for an extra anchor tag here although it’s very easy to add them via client-side JS in your theme if you want something visual that people can click on or copy next to your headers - in that case you have full control over how that works rather than being forced into a particular implementation if we were to dictate that in the content renderer.

aannnnndddd I’m an idiot.
Thanks Kevin! Stoked. Thanks again!

1 Like