Hugo로 개인 블로그 만드는 법-8.코드 블럭 버튼 추가

목적

윈도우 에서 Hugo로 개인블로그를 만들고 github으로 호스팅하는 법

사용 툴 버전

• 설치 날짜 : 03-31-2021
• hugo version : hugo v0.82.0
• git version : git version 2.31.1.windows.1
• windows : 10
• windows terminal: v1.7.572.0
• Chocolatey : v0.10.15

목차

• 개념 설명
• 필요한 툴 설치
• 블로그 생성
• github에 업로드
• github action 추가
• ketax 추가
• 마크다운 테이블 추가
• 코드 블럭 버튼 추가
• 사진 크기 조정

코드 블럭 버튼 추가

1. css파일 생성: 버튼의 디자인 몇 위치
2. config.toml에 css파일 경로 추가: Hugo에게 우리가 css파일을 사용한다는걸 알려줌
3. 버튼 추가 html 파일 생성: html에 자바스크립트를 넣어서 버튼 생성
4. 모든 페이지에서 <pre가 존재한다면 추가: 언제 추가할지 조건 설정

css파일 생성: 버튼의 디자인 몇 위치

이 css파일 이름은 뭘로 하든 상관이 없습니다. 전 button이라는 이름으로 하였습니다.
static 폴더안에 css폴더를 만들어서 하는 방식은 hugo에서 권장하는 방식이지만, 테마에 따라서 다른 방법을 사용하는 경우도 있습니다.
myHugo/static/css/button.css

.highlight {
    position: relative;
}
.highlight-copy-btn {
    position: absolute;
    top: 1px;
    right: 1px;
    border: 0;
    border-radius: 4px;
    padding: 1px;
    font-size: 0.7em;
    line-height: 1.8;
    color: #fff;
    background-color: #777;
    min-width: 55px;
    text-align: center;
}
.highlight-copy-btn:hover {
    background-color: #F5F5DC;
}

config.toml에 css파일 경로 추가: Hugo에게 우리가 css파일을 사용한다는걸 알려줌

테마마다 조금씩 다를수 있습니다만, 보통은 Hugo에서 기본으로 사용하는 config.toml을 수정해야합니다
아래와 같이 추가해주세요

[params]
  # Shown in the home page
  subtitle = "Eunhan's web site"
  brand = "library"
  googleAnalytics = "poiqqaz"
  disqus = "eunhanlee"
  dateFormat = "02 Jan 2006"
  custom_css = ["css/button.css"]

버튼 추가 html 파일 생성: html에 자바스크립트를 넣어서 버튼 생성

html파일 안에 버튼을 생성하는 코드를 자바스크립트로 짜 줍니다.

myHugo/layouts/partials/add_button.html

<script type="text/javascript">
(function() {
  'use strict';

  if(!document.queryCommandSupported('copy')) {
    return;
  }

  function flashCopyMessage(el, msg) {
    el.textContent = msg;
    setTimeout(function() {
      el.textContent = "Copy";
    }, 1000);
  }

  function selectText(node) {
    var selection = window.getSelection();
    var range = document.createRange();
    range.selectNodeContents(node);
    selection.removeAllRanges();
    selection.addRange(range);
    return selection;
  }

  function addCopyButton(containerEl) {
    var copyBtn = document.createElement("button");
    copyBtn.className = "highlight-copy-btn";
    copyBtn.textContent = "Copy";

    var codeEl = containerEl.firstElementChild;
    copyBtn.addEventListener('click', function() {
      try {
        var selection = selectText(codeEl);
        document.execCommand('copy');
        selection.removeAllRanges();

        flashCopyMessage(copyBtn, 'Copied!')
      } catch(e) {
        console && console.log(e);
        flashCopyMessage(copyBtn, 'Failed :\'(')
      }
    });
    

    containerEl.appendChild(copyBtn);

  }

  // Add copy button to code blocks
  var highlightBlocks = document.getElementsByClassName('highlight');
  Array.prototype.forEach.call(highlightBlocks, addCopyButton);
})();
</script>

<link rel="stylesheet" href="/css/button.css">

모든 페이지에서 <pre가 존재한다면 추가: 언제 추가할지 조건 설정

myHugo/layouts/post/single.html

  {{ if (findRE "<pre" .Content 1) }}
    {{ partial "add_button.html" . }}
    
{{ end }}

위의 golang 코드는 단순하게 <pre라는 태그가 있다면, 즉 코드를 보여주는 코드 블럭이 있다면 add_button.html를 불러서 추가라하는 코드입니다.

제 웹싸이트는 eunhanlee.github.io 이고, 제 github에 들어가 보시면 지금까지 한 내용 몇 파일들을 확인하실수 있습니다.

eunhanlee - Overview

Eunhan's library