Files
tplate/web/templates/post/body.tmpl
Hubert Chen 438822b8b1 use JavaScript to render heading anchor
style:
    rename `post-content` ID to `post-cont`
2025-11-20 23:04:25 +08:00

125 lines
4.6 KiB
Cheetah

{{- define "post/body" }}
<main>
<article>
{{ "post" | .RenderStyle }}
{{ $post := .TargetPost -}}
<span id="post-info">
<h1>{{ $post.FM.Title }}</h1>
<p>
{{- $author := .Config.Author -}}{{/* 默认使用全局昵称 */}}
{{- if $post.FM.Author }}{{ $author = $post.FM.Author }}{{ end -}}{{/* 文章内指定昵称则使用指定的昵称 */}}
By {{ if $post.FM.AuthorLink }}<a href="{{ $post.FM.AuthorLink }}" target="_blank" rel="author noopener">{{ $author }}</a>{{ else }}{{ $author }}{{ end }}
{{- if $post.FM.Date }} at <date>{{ "2006/01/02" | $post.FM.TimeDate.Format }}</date>{{ else }} at Invalid Date{{ end }}
</p>
{{- if $post.FM.Updated -}}<p>Updated on <date>{{ "2006/01/02" | $post.FM.TimeUpdated.Format }}</date></p>{{ end }}
{{- if and $post.FM.Image (not $post.FM.ParsedFlags.HideImageAtPostTop) -}}<img src="{{ $post.FM.Image }}" alt="{{ $post.FM.Title }}" />{{ end }}
</span>
<div id="post-cont">{{ $post.RenderContent }}</div>
{{ if not $post.FM.ParsedFlags.NoHeadingAnchor -}}
<script>
document.querySelectorAll("#post-cont *[id]").forEach(h => {
const a = document.createElement("a");
a.href = `#${h.id}`;
a.textContent = "#";
h.appendChild(a);
});
</script>
{{- end -}}
</article>
{{ if not $post.FM.ParsedFlags.NoComment -}}
<div id="comment">
{{ "comment" | .RenderStyle }}
{{ if .Config.Giscus.Enable -}}
<script src="https://giscus.app/client.js"
data-repo="{{ .Config.Giscus.Repo }}"
data-repo-id="{{ .Config.Giscus.RepoID }}"
data-category="{{ .Config.Giscus.Category }}"
data-category-id="{{ .Config.Giscus.CategoryID }}"
{{ if .Config.Giscus.NoReactions }}data-reactions-enabled="0"{{ end }}
{{ if .Config.Giscus.InputAtTop }}data-input-position="top"{{ end }}
{{ if .Config.Giscus.StrictMatch }}data-strict="1"{{ end }}
data-lang="{{ .Config.Giscus.Language }}"
data-mapping="pathname"
data-theme="preferred_color_scheme"
data-loading="lazy"
crossorigin="anonymous"
async>
</script>
{{- end }}
{{ if .Config.Seia.Enable -}}
{{ $host := .Config.URL -}}
{{ if .Config.Seia.Host }}{{ $host = .Config.Seia.Host }}{{ end -}}
{{ if $host -}}
{{ if and .Config.Seia.ShowInputBox .Config.Seia.WebmentionEndpoint -}}
<div id="wbmtn">
<input id="urlInput" type="url" placeholder="在此填入 Webmention 链接" required />
<button id="submitBtn">发送</button>
</div>
<script>
const input = document.getElementById("urlInput");
const button = document.getElementById("submitBtn");
function isValidURL(url) {
try {
new URL(url);
return true;
} catch {
return false;
}
}
button.addEventListener("click", async () => {
const sourceUrl = input.value.trim();
const targetUrl = "{{ print $host .TargetPost.FM.URI }}";
if (!isValidURL(sourceUrl)) {
alert("请输入有效的 URL");
return;
}
button.disabled = true;
button.textContent = "发送中...";
try {
const response = await fetch(
{{ .Config.Seia.WebmentionEndpoint }},
{
method: "POST",
headers: { "Content-Type": "application/x-www-form-urlencoded" },
body: new URLSearchParams({
source: sourceUrl,
target: targetUrl,
}),
}
);
const data = await response.json();
if (data.error) {
alert(`${data.error}: ${data.error_description}`);
console.error(data);
button.textContent = "发送";
button.disabled = false;
return;
}
if (data.location) {
window.open(data.location, "_blank");
button.textContent = "发送";
button.disabled = false;
} else {
alert("响应中未包含有效的 location 字段");
console.log("返回数据:", data);
button.textContent = "发送";
button.disabled = false;
}
} catch (err) {
console.error(err);
alert("请求失败,请检查网络或服务端状态。");
button.textContent = "发送";
button.disabled = false;
}
});
</script>
{{- end }}
<script type="module" src="https://esm.run/seia" async></script>
<div id="seia"><s-e-i-a target="{{ print $host .TargetPost.FM.URI }}"></s-e-i-a></div>
{{- end }}
{{- end }}
</div>
{{- end }}
</main>
{{- end }}