Hugo theme Custom 하기

우선 theme 마다 파일 경로나 파일이름, 설정방법은 조금씩 다를 수 있다는 것을 알리고 시작하겠다.

저는 theme-docport 를 사용하고 있고, 왼쪽에 카테고리 별로 구분할 수있는 기능과 오른쪽에 특정 header로의 이동기능이 있는 테마를 찾다가 이 테마를 선택했다.



1. Code 태그 수정

1) 인라인 코드

해당 code 태그의 css가 정의된 파일을 찾아야 되는데 hugo는 적용방식이 theme폴더 내의 파일을 이용하고 그 위의 루트파일에 같은 이름의 파일이 있으면 덮어씌워 적용하는 방식이다.

그래서 theme/테마이름/assets/sass안에 있는 main.css에 code태그 속성이 정의 되어있길래 이를 root에 옮겨와 고쳐봤는데 수정이 되지 않았다.

찾다보니 root폴더에 resources/_gen/assets/scss/sass 폴더 내에 main.scss_9fd32d87d247ca96761d3cae485087fe.content 라는 파일에 code가 정의되어 있는데 여기서 바꿔주니 수정이 되었다. (아무래도 이 파일이 최종적으로 덮어지는 파일인 것 같다. 이 파일이 없으면 빌드가 되질 않는다.)

css가 정의된 파일은 테마별로 다른 것 같으니 vscode를 이용한다면 shift+ctrl+f 로 public폴더를 제외폴더로 놓고 찾아보면 수월하다.
나는 크롬 디버그모드로 code태그 색상값을 알아낸 후 색상값으로 검색하여 찾아냈다.


2) 블록 코드

모든 테마 동일하게 hugo에서 코드 highlighting을 지원하고 있고 config.toml폴더 내의 내용을 수정하는 것으로 쉽게 변경이 가능하다.

#중략 ...

# Code highlight configuration
[markup.highlight]
codeFences = true
guessSyntax = true
hl_Lines = ""
lineNoStart = 1
lineNos = false
lineNumbersInTable = false
noClasses = true
style = "manni"
#style = "native"
tabWidth = 2
  • codeFences : 이를 true로 해주어야 div로 한번 감싸 블록 코드로 표현이 가능하다.
  • guessSyntax : 해석 그대로 언어별로 문법을 추측하여 하이라이팅을 해준다.
  • hl_Lines : 지정 라인에 색상을 더 진하게 하이라이팅 줄 수 있다.
  • lineNoStart : 시작 라인 넘버를 지정해줄 수 있다.
  • lineNos : 블록 코드 왼쪽에 줄 번호를 표시할지 정할 수 있다.
  • lineNumbersInTable : 줄 번호 와 코드 사이에 간격을 지정할 수 있다.
    • lineNos를 true로 했다면 이도 true로 해주는 게 좋은데, 이게 가시성도 문제지만 false로 하면 다른 사람이 코드를 복사해가려고 할 때 줄 번호도 같이 복사가 된다.
  • noClasses : 클래스를 지정하는 것으로 코드 테마까지 커스텀할꺼 아니면 true로 하자.
  • style : 이를 통해 테마를 선택할 수 있다.
  • tabWidth : 탭 크기 지정

위의 방법으로 테마를 설정해주고 css와 같은 방법으로 class명이 highlight인 부분을 가장 root css에서 찾아 border-radius를 조금 주고 margin-left가 -1.5em으로 되어있는 걸 없애 container크기에 맞추도록 해주었다.


2. 링크 태그(a) 꾸미기

이 방법도 인라인 코드 수정 방법과 다르지 않다.

root css파일에서 dom 트리중 a 태그를 찾아 수정해주면 된다.

theme-docport는 article section.page div.content a 라는 깊이에 a의 css가 정의 되어있어서 이부분에서 color와 font-weight, cursor옵션을 추가해 주었다.

a태그 가 어딨는지 모르겠다면 색상 코드로 찾는 것도 꿀팁이다.



3. shortCode 추가하기

1) details

간혹 코드가 길게 들어가는 글을 작성하다 보면 스크롤 내리는데 힘이 들어서 코드 접기/펴기 를 details태그를 이용해서 사용하곤 했는 데 조금 편하게 사용하고자 shortCode로 만들었다.

{{ $_hugo_config := `{ "version": 1 }` }}
<details>
    <summary class = "detail-title" style="font-Weight : bold; font-size : 15px; color : #3158ad;" >
        {{- if  (.Get "summary")}}
            {{- .Get "summary" -}}
        {{- else}}
            📃 코드  ( 접기 / 펼치기 )
        {{end}}
    </summary>
    <div>
        {{.Inner}}
    </div>
</details>

detail.html을 root의 layouts/shortcodes에 새로 만들어주고 위의 코드와 같이 만들어 주었다.

{{ %detail summary="title"% }} 내용 {{ %/detail% }}

내용은 별거 없는데 만약에 detail사용시 summary 옵션을 주면 해당 title로 생성이되고 없다면 코드 (접기/펼기) 로 title을 지정하고 detail shortcode안의 내용을 details태그로 감싸라는 코드이다.

이렇게 사용할 수 있습니다 😀



2) gist

<script type="text/javascript" src="https://gist.github.com/{{ .Get 0 }}.js"></script>

코드가 있는 블로그를 작성할때 블로그에 코드를 그대로 붙여 넣는 것보다 Gist라는 곳에 코드 조각을 업로드하고 이를 붙여넣는 것이 수정에 있어 편할 수도 있다.

코드에 수정이 생기면 원본코드도 수정하고 블로그도 수정하기 귀찮기 때문에 한곳만 수정해도 모두 수정이 되게 하기 위함이다.

