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:

<div></div>
<p></p>

After:

<div data-cursor="block"></div>
<p data-cursor="text"></p>

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:

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

Usage

Basic Usage

• 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,see config for more detail

• Step4: Let document listen DOMContentLoaded events, bind init function onto it.

  • If you haven't any configuration:

    document.addEventListener('DOMContentLoaded', ()=>init());

  • If you have some configuration:

    document.addEventListener('DOMContentLoaded', () => init(config, cursorConfig,effect));

• Step5: link the above index.js file to hexo blog.

  • Step5.1: Open ${SourcePath}/themes/next/layout/_partials/head/head.swig
  • Step5.2: Add <script src="/js/ipad-cursor-hexo/index.js" type="module"></script> into the file

Advanced Usage

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.
3. effect

See Config for more detail.

Config

1. bind data-cursor to the tag

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 <div id="article"></div> to the text cursor style. you can write the configuration like this:

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

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

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

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

If you want to configure all of the <a> in the <div id="article"> to the block style. you can add the configuration like this:

const config = {
  "div#article":{
    type:'text',
    style:'radius:50%'
    children:{
    	"a":{
          type:"block",
    	}
    }
  },
}

2. cursor style

For the second, you can config what is your cursor look like,like background,width,height,etc.

config it like this:

const cursorConfig = {
  normalStyle: {
    background: '#ffcc00',
  },
  textStyle: {
    background: '#ffcc00'
  },
}

3. effect

you can do some else in the effect function, like useEffect in react. In my blog, I use this to stop <img> from being selected.

const effect = () => {
	document.querySelector('img').style.userSelect = 'none'
}

My Usage

config.js

export const config = {
    "ul#menu>li.menu-item": {
        type: 'block',
    },
    "article": {
        type: 'text',
        children: {
            "a": {
                type: 'block',
            }
        }
    },
    "div.post-body": {
        type: 'text'
    },
    "ul.motion-element>li": {
        type: "block"
    },
    //sidebar
    "div.sidebar-inner": {
        type: 'text'
    },
    "p": {
        type: 'text'
    },
    "a": {
        type: 'block'
    },
};

export const cursorConfig = {
    normalStyle: {
        background: '#ffcc00',
    },
    textStyle: {
        background: '#ffcc00'
    },
}

index.js

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

import { config, cursorConfig } from "./config.js" 
const effect = () => {
    document.querySelector('img').style.userSelect = 'none'
}

document.addEventListener('DOMContentLoaded', () => init(config, cursorConfig,effect));

Notice

In hexo, some tags are very difficult to locate with id or class, like:

<a href="/" rel="section"></a>

or

<div id="menu-container">
  <ul id="menu">
    <li></li>
    <li></li>
    <li></li>
  </ul>
</div>

For the former, you have to add id locator into the .swig file (you can use global search in vscode to find them).

For the later, you can use a special selector that we support, like "div#menu-container>ul#menu":

const config = {
  "div#menu-container>ul#menu":{
      type:'block'
  }
}

Case

zqqcee.github.io

Reference

Great thanks for @CatsJuice, and this great project ipad-cursor.

Ref:

• 🔥：ipad-cursor
• 🔥：oooo.so
• 🔥：ipad-cursor.oooo.so