r-markdownjekylljekyll-bootstrap

want to use Bootstrap .nav-tabs class in RMarkdown _site.yaml file for website on GitHub pages


I was wondering if there was an argument I could add to my _site.yaml file so that the rendered nav would have class = nav nav-tabs for formatting by Bootstrap (like this).

I thought there was a class: argument I could add under the navbar: section, or something like that, but I can't seem to find any documentation.

Here's what my current _site.yaml looks like, if that's relevant:

name: "my-website"
output_dir: docs
navbar:
  title: "My Website"
  left:
    - text: "Home"
      icon: fa-house
      href: index.html
    - text: "About"
      icon: fa-circle-info
      href: about.html
output:
  html_document:
    css: custom.css
    includes:
      in_header: header.html
      after_body: footer.html

Solution

  • Not as streamlined as I was hoping, but this worked.

    I modified my _site.yaml like so:

    name: "my-website"
    output_dir: docs
    output:
      html_document:
        css: custom.css
        includes:
          in_header: _header.html
          before_body: _navbar.html
          after_body: _footer.html
    

    And added a nav-tabs class to the ul in my _navbar.html code (from the RMarkdown Website GitHub):

    <div class="navbar navbar-default  navbar-fixed-top" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <!-- NOTE: add "navbar-inverse" class for an alternate navbar background -->
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="index.html">RMarkdown Website</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav nav-tabs">
            <li><a href="index.html">Home</a></li>
            <li><a href="PageA.html">Page A</a></li>
            <li><a href="PageB.html">Page B</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">
            <li><a href="https://github.com">GitHub</a></li>
          </ul>
        </div><!--/.nav-collapse -->
      </div><!--/.container -->
    </div><!--/.navbar -->