hexo-fluid进阶指南

引言

众所周知，如果你看过这1+1篇文章，那你大概率会有一个较为漂亮的hexo-fluid博客。但是，你是否想知道fluid更进阶的使用呢？

导航栏折叠框

是的，你看过的大部分博客都是带有折叠框的，那我们要如何设置呢？
我们拿我的博客举例：
将归档，分类，标签分到一类，名为文章，图标使用书籍。拿我们首先打开文件_config.fluid.yml，找到menu，这时你大概看到的代码是这样：

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" }
  ...

而我们要将

1
2
3

- { 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: '文章',
  icon: 'iconfont icon-books',
  submenu: [
    { 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" }
  ]
}

ok，懂了吧，肯定又要有人问了：icon-books，icon-archive-fill这些都是什么？这是主题内置的社交类图标，均来自Iconfont，具体图标如下：
::::info[图标]

::::

自定义页面

如果想要自定义页面，你可以在source文件夹里新建一个文件夹，如HTML，然后在HTML文件夹中创建你的html文件，建议为单html。然后可以在导航栏中添加此链接，方式如下：

打开_config.fluid.yml。
找到菜单栏（menu）。
在末尾（或中间）添上代码- { key: "名字", link: "文件夹相对路径（相对于source）", 图标（可有可无）" }。
```
hexo clean
hexo g
hexo d
```

这时你会发现，同步上去点开后，会保留博客的CSS和JS，对于一些想在这放html游戏的人很不友好，那要怎么弄呢？打开_config.yml，将_config.yml中的skip_render加入你的专用html页面的相对路径（如- ./HTML/xxx.html，注意，前面要加- ，相对路径为相对于sourced的路径。

自定义字体

有些人不喜欢fluid的默认字体，所以就出现了自定义字体。首先，准备好woff字体文件，如果是ttf，可以到这个网站转换。然后，在source目录下建立文件夹fonts，里面建立文件custom.ccs（将stylesheet.css的内容复制进去），并将字体文件（woff文件）粘贴进到这个文件夹。接着，打开_config.fluid.yml，找到custom_css:，添加/css/custom.css。最后，打开目录hexo\node_modules\hexo-theme-fluid\source\css\ _variables，将font里的$font-family = theme-config("font.font_family", "var(--font-family-sans-serif)")添上Noto Serif SC，即改成`$font-family = theme-config(“font.font_family”,”Noto Serif SC”, “var(–font-family-sans-serif)”)~。

hexo-fluid进阶指南

引言

导航栏折叠框

自定义页面

自定义字体

广告