美文网首页
侧边栏导航

侧边栏导航

作者: WIING_ccba | 来源:发表于2018-07-07 23:56 被阅读0次

    为了提高用户体验,我们可以在侧边栏添加导航。

    步骤一

    1. 在data文件夹找到navigation.yml,根据作者写的Quick-Start Guide的添加侧边栏导航,在里面添加以下代码
    docs:
      - title: Getting Started
        children:
          - title: "Quick-Start Guide"
            url: /docs/quick-start-guide/
          - title: "Structure"
            url: /docs/structure/
          - title: "Installation"
            url: /docs/installation/
          - title: "Upgrading"
            url: /docs/upgrading/
    
      - title: Customization
        children:
          - title: "Configuration"
            url: /docs/configuration/
          - title: "Navigation"
            url: /docs/navigation/
          - title: "UI Text"
            url: /docs/ui-text/
          - title: "Authors"
            url: /docs/authors/
          - title: "Layouts"
            url: /docs/layouts/
    
      - title: Content
        children:
          - title: "Working with Posts"
            url: /docs/posts/
          - title: "Working with Pages"
            url: /docs/pages/
          - title: "Working with Collections"
            url: /docs/collections/
          - title: "Helpers"
            url: /docs/helpers/
          - title: "Utility Classes"
            url: /docs/utility-classes/
    
      - title: Extras
        children:
          - title: "Stylesheets"
            url: /docs/stylesheets/
          - title: "JavaScript"
            url: /docs/javascript/
    

    步骤二

    在页面添加以下代码

    sidebar:
      nav: "docs"
    

    我的尝试:


    在文章的页面中添加以上代码,侧边栏就出现了导航啦!
    作者的侧边栏导航模板太多我的网站不需要的按钮了,于是我简化了一下,下面是我的侧边栏导航代码



    出来的效果就是

    相关文章

      网友评论

          本文标题:侧边栏导航

          本文链接:https://www.haomeiwen.com/subject/fkynuftx.html