Before Start

You can add some clicking effects in your Hexo project.

There are a lots of tutorial that ask you to add files into your themes\layout\*.ejs files, but I suppose you will only find a .gitkeep file in the latest version of Hexo.

NOTE: Do note that I am using Hexo + Next theme. So if you are not using Next theme, you might need to make some changes accordingly.

Steps

  1. prepare a javascript script that will add effect when mouse clicking. In this tutorial I will use a heart.js file.
    1. heart.js
  2. Store your heart.js file somewhere under source directory.
    1. in this case we will create a javascript folder under source and put the heart.js inside.
    2. full path will be /javascript/heart.js.
  3. create a _data folder under your source. Visit link to understand how it works.
  4. create a head.njk file.
  5. from _config.next.yml file, find the custom_file_path: and uncomment the head section like this:
1
2
custom_file_path:
   head: source/_data/head.njk
  1. In head.njk, we will insert code below:
1
<script type="text/javascript" src="/javascript/heart.js"></script>
  1. That’s all! Enjoy!