Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do I more efficiently insert footnotes into a Hexo post?

I have been trying to insert footnotes into my Hexo posts (written in Markdown, if their markup language is relevant). I come from a background of using Jekyll to power my websites and when I used Jekyll I would add [^n] (where n is a positive integer, i.e., n ∈ {1,2,3,...}) in text and something like:

[^1]: footnote #1
[^2]: footnote #2
[^3]: footnote #3
...

at the end of the post where footnote #1, #2, #3, etc. are replaced with my actual footnotes. While with Hexo things seem a little more complicated. I looked for a footnote plugin at https://hexo.io/plugins/, unsuccessfully I might add, then I used Google to search for the answer and found this gist https://gist.github.com/kuanyui/d1728c2a526a615de56c. I tried to use this gist by adding it to my Hexo site's script folder, but this failed (for the full error details see the gist, as I commented the details there). I then tried a HTML trick I learnt by examining the generated content of my Jekyll posts that had footnotes added to them via the aforementioned method. Namely, adding:

<sup id="fnref:n"><a href="#fn:n" class="footnote">n</a></sup>

(where yet again n is a positive integer) in text where I want my footnotes to appear and:

<ol>
  <li id="fn:1">Footnote #1.<a href="#fnref:1" class="reversefootnote">↩</a></li>
  <li id="fn:2">Footnote #2.<a href="#fnref:2" class="reversefootnote">↩</a></li>
  <li id="fn:3">Footnote #3.<a href="#fnref:3" class="reversefootnote">↩</a></li>
  ...
</ol>

to the end of the post. The problem is that this method, while effective, is also tedious (i.e., per footnote it requires a lot more typing than I would like), so I tried creating this ejs template (which corresponds to the in-text footnotes), which I placed in my layouts folder under the name footnotes.ejs:

<sup id ="fnref:<%= n %>"><a href="#fn:<%= n %>"><%= n %></a></sup>

and inserting this into my posts with:

<%- include('layouts/footnotes', {n:1}); %>

but this too failed (by failed I mean when I generated my hexo site this in-text citation was left completely unformatted).

So I am here to ask for a more efficient way to insert footnotes into Hexo posts. Namely one that requires as little typing, per footnote, as possible.

like image 665
Josh Pinto Avatar asked Apr 19 '16 16:04

Josh Pinto


1 Answers

I just created a hexo-plugin to support markdown footnotes :

  • Github repository
  • NPM package

So, you just have to install the package with

npm install hexo-footnotes --save

If Hexo detect automatically all plugins, that's all.

If that is not the case, register the plugin in your _config.yml file :

plugins:
  - hexo-footnotes

Here is the syntax :

basic footnote[^1]
here is an inline footnote[^2](inline footnote)
and another one[^3]
and another one[^4]

[^1]: basic footnote content
[^3]: paragraph
footnote
content
[^4]: footnote content with some [markdown](https://en.wikipedia.org/wiki/Markdown)

Here is the result :

footnotes

like image 72
Louis Barranqueiro Avatar answered Dec 20 '22 22:12

Louis Barranqueiro