https://github.com/sumumm/hexo-next-mouse-effect

苏木的笔记网站的鼠标效果插件
https://github.com/sumumm/hexo-next-mouse-effect

Last synced: 11 days ago
JSON representation

苏木的笔记网站的鼠标效果插件

• Host: GitHub
• URL: https://github.com/sumumm/hexo-next-mouse-effect
• Owner: sumumm
• Created: 2024-03-24T14:26:39.000Z (8 months ago)
• Default Branch: master
• Last Pushed: 2024-03-24T15:17:34.000Z (8 months ago)
• Last Synced: 2024-10-30T05:25:52.345Z (21 days ago)
• Language: JavaScript
• Size: 135 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: readme.md

Awesome Lists containing this project

README

        
# 自用NexT主题鼠标效果插件

- 欢迎访问我的博客：苏木 查看效果。

# 1.安装插件

```shell

cd hexo-site

npm install hexo-next-mouse-effect

```

# 2.配置插件

- 在站点根目录中的站点配置文件中添加以下配置内容。

  在站点配置文件中新增以下内容，目前不支持本地加载效果实现的脚本文件，只支持`CDN`链接引入，其中`CDN`链接可自定义为自己的`CDN`链接。

```yaml

cursor:

  enable: true       # 总开关

  click_ena: true    # 鼠标点击效果控制开关

  click: fireWorks   # 鼠标点击效果 fireWorks | showLove | showText

  fireWorks_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/click/fireWorks.js"

  showLove_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/click/showLove.js"

  showText_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/click/showText.js"

  

  move_ena: true     # 鼠标移动效果控制开关

  move: fairyDust    # 鼠标移动效果 bubble | emoji | fairyDust | ghost | snowflake | springyEmoji

  bubble_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/move/bubbleCursor.js"

  emoji_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/move/emojiCursor.js"

  fairyDust_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/move/fairyDustCursor.js"

  ghost_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/move/ghostCursor.js"

  snowflake_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/move/snowflakeCursor.js"

  springyEmoji_cdnPath: "https://cdn.jsdelivr.net/npm/hexo-next-mouse-effect@latest/move/springyEmojiCursor.js"

```

  注意：若开启鼠标点击出现文字效果，还请按在主题配置文件中新增以下内容。

```yaml

ClickShowText:

  text:

    - 富强

    - 民主

    - 文明

    - 和谐

    - 自由

    - 平等

    - 公正

    - 法制

    - 爱国

    - 敬业

    - 诚信

    - 友善

  fontSize: 15px

  random: true

  mobile: false

```

# 3.效果展示

  前3个为鼠标点击产生效果，后边6个为鼠标移动跟随效果。

    

        效果名称

        效果图

    

    

        fireWorks

        

    

    

        showLove

        

    

    

        showText

        

    

    

        bubble

        

    

    

        emoji

        

    

    

        fairyDust

        

    

    

        ghost

        

    

    

        snowflake

        

    

    

        springyEmoji

        

    

# 4.参考项目及说明

参考以下大佬项目

    

        项目作者

        项目链接

    

  

    

    tholman

    

    

    https://github.com/tholman/cursor-effects

    

  

  本插件仅为方便自己使用而写，且是在`NexT`主题下使用，若在其他主题下，应该是没得效果的，不过`CDN`链接可以正常引用。