完善侧边栏
上一篇教程我们已经把侧边栏成功的加入到我们的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获取。
希望这篇文章能给你带来知识和乐趣,喜欢博主的文章可以加博主好友哦
有好的文章也可以向博主投稿哦