【Hexo】添加自定义iconfont和导航栏菜单项

注：只适用于 fluid 主题

1. 添加自定义iconfont

为了不破坏主题的原有iconfont，需要在主题的 themes/fluid/source/css/ 目录下新建CSS文件，作为自定义CSS文件引入。

首先去iconfont网站上选择需要的图标，添加到购物车，加入购物车后，点击右上角的购物车图标，将购物车中的图标添加到项目中。然后在项目的 Font class 栏目查看CSS文件的链接，打开这个链接，复制CSS文件的内容，粘贴到新建的CSS文件中。

在这里我们新建的CSS文件命名为 icons.css ，并将其放在 themes/fluid/source/css/custom/ 目录下。

@font-face {
    font-family: "iconfont"; /* Project id 4882210 */
    src: url('//at.alicdn.com/t/c/font_4882210_uk15ii6hs58.woff2?t=1743882016791') format('woff2'),
         url('//at.alicdn.com/t/c/font_4882210_uk15ii6hs58.woff?t=1743882016791') format('woff'),
         url('//at.alicdn.com/t/c/font_4882210_uk15ii6hs58.ttf?t=1743882016791') format('truetype');
  }
  
  .iconfont {
    font-family: "iconfont" !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
  
  .icon-timeline-fill:before {
    content: "\ea34";
  }
  
  .icon-theme-switch:before {
    content: "\e67f";
  }
  
  .icon-timeline-line:before {
    content: "\ea33";
  }
  
  .icon-Blur:before {
    content: "\e63f";
  }
  
  .icon-Blur1:before {
    content: "\e61e";
  }

然后去到主题的 _config.fluid.yml 文件中，找到 custom_css 选项，添加我们新建的CSS文件的路径：

custom_css:
  - css/custom/icons.css

这样就完成了自定义iconfont的添加。

2. 添加导航栏菜单项

在主题的 _config.fluid.yml 文件中，找到 navbar > menu 选项，添加新的菜单项：

navbar:
  menu:
    - { key: "home", link: "/", icon: "iconfont icon-home-fill" }
    - { key: "archive", link: "/archives/", icon: "iconfont icon-archive-fill" }
    - { key: "category", link: "/categories/", icon: "iconfont icon-category-fill" }
    - { key: "tag", link: "/tags/", icon: "iconfont icon-tags-fill" }
    - { key: "diary", link: "/2024/02/26/我的日记与未来计划/", icon: "iconfont icon-notebook" } # custom
    - { key: "anime", link: "/2023/09/09/アニメの旅々/", icon: "iconfont icon-timeline-fill" } # custom
    - { key: "links", link: "/links/", icon: "iconfont icon-link-fill" }
    - { key: "about", link: "/about/", icon: "iconfont icon-user-fill" }

注意这里的 icon 属性需要使用我们在自定义CSS文件中定义的图标类名，前面必须加上 iconfont 类名。 这样就完成了导航栏菜单项的添加。

之后需要在主题的 themes/fluid/languages/zh-CN.yml 文件中添加对应的菜单项名称：

diary:
  menu: '日记'
  title: '日记'
  subtitle: '日记'
  post_total: '共计 %d 篇日记'

anime:
  menu: 'アニメ'
  title: 'アニメ'
  subtitle: 'アニメ'

这样就完成了导航栏菜单项的添加。