完善侧边栏

上一篇教程我们已经把侧边栏成功的加入到我们的story主题中了,但是该侧边栏还是写死的数据。所以开始把它和我们的主题目录绑定起来。有用过hexo主题的朋友应该知道在config中一般有个menu配置项,用来配置博客的模板页。今天我们就来实现这一过程。
在此之前,有一样东西必须要了解一下(虽然不了解也没事)。那就是config.yml,如果说你学习过其他语言,甚至是开发过一些项目。那么你用的配置文件可能是.json.conf.xml.pro.ini。那么hexo中的.yml又是什么呢?感兴趣的可以学习另一篇文章:yaml基本语法及实现Hexo二级导航栏功能
开始撸代码之前我们要在config中添加sidebar的项:(暂定如下,图标还未考虑好)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sidebar: # 侧边栏
首页: { path: /, fa: fa }
归档: { path: /, fa: fa }
关于: { path: /, fa: fa }
项目: { path: /, fa: fa, submenus: {
hexo-theme-sakura: { path: /, fa: fa},
hexo-theme-story: { path: /, fa: fa},
hugo-theme-diaspora: { path: /, fa: fa},
hugo-theme-jsimple: { path: /, fa: fa}
} }
友链: { path: /, fa: fa }
FOLLOW ME: { path: /, fa: fa, submenus: {
qq: { path: /, fa: fa},
sina: { path: /, fa: fa},
github: { path: /, fa: fa },
weichat: { path: /, fa: fa},
bilibili: { path: /, fa: fa },
} }

因为post-list中的代码已经够多,而且侧边栏也不算是post-list,所以我们在_partial下新建一个sidebar.ejs文件,把侧边栏代码放进去。然后修改代码如下:(为啥用for in?因为循环的是对象)

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
<nav>
<div class="menu-btn">
<div class="line line__1"></div>
<div class="line line__2"></div>
<div class="line line__3"></div>
</div>

<div class="sub-menu-btn">
<div class="line line__1"></div>
<div class="line line__2"></div>
</div>

<ul class="nav-links">
<% var sidebar = theme.sidebar %>
<% for (item in sidebar) {%>
<li class="link">
<% if (!sidebar[item].submenus) {%>
<a href="<%- url_for(sidebar[item].path) %>"><%- item %></a>
<% } else { %>
<a href="<%- url_for(sidebar[item].path) %>" style="pointer-events: none;"><%- item %></a>
<ol>
<% for (submenu in sidebar[item].submenus) {%>
<li><a href="<%- url_for(sidebar[item].submenus[submenu].path) %>"><%- submenu %></a></li>
<% } %>
</ol>
<% } %>
</li>
<% } %>
</ul>
</nav>

就里讲下pointer-events: none
pointer-events 更像是JavaScript,它能够:

  • 阻止用户的点击动作产生任何效果
  • 阻止缺省鼠标指针的显示
  • 阻止CSS里的 hover 和 active 状态的变化触发事件
  • 阻止JavaScript点击动作触发的事件

了解更多参考MDN:pointer-events
侧边栏效果如下:

给侧边栏添加图标

先在header.ejs中添加fontawesome的css:

1
<%- css(['/css/main.css', '/css/noscript.css', '/css/sidebar.css', '/css/fontawesome-all.min.css']) %>

接着来到fontawesome官网

点击图标,找到home的class。同理找到其他的图标。

修改config如下:(subsmenu就留给你们练手了)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
sidebar: # 侧边栏
首页: { path: /, fa: fa fa-home }
归档: { path: /archives/, fa: fa fa-archive }
关于: { path: /, fa: fa fa-question-circle }
项目: { path: /, fa: fa fa-paper-plane, submenus: {
hexo-theme-sakura: { path: /, fa: fa},
hexo-theme-story: { path: /, fa: fa},
hugo-theme-diaspora: { path: /, fa: fa},
hugo-theme-jsimple: { path: /, fa: fa}
} }
友链: { path: /, fa: fa fa-link }
FOLLOW ME: { path: /, fa: fa fa-heart, submenus: {
qq: { path: /, fa: fa},
sina: { path: /, fa: fa},
github: { path: /, fa: fa },
weichat: { path: /, fa: fa},
bilibili: { path: /, fa: fa }
} }

然后修改sidebar.ejs代码如下:(加了个i标签哦)

1
2
3
4
<% if (!sidebar[item].submenus) {%>
<a href="<%- url_for(sidebar[item].path) %>"><i class="<%= sidebar[item].fa %>"></i><%- item %></a>
<% } else { %>
<a href="<%- url_for(sidebar[item].path) %>" style="pointer-events: none;"><i class="<%= sidebar[item].fa %>"></i><%- item %></a>

最终效果如下!:

未完待续 To be continued……
代码同步上传在github仓库和百度云上,关注回复story011获取。

希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦

有好的文章也可以向博主投稿哦