Hexo博客 | 给博客导航栏添加二级菜单

Hexo主题导航栏添加二级菜单的简单方法

第一步，找到所使用主题的导航栏文件，例如：Ayer主题的位于hexothemesayerlayout_partialsidebar.ejs

第二步，打开文件，找到文件对应生成菜单的位置,一般在<li></li>内，在里面添加代码

代码语言：javascript复制

<ul class="nav nav-main">
  <% for (var i in theme.menu){ %>
  <li class="nav-item">
    <!-- 找到这里，添加代码 -->
    <a class="nav-item-link" href="<%- url_for(theme.menu[i].path) %>"><%= i %></a>
    	<% if (theme.menu[i].submenus) { %>
        <ul class="sub-menu">
          <% for (var submenu in theme.menu[i].submenus){ %>
            <li>
              <small><a class="nav-item-link" href="<%- url_for(theme.menu[i].submenus[submenu].path) %>"><%= submenu %>
              </a></small>
            </li>
          <% } %>
        </ul>
      <% } %>
      <!-- 到这里结束 -->
  </li>
  <% } %>
</ul>

第三步，添加css,这是我的样式，当然可以自行修改

代码语言：javascript复制

<style>
.nav-main li ul{
	display: none;
}
.nav-main li:hover ul{
	display:block;
}
.sub-menu{
    position: absolute;
    background: #fff;
    padding: 5px;
    width: 8rem;
    z-index:1000;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0 1px 40px -8px rgba(0,0,0,.5);
    -webkit-animation: fadeInUp .3s .1s ease both;
    list-style:none;
}
.nav-main li ul::before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent #fff transparent;
}
</style>

第四步，找到主题下的配置文件，如ayer的位于hexothemesayer_config.yml，在需要的位置添加submenus，修改菜单menu信息，例如我的：

代码语言：javascript复制

# 侧边栏菜单
menu:
  主页: { path: / }
  说说: { path: /talks }  
  友链: { path: /friends }
  随机: { path: /random.html }
  留言: { path: /guestbook }
  归档: { path: /archives ,submenus: {
    分类: { path: /categories },
    标签: { path: /tags },
    相册: { path: /photos }
        } }
  关于: { path: /about ,submenus: {
      统计: { path: /analytics },
      监控: { path: https://monitor.justlovesmile.top }
        } }

hexo

0 人点赞