Search code examples
javascriptvue.jsvuepress

Wrong navigation at the bottom of my page (Vuepress)

I'm currently developing a vuepress single page application to publish and link to downloads of my own games.

For navigation on my website I want to use the native sidebar only. The sidebar should have main topics like 'News' or 'Games' with their own according .md file. In the sidebar 'Games' then should collapse to show my games, which are .md files on their own and not just headings. So far it looks something like this:

enter image description here

To achieve this I've added this part to my config.js:

    sidebar: [
        {
            title: 'News',
            path: '/',
        },
        {
            title: 'Games',
            path: '/games.html',
            children: [
                {
                    title: 'Game1',
                    path: '/games/game1.md',
                }
            ]
        },           
    ]

As you can see I've made 'games.md' for 'Games' and a directory in which I store my 'games1.md' for 'Game1' that is a child of 'Games'.

Now my problem is that when I open 'Game1' at the bottom it links to 'News' instead of 'Games':

enter image description here

I want it so that if I'm on 'Game1' that at the bottom it links me to 'Games' instead of 'News'.

How do I fix this? Is Vuepress even intended for my use case?

Solution

  • The links at the bottom of each page are called prev-next-links in VuePress, you can manually overwrite those links for individual pages via Frontmatter.

    ---
prev: ./some-other-page
next: false
---

    You may even config them to be external links in VuePress 1.3.0

    ---
prev: true
next: https://vuepress.vuejs.org/
---