侧边栏导航

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

步骤一

  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"

我的尝试:


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



出来的效果就是

你可能感兴趣的:(侧边栏导航)