为博客网站增加一个二级目录菜单

前言

都知道，我们标题栏宽度有限，我们项目一多了，就放不下了，这时候你肯定就需要一个二级菜单来拆分一下项目，既可以减少标题栏项目数，使之更加清爽，又可以间项目分类，逻辑清晰。

正文

好了，如果你用的matery主题，那么废话不多说，直接上教程，其实需要修改的就四个地方：matery.css/matery.js/navgation.ejs/mobile-nav.ejs

第一步，在 /themes/matery/layout/_partial 中找到 mobile-nav.ejs ，找到下面这段代码：

<ul class="menu-list mobile-menu-list">
    <% Object.keys(theme.menu).forEach(function(key) { %>
    <li>
        <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light">
            <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
            <i class="fa fa-fw <%- theme.menu[key].icon %>"></i>
            <% } else { %>
            <i class="fa fa-fw fa-link"></i>
            <% } %>
            <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %>
        </a>
    </li>
    <% }); %>
    <% if (theme.githubLink && theme.githubLink.enable) { %>
    <li><div class="divider"></div></li>
    <li>
        <a href="<%- theme.githubLink.url %>" class="waves-effect waves-light" target="_blank">
            <i class="fa fa-github-square fa-fw"></i><%- theme.githubLink.title %>
        </a>
    </li>
    <% } %>
</ul>

替换成下面的：

<!-- 支持二级菜单特性 洪卫 shw2018 modify 2019.09.17  -->
<ul class="menu-list mobile-menu-list">
    <% Object.keys(theme.menu).forEach(function(key) { %>
        <li class="m-nav-item">
                <% if(!theme.menu[key].children) { %>
                    <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light">
                        <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
                        <i class="fa fa-fw <%- theme.menu[key].icon %>"></i>
                        <% } else { %>
                        <i class="fa fa-fw fa-link"></i>
                        <% } %>
                        <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %>
                    </a>
              <% } else { %>
                    <a href="javascript:;">
                            <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
                            <i class="fa fa-fw <%- theme.menu[key].icon %>"></i>
                            <% } else { %>
                            <i class="fa fa-fw fa-link"></i>
                            <% } %>
                            <%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %>
                            <span class="m-icon"><i class="fa fa-chevron-right"></i></span>
                    </a>
                <ul>
                  <% for(let childrenLink of theme.menu[key].children){ %>
                    <li> 
                      <a href="<%- url_for(childrenLink.url)%>" >
                           <% if (childrenLink.icon && childrenLink.icon.length > 0) { %>
                            <i class="fa <%- childrenLink.icon %>" style="left: 25px; position: absolute;"></i>
                       <% } %>
                       <span><%- childrenLink.name %></span>
                      </a>
                    </li>
                  <% } %> 
                </ul>
              <% } %>
            </li>
        <% }); %>

        <% if (theme.githubLink && theme.githubLink.enable) { %>
        <li><div class="divider"></div></li>
        <li>
            <a href="<%- theme.githubLink.url %>" class="waves-effect waves-light" target="_blank">
                <i class="fa fa-github-square fa-fw"></i><%- theme.githubLink.title %>
            </a>
        </li>
      <% } %>
</ul>

第二步，在 /themes/matery/layout/_partial 中找到 navagtion.ejs ，找到下面这段代码：

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right">
    <% Object.keys(theme.menu).forEach(function(key) { %>
    <li class="hide-on-med-and-down">
        <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light">
            <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
            <i class="fa <%- theme.menu[key].icon %>"></i>
            <% } %>
            <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span>
        </a>
    </li>
    <% }); %>
    <li>
        <a href="#searchModal" class="modal-trigger waves-effect waves-light">
            <i id="searchIcon" class="fa fa-search" title="<%= __('search') %>"></i>
        </a>
    </li>
</ul>

替换成下面的：

<!-- 支持二级菜单特性 洪卫 shw2018 modify 2019.09.17  -->
<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fa fa-navicon"></i></a>
<ul class="right nav-menu">
    <% Object.keys(theme.menu).forEach(function(key) { %>
      <li class="hide-on-med-and-down nav-item" >

        <% if(!theme.menu[key].children) { %>
            <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light">
              <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
                <i class="fa <%- theme.menu[key].icon %>"></i>
              <% } %>
              <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span>
            </a>

            <% } else { %>
              <a href="<%- theme.menu[key].url %>" class="waves-effect waves-light">
                <% if (theme.menu[key].icon && theme.menu[key].icon.length > 0) { %>
                  <i class="fa <%- theme.menu[key].icon %>"></i>
                <% } %>
                <span><%- (config.language === 'zh-CN' && menuMap.has(key)) ? menuMap.get(key) : key %></span>
                <i class="fa fa-chevron-down" aria-hidden="true"></i>
              </a>

            <ul class="sub-nav menus_item_child ">
              <% for(let childrenLink of theme.menu[key].children){ %>
                <li> 
                  <a href="<%- url_for(childrenLink.url)%>" >
                    <% if (childrenLink.icon && childrenLink.icon.length > 0) { %>
                      <i class="fa <%- childrenLink.icon %>" style="margin-top: -20px;"></i>
                    <% } %>
                    <span><%- childrenLink.name %></span>
                  </a>
                </li>
              <% } %> 
            </ul>
          <% } %>
      </li>
    <% }); %>

    <li>
        <a href="#searchModal" class="modal-trigger waves-effect waves-light">
            <i id="searchIcon" class="fa fa-search" title="<%= __('search') %>"></i>
        </a>
    </li>
