Hexo 主题美化

自定义图标

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

  2. 下载项目到本地。

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

    1
    2
    3
    4
    5
    6
    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 文件。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    /* 全局默认鼠标指针 */
    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) 即可看到效果。