Is there a way to link to an in page anchor like the screenshot below? Currently the system appends https://
to the front.
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.
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.
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.
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.
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>
Let me know if you have any questions about this.
Thanks.
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.
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.
This is being tracked as an open feature request.
If you have another use-case for this feature, you can 'Flag' this topic to reopen. Please use the button to show your support for the feature and check out our Feature Request Guidelines.