Hexo 主题美化

自定义图标

  1. 在 iconfont-阿里巴巴矢量图标库 中找到你喜欢的图标并添加到自己的项目里。

  2. 下载项目到本地。

  3. 在主题的 _config.yml 文件中修改 menu 部分，类似如下格式：

    menu:
  首页: / || iconfont icon-shouye
  时间线: /archives/ || iconfont icon-riqi
  标签: /tags/ || iconfont icon-biaoqian
  分类: /categories/ || iconfont icon-fenlei21
  关于: /about/ || iconfont icon-guanyuwomen

自定义鼠标

  1. 在致美化或漫锋网等网站挑选喜欢的鼠标指针样式并下载。

  2. 格式转换：

    • 浏览器通常使用 .cur 格式的鼠标指针文件。如果你下载的是 .ani 格式，需要进行转换。
    • 可以使用 CursorWorkshop 等工具将 .ani 文件转换为 .gif。
    • 然后使用在线工具（如 GIF to CUR Converter）将 .gif 文件转换为 .cur。

  3. 将转换后的 .cur 文件（例如：default.cur, pointer.cur, text.cur 等）放置到你主题的 source/images 或类似目录下。

  4. 在你的主题自定义 CSS 文件中添加以下代码，并确保 url() 中的路径正确指向你的 .cur 文件。

    /* 全局默认鼠标指针 */
body,
html {
    cursor: url('/images/mouse/default.cur'), auto !important;
}

/* 链接悬停时的鼠标指针 */
a,
button,
.btn {
    cursor: url('/images/mouse/pointer.cur'), auto !important;
}

/* 文本选择时的鼠标指针 */
input,
textarea {
    cursor: url('/images/mouse/text.cur'), auto;
}

/* 图片悬停时的鼠标指针 */
img:hover {
    cursor: url('/images/mouse/zoom-in.cur'), auto !important;
}

/* 其他特定元素的悬停样式 */
#nav .site-page:hover,
#pagination .page-number:hover,
#footer-wrap a:hover {
    cursor: url('/images/mouse/pointer.cur'), auto;
}

  5. 重新部署你的 Hexo 博客 (hexo clean && hexo g && hexo d) 即可看到效果。