I have 2 pages, lets call them www.mywebsite.com/page1 and www.mywebsite.com/page2.
On page1.md I have a link like:
[My Link](/page2.html)
So when the user clicks on this link it goes to the top of www.mywebsite.com/page2.
Here is a snippet of my page2.md:
<h2>Topic 1</h2>
some text
.
.
<h2>Topic 2</h2>
more text
Now I want to add an anchor such that when user click on the link on page1, it goes to page2 but top of the page that is shown to be Topic 2.
How can I do that?
@tooraj, the pattern you described is referred to as deep linking. If you’re using markdown to author your pages, Hugo markdown engine will automatically add id attributes to your headings. For example, for your content:
<!-- write page in markdown -->
## Topic 1
some text
...
## Topic 2
more text
Hugo would generate you content as follows:
<!-- generated content -->
<h2 id="topic-1">Topic 1</h2>
some text
...
<h2 id="topic-2">Topic 2</h2>
more text
You could then link to part of your page as follows:
<!-- link to section -->
[Topic 2](/page2/#topic-2)
Tip 1: Whenever unsure, check your view source to nail the right id attribute.
Tip 2: If you’re not using markdown to author your pages, manually add an id to your page content and link to the accordingly from other pages.
@Weru, thanks for the response and help.
Unfortunately this doesn’t work for me.
I am using markdown to create a page when I add:
to my page 1 I see this on the page:
So it looks like the ! sign is problematic. And Topic 2 is not a link and not clickable. If I remove ! and instead have:
[Topic 2](/page2/#topic-2)
This Topic 2 is a clickable link but it doesn’t take me to Topic 2 on Page 2 and it takes me to the same Topic 1 on Page 2.
Is there something missed here?
Thanks again for your help.
Update:
I changed the link on page 1 to:
[Topic 2](/page2.html#topic-2)
Now anchor works on Firefox but not on Chrome.
@tooraj, that was a typo, I updated it accordingly.
Do you have you code publicly available? Like in a repo?
Do you have your links “ugly”? Because if not, don’t send them to /page2.html, send them to /page2/. And the /page2/#bla should work in all modern browsers. If not, try the extra mile: /page2/index.html#bla which should work in all browser.
Make sure you have no cache-issues. Restart hugo server if you test with that.
@Weru I have an actual website. Here is my website: DoradoList.
@davidsneighbour none of your suggestions worked.
After a lot of Googling I found that many people have/had this issue and one suggestion was to add this code to the html page:
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 200);
}
});
Which I am not sure what it does. But it seems it resolve the issue. However, it creates a new issue. Here is a link that you can see how it works and I explain the issue.
On this page, if you click on Analog Electronics link at the bottom you go to a new page and anchor works fine. However, when I click on the back arrow on top of the Chome, it does not go to the previous page. I need to press back arrow 3 times to go to previous page. When I go to the anchored page the page url is:
http://www.doradolist.com/analog.html#analog-electronics-books-suggested-by-hooman-darabi
when I click back arrow on Chrome page url becomes:
http://www.doradolist.com/analog.html#
when I click back arrow one more time the page url becomes:
http://www.doradolist.com/analog.html#analog-electronics-books-suggested-by-hooman-darabi
and when I press it for the 3rd time then it goes to the previous page:
http://www.doradolist.com/hooman-darabi.html
Why do I see this new annoying issue and how can I resolve this one?
Thanks for all your helps.
I just tested your site with javascript disabled in both Chrome and Chromium, the mentioned anchor links work just fine. I’m afraid this is no hugo issue at all, instead check your scripts.
@holehan thanks for your comment. Can you please explain what do you mean I need to check? Do you mean there is issue in my js files? How can I debug this as I am beginner on this.
You could try commenting out JS scripts line by line. When you find the problem script, then work your way through the script, commenting-out-and-rerunning until you find the issue.
@zwbetz thanks for your comment. The issue is that i am using a Hugo theme (Dimension) that uses a lot of js files. If I look at the header.html and footer.html I see a number of JS files are included. Do you mean I comment out those files and see the issue is related to which one?
Correct
@zwbetz @holehan @Weru @davidsneighbour it is very interesting. In the footer.html I have these 3 lines of included js files:
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
If I comment out any of them then the issue resolves.
Is this related to any timing that takes to load those js files?
And why adding this code resolves it as well:
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 200);
}
});
The issue with adding this code is the problem with the back arrow that I explained earlier so it is not a good solution.
Any comment or suggestions?
Thanks in advance.
If you’re not willing to debug the JS, I’d choose another theme.
And as commented earlier by @holehan: There is no bug. I click on any link and my chrome loads the page with the anchor properly. The problem is on your computer, not on your website.
One guess is that skel.min.js belongs to skel, “a lightweight responsive framework for the www” that was not updated for the past 3 years and somehow clashes with a plugin you are using or other scripts or whatever…
My second guess is that # is a special URL parameter in either this framework or any other employed framework or chrome plugin you have installed.
Lastly: I am not a fan of debugging issues with JS code that was introduced to fix an issue you have with plain HTML. You are throwing a hill at some birds here.
Guesses they will be because I did not find a link to a repo anywhere to debug this issue.
@zwbetz I am willing to debug the js, but as I mentioned earlier there are 3 JS files:
<script src="/js/skel.min.js"></script>
<script src="/js/util.js"></script>
<script src="/js/main.js"></script>
If I comment out any of them the issue is resolved. So it looks like the issue is not due to a specific JS file, it could be due to timing and the fact that it takes some time to load?
So do you have any suggestion on how to debug?
@davidsneighbour I tested this on another computer and on my phone Chrome browsers and if I don’t add the code that I shared above:
$(document).ready(function () {
var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
if (window.location.hash && isChrome) {
setTimeout(function () {
var hash = window.location.hash;
window.location.hash = "";
window.location.hash = hash;
}, 200);
}
});
the anchoring does not work. So it is not related to my computer or a plugin that I have installed.
I don’t think the skel.min.js has issues because If I just comment out util.js and leave the skel.min.js or just comment out main.js and leave skel.min.js the anchoring issue is resolved.
Do you have any suggestion or explanation?
Thank you both for your help and any other comment or help is really appreciated.
If commenting out util.js or main.js works, why not doing it? Comment one of them out and check if your site keeps working (dropdowns, back to top links, formvalidation and posting, and so on). Maybe one of these scripts is already included in the skel.min.js file?
You can use chrome devtools to see which JS is unused: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage