In-page Anchors

[jerry.nummi]

Is there a way to link to an in page anchor like the screenshot below? Currently the system appends https:// to the front.

[renaud (Renaud Bressand)]

Hey @jerry.nummi,

At the moment we are not planning to work on that. This is an interesting feedback though that i will track as a feature request.

If we start to work on this i’ll let you know.

[jerry.nummi]

Thanks for responding. Am I the first person to make a request for this? I thought linking to another section on a page was a common need.

[marcellothearcane]

Do absolute urls work? i.e. yoursite.com/some-page#some-anchor?

[renaud (Renaud Bressand)]

No you’re not the only one, We might work on that at some point but this is not in our priority list for now. I understand your point and as @marcellothearcane pointed out. You can use absolute url to manage your anchor at the moment.

Can you give maybe more details on your use case ? If it’s a table of content, we might be able to provide an example for that.

[jerry.nummi]

My current use cases are: a sub navigation that links to major sections on the current page; a few links across the site that link to specific sections on other pages.

Absolute URLs will work for me except for localhost development but I can work around that.

[Phil (Phil Snow)]

Hey @jerry.nummi,

For your use case of the sub navigation. Something I do is use the HTMLSerializer to automatically add id’s to my H2’s from my rich texts. Like I do here:

  if (type === Elements.heading2) {
    var id = element.text.replace(/\W+/g, '-').toLowerCase();
    return '<h2 id="' + id + '">' + children.join('') + '</h2>';
  }

You can see a full example here.

Then I build a component that looks at the Slices on the current page, takes any H2 titles and creates a link to these. This example is in Vue, but you can easily recreate it in whatever technology:

<template>
    <section v-if="sections.length" class="table-of-content">
        <h5>On this page</h5>
        <ul>
            <li v-for="([anchor, text], index) in sections" :key="`section-${index}`">
                <a :href="`#${anchor}`">
                    {{ text }}
                </a>
            </li>
        </ul>
    </section>
</template>

<script>
export default {
    name: 'toc-slice',
    props: {
		slices: {
			type: Array,
			required: true
		}
    },
    computed: {
        sections: function () {
            const buildAnchor = (text) => text.replace(/\W+/g, '-').toLowerCase()
            return this.slices
                .map((slice) => {
                    if(!(slice.slice_type === 'title' && slice.primary.title)) return;
                    const heading = slice.primary.title.find(elem => elem.type === 'heading2');
                    if(heading) return [buildAnchor(heading.text), heading.text];
                })
                .filter(e => !!e)
        }
    }
}
</script>

Here’s the full file.

Let me know if you have any questions about this.

Thanks.

[stephanie.eckles]

Adding a bit more context that for documentation sites, anchor links are quite a high priority need for interlinking between content, and having to use absolute URLs is nontrivial barrier for local development and QA of large sites particularly for unpublished content.

[Phil (Phil Snow)]

Hi Stephanie,

Thanks for your feedback.

This is an interesting use case. Can you tell me a bit more?

When your linking between content, do you mean content that doesn’t live in Prismic? If it’s inside Prismic you can use the ‘link to a document’ option.

When you say unpublished content, do you mean unpublished content in Prismic? because I’m not sure how anchor links are a solution here. The solution for linking to unpublished content is adding your documents to a release.

Thanks.