</ul>

第三步，在 /themes/matery/source/css 中找到 matery.css ，在最后添加下面这段代码：

/* 二级菜单样式定义 洪卫 shw2018 add 2019.09.17 */

.nav-menu {}

.nav-menu li .sub-nav {
    position: absolute;
    top: 77px;
    list-style: none;
    margin-left: -20px;
    display: none;
}

.nav-menu li .sub-nav li {
    text-align: center;
    clear: left;
    width: 140px;
    height: 35px;
    line-height: 35px;
    position: relative;
}

.nav-menu li .sub-nav li a {
    height: 34px;
    line-height: 34px;
    width: 138px;
    padding: 0px;
    display: inline-block;
    border-radius: 5px;
    color: #000;
}

.nav-show i[aria-hidden=true] {
    -webkit-transform: rotate(180deg) !important;
    -moz-transform: rotate(180deg) !important;
    -o-transform: rotate(180deg) !important;
    -ms-transform: rotate(180deg) !important;
    transform: rotate(180deg) !important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.menus_item_child {
    background-color: rgba(255, 255, 255, .8);
    width: fit-content;
    border-radius: 10px;
    -webkit-box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);
    box-shadow: 0 5px 20px -4px rgba(0, 0, 0, .5);
    display: none;
    opacity: 0.98;
    -ms-filter: none;
    filter: none;
    -webkit-animation: sub_menus .3s .1s ease both;
    -moz-animation: sub_menus .3s .1s ease both;
    -o-animation: sub_menus .3s .1s ease both;
    -ms-animation: sub_menus .3s .1s ease both;
    animation: sub_menus .3s .1s ease both;
}

.menus_item_child:before {
    content: "";
    position: absolute;
    top: -20px;
    left: 50%;
    margin-left: -10px;
    border-width: 10px;
    border-style: solid;
    border-color: transparent transparent rgba(255, 255, 255, .8)
}

.m-nav-item {
    /* position: relative; */
    left: 45px
}

.m-nav-item ul {
    display: none;
    background: rgba(255, 255, 255, .1);
}

.m-nav-item ul li {
    width: 245px;
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.m-nav-show .m-icon {
    -webkit-transform: rotate(90deg) !important;
    -moz-transform: rotate(90deg) !important;
    -o-transform: rotate(90deg) !important;
    -ms-transform: rotate(90deg) !important;
    transform: rotate(90deg) !important;
    -webkit-transition: all .3s;
    -moz-transition: all .3s;
    -o-transition: all .3s;
    -ms-transition: all .3s;
    transition: all .3s;
}

.m-nav-show .m-nav-item>a:hover {
    color: #FFF;
    background: rgba(255, 255, 255, .8);
}

.m-nav-show>a:before,
.m-nav-item>a:hover:before {
    opacity: 1;
}

.m-nav-item .m-icon {
    position: absolute;
    right: 65px;
    height: 50px;
    padding: 0px;
    margin: 0px;
}

.nav-item li:hover a {
    color: #FFF;
    background: rgba(0, 0, 0, .1);
}

第四步，在 /themes/matery/source/js 中找到 matery.js ，在最后一个 });前添加下面这段代码：

// 增加二级菜单功能 洪卫 shw2018 add 2019.09.17
    $(".nav-menu>li").hover(function(){
        $(this).children('ul').stop(true,true).show();
        $(this).addClass('nav-show').siblings('li').removeClass('nav-show');

    },function(){
        $(this).children('ul').stop(true,true).hide();
        $('.nav-item.nav-show').removeClass('nav-show');
    })

    $('.m-nav-item>a').on('click',function(){
            if ($(this).next('ul').css('display') == "none") {
                $('.m-nav-item').children('ul').slideUp(300);
                $(this).next('ul').slideDown(300);
                $(this).parent('li').addClass('m-nav-show').siblings('li').removeClass('m-nav-show');
            }else{
                $(this).next('ul').slideUp(300);
                $('.m-nav-item.m-nav-show').removeClass('m-nav-show');
            }
    });

第五步，在主题配置文件.yml修改标题栏内容，按下面格式更改:

  标题一级: 
    url: /XXX
    icon: fa-XXXX
    children: 
      -
        name: 标题二级1
        url: /XXX/XXX
        icon: fa-XXXX
      -
        name: 标题二级2
        url: /XXX/XXX
        icon: fa-XXXX

第六步，source 文件夹新疆对应的标题目录，并放 index.md 模板就行了。

到这一步就大功告成了，快去体验吧。

功能 five 学弟写的友情链接，联合调试的 bug 已经修复了，目前测试没啥问题，可以直接用。