tutorial: nav bar

itatikola · Nov 22, 2023 · 581e789 · 581e789
1 parent c7532f1
commit 581e789
Show file tree

Hide file tree

Showing 9 changed files with 50 additions and 1 deletion.
diff --git a/.DS_Store b/.DS_Store
diff --git a/_includes/navigation.html b/_includes/navigation.html
@@ -0,0 +1,8 @@
+<nav>
+    <a href="/" {% if page.url == "/" %}style="color: pink;"{% endif %}>
+      Home
+    </a>
+    <a href="/about.html" {% if page.url == "/about.html" %}style="color: pink;"{% endif %}>
+      About
+    </a>
+  </nav>
diff --git a/_layouts/default.html b/_layouts/default.html
@@ -7,6 +7,7 @@
     <title>{{ page.title }}</title>
   </head>
   <body>
+    {% include navigation.html %}
     {{ content }}
   </body>
 </html>
diff --git a/_site/404.html b/_site/404.html
@@ -5,6 +5,14 @@
     <title></title>
   </head>
   <body>
+    <nav>
+    <a href="/" >
+      Home
+    </a>
+    <a href="/about.html" >
+      About
+    </a>
+  </nav>
     <style type="text/css" media="screen">
   .container {
     margin: 10px auto;

diff --git a/_site/about.html b/_site/about.html
@@ -5,6 +5,14 @@
     <title>About</title>
   </head>
   <body>
+    <nav>
+    <a href="/" >
+      Home
+    </a>
+    <a href="/about.html" style="color: pink;">
+      About
+    </a>
+  </nav>
     <h1 id="about-page">About page</h1>
 
 <p>This page tells you a little bit about me.</p>

diff --git a/_site/about/index.html b/_site/about/index.html
@@ -5,6 +5,14 @@
     <title>About</title>
   </head>
   <body>
+    <nav>
+    <a href="/" >
+      Home
+    </a>
+    <a href="/about.html" >
+      About
+    </a>
+  </nav>
     <article class="post">
 
   <header class="post-header">

diff --git a/_site/feed.xml b/_site/feed.xml
@@ -1,4 +1,4 @@
-<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2023-11-22T14:18:40-05:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Indira Tatikola</title><subtitle>Hi! I’m Indira and I’m studying computer science at the Georgia Institue of Technology.  My areas of interest are computer vision, graphics, and machine learning and their applications in social media. Feel free to reach out through any platform! </subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/jekyll/update/2023/11/15/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2023-11-15T11:50:23-05:00</published><updated>2023-11-15T11:50:23-05:00</updated><id>http://localhost:4000/jekyll/update/2023/11/15/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2023/11/15/welcome-to-jekyll.html">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
+<?xml version="1.0" encoding="utf-8"?><feed xmlns="http://www.w3.org/2005/Atom" ><generator uri="https://jekyllrb.com/" version="3.9.3">Jekyll</generator><link href="http://localhost:4000/feed.xml" rel="self" type="application/atom+xml" /><link href="http://localhost:4000/" rel="alternate" type="text/html" /><updated>2023-11-22T14:26:57-05:00</updated><id>http://localhost:4000/feed.xml</id><title type="html">Indira Tatikola</title><subtitle>Hi! I’m Indira and I’m studying computer science at the Georgia Institue of Technology.  My areas of interest are computer vision, graphics, and machine learning and their applications in social media. Feel free to reach out through any platform! </subtitle><entry><title type="html">Welcome to Jekyll!</title><link href="http://localhost:4000/jekyll/update/2023/11/15/welcome-to-jekyll.html" rel="alternate" type="text/html" title="Welcome to Jekyll!" /><published>2023-11-15T11:50:23-05:00</published><updated>2023-11-15T11:50:23-05:00</updated><id>http://localhost:4000/jekyll/update/2023/11/15/welcome-to-jekyll</id><content type="html" xml:base="http://localhost:4000/jekyll/update/2023/11/15/welcome-to-jekyll.html">&lt;p&gt;You’ll find this post in your &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;_posts&lt;/code&gt; directory. Go ahead and edit it and re-build the site to see your changes. You can rebuild the site in many different ways, but the most common way is to run &lt;code class=&quot;language-plaintext highlighter-rouge&quot;&gt;jekyll serve&lt;/code&gt;, which launches a web server and auto-regenerates your site when a file is updated.&lt;/p&gt;
 
 &lt;p&gt;Jekyll requires blog post files to be named according to the following format:&lt;/p&gt;
 

diff --git a/_site/index.html b/_site/index.html
@@ -5,6 +5,14 @@
     <title>Home</title>
   </head>
   <body>
+    <nav>
+    <a href="/" style="color: pink;">
+      Home
+    </a>
+    <a href="/about.html" >
+      About
+    </a>
+  </nav>
     <h1> hello world!  </h1>
   </body>
 </html>
diff --git a/_site/jekyll/update/2023/11/15/welcome-to-jekyll.html b/_site/jekyll/update/2023/11/15/welcome-to-jekyll.html
@@ -5,6 +5,14 @@
     <title>Welcome to Jekyll!</title>
   </head>
   <body>
+    <nav>
+    <a href="/" >
+      Home
+    </a>
+    <a href="/about.html" >
+      About
+    </a>
+  </nav>
     <article class="post h-entry" itemscope itemtype="http://schema.org/BlogPosting">
 
   <header class="post-header">