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

前言

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

正文

好了,如果你用的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 已经修复了,目前测试没啥问题,可以直接用。


文章作者: 洪卫
版权声明: 本博客所有文章除特別声明外,均采用 CC BY 4.0 许可协议。转载请注明来源 洪卫 !
 上一篇
深度学习环境配置常见问题集 深度学习环境配置常见问题集
anaconda 安装环境找不到 python 包例如用 conda install 命令安装 moviepy 这个 python 包时提示找不到相应的包我们可以通过下面这条命令查找搜索: anaconda search -t conda
2019-09-22
下一篇 
网站图片压缩优化 网站图片压缩优化
本篇文章主要告诉大家如何通过对网站图片的优化来加快网站的访问速度以及友好程度。另外介绍了一款常用的客户端图片优化神器 [Imagine](https://github.com/meowtec/Imagine),全平台支持。
  目录