Hexo博客 | Ayer主题美化之添加二级菜单

我的博客:https://blog.justlovesmile.top
Hexo主题导航栏添加二级菜单的简单方法

第一步，找到所使用主题的导航栏文件，例如：Ayer主题的位于hexo\themes\ayer\layout\_partial\sidebar.ejs

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

  <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,这是我的样式，当然可以自行修改

<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的位于hexo\themes\ayer\_config.yml，在需要的位置添加submenus，修改菜单menu信息，例如我的：

# 侧边栏菜单
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 }
        } }