Question

I have a blog with annotated references like ^[1] that.

   [1]Jake Smith. http://example.com ..............
   [2].............

I want it so the [1] in the text is an anchor that links to the [1] in the References. I know I could do this by doing something in the text like <a href="#ref1">[1]</a>and then making every list item in the references have an id, , that is, that is,

<ol>
    <li id="ref1"></li>
     ...
</ol>

But that’s a lot of work for me to go through all the blog posts. I’m sure I could make a JavaScript or jQuery function to add this functionality, but then it would not work with JavaScript disabled. So is there some other function I don’t know? Like some fancy CSS trick, or should I just use JavaScript to do this?

What are your recommendations?

Answer 1

Your options are:

1. A blog plugin that detects this in the content and forms the link and adds the related id to the appropriate element for you when the HTML is being output
2. A script that runs and does the same thing after the HTML has loaded.
3. Manually adding the links by hand.

A blog plugin is your best bet, since surely this is a solved problem (though it would depend on your blogging platform, of course).

CSS is for styling, it can’t add links/ids.

In addition, remember that if you are ever going to display multiple blog posts on each page, you will want to add the blog id to the anchor as well. Instead of ref1, you’ll want:

ref_[blogid]_[refid]