使用hexo博客的fluid主题已经有一段时间了，因为打算写的内容很杂，所从很早开始就想要做一个二级导航出来，这段时间一直在折腾这个东西！前几天给网站加上了豆瓣的📕书评和🎦电影栏目，发现这样要是以后再加点什么东西导航栏就放不下了。所以痛定思痛决定开始弄二级导航（鬼知道我为了做这个东西连即将要到来的考试和难到爆炸的课程设计都不管了）
开始搞事情😄O(∩_∩)O
emmmmm，首先其实差不多只有这一步啦我们要做的就是更改文章生成的模板，fluid主题的话就打开主题目录下的layout文件夹中的nav.ejs文件，修改为如下的样式（其中注释的位置就是修改的主要位置，也是导航栏内容所在，你也可以按照自己的想法修改这个地方的内容）：
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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
| <nav id="navbar" class="navbar fixed-top navbar-expand-lg navbar-dark scrolling-navbar">
<div class="container">
<a class="navbar-brand"
href="<%- url_for() %>"> <strong><%- theme.navbar.blog_title || config.title %></strong> </a>
<button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
data-target="#navbarSupportedContent"
aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<div class="animated-icon"><span></span><span></span><span></span></div>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ml-auto text-center">
<% for(const each of theme.navbar.menu) { %>
<% if (!each.link) continue %>
<% var text = each.name || __(each.key + '.title') %>
<% if (text.indexOf('.title') !== -1) {
text = each.key
} %>
<li class="nav-item">
<a class="nav-link" href="<%= url_for(each.link) %>">
<%- each.icon ? '<i class="' + each.icon + '"></i>' : '' %>
<%- text %></a>
<% if (each.submenu) { %>
<ul class="sub-menu">
<% for (const submenu of each.submenu){ %>
<li>
<a href="<%- url_for(submenu.link) %>">
<%- each.icon ? '<i class="' + submenu.icon + '"></i>' : '' %>
<%= submenu.key %>
</a>
</li>
<% } %>
</ul>
<% } %>
</li>
<% } %>
<% if(theme.search.enable) { %>
<li class="nav-item" id="search-btn">
<a class="nav-link" data-toggle="modal" data-target="#modalSearch"> <i
class="iconfont icon-search"></i> </a>
</li>
<% } %>
</ul>
</div>
</div>
</nav>
|
修改css配置，让它好看点
如果不修改css配置其实也是可以的，只不过很丑就对了。
所以我们打开主题目录下source/css/mian.styl，本来应该在子项对应的部分添加，但是考虑到（好吧，╮(╯-╰)╭，其实是我懒）慢慢找实在是太麻烦了，所以我们直接在main文件里添加（这部分你可以先hexo s打开浏览器进行调试到你喜欢的样式，然后再复制相应的样式表到文件中）如下代码：
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
31
32
| .sub-menu {
display: none;
position: relative;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
background-color: rgba(0,0,0,0.2);
padding-left: 10px;
padding-right: 20px;
padding-top: 10px;
padding-bottom: 10px;
width: auto;
height: auto;
box-shadow: -6px 6px 8px black;
}
// 以上是控制二级菜单呼出的形式
.sub-menu .li {
padding-top: 10px;
padding-bottom: 10px;
}
.nav-item:hover .sub-menu {
display: block;
}
// 控制鼠标停留在一级菜单上时呼出二级菜单
ul {
list-style: none;
}
li.nav-item {
padding: 0 15px;
}
|
这样我们的基本的配置就算是完成了，接下来就是二级菜单的写法！
配置文件中二级菜单的写法
打开主题配置文件fluid_config.yml，在菜单部分以“_分类_”菜单为例我们做如下的改动
submenu指定二级菜单，和一级菜单类似，最后用[]括起来！！！
1
2
3
4
5
6
7
8
9
10
11
12
13
| navbar:
blog_title:
menu:
- { key: 'home', link: '/', icon: 'iconfont icon-home-fill' }
- { key: 'archive', link: '/archives/', icon: 'iconfont icon-archive-fill' }
- { key: 'category', link: '#', icon: 'iconfont icon-category-fill', submenu: [
{ key: '全部', link: '/categories/', icon: 'icofont-abc' },
{ key: '生活', link: '/categories/生活/', icon: 'icofont-love' },
{ key: '🖊笔记', link: '/categories/笔记/', icon: 'icofont-notebook' }
]}
- { key: 'tag', link: '/tags/', icon: 'iconfont icon-tags-fill' }
- { key: 'about', link: '/about/', icon: 'iconfont icon-user-fill' }
|
这样我们就完成了一个主题的二级导航自定义，当然这样其实还是不太好看，可以自己用css进行调整。此外，针对不同的主题配置config.yml的不同写法情况，其实都是大同小异的，可以点我去往某个大佬的空间看看，以作参考！！！<(￣︶￣)↗[GO!]。
以我的网站为例最终实现就是这样的效果：
哈哈哈哈，我觉得还是可以的！！！😁😁😁
