category

_config.yml

@@ -1,11 +1,11 @@
 # ----------------------- #
 #      Main Configs       #
 # ----------------------- #
-
-url: http://yoursite.com
-title: Your Awesome Site
-email: your-email@domain.com
-author: Your Name
+baseurl:
+url: http://namsuji.github.io/test
+title: For Web Programmer
+email: 01928abcd@naver.com
+author: Nam
 description: > # "Write an awesome description for your new site here. 
   You can edit this line in _config.yml. It will appear in your document 
   head meta (for Google search results) and in your feed.xml site 
@@ -20,13 +20,17 @@ markdown: kramdown
 permalink: pretty
 
 # ----------------------- #
-#   3rd Party Settings    #
+#   2nd Party Settings    #
 # ----------------------- #
 
 social:
-  - title: twitter
-    url: https://twitter.com/SBootstrap
   - title: github
-    url: https://github.com/IronSummitMedia/startbootstrap
-  - title: linkedin
-    url: 
+    url: https://github.com/NamSuJi
+  - title: Naver
+    url: https://blog.naver.com/01928abcd
+
+# ----------------------- #
+#     category & tag      #
+# ----------------------- #
+category_dir: category/
+tag_dir: tag/

_includes/category.html

@@ -0,0 +1,18 @@
+---
+layout: default
+---
+<ul class="posts-list">
+
+   {%assign category = page.category | default: page.title %}
+   {% for post in site.categories[category] %}
+
+      <li>
+        <h3>
+          <a href="{{site.baseurl}}{{post.url}}">
+          {{post.title}}
+          </a>
+          <small>{{post.date|date_to_string}}</small>
+         <h3>
+        </li>
+       {%endfor %}
+ </ul>

_includes/header2.html

@@ -0,0 +1,14 @@
+<header>
+  <div class="menubar">
+    <ul class>
+      <li><a href="#about">About</a></li>
+      <li><a href="/">Category</a>
+        <ul>
+            <li><a href="/category/Github">Github</a></li>
+            <li><a href="/category/Java">Java</a></li>
+            <li><a href="/category/Python">Python</a></li>
+        </ul>
+      </li>
+    </ul>
+  </div>
+</header>

_includes/js.html

@@ -9,3 +9,6 @@
 
 <!-- Custom Theme JavaScript -->
 <script src="js/landing-page.js"></script>
+
+<!-- Custom Header2 -->
+<script src="js/_header.js"></script>

_includes/page_content.html

@@ -1,52 +1,15 @@
-<section id="services">
-<!-- Page Content -->
-{% for post in site.posts reversed %}
-  {% capture thecycle %}{% cycle 'odd', 'even' %}{% endcapture %}
-    {% if thecycle == 'odd' %}
-    <div class="content-section-a">
-
-        <div class="container">
-
-            <div class="row">
-                <div class="col-lg-5 col-sm-6">
-                    <hr class="section-heading-spacer">
-                    <div class="clearfix"></div>
-                    <h2 class="section-heading">{{ post.title }}</h2>
-                    <div class="lead">{{ post.content }}</div>
-                </div>
-                <div class="col-lg-5 col-lg-offset-2 col-sm-6">
-                    <img class="img-responsive" src="img/services/{{ post.img }}" alt="">
-                </div>
-            </div>
-
-        </div>
-        <!-- /.container -->
-
-    </div>
-    <!-- /.content-section-a -->
-    {% else %}
-
-    <div class="content-section-b">
-
-        <div class="container">
-
-            <div class="row">
-                <div class="col-lg-5 col-lg-offset-1 col-sm-push-6  col-sm-6">
-                    <hr class="section-heading-spacer">
-                    <div class="clearfix"></div>
-                    <h2 class="section-heading">{{ post.title }}</h2>
-                    <div class="lead">{{ post.content }}</div>
-                </div>
-                <div class="col-lg-5 col-sm-pull-6  col-sm-6">
-                  <img class="img-responsive" src="img/services/{{ post.img }}" alt="">
-                </div>
-            </div>
-
-        </div>
-        <!-- /.container -->
-
-    </div>
-    <!-- /.content-section-b -->
-    {% endif %}
-{% endfor %}
-</section>
+<header class="site-category">
+  <ul>
+
+    {% assign pages_list = site.pages %}
+    {% for node in pages_list %}
+      {% if node.title != null %}
+        {% if node.layout == "category" %}
+          <li><a class="category-link {% if page.url == node.url %} active{% endif %}"
+          href="{{ site.baseurl }}{{ node.url }}">{{ node.title }}</a></li>
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+
+</ul>
+</header>

_layouts/default.html

@@ -3,9 +3,8 @@
 	{% include head.html %}
 
 	<body>
-		{% include header.html %}
+		{% include header2.html %}
 		{% include about.html %}
-		{% include page_content.html %}
 		{% include contact.html %}
 		{% include footer.html %}
 		{% include js.html %}

category/Github.md

@@ -0,0 +1,5 @@
+---
+layout: category
+title: /category/Github
+permalin: '/category/Github'
+---

category/Java.md

@@ -0,0 +1,5 @@
+---
+layout: category
+title: /category/Java
+permalin: '/category/Java'
+---

category/Python.md

@@ -0,0 +1,5 @@
+---
+layout: category
+title: /category/Python
+permalin: '/category/Python'
+---

css/_header.css

@@ -0,0 +1,92 @@
+.menubar{
+border:none;
+border:0px;
+margin:0px;
+padding:0px;
+font: 67.5% "Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
+font-size:14px;
+font-weight:bold;
+}
+
+.menubar ul{
+background: rgb(109,109,109);
+height:50px;
+list-style:none;
+margin:0;
+padding:0;
+}
+
+.menubar li{
+float:left;
+padding:0px;
+}
+
+.menubar li a{
+background: rgb(109,109,109);
+color:#cccccc;
+display:block;
+font-weight:normal;
+line-height:50px;
+margin:0px;
+padding:0px 25px;
+text-align:center;
+text-decoration:none;
+}
+
+.menubar li a:hover, .menubar ul li:hover a{
+background: rgb(71,71,71);
+color:#FFFFFF;
+text-decoration:none;
+}
+
+.menubar li ul{
+background: rgb(109,109,109);
+display:none; /* 평상시에는 드랍메뉴가 안보이게 하기 */
+height:auto;
+padding:0px;
+margin:0px;
+border:0px;
+position:absolute;
+width:200px;
+z-index:200;
+/*top:1em;
+/*left:0;*/
+}
+
+.menubar li:hover ul{
+display:block; /* 마우스 커서 올리면 드랍메뉴 보이게 하기 */
+}
+
+.menubar li li {
+background: rgb(109,109,109);
+display:block;
+float:none;
+margin:0px;
+padding:0px;
+width:200px;
+}
+
+.menubar li:hover li a{
+background:none;
+}
+
+.menubar li ul a{
+display:block;
+height:50px;
+font-size:12px;
+font-style:normal;
+margin:0px;
+padding:0px 10px 0px 15px;
+text-align:left;
+}
+
+.menubar li ul a:hover, .menubar li ul li:hover a{
+background: rgb(71,71,71);
+border:0px;
+color:#ffffff;
+text-decoration:none;
+}
+
+.menubar p{
+clear:left;
+}

index.html

@@ -1,5 +1,5 @@
 ---
 layout: default
-title: Landing Page
-subTitle: A Template by Start Bootstrap
----
+title: For Web Programmer
+subTitle: Welcome my site
+---