1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
|
<!doctype html>
<html lang="ko">
<head>
<meta charset="utf-8" />
<title>{{ if .Title }}{{ .Title }} – {{ end }}Recordings</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<style>
body{font-family:system-ui,Segoe UI,Roboto,Apple SD Gothic Neo,AppleGothic,sans-serif;max-width:900px;margin:32px auto;padding:0 16px;line-height:1.7}
header,footer{display:flex;gap:12px;align-items:center;justify-content:space-between;margin:8px 0 20px}
a{text-decoration:none} a:hover{text-decoration:underline}
.muted{color:#666;font-size:.9rem}
.nav{display:flex;gap:8px;flex-wrap:wrap}
.btn{border:1px solid #ccc;border-radius:8px;padding:6px 10px}
h1{margin:0 0 6px}
.content :is(h1,h2,h3){margin-top:1.2em}
.content img, .content video{max-width:100%;height:auto}
/* 모바일에서 줄바꿈 조정 */
@media (max-width: 768px) {
.content br {
display: none;
}
.content p {
margin: 0.5em 0;
}
/* 문단 구분은 유지하되, 단일 줄바꿈은 무시 */
.content p + p {
margin-top: 1em;
}
}
</style>
</head>
<body>
<header>
<div class="nav">
{{ $back := (cond (ne .Parent nil) .Parent.RelPermalink "/recordings/") }}
<a class="btn" href="{{ $back }}">← Back</a>
</div>
<div class="muted">{{ .Date.Format "2006-01-02" }}</div>
</header>
{{ if .Title }}<h1>{{ .Title }}</h1>{{ end }}
<main class="content">
{{ .Content }}
</main>
<footer>
<div class="nav">
{{ with .NextInSection }}
<a class="btn" href="{{ .RelPermalink }}">← Before</a>
{{ end }}
{{ with .PrevInSection }}
<a class="btn" href="{{ .RelPermalink }}">Next →</a>
{{ end }}
</div>
<div></div>
</footer>
{{/* Determine background audio for this page: prefer page resources, then section subfolder */}}
{{ $folder := path.Base (printf "%s" .File.Dir) }}
{{ $paudios := .Resources.Match "*.{mp3,m4a,ogg,wav,opus,OPUS,OGG,WAV,MP3,M4A}" }}
{{ $audio := index $paudios 0 }}
{{ if not $audio }}
{{ $secAudios := .CurrentSection.Resources.Match (printf "**/%s/*.{mp3,m4a,ogg,wav,opus,OPUS,OGG,WAV,MP3,M4A}" $folder) }}
{{ $audio = index $secAudios 0 }}
{{ end }}
{{ with $audio }}
<audio id="bgm" src="{{ .RelPermalink }}" preload="auto" loop style="display:none"></audio>
<div style="position:fixed;right:16px;bottom:16px;z-index:10">
<button id="bgm-toggle" class="btn" style="opacity:.8">BGM ▷</button>
</div>
<script>
// Try to autoplay; if blocked, enable on first user interaction
document.addEventListener('DOMContentLoaded', () => {
const bgm = document.getElementById('bgm');
const toggle = document.getElementById('bgm-toggle');
if (!bgm) return;
const tryPlay = () => bgm.play().catch(() => {});
tryPlay();
const onFirst = () => { tryPlay(); document.removeEventListener('click', onFirst); };
document.addEventListener('click', onFirst, { once: true });
if (toggle) {
toggle.addEventListener('click', (e) => {
e.preventDefault();
if (bgm.paused) {
bgm.play().then(()=>{ toggle.textContent = 'BGM ❚❚'; }).catch(()=>{});
} else {
bgm.pause();
bgm.currentTime = 0;
toggle.textContent = 'BGM ▷';
}
});
}
});
</script>
{{ end }}
<script>
// 선택: 키보드 좌우 화살표로 이전/다음 이동
document.addEventListener("keydown", e => {
if (e.target.closest("input,textarea")) return;
if (e.key === "ArrowLeft") {
const a=document.querySelector('a.btn:has(+ a.btn), a.btn[href*="Before"]');
if (a) location.href=a.href;
} else if (e.key === "ArrowRight") {
const links=[...document.querySelectorAll('a.btn')].filter(x=>/Next/.test(x.textContent));
if (links[0]) location.href=links[0].href;
}
});
</script>
</body>
</html>
|
