Hugo로 개인 블로그 만드는 법-7.마크다운 테이블 추가

목적

윈도우 에서 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 추가
• 마크다운 테이블 추가
• 코드 블럭 버튼 추가
• 사진 크기 조정

마크다운 테이블 추가

마크다운은 공식적으로는 테이블을 지원하지 않습니다. 대부분의 마크다운 에디터가 테이블을 지원해줄 뿐입니다. 그래서 hugo 테이블은 굉장히 디자인이 엉망입니다.

{{ .Content | replaceRE "<table>" "<table class=\"pure-table pure-table-bordered\">" | safeHTML }}

라는 코드를 넣어주면 모든 테이블을 css에서 지원하는 pure-table-bordered로 바꿔 줍니다.
이는 go라는 언어의 코드입니다.

테마마다 모두 다르긴 합니다만. 보통 /layouts/post/single.html를 보시면 안쪽에 {{.Content}}라는 코드가 있을것입니다. 이를 {{ .Content | replaceRE "<table>" "<table class=\"pure-table pure-table-bordered\">" | safeHTML }}로 바꿔 주세요.

blackburn을 사용한 제 개인 블로그 예시-테이블 디자인 변환

/layouts/post/single.html

{{ partial "header.html" . }}

<div class="header">
  <h1>{{ .Title }}</h1>
  <h2>{{ .Description }}</h2>
</div>
<div class="content">

  {{ partial "post_meta.html" . }}
  {{ partial "katex.html" . }}

  
{{ .Content | replaceRE "<table>" "<table class=\"pure-table pure-table-bordered\">" | safeHTML }}
  
  {{ if (findRE "<pre" .Content 1) }}
    {{ partial "add_button.html" . }}
    
{{ end }}
 
  
  {{ partial "share.html" . }}

  {{ partial "prev_next_post.html" . }}
  
  {{ partial "commento.html" . }}
  
  {{ partial "disqus.html" . }}

  {{ partial "telegram.html" . }}

</div>

{{ partial "footer.html" . }}

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

eunhanlee - Overview

Eunhan's library