Links in articles that go to headers in the article get wrong URL in feed

If I make a header in an article

# Example Heading

I can make a link to that heading in the same article

[link to example heading](#example-heading)

This generates a URL for the link that jumps to that heading

https://exampleblog.com/example-post#example-heading

However, in the preview for the article in the feed of the blog, the URL becomes

https://exampleblog.com/#example-heading

which is maybe fine as long as your heading isn’t below the <!--more--> tag in your article because then it would not render in the preview. A more consistent behavior, I would think, would be to link to the page for the actual post.

Yeah, the easiest way to avoid this issue would be to just use the full url of the post you want to link to.

You could probably add some custom javascript to correct this for you, but it might be overkill unless you’re constantly linking to headings in the body of a post that exist above the “<!--more-->” delineator.

This code worked on my blog, but it’s very hacky and I wouldn’t recommend relying on something like this. It’s just to illustrate the point that you can use custom JavaScript in Write.as/WriteFreely to automate formatting for you based on specific rules or assumptions.

    const path = document.location.pathname;    //Get our current path.
    const links = document.getElementsByTagName('a');    //Grab an array of all the links on the page.
    
    // Let's check to make sure we're at the root of the blog.
    
    if (path === '/'){ 
        for (let x in links){
            if (links[x].attributes.href === undefined) continue;    // Iterate over the array of links and ignore any that have an undefined href value.
            
            let linkText = links[x].attributes.href.value;    // Grab the link value.
    
            // Check to see if the link is a hyperlink to a heading, does it start with a hash-tag?

            if (linkText !== undefined && linkText.substring(0,1) === "#"){
                let parentArticleBlock = links[x].closest('article'); // Grab the article element that the link resides in.
                links[x].href = parentArticleBlock.children[0].children[0].href + linkText;  // Change the link so that it points to the article or post, and then add the heading link.
        }
    }
}
1 Like