그래서 손쉽게 gist 코드를 붙여넣게 하기 위해 다음과 같이 shortCode를 만들어 주었다.

사용방법은 {{< gist “붙이고자하는 gist url 뒷 해시코드” >}} 와 같이 사용하면 gist 코드가 삽입된다.



4. 방문자 수 표시

보통 방문자 수 확인/분석은 구글 애널리스틱을 통해 할텐데 다른 사람들에게 현재 방문자수를 보여주고 싶을 수도 있을 것이다. 그때, 따로 db를 이용하지 않는 한 힘든데 오픈소스인 hits를 이용하면 비교적 쉽게 구현할 수 있다.

hits 를 통해 이미지 링크를 만들고 이를 페이지에 삽입하면 다른사람이 해당 페이지에 접속할때마다 이 이미지를 불러올텐데 이때마다 count를 세는 방식이다.

우선 저 홈페이지에 가서 본인의 루트 홈페이지(본인 도메인)를 입력해서 태그를 생성한 후, 본인 입맞대로 커스텀을 하면 아래사진과 같이 태그가 생성된다.

alter-text

이 링크를 아래의 코드와 같이 div로 한번 감싸주고 img 링크를 수정해주어야 사용이 가능하다.

<div style="text-align: center;">
  <a href="https://hits.seeyoufarm.com">
    <img
      src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url=https%3A%2F%2Fgowoonsori.site&count_bg=%230DC276&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=+%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98+&edge_flat=false"
    />
  </a>
</div>

그대로 붙여넣으면 어느 페이지를 가던지 루트 페이지의 방문자 수로 표시되기 때문에 제대로 된 페이지 방문자수 측정이 안되고, 위의 코드를 본인에 맞게 안고치고 그대로 사용하면 내 블로그의 방문자수가 집계될 것이다.

위의 img태그의 src를 잘보면 url=https%3A%2F%2Fgowoonsori.site와 같이 본인의 사이트 도메인이 있고 &count_bg… 가 있다. (여기서 %3A는 : 를, %2F는 /를 뜻한다.)

이 사이에 {{ .Site.BaseURL }}{{ .RelPermalink }} 를 넣어주면 아래와 같은 코드가 된다.

<div style="text-align: center;">
  <a href="https://hits.seeyoufarm.com">
    <img
      src="https://hits.seeyoufarm.com/api/count/incr/badge.svg?url={{ .Site.BaseURL }}{{ .RelPermalink }}&count_bg=%230DC276&title_bg=%23555555&icon=&icon_color=%23E7E7E7&title=+%EB%B0%A9%EB%AC%B8%EC%9E%90+%EC%88%98+&edge_flat=false"
    />
  </a>
</div>

완성된 위 코드를 원하는 layout에 삽입해주면 되는데 나는 _layouts/partials/body-article-sidepage.html 에 삽입해 주었고, 다른 테마를 사용하거나 다른 곳에 넣고 싶다면 해당 문서를 잘 참고하여 원하는 layout안의 위치에다가 삽입해주면 된다.



5. 그 외

head에 og와 같은 메타데이터들을 추가해주었고 nav, menubar, 링크 등에 cursor:pointer 가 없어서 클릭할 수 있는 것들이 구분이 가지 않아서 각 태그들에 hover 옵션으로 추가 해 주었다.

또, content의 min-width가 없이 %로만 지정이 되어있어서 끝도없이 사이즈가 줄여지길래 아이폰에 맞춰서 min-width를 320으로 설정해 주었다.

글꼴등 더 커스텀하고 싶은게 많은데 은근 시간을 많이 잡아먹어 이정도에 일단 만족하며 사용하고 있는 중이고, 또 좋은 shortCode나 팁이 생기면 공유할 예정이다. 😄

Tags :

Related Posts

제어문

제어문

1. if문 제어문 중에 하나로 다른 언어들과 사용목적은 동일하며 if~else if~else 를 똑같이 지원한다. 1) 선언 방법 score := 56 if score > 80 { fmt.Println("A") } else if(score > 50) { //소괄호로 감쌌지만 not Error fmt.Println("B") } else { fmt.Println("C") } if true { fmt.Println("true") //조건이 bool이면 success } if 1 { fmt.Println("true") //bool이 아니면 error } Java나 c처럼 **()**로 조건문을 감싸지 않고 바로 조건문을 작성하면 되고 Java처...

Read More
Spring 요청처리 내부구조

Spring 요청처리 내부구조

내가 이해하고 나중에 보기 위해서 정리하는 스프링 요청 처리 구조 내부 구조 요약 1. Tomcat (Servlet Container) 톰캣은 WAS로써 미들웨어역할을 하지만 아파치의 일부분 기능을 서비스(httpd(웹서비스 데몬) native 모듈 포함)하고있어 Web Server역할도 수행할 수 있다. 톰캣의 메인 기능으로 서블릿 컨테이너역할인데 이는 서블릿의 라이플 사이클을 관리하며 Disp...

Read More
KPU S/W 경진대회 본선 후기

KPU S/W 경진대회 본선 후기

본선일정은 2020.10.14 (수)에 13:30 ~ 17:00까지로 예선 후 1주일 뒤에 잡혀있었다. 수요일 본선 당일 12시 반까지 있던 수업을 마치고 기숙사에 들려 노트북을 챙겨 시험장소인 소강당으로 향했다. 도착해서 점심으로 서브웨이와 스프라이트를 받고 자리를 잡자마자 샌드위치를 허겁지겁 먹어치웠다. (아침 점심을 안먹었더니 배가 너무 고팠었다&hellip...

Read More