都2020了,带你开发hexo主题(十一)
完善侧边栏
上一篇教程我们已经把侧边栏成功的加入到我们的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
18sidebar: # 侧边栏
首页: { 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
18sidebar: # 侧边栏
首页: { 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获取。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦
您的喜欢是作者写作最大的动力
QQ群和公众号