Hexo-Next鼠标指针自定义

发表于 更新于 分类于 ， Waline： 阅读次数： 本文字数： 1.1k 阅读时长 ≈ 1 分钟

准备材料

  .cur或者.ico文件，不能太大（我试过超过1MB的素材不可用），.ani动态光标没试成功过。这些资源可以在致美化等途径中找到。

  这些文件建议下载到../themes/source/images中，也可以不下载而采用cdn。

  这里Next版本为8.16。

文件修改

  在yourBlog/themes/next/source/css/_common/scaffolding中找到base.styl，对里面的代码行进行编辑：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
body {
+ cursor: url(/images/yourArrow.cur), auto;
  background: var(--body-bg-color);
  box-sizing: border-box;
  color: var(--text-color);
  font-family: $font-family-base;
  font-size: $font-size-base;
  line-height: $line-height-base;
  min-height: 100%;
  position: relative;
  transition: padding $transition-ease;
  ...

}

  在添加的这行代码里将yourArrow.cur改为下载的素材名即可。这个地方一般是放指针型鼠标，下面还有一个区域需要编辑：

1
2
3
4
5
6
7
8
9
10
11
a {
+ cursor: url(/images/yourHand.cur), auto!important;
  border-bottom: 1px solid $link-decoration-color;
  color: var(--link-color);
  // For a:not(:any-link)
  cursor: pointer;
  outline: 0;
  text-decoration: none;
  ...

}

  这个位置一般放的是手型鼠标，也就是将鼠标悬在链接上会变化成的手型样式，同样将yourHand.cur改成下载的素材名。

重新部署

  修改后可以先在本地看看效果，如果成功，最后hexo三件套即可。

下面再附上很多博客在用的鼠标指针cdn：

https://cdn.jsdelivr.net/gh/kaix2301/pictures/img202201071208706.cur
https://cdn.jsdelivr.net/gh/kaix2301/pictures/img202201071205091.cur

对应指针型和手型，效果：

Arrow

Hand

用法就是将url括号里的链接替换为上述链接。