Hexo

hexo实现二级和多级菜单的方法

2017-12-09  本文已影响45人  ywops

有的时候,hexo站点内容较多,需要多级菜单,网上找了很久,没找到答案,自己想了一个方法,如要实现二级菜单,可以通过判断一级菜单来实现。实现三级菜单可以通过判断二级菜单实现,以此类推。

这里以实现二级菜单为例:

修改主题_config.yml

menu:  #这里是一级菜单
  Home: /
  About: /about/
  Products: /products/
  News: /news/
  Support: /support/
  Contact: /contact/
  
about: #这里是二级菜单
    Introduction: /about/introduction/
    Videos: /about/videos/
    Culture: /about/culture/

修改header.ejs

在菜单的位置,加入以下代码:

...
<% for (var name in theme.menu) { %>                        
    <li><a href="<%- url_for(theme.menu[name]) %>"><div><%= name %></div></a>
        <% if(name == 'About') { %>
        <ul>
            <% for (var i in theme.about) { %>
                <li><a href="<%- url_for(theme.about[i]) %>"><div><%= i %></div></a></li>
            <% } %>
        </ul>
        <% } %>
    
    </li>
<% } %>
...

如果有多个二级菜单项,只要增加多个if判断即可。
原文出处:http://zhy.one/html/hexo-multi-menu.html

上一篇下一篇

猜你喜欢

热点阅读