docs: update PaperMod theme documentation and Mermaid configuration

Author: archivesdj

content/posts/hello-world.md

@@ -1,6 +1,6 @@
 ---
 title: "Hello World"
-date: 2024-04-15
+date: 2025-04-14
 description: "첫 번째 블로그 포스트입니다."
 tags: ["blog", "hello"]
 categories: ["일상"]

content/posts/markdown-usage.md

@@ -1,6 +1,6 @@
 ---
 title: "마크다운 사용법"
-date: 2024-04-16
+date: 2025-04-15
 description: "마크다운의 기본 문법과 고급 문법을 상세히 설명하는 가이드"
 tags: ["markdown", "문법", "가이드"]
 categories: ["기술"]

content/posts/papermod-mermaid.md

@@ -0,0 +1,105 @@
+---
+title: "PaperMod 테마에서 다이어그램 사용하기"
+date: 2025-04-17
+draft: false
+description: "PaperMod 테마에서 Mermaid 다이어그램을 사용하기 위한 설정 방법을 알아봅니다."
+tags: ["hugo", "papermod", "mermaid", "diagram"]
+---
+
+## PaperMod 테마 소개
+
+PaperMod는 Hugo를 위한 현대적이고 깔끔한 블로그 테마입니다. 이 테마는 다음과 같은 특징을 가지고 있습니다:
+
+### 주요 특징
+- 깔끔하고 모던한 디자인
+- 다크 모드 지원
+- 반응형 레이아웃
+- SEO 최적화
+- 다국어 지원
+- 다양한 커스터마이징 옵션
+
+### 장점
+1. **사용자 친화적**: 직관적인 설정과 사용법
+2. **가벼운 구조**: 빠른 로딩 속도
+3. **확장성**: 다양한 기능을 쉽게 추가 가능
+4. **활발한 커뮤니티**: 지속적인 업데이트와 지원
+
+### 단점
+1. **기본 기능 제한**: 일부 고급 기능은 직접 구현 필요
+2. **커스터마이징 제한**: 테마 구조 변경이 어려울 수 있음
+3. **의존성 관리**: 일부 기능은 외부 라이브러리 의존
+
+## Mermaid 다이어그램 설정하기
+
+PaperMod 테마에서 Mermaid 다이어그램을 사용하기 위해서는 몇 가지 설정이 필요합니다. 이 글에서는 필요한 설정과 사용 방법을 단계별로 설명합니다.
+
+### 1. Mermaid 코드블럭 처리 설정
+
+먼저 Mermaid 코드블럭을 처리하기 위한 템플릿 파일을 생성해야 합니다.
+
+```bash
+mkdir -p layouts/_default/_markup/
+touch layouts/_default/_markup/render-codeblock-mermaid.html
+```
+
+생성된 `render-codeblock-mermaid.html` 파일에 다음 내용을 추가합니다:
+
+```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 스크립트를 로드하도록 합니다:
+
+```html
+{{ 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` 파일에 다음 설정을 추가합니다:
+
+```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 렌더링을 허용하며, 코드 블록의 처리 방식을 지정합니다. 

layouts/partials/extend_head.html

@@ -21,17 +21,14 @@
   window.addEventListener('load', function() {
     mermaid.initialize({
       startOnLoad: true,
-      theme: '{{ .Site.Params.mermaid.theme }}',
-      securityLevel: '{{ .Site.Params.mermaid.securityLevel }}',
+      theme: {{ .Site.Params.mermaid.theme | default "default" }},
+      securityLevel: {{ .Site.Params.mermaid.securityLevel | default "loose" }},
       flowchart: {
         useMaxWidth: true,
         htmlLabels: true,
         curve: 'basis'
       }
     });
-    mermaid.run({
-      querySelector: '.language-mermaid'
-    });
   });
 </script>
 {{ end }}