Barenote is a simple footnote library developed in JavaScript.
First of all, prepare the environment according to your usage. How to prepare is described below.
After the preparation,
what you have to do is just insert a tag whose class name is barenote to make a footnote as follows.
This is the simplest sample<sup><span class='barenote'>Click me!</span></sup>.<br />
The number will be incremented automatically<sup><span class='barenote'>Like this</span></sup>.<br />This is shown in browser as follows. When you hover the number, the floating note is shown.
If your page has only one Barenote, you can apply it to <body>.
-
Add
barenote.min.jsto your page.<script src="https://kokufu.github.io/Barenote/dist/barenote.min.js"></script>
-
Apply Barenote to body element.
as follows.<script type='text/javascript'> document.addEventListener("DOMContentLoaded", function(event) { const body = document.querySelector('body'); new Barenote(body); }); </script>
-
Place
barenote_ref_listwhere you want to show the list.<div class='barenote_ref_list'></div>
If your page has tow or more articles which have footnotes, you can apply it to each article as follows.
-
Add
barenote.min.jsto your page.<script src="https://kokufu.github.io/Barenote/dist/barenote.min.js"></script>
-
Apply Barenote to each element as follows.
<script type='text/javascript'> document.addEventListener("DOMContentLoaded", function(event) { for (post_body of document.querySelectorAll('.post-body')) { new Barenote(post_body); } }); </script>
-
Place
barenote_ref_listwithin the each element where you want to show the list.<div class=".post-body"> ... <div class='barenote_ref_list'></div> </div> <div class=".post-body"> ... <div class='barenote_ref_list'></div> </div>
If you use node.js to build web contents, you can install barenote from npm as follows.
$ npm install barenoteimport { Barenote } from 'barenote'
document.addEventListener("DOMContentLoaded", function(event) {
const posts = document.querySelectorAll('article.content')
for (const post of posts) {
new Barenote(post)
}
})- sample01 The simplest sample. There is only one Barenote.
- sample02 There are more than two Barenote in a page.
- sample03 Another pattern of that there are more than two Barenote in a page.
- sample04 How to modify the floating note display.
git clone https://github.com/kokufu/Barenote
cd Barenote
npm install
npm run buildThen barenote.min.js is made in dist dir.