Merge pull request #6 from btc-raspberrypiclub/3-dynamically-create-n…

…avbar-using-list

Dynamically create navbar using list in `_config.yml`

README.md

@@ -32,7 +32,23 @@ included. Follow the instructions below for complete setup.
 3. Install the theme by running `bundle install` inside your site directory.
 4. Replace the current theme in your `_config.yml` file with
 `theme: jekyll-theme-cleaner-blog`.
-5. Build your site: `bundle exec jekyll serve`
+5. Add the following variable to your `_config.yml`:
+    ```yaml
+    navigation:
+    - name: Home
+      link: /
+    - name: About
+      link: /about/
+    - name: Posts
+      link: /posts/
+    - name: Contact
+      link: /contact/
+    ```
+
+    This describes the navbar at the top of your site. If it is not present,
+    there will be no links on your navbar. You can add or remove links here to
+    customize your navigation.
+6. Build your site: `bundle exec jekyll serve`
 
 Assuming there are no errors and the site is building properly, follow these
 steps next:
@@ -84,6 +100,7 @@ matter. Example:
     see how the files are set up.
 
 <!-- TODO:
+
 5. Add the form to the `contact.html` page. Add the following code to your
 `contact.html` page:
 

_config.yml

@@ -5,6 +5,17 @@ author: btc-raspberrypiclub
 baseurl: "/cleaner-blog-jekyll"
 url: "https://btc-raspberrypiclub.github.io"
 
+# Navigation links
+navigation:
+  - name: Home
+    link: /
+  - name: About
+    link: /about/
+  - name: Posts
+    link: /posts/
+  - name: Contact
+    link: /contact/
+
 # Social Profiles
 twitter_username:
 github_username: btc-raspberrypiclub

_includes/navbar.html

@@ -8,18 +8,11 @@
     </button>
     <div class="collapse navbar-collapse" id="navbarResponsive">
       <ul class="navbar-nav ms-auto">
+        {% for item in site.navigation %}
         <li class="nav-item">
-          <a class="nav-link" href="{{"/" | relative_url }}">Home</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{"/about" | relative_url }}">About</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{ "/posts" | relative_url }}">Posts</a>
-        </li>
-        <li class="nav-item">
-          <a class="nav-link" href="{{"/contact" | relative_url }}">Contact</a>
+            <a class="nav-link" href="{{ item.link | relative_url }}">{{ item.name }}</a>
         </li>
+        {% endfor %}
       </ul>
     </div>
   </div>