Hexo 魔改 - Nav图标自定义

看到了张洪Heo博客的Nav图标简洁好看，也想着给自己的也换一个，于是就有了下面的更改。

效果展示

更改此图标需要涉及到nav.pug,CSS,head.styl，nav.styl,接下来就按下面步骤操作。

引入CSS

在 主题配置文件，引入CSS，在自定义配置的head里面引入下面的内容

1
- <link rel="stylesheet" href="https://cdn3.codesign.qq.com/icons/X2bzpZvRWkZkAaV/latest/iconfont.css">

修改 nav.pug

路经themes\anzhiyu\layout\includes\header\nav.pug
在 nav.pug 文件中修改相应的图标

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
- i.anzhiyufont.anzhiyu-icon-grip-vertical
+ i.back-home-button-icon.heofont.icon-apps-fill

- i.anzhiyufont.anzhiyu-icon-house-chimney
+ i.heofont.icon-Home

- i.anzhiyufont.anzhiyu-icon-train
+ i.heofont.icon-train-line

- i.anzhiyufont.anzhiyu-icon-dice
+ i.heofont.icon-signal-tower-fill

- i.anzhiyufont.anzhiyu-icon-magnifying-glass
+ i.heofont.icon-search-2-line

- label.widget(for="center-console" title=_p("中控台") onclick="anzhiyu.switchConsole();")
-   i.left
-   i.widget.center
-   i.widget.right
+ div.nav-button#nav-console
+   a.console_switchbutton(for="center-console" title=_p("中控台") onclick="anzhiyu.switchConsole();")
+     i.heofont.icon-dashboard-fill

- i.anzhiyufont.anzhiyu-icon-arrow-up
+ i.heofont.icon-arrow-up-line

- i.anzhiyufont.anzhiyu-icon-bars
+ i.heofont.icon-menu-fill

修改图标大小

更换图标后，图标大小并不是和原来的一样，整体都偏小，所以需要修改样式
路经themes\anzhiyu\source\css\_layout\head.styl,约435行。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#nav
  position: fixed
  transition: .3s
  top: 0
  z-index: 90
  display: flex
  align-items: center
  padding 0 calc((100% - 1400px + 3rem) / 2)
  width: 100%
  height: 60px
  opacity: 1
  justify-content: space-between;
  outline: 1px solid var(--anzhiyu-none);
  i
-   font-size: 1.2rem
+   font-size: 1.4rem
    font-weight: bold

另外nav.styl也要更改，不然home图标太小，因为这个图标的大小不在head.styl里面
路经themes\anzhiyu\source\css\_layout\nav.styl，约579行。
1
2
3
4
5
6
#blog_name #site-name i
  position absolute
  transition 0.3s
- font-size: 1rem
+ font-size: 1.5rem
  opacity 0

另外，更改完之后，图标明显加粗了，那就找到上面font-weight，修改字体粗细
1
2
-   font-weight: bold
+   font-weight: normal

移动隐藏中控台

主题默认移动端隐藏了中控台，那么，必须要加入下面的CSS才能完全实现
路经themes\anzhiyu\source\css\_extra\console\console.css，约960行。

1
2
3
4
5
6
7
8
9
10
11
@media screen and (max-width: 768px) {
  body:has(#console.show) #nav-music {
    width: 90%;
  }
  #center-console + label {
    display: none;
  }
+ #nav-console {
+ display: none;
+  }
}

左侧的nav功能图标也可以隐藏

在自定义文件或者themes\anzhiyu\source\css\_layout\nav.styl中添加如下内容即可

1
2
3
4
5
+ @media screen and (max-width: 768px){
+ .back-home-button {
+    display: none;
+}
+}

如此，完事～