PaperMod 테마 소개

PaperMod는 Hugo를 위한 현대적이고 깔끔한 블로그 테마입니다. 이 테마는 다음과 같은 특징을 가지고 있습니다:

주요 특징

  • 깔끔하고 모던한 디자인
  • 다크 모드 지원
  • 반응형 레이아웃
  • SEO 최적화
  • 다국어 지원
  • 다양한 커스터마이징 옵션

장점

  1. 사용자 친화적: 직관적인 설정과 사용법
  2. 가벼운 구조: 빠른 로딩 속도
  3. 확장성: 다양한 기능을 쉽게 추가 가능
  4. 활발한 커뮤니티: 지속적인 업데이트와 지원

단점

  1. 기본 기능 제한: 일부 고급 기능은 직접 구현 필요
  2. 커스터마이징 제한: 테마 구조 변경이 어려울 수 있음
  3. 의존성 관리: 일부 기능은 외부 라이브러리 의존

Mermaid 다이어그램 설정하기

PaperMod 테마에서 Mermaid 다이어그램을 사용하기 위해서는 몇 가지 설정이 필요합니다. 이 글에서는 필요한 설정과 사용 방법을 단계별로 설명합니다.

1. Mermaid 코드블럭 처리 설정

먼저 Mermaid 코드블럭을 처리하기 위한 템플릿 파일을 생성해야 합니다.

mkdir -p layouts/_default/_markup/
touch layouts/_default/_markup/render-codeblock-mermaid.html

생성된 render-codeblock-mermaid.html 파일에 다음 내용을 추가합니다:

{{ if eq .Type "mermaid" }}
<pre class="mermaid">
  {{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ .Page.Store.Set "hasMermaid" true }}
{{ else }}
<pre class="language-{{ .Type }}">
  {{- .Inner | htmlEscape | safeHTML }}
</pre>
{{ end }}

2. Mermaid 스크립트 로드 설정

extend_head.html 파일을 수정하여 Mermaid 스크립트를 로드하도록 합니다:

{{ if .Page.Store.Get "hasMermaid" }}
<script src="https://cdn.jsdelivr.net/npm/mermaid@10.2.3/dist/mermaid.min.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function() {
    mermaid.initialize({
      startOnLoad: true,
      theme: 'default',
      securityLevel: 'loose'
    });
  });
</script>
{{ end }}

3. Hugo 설정 파일 수정

hugo.toml 파일에 다음 설정을 추가합니다:

[markup]
  [markup.goldmark]
    [markup.goldmark.renderer]
      unsafe = true
      hardWraps = true
    [markup.goldmark.parser]
      attribute = true
      autoHeadingID = true
      autoHeadingIDType = "github"
  [markup.highlight]
    noClasses = false
    codeFences = true
    guessSyntax = true

[params]
  [params.mermaid]
    enable = true
    theme = "default"
    securityLevel = "loose"

이 설정은 Mermaid 다이어그램을 활성화하고, 마크다운의 HTML 렌더링을 허용하며, 코드 블록의 처리 방식을 지정합니다.