ipad-cursor-hexo v0.0.0
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 usediv
element. Then listenmousemove
event, and move the fake cursor to the mouse position.After init finished, it will call
updateCursor
method, scan element withdata-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 namedindex.js
in${SourcePath}/themes/next/source/js/ipad-cursor-hexo
. - Step3: Write configuration
Step4: Let
document
listenDOMContentLoaded
events, bindinit
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
<script src="/js/ipad-cursor-hexo/index.js" type="module"></script>
into the file
- Step5.1: Open
Advanced Usage
After excute the five steps in basic-usage, you will see a ipad-cursor ⚪️ in your blog.
Moreover, you can custom :
- which tag and what kind of style you want to config.
- What is your cursor look like.
See Config for more detail.
Config
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",
}
}
},
}
If you want to configure all the a tags in the article tag
For the second, you can config what is your cursor look like.
My Usage
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));
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
Reference
Great thanks for @CatsJuice, and this great project ipad-cursor.
Ref: