How I customized Hydejack Theme

How I customized Hydejack Theme

Thanks to @qwtel, I’m on the showcase of Hydejack’s official site!

I had a plan to write a post about what I customized, but thanks to his kind email, and posting on to the showcase, I’ve decided to write a post in English.

Documentations

First, you should check Hydejack’s documentations to install & proceed.
If you wants to use free version, use Hydejack-starter-kit.
Clone or download it. Note that it’s branch is gh-pages. Not the master branch.

Customization

Hydejack theme provides _sass/my-*.scss files for a customization.
It’s very helpful if you wish to change css of your homepage.
It overrides any default css provided by other files.

Adding Submenu to the Sidebar

Sidebar

In this post, I’ll post how to add submenu to the sidebar.
There is few files you need to edit/add for this.
You may wish to check commit history

_sass/my-style.scss
_includes/body/nav.html
_layouts/tag-list.html
_featured_categories/*.md
_featured_tags/*.md

my-style.scss

Add below code to the _sass/my-style.scss file, so it can display submenu properly.

// Sidebar Modification

.sidebar {
  text-align: center;
}

.sidebar-sticky {
  position: absolute;
  height: 95%;
  padding-top: 5%;
}

a.sidebar-nav-item {
  width:100%;
  font-weight: normal;
  display: block;
  padding: .25rem 0;
}

a.sidebar-nav-subitem {
  font-weight: normal;
  display: block;
  line-height: 1.75;
  padding: .25rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.list-wrapper {
  text-align: left;
  display: flex;
}

.list-body {
  text-align: left;
  margin: 4px;
}

.sidebar-about {
  > a.sidebar-title {
    &::after {
      width: 9rem;
    }
  }
}

// Submenu Insertion

.folder {
  color: #fff;
  font-size: x-large;
  position: absolute;
  cursor: pointer;
  right: 30px;
}

.folder:hover {
  color: #4FB1BA;
}

input[type="checkbox"]{
  position: absolute;
  left: -9999px;
}

input[type="checkbox"] ~ ul{
  height: 0;
  transform: scaleY(0);
}

input[type="checkbox"]:checked ~ ul{
  list-style: none;
  height: 100%;
  transform-origin: top;
  transition: transform .2s ease-out;
  transform: scaleY(1);
}

git diff

my-style.scss was to properly show submenu.
Changes in this file is to actually print submenu(tags) in sidebar.

<span class="sr-only">Navigation:</span>
<ul>
  
    
    
    
    

    
      
      
        <li>
          <input type="checkbox" id="list-item-9" />
          <div class="list-wrapper">
          <a
            id="_navigation"
            href="/about/"
            class="sidebar-nav-item"
            
            >
            About
          </a>
          
          </div>
          <ul class="list-body">
            
            
            
            
            
            
            
            
            
          </ul>
        </li>
      
    
      
      
        <li>
          <input type="checkbox" id="list-item-10" />
          <div class="list-wrapper">
          <a
            
            href="/devlog/"
            class="sidebar-nav-item active"
            
            >
            Devlog
          </a>
          <label class="folder" for="list-item-10"></label>
          </div>
          <ul class="list-body">
            
            
            <li>
              <a class="sidebar-nav-subitem" href="/tag-algorithm/">Algorithm</a>
            </li>
            
            
            
            <li>
              <a class="sidebar-nav-subitem" href="/tag-bwtree/">Bw Tree</a>
            </li>
            
            
            
            <li>
              <a class="sidebar-nav-subitem" href="/tag-concurrent-programming/">Concurrent Programming</a>
            </li>
            
            
            
            <li>
              <a class="sidebar-nav-subitem" href="/tag-development/">Development</a>
            </li>
            
            
          </ul>
        </li>
      
    
      
      
        <li>
          <input type="checkbox" id="list-item-11" />
          <div class="list-wrapper">
          <a
            
            href="/review/"
            class="sidebar-nav-item"
            
            >
            Review
          </a>
          
          </div>
          <ul class="list-body">
            
            
            
            
            
            
            
            
            
          </ul>
        </li>
      
    
  
</ul>

tag-list.html

Adding this file to_layouts folder will enable using layout: tag-list for the featured_tags.

---
# Copyright (c) 2018 Florian Klampfer <https://qwtel.com/>
#
# This program is free software: you can redistribute it and/or modify
# it under the terms of the GNU General Public License as published by
# the Free Software Foundation, either version 3 of the License, or
# (at your option) any later version.
#
# This program is distributed in the hope that it will be useful,
# but WITHOUT ANY WARRANTY; without even the implied warranty of
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
# GNU General Public License for more details.
#
# You should have received a copy of the GNU General Public License
# along with this program.  If not, see <http://www.gnu.org/licenses/>.

layout: base
---




  <header>
    <h1 class="page-title">How I customized Hydejack Theme</h1>
    



  <div class="hr pb0"></div>


  </header>
  <hr class="sr-only"/>



















<head>
  






  
    
<!-- Begin Jekyll SEO tag v2.6.1 -->
<title>Hydejack Post Writing Tips &amp; Tricks | Lazy Ren</title>
<meta name="generator" content="Jekyll v3.9.0" />
<meta property="og:title" content="Hydejack Post Writing Tips &amp; Tricks" />
<meta name="author" content="DaeIn Lee" />
<meta property="og:locale" content="ko_KR, en_US" />
<meta name="description" content="Hydejack 테마를 이용하여 포스트를 작성할때 참고할 syntax 입니다." />
<meta property="og:description" content="Hydejack 테마를 이용하여 포스트를 작성할때 참고할 syntax 입니다." />
<link rel="canonical" href="https://lazyren.github.io/devlog/hydejack-post-writing-tips-tricks.html" />
<meta property="og:url" content="https://lazyren.github.io/devlog/hydejack-post-writing-tips-tricks.html" />
<meta property="og:site_name" content="Lazy Ren" />
<meta property="og:type" content="article" />
<meta property="article:published_time" content="2020-07-05T00:00:00+00:00" />
<meta name="google-site-verification" content="zIn7l_GwuOi4WnyRQsdhI9Jpn6IAs0SLR_4HG8OZzsM" />
<script type="application/ld+json">
{"description":"Hydejack 테마를 이용하여 포스트를 작성할때 참고할 syntax 입니다.","@type":"BlogPosting","publisher":{"@type":"Organization","logo":{"@type":"ImageObject","url":"https://graph.facebook.com/100007955266112/picture?type=large"},"name":"DaeIn Lee"},"headline":"Hydejack Post Writing Tips &amp; Tricks","dateModified":"2020-07-05T00:00:00+00:00","datePublished":"2020-07-05T00:00:00+00:00","author":{"@type":"Person","name":"DaeIn Lee"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://lazyren.github.io/devlog/hydejack-post-writing-tips-tricks.html"},"url":"https://lazyren.github.io/devlog/hydejack-post-writing-tips-tricks.html","@context":"https://schema.org"}</script>
<!-- End Jekyll SEO tag -->


  

  

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<meta http-equiv="x-ua-compatible" content="ie=edge">

<meta name="mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Lazy Ren">
<meta name="apple-mobile-web-app-status-bar-style" content="default">

<meta name="application-name" content="Lazy Ren">


  <meta name="theme-color" content="rgb(25,55,71)">


<meta name="generator" content="Hydejack v9.0.5" />



<link rel="alternate" href="https://lazyren.github.io/devlog/gitlab-to-github-repo-clone.html" hreflang="ko-kr, en-us">

<link type="application/atom+xml" rel="alternate" href="https://lazyren.github.io/feed.xml" title="Lazy Ren" />


<link rel="shortcut icon"    href="/assets/icons/favicon.ico">
<link rel="apple-touch-icon" href="/assets/icons/icon-192x192.png">

<link rel="manifest" href="/assets/site.webmanifest">


  <link rel="dns-prefetch" href="https://fonts.googleapis.com">
  <link rel="dns-prefetch" href="https://fonts.gstatic.com">



  <link rel="dns-prefetch" href="https://www.google-analytics.com">


<link rel="preload" href="/assets/img/swipe.svg" as="image" id="_hrefSwipeSVG">

<link rel="dns-prefetch" href="/assets/js/search-worker-9.0.5.js" as="worker" id="_hrefSearch">




<link rel="dns-prefetch" href="https://lazyrengithub.disqus.com" id="_hrefDisqus">



<script>!function(e,t){"use strict";function n(e,t,n,o){e.addEventListener?e.addEventListener(t,n,o):e.attachEvent?e.attachEvent("on"+t,n):e["on"+t]=n}e.loadJS=function(e,o){var r=t.createElement("script");r.src=e,o&&n(r,"load",o,{once:!0});var a=t.scripts[0];return a.parentNode.insertBefore(r,a),r},e._loaded=!1,e.loadJSDeferred=function(o,r){function a(){e._loaded=!0,r&&n(c,"load",r,{once:!0});var o=t.scripts[0];o.parentNode.insertBefore(c,o)}var c=t.createElement("script");return c.src=o,e._loaded?a():n(e,"load",a,{once:!0}),c},e.setRel=e.setRelStylesheet=function(e){function o(){this.rel="stylesheet"}n(t.getElementById(e),"load",o,{once:!0})}}(window,document);
!function(a){"use strict";var b=function(b,c,d){function e(a){return h.body?a():void setTimeout(function(){e(a)})}function f(){i.addEventListener&&i.removeEventListener("load",f),i.media=d||"all"}var g,h=a.document,i=h.createElement("link");if(c)g=c;else{var j=(h.body||h.getElementsByTagName("head")[0]).childNodes;g=j[j.length-1]}var k=h.styleSheets;i.rel="stylesheet",i.href=b,i.media="only x",e(function(){g.parentNode.insertBefore(i,c?g:g.nextSibling)});var l=function(a){for(var b=i.href,c=k.length;c--;)if(k[c].href===b)return a();setTimeout(function(){l(a)})};return i.addEventListener&&i.addEventListener("load",f),i.onloadcssdefined=l,l(f),i};"undefined"!=typeof exports?exports.loadCSS=b:a.loadCSS=b}("undefined"!=typeof global?global:this);
!function(a){if(a.loadCSS){var b=loadCSS.relpreload={};if(b.support=function(){try{return a.document.createElement("link").relList.supports("preload")}catch(b){return!1}},b.poly=function(){for(var b=a.document.getElementsByTagName("link"),c=0;c<b.length;c++){var d=b[c];"preload"===d.rel&&"style"===d.getAttribute("as")&&(a.loadCSS(d.href,d,d.getAttribute("media")),d.rel=null)}},!b.support()){b.poly();var c=a.setInterval(b.poly,300);a.addEventListener&&a.addEventListener("load",function(){b.poly(),a.clearInterval(c)}),a.attachEvent&&a.attachEvent("onload",function(){a.clearInterval(c)})}}}(this);
!function(w) {
  w._baseURL = '/';
  w._publicPath = '/assets/js/';
  w._noPushState = false;
  w._noDrawer = false;
  w._noNavbar = false;
  w._noToc = false;
  w._noSearch = false;
}(window);
</script>


<script async src="/assets/bower_components/MathJax/es5/tex-mml-chtml.js" id="_MathJax"></script>


<!--[if gt IE 8]><!---->

  
<style id="_styleInline">
  .clearfix,.sidebar-social::after{content:"";display:table;clear:both}.color-transition,body,p,hr,.hr,.hr-after::after,.hr-bottom,.message,.note-sm,.note,#markdown-toc,.navbar,.nav-btn-bar,.nav-btn,.content .avatar{transition:none}#_dark-mode{font-size:1.25rem}@media screen{body.light-mode{--body-color: #333;--body-bg: #fff;--border-color: #ebebeb;--gray: #777;--gray-bg: rgba(0,0,0,0.025);--gray-text: #666;--menu-text: #bbb}body.light-mode .content{-webkit-font-smoothing:initial;-moz-osx-font-smoothing:initial}body.dark-mode{--body-color: #ccc;--body-bg: var(--dark-mode-body-bg);--border-color: var(--dark-mode-border-color);--gray: rgba(255,255,255,.5);--gray-bg: rgba(255,255,255,.033);--gray-text: rgba(255,255,255,.625);--menu-text: rgba(255,255,255,.25)}body.dark-mode .content{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}@media screen and (prefers-color-scheme: dark){body{--body-color: #ccc;--body-bg: var(--dark-mode-body-bg);--border-color: var(--dark-mode-border-color);--gray: rgba(255,255,255,.5);--gray-bg: rgba(255,255,255,.033);--gray-text: rgba(255,255,255,.625);--menu-text: rgba(255,255,255,.25)}body .content{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}}html{--font-family: Noto Sans,Helvetica,Arial,sans-serif;--font-family-heading: Roboto Slab,Helvetica,Arial,sans-serif;--code-font-family: Fira Code,Menlo,Monaco,Consolas,monospace;--gray: #777;--gray-bg: rgba(0,0,0,0.025);--gray-text: #666;--menu-text: #bbb;--body-color: #333;--body-bg: #fff;--border-color: #ebebeb;--root-font-size: 15px;--root-font-size-medium: 16px;--root-font-size-large: 17px;--root-font-size-print: 8pt;--root-line-height: 1.75;--font-weight: 400;--font-weight-bold: 700;--font-weight-heading: 700;--content-width-5: 60rem;--content-margin-5: 4rem;--sidebar-width: 21rem;--half-content: 34rem;--break-point-3: 64em;--break-point-5: 86em;--break-point-dynamic: 1760px}*{box-sizing:border-box}html,body{margin:0;padding:0}html{font-family:var(--font-family);font-size:var(--root-font-size);line-height:var(--root-line-height)}body{color:var(--body-color);background-color:var(--body-bg);font-weight:var(--font-weight);overflow-y:scroll}.content img,.img,.content video,.video{max-width:100%;height:auto}.lead{margin-left:-1rem;margin-right:-1rem}img.lead,video.lead{display:block;max-width:calc(100% + 2rem);width:calc(100% + 2rem);height:auto}.heading,.f1,h1,.h1,.f2,h2,.h2,.f3,h3,.h3,.f4,h4,.h4,.post-date,.sidebar-nav-item,.f5,h5,.h5,.f6,h6,.h6{font-family:var(--font-family-heading);font-weight:var(--font-weight-heading)}.f1,h1,.h1{font-size:2rem;line-height:1.3}.f2,h2,.h2{font-size:1.5rem;line-height:1.4}.f3,h3,.h3{font-size:1.2em;line-height:1.5}.f4,h4,.h4,.post-date,.sidebar-nav-item{font-size:1.08rem}.f5,h5,.h5{font-size:1.04rem}.f6,h6,.h6{font-size:1rem}.content h1>a,.content .h1>a{text-decoration:none;border-bottom:none}@media screen and (max-width: 42em){.content h1,.content .h1{font-size:1.7rem;line-height:1.35}}@media screen and (min-width: 86em){.content h1,.content .h1{font-size:2.4rem;line-height:1.25}}@media screen and (min-width: 1760px){body:not(.no-large-headings) .content h1,body:not(.no-large-headings) .content .h1{width:calc(100% + 50vw - 32rem);font-size:3rem;line-height:1.2}}@media screen and (min-width: 124em){body:not(.no-large-headings) .content h1,body:not(.no-large-headings) .content .h1{font-size:4rem;line-height:1.1}}h1,h2,h3,.h1,.h2,.h3{margin:3rem 0 1rem}h4,h5,h6,.h4,.post-date,.h5,.h6{margin:2rem 0 .5rem}p{margin-top:0;margin-bottom:1rem}p.lead{font-size:1.2em;margin-top:1.5rem;margin-bottom:1.5rem;padding:0 1rem}ul,ol,dl{margin-top:0;margin-bottom:1rem}ul,ol{padding-left:1.25rem}hr,.hr{border:0;margin:1rem 0;border-top:1px solid var(--border-color)}.hr-after::after{content:"";display:block;margin:1rem 0;border-top:1px solid var(--border-color)}.hr-bottom{border-bottom:1px solid var(--border-color);padding-bottom:.75rem;margin-bottom:1rem}.page{margin-bottom:3em}.page li+li{margin-top:.25rem}.page>header{position:relative;margin-bottom:1.5rem}@media screen and (min-width: 1760px){body:not(.no-third-column) .page>header>.lead+.note-sm,body:not(.no-third-column) .page>header>.lead+.note,body:not(.no-third-column) .page>header>.lead+#markdown-toc,body:not(.no-third-column) .page>header>a.no-hover+.note-sm,body:not(.no-third-column) .page>header>a.no-hover+.note,body:not(.no-third-column) .page>header>a.no-hover+#markdown-toc{position:absolute;right:-25rem;width:21rem;bottom:0;margin-bottom:0}}.page-title,.post-title{margin-top:0}.post-date{display:block;margin-top:-0.5rem;margin-bottom:1rem;color:var(--gray)}.related-posts{padding-left:0;list-style:none;margin-bottom:2rem}.related-posts>li,.related-posts>li+li{margin-top:1rem}.message,.note-sm,.note,#markdown-toc{margin-bottom:1rem;padding:1rem;color:var(--gray-text);background-color:var(--gray-bg);margin-left:-1rem;margin-right:-1rem}.note-sm,.note,#markdown-toc{background:transparent;color:var(--body-color);font-size:smaller;border-left:1px solid var(--border-color);padding:1.5rem 1rem 0 1rem;margin:1rem -1rem;position:relative}.note-sm:before,.note:before,#markdown-toc:before{font-size:0.667rem;font-weight:bold;font-style:normal;letter-spacing:.025rem;text-transform:uppercase;color:var(--menu-text);position:absolute;top:0}.note-sm[title]:before,[title].note:before,[title]#markdown-toc:before{content:attr(title) !important}.note{font-size:1rem}@media screen{body::before{content:'';width:.5rem;background:var(--gray-bg);position:fixed;left:0;top:0;bottom:0}}@media (min-width: 64em){body::before{width:21rem}}@media (min-width: 1760px){body::before{width:calc(50% - 34rem)}}@media screen and (min-width: 42em){html{font-size:var(--root-font-size-medium)}}@media screen and (min-width: 124em){html{font-size:var(--root-font-size-large)}}.fl{float:left}.fr{float:right}.mb4{margin-bottom:4rem}.mb6{margin-bottom:6rem}.mt0{margin-top:0}.mt1{margin-top:1rem}.mt2{margin-top:2rem}.mt3{margin-top:3rem}.mt4{margin-top:4rem}.pb0{padding-bottom:0}.sixteen-nine{position:relative}.sixteen-nine::before{display:block;content:"";width:100%;padding-top:56.25%}.sixteen-nine>*{position:absolute;top:0;left:0;right:0;bottom:0}.sixteen-ten{position:relative}.sixteen-ten::before{display:block;content:"";width:100%;padding-top:62.5%}.sixteen-ten>*{position:absolute;top:0;left:0;right:0;bottom:0}.four-three{position:relative}.four-three::before{display:block;content:"";width:100%;padding-top:75%}.four-three>*{position:absolute;top:0;left:0;right:0;bottom:0}.sr-only{display:none}.border{border:1px solid var(--border-color)}hy-push-state a{color:var(--body-color)}@supports not ((text-decoration-thickness: initial) and (text-underline-offset: initial)){hy-push-state a{text-decoration:none;border-bottom:2px solid}}@supports (text-decoration-thickness: initial) and (text-underline-offset: initial){hy-push-state a{text-decoration-style:solid;text-underline-offset:.35rem;text-decoration-thickness:2px}}hy-push-state a.no-hover{border-bottom:none;text-decoration-thickness:unset;text-underline-offset:unset}.content a:not(.btn):not(.no-hover){border-color:var(--accent-color-faded)}@supports (text-decoration-thickness: initial) and (text-underline-offset: initial){.content a:not(.btn):not(.no-hover){text-decoration-color:var(--accent-color-faded)}}.content .aspect-ratio{overflow:hidden}.content .aspect-ratio img{margin:0;width:100%;height:100%;background-color:var(--gray-bg)}hy-drawer{width:100%;position:relative;overflow:hidden;display:block;z-index:4}@media screen and (min-width: 64em){hy-drawer{position:fixed;width:21rem;top:0;left:0;bottom:0;margin-left:0}hy-drawer.cover{position:relative;width:100%}}@media screen and (min-width: 1760px){hy-drawer{width:calc(50% - 34rem)}}.sidebar{position:relative;display:flex;justify-content:center;align-items:center;color:rgba(255,255,255,0.75);text-align:center;min-height:100vh}.sidebar a{color:#fff;border-bottom-color:rgba(255,255,255,0.2);text-decoration-color:rgba(255,255,255,0.2)}.sidebar-bg{position:absolute;top:0;left:calc(50% - 50vw);width:100vw;height:100%;background:#202020 center / cover}.sidebar-bg::after{content:"";position:absolute;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.05)}.sidebar-bg.sidebar-overlay::after{background:linear-gradient(to bottom, rgba(32,32,32,0) 0%, rgba(32,32,32,0.5) 50%, rgba(32,32,32,0) 100%)}.sidebar-sticky{position:relative;z-index:3;max-width:21rem;padding:1.5rem;contain:content}.sidebar-about .avatar{margin-bottom:1.5rem}.sidebar-about>a.sidebar-title{text-decoration:none}.sidebar-about>a.sidebar-title>h2{margin:0;padding-bottom:.5rem}.sidebar-about>a.sidebar-title::after{content:'';display:block;border-bottom:2px solid;margin:0 auto .5rem;width:4rem;border-color:rgba(255,255,255,0.2);transition:border-color 250ms}.sidebar-about>a.sidebar-title:hover::after{border-color:#fff;transition:border-color 50ms}.sidebar-nav>ul{list-style:none;padding-left:0}.sidebar-nav-item{display:inline-block;margin-bottom:.5rem}@media (min-width: 64em){#_main.no-drawer #_menu{display:none}#_main.no-drawer .nav-btn-bar>:nth-child(2){border:none}}.sidebar-social>ul{display:inline-block;list-style:none;padding-left:0;margin-bottom:0}.sidebar-social>ul>li{float:left}.sidebar-social>ul>li>a{display:inline-block;text-align:center;font-size:1.4rem;width:3rem;height:4rem;padding:.5rem 0;line-height:3rem;text-decoration:none;border-bottom-width:2px;border-bottom-style:solid}.sidebar-social>ul li+li{margin-top:0}.fixed-common,.fixed-top,.fixed-bottom{position:fixed;left:0;width:100%;z-index:2}.fixed-top{top:0}.fixed-bottom{bottom:0}.navbar>.content{position:relative;padding-top:0;padding-bottom:0;min-height:0;max-height:5rem}.nav-btn-bar{margin:0 -1rem;background-color:white;background-color:var(--body-bg);height:5rem;display:flex;align-items:center;position:relative}.nav-btn-bar>:first-child,.nav-btn-bar>:last-child{border:none}.nav-btn{background:none;border:none;text-decoration:none;display:flex;align-items:center;justify-content:center;width:3.25rem;height:5rem;color:var(--menu-text);border-right:1px solid var(--border-color);border-left:1px solid var(--border-color);margin-left:-1px}#markdown-toc{margin:2rem -1rem 2rem calc(-1rem + 1px);padding-left:2.5rem;padding-bottom:.5rem}#markdown-toc:before{left:1rem}@media screen and (min-width: 1760px){body:not(.no-toc) #markdown-toc{position:absolute;z-index:4;width:calc(50% - 34rem);right:0;margin:auto;overflow:auto}}.content{margin-left:auto;margin-right:auto;padding:8rem 1rem 12rem}@media screen{.content{padding-left:1.5rem;max-width:48rem;min-height:100vh}}@media screen and (min-width: 54em){.content{max-width:54rem}}@media screen and (min-width: 64em){.content{padding-left:1rem;margin-left:24rem;margin-right:3rem}}@media screen and (min-width: 86em){.content{margin-left:25rem;margin-right:4rem;max-width:60rem}}@media screen and (min-width: 1760px){.content{margin:auto}}.large-only{display:none}@media screen and (min-width: 1760px){.large-only{display:block}}.avatar{width:7rem;height:7rem;border-radius:100%;overflow:hidden;display:inline-block}.avatar img{width:100%}.content .avatar{float:right;box-sizing:content-box;border:1rem solid var(--body-bg);transition:border-color 1s ease;margin-top:-1.5rem;margin-right:-1rem}.sidebar a{text-shadow:rgba(0,0,0,0.25) 0.1rem 0.1rem 0.15rem}.note:before{content:"Note"}.page>header>.note-sm:before,.page>header>.note:before,.page>header>#markdown-toc:before{content:"Description"}#markdown-toc:before{content:"Table of Contents"}.layout-resume .note-sm:before,.layout-resume .note:before,.layout-resume #markdown-toc:before{content:"Summary"}

  
    .clearfix,main:not(.layout-resume) .columns::after{content:"";display:table;clear:both}.color-transition,main:not(.layout-resume) .project-card{transition:none}main:not(.layout-resume) .columns{margin-left:-1rem;display:flex;flex-wrap:wrap}main:not(.layout-resume) .column{float:left;padding-left:1rem;margin-bottom:1.5rem;width:100%;display:flex}@media screen and (min-width: 42em){main:not(.layout-resume) .columns{margin-left:-2rem;margin-right:-1rem}main:not(.layout-resume) .column-1-2{width:50%}}@media screen and (min-width: 1760px){main:not(.layout-resume) .columns-break{width:calc(50vw + 25rem)}main:not(.layout-resume) .columns-break>.column-1-2,main:not(.layout-resume) .columns-break>.column-1{width:29.5rem}}@media print{main:not(.layout-resume) .columns{display:block}main:not(.layout-resume) .column{display:block;width:50%}}main:not(.layout-resume) .project-card{width:100%;color:var(--gray-text);background-color:var(--gray-bg);padding-bottom:.75rem;position:relative;overflow:hidden;box-shadow:0.125rem 0.125rem 1rem rgba(0,0,0,0.2);contain:content;page-break-inside:avoid;transition:transform 300ms ease-out, box-shadow 300ms ease-out}main:not(.layout-resume) .project-card:hover{box-shadow:0.125rem 0.375rem 1.15rem rgba(0,0,0,0.25);transform:translateY(-0.25rem);transition:transform 150ms ease-out, box-shadow 150ms ease-out}main:not(.layout-resume) .project-card>a.flip-project{display:block}main:not(.layout-resume) .project-card>a.flip-project .project-card-img{margin-bottom:0;background-position:center;background-repeat:no-repeat;background-image:url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB3aWR0aD0iMTYwIiBoZWlnaHQ9IjkwIiB2aWV3Qm94PSIwIDAgMTYwIDkwIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgogIDxnIHRyYW5zZm9ybT0ibWF0cml4KDAuMDQ4ODI4LCAwLCAwLCAwLjA0Nzk5MSwgNTQuOTk5OTczLCAyMC40MjgxNDgpIj4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOnJnYmEoMTI4LDEyOCwxMjgsLjMzKSIgZD0iTTk1OS44ODQgMTI4YzAuMDQwIDAuMDM0IDAuMDgyIDAuMDc2IDAuMTE2IDAuMTE2djc2Ny43N2MtMC4wMzQgMC4wNDAtMC4wNzYgMC4wODItMC4xMTYgMC4xMTZoLTg5NS43N2MtMC4wNDAtMC4wMzQtMC4wODItMC4wNzYtMC4xMTQtMC4xMTZ2LTc2Ny43NzJjMC4wMzQtMC4wNDAgMC4wNzYtMC4wODIgMC4xMTQtMC4xMTRoODk1Ljc3ek05NjAgNjRoLTg5NmMtMzUuMiAwLTY0IDI4LjgtNjQgNjR2NzY4YzAgMzUuMiAyOC44IDY0IDY0IDY0aDg5NmMzNS4yIDAgNjQtMjguOCA2NC02NHYtNzY4YzAtMzUuMi0yOC44LTY0LTY0LTY0djB6Ii8+CiAgICA8cGF0aCBzdHlsZT0iZmlsbDpyZ2JhKDEyOCwxMjgsMTI4LC4zMykiIGQ9Ik04MzIgMjg4YzAgNTMuMDIwLTQyLjk4IDk2LTk2IDk2cy05Ni00Mi45OC05Ni05NiA0Mi45OC05NiA5Ni05NiA5NiA0Mi45OCA5NiA5NnoiLz4KICAgIDxwYXRoIHN0eWxlPSJmaWxsOnJnYmEoMTI4LDEyOCwxMjgsLjMzKSIgZD0iTTg5NiA4MzJoLTc2OHYtMTI4bDIyNC0zODQgMjU2IDMyMGg2NGwyMjQtMTkyeiIvPgogIDwvZz4KPC9zdmc+")}main:not(.layout-resume) .project-card>a.flip-project .project-card-img img{display:block}main:not(.layout-resume) .project-card a{position:relative;z-index:1}main:not(.layout-resume) .project-card a.fill-card{position:absolute;top:0;left:0;right:0;bottom:0;z-index:0}main:not(.layout-resume) .project-card>.project-card-title,main:not(.layout-resume) .project-card>.project-card-text{text-align:center;padding:0 1rem}main:not(.layout-resume) .project-card>.project-card-title{display:block;font-size:1.08rem;margin-top:.75rem;margin-bottom:.25rem;color:inherit}main:not(.layout-resume) .project-card>.project-card-text{margin:.25rem 0}main:not(.layout-resume) .column-1>.project-card>.project-card-title{font-size:1.2rem}main:not(.layout-resume) .column-1>.project-card>.project-card-text{font-size:1rem}

  
</style>
  




<link rel="preload" as="style" href="/assets/css/hydejack-9.0.5.css" id="_stylePreload">
<link rel="preload" as="style" href="/assets/icomoon/style.css" id="_iconsPreload">
<link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto+Slab:700%7CNoto+Sans:400,400i,700,700i&display=swap" id="_fontsPreload">

<script>
  setRel('_stylePreload');
  setRel('_iconsPreload');
  /**/setRel('_fontsPreload');/**/
</script>
<noscript>
  <link rel="stylesheet" href="/assets/css/hydejack-9.0.5.css">
  <link rel="stylesheet" href="/assets/icomoon/style.css">
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto+Slab:700%7CNoto+Sans:400,400i,700,700i&display=swap">
</noscript>




  <style id="_pageStyle">

html{--accent-color: rgb(79,177,186);--accent-color-faded: rgba(79,177,186,0.5);--accent-color-darkened: #409ba3;--theme-color: rgb(25,55,71);--dark-mode-body-bg: #282e31;--dark-mode-border-color: #343b3f}

</style>


<!--<![endif]-->





</head>

<body class="dark-mode no-break-layout no-large-headings">
  
<script>
  window._sunrise = 6;
  window._sunset =  18;
  !function(e,s){var a="light-mode",d="dark-mode",o=(new Date).getHours();if(!("matchMedia"in e&&e.matchMedia("(prefers-color-scheme)"))){var i=o<=e._sunrise||o>=e._sunset?d:a,t=i===d?a:d;s.body.classList.add(i),s.body.classList.remove(t)}}(window,document);

</script>



<hy-push-state
  id="_pushState"
  replace-selector="#_main"
  link-selector="a[href]:not([href^='/assets/']):not(.external):not(.no-push-state)"
  script-selector="script"
  duration="500"
  hashchange
>
  
  <div id="_navbar" class="navbar fixed-top">
  <div class="content">
    <span class="sr-only">Jump to:</span>
    <div class="nav-btn-bar">
      <a id="_menu" class="nav-btn no-hover" href="#_drawer--opened">
        <span class="sr-only">Navigation</span>
        <span class="icon-menu"></span>
      </a>
      <div class="nav-span"></div>
    </div>
  </div>
</div>
<hr class="sr-only" hidden />

  <main
  id="_main"
  class="content layout-post"
  role="main"
>
  





<article id="post-devlog-hydejack-post-writing-tips-tricks" class="page post mb6" role="article">
  <header>
    <h1 class="post-title flip-project-title">
      
        Hydejack Post Writing Tips & Tricks
      
    </h1>

    <div class="post-date">
      
        
        <time datetime="2020-07-05T00:00:00+00:00">05 Jul 2020</time>
      
      
      
      
      
      









in <a href="/devlog/" class="flip-title">Devlog</a>

      









on <a href="/tag-development/" class="flip-title">Development</a>, <a href="/tag-blog/" class="flip-title">Blog</a>

    </div>

    
    

    



  <div class="hr pb0"></div>


  </header>

  
    <p>Hydejack 테마를 이용하여 포스트를 작성할때 참고할 syntax 입니다.</p>

<!--more-->

<ul id="markdown-toc">
  <li><a href="#build" id="markdown-toc-build">Build</a>    <ul>
      <li><a href="#update" id="markdown-toc-update">update</a></li>
    </ul>
  </li>
  <li><a href="#writing" id="markdown-toc-writing">Writing</a>    <ul>
      <li><a href="#adding-a-table-of-contents" id="markdown-toc-adding-a-table-of-contents">Adding a table of contents</a></li>
      <li><a href="#adding-notes" id="markdown-toc-adding-notes">Adding notes</a></li>
      <li><a href="#adding-large-text" id="markdown-toc-adding-large-text">Adding large text</a></li>
      <li><a href="#adding-image-captions" id="markdown-toc-adding-image-captions">Adding image captions</a></li>
      <li><a href="#adding-large-quotes" id="markdown-toc-adding-large-quotes">Adding large quotes</a></li>
      <li><a href="#adding-faded-text" id="markdown-toc-adding-faded-text">Adding faded text</a></li>
      <li><a href="#adding-captions" id="markdown-toc-adding-captions">Adding captions</a></li>
      <li><a href="#small-tables" id="markdown-toc-small-tables">Small tables</a></li>
    </ul>
  </li>
</ul>

<h2 id="build">Build</h2>

<h3 id="update">update</h3>

<div class="language-shell highlighter-rouge"><div class="highlight"><pre class="highlight"><code>bundle <span class="nb">install
</span>bundle update

bundle <span class="nb">exec </span>jekyll serve
</code></pre></div></div>

<h2 id="writing">Writing</h2>

<h3 id="adding-a-table-of-contents">Adding a table of contents</h3>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">*</span> this unordered seed list will be replaced by the toc
{:toc}
<span class="p">
1.</span> this ordered seed list will be replaced by the toc
{:toc}
</code></pre></div></div>

<h3 id="adding-notes">Adding notes</h3>

<p>You can add a note by adding the <code class="language-plaintext highlighter-rouge">note</code> class to a paragraph.</p>

<p>Example:</p>

<p class="note">You can add a note.</p>

<p>Markdown:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>You can add a note.
{:.note}
</code></pre></div></div>

<p>Edit the <code class="language-plaintext highlighter-rouge">note</code> key in <code class="language-plaintext highlighter-rouge">_data/strings.yml</code> to change the wording of the default label.
To add a note with a specific label, add a <code class="language-plaintext highlighter-rouge">title</code> attribute:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>A custom label.
{:.note title="Attention"}
</code></pre></div></div>

<p class="note" title="Attention">A custom label.</p>

<h3 id="adding-large-text">Adding large text</h3>

<p>You can add large text by adding the <code class="language-plaintext highlighter-rouge">lead</code> class to the paragraph.</p>

<p>Example:</p>

<p class="lead">You can add large text.</p>

<p>Markdown:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>You can add large text.
{:.lead}
</code></pre></div></div>

<h3 id="adding-image-captions">Adding image captions</h3>

<p>You can add captions to large images by adding the <code class="language-plaintext highlighter-rouge">figcaption</code> class to the paragraph after the image:</p>

<p><img src="https://placehold.it/800x100" alt="Full-width image" class="lead" width="800" height="100" loading="lazy" /></p>

<p class="figcaption">An optional caption for an image.</p>

<p>Markdown:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="p">![</span><span class="nv">Full-width image</span><span class="p">](</span><span class="sx">https://placehold.it/800x100</span><span class="p">)</span>{:.lead width="800" height="100" loading="lazy"}

A caption for an image.
{:.figcaption}
</code></pre></div></div>

<h3 id="adding-large-quotes">Adding large quotes</h3>

<p>You can make a quote “pop out” by adding the <code class="language-plaintext highlighter-rouge">lead</code> class.</p>

<p>Example:</p>

<blockquote class="lead">
  <p>You can make a quote “pop out”.</p>
</blockquote>

<p>Markdown:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code><span class="gt">&gt; You can make a quote "pop out".</span>
{:.lead}
</code></pre></div></div>

<h3 id="adding-faded-text">Adding faded text</h3>

<p>You can gray out text by adding the <code class="language-plaintext highlighter-rouge">faded</code> class. Use this sparingly and for information that is not essential, as it is more difficult to read.</p>

<p>Example:</p>

<p class="faded">I’m faded, faded, faded.</p>

<p>Markdown:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>I'm faded, faded, faded.
{:.faded}
</code></pre></div></div>

<h3 id="adding-captions">Adding captions</h3>

<p>Just like images, you can add captions to tables by adding the <code class="language-plaintext highlighter-rouge">figcaption</code> class to the paragraph after the table.</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>An optional caption for a table/image/code block
{:.figcaption}
</code></pre></div></div>

<h3 id="small-tables">Small tables</h3>

<p>If a table is small enough to fit the screen even on small screens, you can add the <code class="language-plaintext highlighter-rouge">stretch-table</code> class
to force a table to use the entire available content width. Note that stretched tables can no longer be scrolled.</p>

<table class="stretch-table">
  <thead>
    <tr>
      <th>Default aligned</th>
      <th style="text-align: left">Left aligned</th>
      <th style="text-align: center">Center aligned</th>
      <th style="text-align: right">Right aligned</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>First body part</td>
      <td style="text-align: left">Second cell</td>
      <td style="text-align: center">Third cell</td>
      <td style="text-align: right">fourth cell</td>
    </tr>
  </tbody>
</table>

<p class="figcaption">An optional caption for a table</p>

<p>You can add the <code class="language-plaintext highlighter-rouge">stretch-table</code> class to a markdown table by putting <code class="language-plaintext highlighter-rouge">{:.stretch-table}</code> in line directly below the table.</p>

<p>Markdown:</p>

<div class="language-markdown highlighter-rouge"><div class="highlight"><pre class="highlight"><code>| Default aligned |Left aligned| Center aligned  | Right aligned  |
|-----------------|:-----------|:---------------:|---------------:|
| First body part |Second cell | Third cell      | fourth cell    |
{:.stretch-table}
</code></pre></div></div>

  
</article>


<hr class="dingbat related" />




  
     


  <aside class="about related mt4 mb4" role="complementary">
    
    

<div class="author mt4">
  

  
    


<img
  
    src="https://graph.facebook.com/100007955266112/picture?type=large"
    srcset="https://graph.facebook.com/100007955266112/picture?type=normal 1x,https://graph.facebook.com/100007955266112/picture?type=large 2x"
    
  
  alt="DaeIn Lee"
  class="avatar"
  
  width="120"
  height="120"
  loading="lazy"
/>

  

  
  
  <h2  class="page-title hr-bottom">
    About
  </h2>

  <p>SW Engineer at <a href="https://research.samsung.com/">Samsung Research</a>.<br />
Please check my <a href="/resume/">Resume</a> to find out more about me!<br /></p>



  <div class="sidebar-social">
    <span class="sr-only">Social:</span>
<ul>
  
    
      



  

  
  
  
  

  

  

  <li>
    <a href="https://www.linkedin.com/in/daein-lee-3b6ba9139" title="LinkedIn" class="no-mark-external">
      <span class="icon-linkedin2"></span>
      <span class="sr-only">LinkedIn</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="https://github.com/lazyren" title="GitHub" class="no-mark-external">
      <span class="icon-github"></span>
      <span class="sr-only">GitHub</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="http://stackoverflow.com/users/4294737" title="Stack Overflow" class="no-mark-external">
      <span class="icon-stackoverflow"></span>
      <span class="sr-only">Stack Overflow</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="mailto:lazy0ren@gmail.com" title="Email" class="no-mark-external">
      <span class="icon-mail"></span>
      <span class="sr-only">Email</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="/resume/" title="Resume" class="no-mark-external">
      <span class="icon-profile"></span>
      <span class="sr-only">Resume</span>
    </a>
  </li>


    
  
</ul>

  </div>
</div>

  </aside>


  

  
    
<aside class="comments related" role="complementary">
  <h2 class="hr-bottom">Comments</h2>
  

<div id="disqus_thread"></div>
<noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript" rel="nofollow">comments powered by Disqus.</a></noscript>
<script>!function(w, d) {
  if (d.getElementById("disqus_thread")) {
    if (w.DISQUS) {
      w.DISQUS.reset({
        reload: true,
        config() {
          this.page.url = w.location.href;
          this.page.title = d.title;
        },
      });
    } else {
      w.disqus_config = function disqusConfig() {
        this.page.url = w.location.href;
        this.page.title = d.title;
      };
      w.loadJSDeferred(d.getElementById("_hrefDisqus").href + '/embed.js');
    }
  }
}(window, document);</script>


</aside>


  


  
<footer class="content" role="contentinfo">
  <hr/>
  
    <p><small class="copyright">© 2020. All rights reserved.
</small></p>
  
  
  
  <hr class="sr-only"/>
</footer>


</main>

  <hy-drawer
  id="_drawer"
  class=""
  side="left"
  threshold="10"
  noscroll
  
>
  <header id="_sidebar" class="sidebar" role="banner">
    




<div class="sidebar-bg sidebar-overlay" style="background-color:rgb(25,55,71);background-image:url(/assets/img/sidebar-bg.jpg)"></div>

    <div class="sidebar-sticky">
  <div class="sidebar-about">
    
      <a class="no-hover" href="/" tabindex="-1">
        <img src="https://graph.facebook.com/100007955266112/picture?type=large" class="avatar" alt="Lazy Ren" width="120" height="120" loading="lazy" />
      </a>
    
    <a class="sidebar-title" href="/"><h2 class="h1">Lazy Ren</h2></a>
    
    
      <p class="">
        Work Hard to be Lazy.

      </p>
    
  </div>

  <nav class="sidebar-nav heading" role="navigation">
    <span class="sr-only">Navigation:</span>
<ul>
  
    
    
    
    

    
      
      
        <li>
          <input type="checkbox" id="list-item-9" />
          <div class="list-wrapper">
          <a
            id="_navigation"
            href="/about/"
            class="sidebar-nav-item"
            
            >
            About
          </a>
          
          </div>
          <ul class="list-body">
            
            
            
            
            
            
            
            
            
          </ul>
        </li>
      
    
      
      
        <li>
          <input type="checkbox" id="list-item-10" />
          <div class="list-wrapper">
          <a
            
            href="/devlog/"
            class="sidebar-nav-item"
            
            >
            Devlog
          </a>
          <label class="folder" for="list-item-10"></label>
          </div>
          <ul class="list-body">
            
            
            <li>
              <a class="sidebar-nav-subitem"
                href="/tag-algorithm/">Algorithm</a>
            </li>
            
            
            
            <li>
              <a class="sidebar-nav-subitem"
                href="/tag-bwtree/">Bw Tree</a>
            </li>
            
            
            
            <li>
              <a class="sidebar-nav-subitem"
                href="/tag-concurrent-programming/">Concurrent Programming</a>
            </li>
            
            
            
            <li>
              <a class="sidebar-nav-subitem"
                href="/tag-development/">Development</a>
            </li>
            
            
          </ul>
        </li>
      
    
      
      
        <li>
          <input type="checkbox" id="list-item-11" />
          <div class="list-wrapper">
          <a
            
            href="/review/"
            class="sidebar-nav-item"
            
            >
            Review
          </a>
          
          </div>
          <ul class="list-body">
            
            
            
            
            
            
            
            
            
          </ul>
        </li>
      
    
  
</ul>

  </nav>

  
  <div class="sidebar-social">
    <span class="sr-only">Social:</span>
<ul>
  
    
      



  

  
  
  
  

  

  

  <li>
    <a href="https://www.linkedin.com/in/daein-lee-3b6ba9139" title="LinkedIn" class="no-mark-external">
      <span class="icon-linkedin2"></span>
      <span class="sr-only">LinkedIn</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="https://github.com/lazyren" title="GitHub" class="no-mark-external">
      <span class="icon-github"></span>
      <span class="sr-only">GitHub</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="http://stackoverflow.com/users/4294737" title="Stack Overflow" class="no-mark-external">
      <span class="icon-stackoverflow"></span>
      <span class="sr-only">Stack Overflow</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="mailto:lazy0ren@gmail.com" title="Email" class="no-mark-external">
      <span class="icon-mail"></span>
      <span class="sr-only">Email</span>
    </a>
  </li>


    
      



  

  
  
  
  

  

  

  <li>
    <a href="/resume/" title="Resume" class="no-mark-external">
      <span class="icon-profile"></span>
      <span class="sr-only">Resume</span>
    </a>
  </li>


    
  
</ul>

  </div>
</div>
  </header>
</hy-drawer>
<hr class="sr-only" hidden />

</hy-push-state>


  <!--[if gt IE 10]><!---->
  <script nomodule>!function(){var e=document.createElement("script");if(!("noModule"in e)&&"onbeforeload"in e){var t=!1;document.addEventListener("beforeload",function(n){if(n.target===e)t=!0;else if(!n.target.hasAttribute("nomodule")||!t)return;n.preventDefault()},!0),e.type="module",e.src=".",document.head.appendChild(e),e.remove()}}();
</script>
  <script src="/assets/js/hydejack-9.0.5.js" type="module"></script>
  <script src="/assets/js/LEGACY-hydejack-9.0.5.js" nomodule defer></script>
  

  
  <script>!function(w, d) {
    w.ga=w.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;

    /**/
      ga('create', 'UA-68290006-3', 'auto');
    /**/

    var pushStateEl = d.getElementById('_pushState');
    var timeoutId;
    pushStateEl.addEventListener('hy-push-state-load', function() {
      w.clearTimeout(timeoutId);
      timeoutId = w.setTimeout(function() {
        ga('set', 'page', w.location.pathname);
        ga('send', 'pageview');
      }, 500);
    });

    d.addEventListener('hy--cookies-ok', function () {
      w.ga(function(tracker) {
        w.ga("set", "anonymizeIp", undefined);
        localStorage && localStorage.setItem("ga--client-id", tracker.get("clientId"));
      });
    });

    w.loadJSDeferred('https://www.google-analytics.com/analytics.js');
  }(window, document);</script>


  <script type="module">
    if ('serviceWorker' in navigator) {
      /**/
      navigator.serviceWorker.getRegistration()
        .then(r => r.unregister())
        .catch(() => {});
      /**/
    }
  </script>
<!--<![endif]-->

  



<div hidden>
  
  <h2 class="sr-only">Templates (for web app):</h2>

  <template id="_animation-template">
  <div class="animation-main fixed-top">
    <div class="content">
      <div class="page"></div>
    </div>
  </div>
</template>

  <template id="_loading-template">
  <div class="loading nav-btn fr">
    <span class="sr-only">Loading…</span>
    <span class="icon-cog"></span>
  </div>
</template>

  <template id="_error-template">
  <div class="page">
    <h1 class="page-title">Error</h1>
    
    
    <p class="lead">
      Sorry, an error occurred while loading <a class="this-link" href=""></a>.

    </p>
  </div>
</template>

  <template id="_forward-template">
  <button id="_forward" class="forward nav-btn no-hover">
    <span class="sr-only">Forward</span>
    <span class="icon-arrow-right2"></span>
  </button>
</template>

  <template id="_back-template">
  <button id="_back" class="back nav-btn no-hover">
    <span class="sr-only">Back</span>
    <span class="icon-arrow-left2"></span>
  </button>
</template>

  <template id="_permalink-template">
  <a href="#" class="permalink">
    <span class="sr-only">Permalink</span>
    <span class="content-hash"></span>
  </a>
</template>

  
  
  
    <template id="_search-template">
  <button id="_search" class="nav-btn no-hover">
    <label class="sr-only" for="_search-input">Search</label>
    <span class="icon-search"></span>
  </button>
  <div id="_search-box">
    <div class="nav-btn">
      <span class="icon-search"></span>
    </div>
    <input 
      id="_search-input"
      type="search"
      class="form-control form-control-lg nav-btn"
      placeholder="Type something…"
    />
    <button type="reset" class="nav-btn no-hover">
      <span class="sr-only">Close</span>
      <span class="icon-cross"></span>
    </button>
  </div>
  <div id="_hits"></div>
</template>

  
</div>

</body>







Category is used as a main menu for the sidebar.
Nothing specially added from the default one.

---
layout: list
title: Devlog
slug: devlog
menu: true
submenu: true
order: 2
description: >
  Anything about Development
---

add *.md file into the _featured_tags folder.
If you wish to print inthe sidebar as a submenu, set category to the desired one.
menu: false, submenu: true. If you don’t want it to be seen, just change option to submenu: false.
If you don’t like how menu & submenu option works. Set as you desire from nav.html.

// nav.html

---
layout: tag-list
title: Blog
slug: blog
category: devlog
menu: false
submenu: false
order: 9
description: >
   Posts about blogging / jekyll theme.
---

Conclusion

I’m not an expert in web development. Adding simple submenu was pretty challenging & time consuming job for me.
You may find some odd parts, if you have any suggestions for the improvment please don’t hesitate to contact me.
I’d be very delightful to have any comments.


© 2020. All rights reserved.