Incorrect footer navigation on my Vuepress website

I'm in the process of developing a vuepress single page application for showcasing and providing downloads of my personal game projects.

When it comes to website navigation, I am aiming to utilize the native sidebar exclusively. This sidebar will have main categories like 'News' or 'Games', each linked to its own .md file. Within the 'Games' section, I would like the ability to collapse and display individual games as separate .md files rather than just headings. Here is a rough outline of what I have so far:

In order to achieve this layout, I have included the following snippet in my config.js:

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

As shown above, I created 'games.md' for the 'Games' section and established a directory where I store 'game1.md' for 'Game1' as a sub-category.

However, my current issue is that when I click on 'Game1' at the bottom, it redirects me back to 'News' instead of 'Games':

What I actually want is for clicking on 'Game1' to redirect me to 'Games' instead of 'News' when viewed from within that specific game.

How can I resolve this problem? Is Vuepress suitable for the requirements of my project?

Answer №1

The hyperlinks located at the bottom of each webpage are known as prev-next-links within VuePress. You have the ability to manually override these links on a per-page basis using Frontmatter.

---
prev: ./different-page
next: false
---

In VuePress 1.3.0, you can even customize them to point to external sites.

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

"By selecting the image, you can initiate the submission of the form

I am trying to figure out why clicking on the image in my form is triggering the form submission by default. Can someone please provide guidance on this issue? <form name="test1" action="er" method="post" onsubmit="return validateForm()" <input ty ...

Initiating an AJAX call with custom headers

According to David Flanagan's book "JavaScript: The Definitive Guide, 5th Edition", it is recommended to send request headers before making an AJAX request. Is it necessary to do this for compatibility across different browsers? request.setRequestHe ...

Attempting to access a variable from outside the function

I am looking to pass the index variable from mapping to the event change function in my code snippet below: {this.data && this.data.map((item, index) => ( <tr className="table-info" key={index}> <td>{index}</ ...

What is the reason why the show() function in JQuery only applies to one specific element, rather than all elements selected with the same selector?

JSFiddle. This example code features a nested <table> within another <table>. The main issue concerns the click listener for the #add button. Specifically, the final if/else statement in the function. When you execute this code and click the ...

Reloading the table columns in a JSP page with a click of the refresh button on every row using AJAX and JavaScript

Hey there! I have a JSP page with a table where data is displayed by iterating through a list from the action class. Each row in the table has a refresh button at row level. Here is a snippet of the JSP: <script type="text/javascript"> functi ...

During the rendering process, the property "quote" was accessed, however, it is not defined on the current instance. (Vue.js)

Every time I try to retrieve data from the kanye API, I encounter this error message: Property "quote" was accessed during render but is not defined on instance. Below is the code snippet that triggered the error: <template> <div> ...

Is it possible to configure Nginx mime types within a Docker container?

My docker-compose.yml file looks like this: version: "1.0" services: web: container_name: webserver image: nginx volumes: - ./nginx.conf:/etc/nginx/nginx.conf:ro - ./frontend:/frontend ports: - "8001:80&qu ...

What is the best way to include an image link in a JSON file using Nuxt.js?

I am working with nuxtjs and I have a file named data.json in the root directory. I am trying to add an image link in this JSON file, but it is not recognizing it. Here is my code: { "id": 1, "cardImg": "./assets/images/ima ...

Navigating to redirected URL within jquery's get() function

When I tried sending a get request to a Google App Script URL in my application using JQuery's get method, everything was working fine. However, out of the blue, that API started redirecting to a different URL in case of an authentication error. As a ...

Can you please explain the function of this JavaScript code for the Isotope filter?

I am struggling to grasp the functionality of a section of vanilla JS code related to the Isotope filter. You can find the original code here. var buttonGroups = document.querySelectorAll('.button-group'); for (var i = 0; i < buttonGroups.le ...

Using jQuery and Perl to create a dynamic progress bar that is based on the current state of a "pipeline file" and utilizes AJAX

I'm looking to create a small pipeline that enables users to select a file and run multiple scripts using it as an input. Some of these scripts may take several minutes to complete (time depends on the file's size), so I want to display a progres ...

Is there a method for removing the Microsoft Translator widget while still keeping the translation feature intact?

I am currently utilizing the Microsoft Translation Widget to automatically translate a webpage without requiring any user interaction. Unfortunately, I have been facing an issue where I am unable to remove or hide the widget that keeps popping up on the p ...

How to reference an image located in one folder from a page in a different folder using React

Imagine there is Folder A containing an image called 'image.jpg' and Folder B with an HTML page that needs to access the image in Folder A in order to display it. The following code successfully accomplishes this task: <img src={require(&apo ...

"Unleashing the Power of MongoDB's Dynamic $in

Is there a way to dynamically pass a list of strings to a $in clause in MongoDB? I attempted the following code, but it didn't work and I haven't been able to locate more information other than an example with hardcoded values. The restrictedUs ...

The TypeScript error occurs when attempting to assign a type of 'Promise<void | Object>' to a type of 'Promise<Object>' within a Promise.then() function

I'm currently working on a service to cache documents in base64 format. The idea is to first check sessionStorage for the document, and if it's not there, fetch it from IRequestService and then store it in sessionStorage. However, I've encou ...

Integrating fresh components into a JSON structure

I've been attempting to insert a new element into my JSON, but I'm struggling to do it correctly. I've tried numerous approaches and am unsure of what might be causing the issue. INITIAL JSON INPUT { "UnitID":"1148", "UNIT":"202B", "Sp ...

What is the formula for determining the percentage of transparent area on a canvas?

In my Ionic 4 drawing app, I have incorporated an image of the number 1 on the canvas using drawImage and made the background transparent. If users (typically kids) draw outside the number 1 image, the accuracy percentage will decrease. While searching for ...

Is there a way for me to implement this code to achieve the functionality shown in the demo link

$('select').change(function() { var sum = 0; var sum = parseInt($('select[name="bathrooms"]').val() * 25) + parseInt($('select[name="bedrooms"]').val() * 8); $("#sum").html(sum); }); <script src="https://ajax.googleap ...

What's the best way to enable touch scrolling for items within a div container?

I am in the process of creating a code snippet that will allow users to scroll through items within a div, similar to a spinning wheel or slot machine. While I am aware of an existing solution for iPhone and iPod, I want to develop a simpler, more streamli ...

The process of retrieving request data from axios.get and storing it in the Redux store

Recently delving into Redux, I'm curious about how to retrieve request data from a GET method. Upon mounting the component, you can use axios to send a GET request to '/api/v3/products', passing in parameters like pageNumber and pageSize. ...