CODEWITHSUNDEEP
htmlcssjekyllgithub-pages
GaiusBaltar
GaiusBaltar

Reputation: 31

Adding custom sidebar to Github Page (using Jekyll minimal theme)

I am using the Jekyll minimal theme to design a website that I am hosting from a Github repo via Github Pages. I would like to add a sidebar to allow me to navigate to different pages. Although the documentation seems straightforward, I have not been able to add a navigation sidebar to my website. In particular, I have tried the following:

  1. I have followed the answer in the closely related topic Sidebar on GitHub Pages, i.e. I changed the theme to "github-pages-minimal" (a step I would like to avoid as I prefer the jekyll-minimal-theme) and added the file "_layouts/default.html" from the minimal repo to my own repo. Unfortunately, nothing happened.

  2. I followed the steps in the documentation https://mmistakes.github.io/minimal-mistakes/docs/layouts/#custom-sidebar-navigation-menu So I added the following as "front matter" to the file config.yml in my root directory

---
  defaults:
    # _docs
    - scope:
        path: ""
        type: main
      values:
        sidebar:
          nav: "main"
  ---

and the following code in _data/navigation.yml

# main links
main:
  - title: "Home"
    url: /index.html
  - title: "Teaching"
    url: /teaching/
  - title: "Downloads"
    url: /year-archive/
  # - title: "Quick-Start Guide"
  #   url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

I understand that adding "front matter" merely means to add some code in between three dashed lines at the top of a file, is that correct? The expected outcome after these two changes is that on every page (I currently only have one) there should be a sidebar that allows viewers to navigate to three different pages labelled "Home", "Teaching", and "Downloads" (which I have not yet created) but instead, nothing happens.

I would prefer any solution that doesn't require me to change my theme from jekyll-minimal to minimize the risk of breaking another part of my website.

Upvotes: 2

Views: 2675

Answers (1)

정지명
정지명

Reputation: 1

from _data/navigation.yml:

# -title: "Quick-Start Guide"
   url: https://mmistakes.github.io/minimal-mistakes/docs/quick-start-guide/

Remove the # from above and edit the content into what you want

- title: "YOUR NEW MENU"
  url: THE_PAGE_YOU_WANT_USER_TO_BE_REDIRECTED

Then you will get a new navigation menu on the top right

Upvotes: 0

Related Questions