ipad-curosr-hexo

ipad cursor style that can be used in your hexo framework

Inspiration

Inspired by CatsJuice/ipad-cursor, Add ipad cursor into your hexo(NexT theme) blog in a configurable way.

See add ipad-cursor into my hexo blog for more details :)

Principle

core: add data-cursor='block' or data-cursor='text' to the tag with document.querySelector, like :

Before:

``html


`

After:

`html


`

> principle of ipad-cursor：
>
> When init called, it will remove default cursor, and generate a fake cursor use div element. Then listen mousemove event, and move the fake cursor to the mouse position.
>
> After init finished, it will call updateCursor method, scan element with data-cursor attribute, detect the cursor type, and add event listener to the element.
>
> When mouse enter the element, apply styles.

Install

In hexo, You can only install in this way:

`js
import init from "https://unpkg.com/ipad-cursor-hexo@latest"
`

Usage

$3

- Step1: Create a directory named ipad-cursor-hexo in ${SourcePath}/themes/next/source/js
- Step2: Create a js file named index.js in ${SourcePath}/themes/next/source/js/ipad-cursor-hexo.
- Step3: Write configuration
- Step4: Let document listen DOMContentLoaded events, bind init function onto it.

document.addEventListener('DOMContentLoaded', ()=>init());
- Step5: link the above index.js file to hexo blog.

- Step5.1: Open ${SourcePath}/themes/next/layout/_partials/head/head.swig
- Step5.2: Add into the file

$3

After excute the five steps in basic-usage, you will see a ipad-cursor ⚪️ in your blog.

Moreover, you can custom :

1. which tag and what kind of style you want to config.
2. What is your cursor look like.

See Config for more detail.

$3

For the first, you can config which tag and what kind of style you want to config, for example:

If you want to config the

to the text cursor style. you can write the configuration like this:

The key is you want to use in document.querySelectorAll,

`js
const config = {
"div#article":{
type:'text',
},
}
`

If you want to config its cursor-style, you can add the configuration like this:

`js
const config = {
"div#article":{
type:'text',
style:'radius:50%'
},
}
`

If you want to configure all of the in the