feat: 静态资源与前端 Markdown、浏览量、Gitea 同步内容
- 将 Markdown/KaTeX/高亮/Mermaid 移至 public 与 CDN,减小 Worker 体积 - 文章列表:标题、简介、时间与浏览量;访问文章时递增 view_count - 新增 migrations/0003 与 blog 路由等配置 - 加入 public 资源与站点图标 Made-with: Cursor
This commit is contained in:
96
public/js/markdown-client.js
Normal file
96
public/js/markdown-client.js
Normal file
@@ -0,0 +1,96 @@
|
||||
import { marked } from "https://esm.sh/marked@15";
|
||||
import markedKatex from "https://esm.sh/marked-katex-extension@5?deps=marked@15,katex@0.16";
|
||||
import hljs from "https://esm.sh/highlight.js@11";
|
||||
import mermaid from "https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs";
|
||||
|
||||
marked.use(
|
||||
markedKatex({
|
||||
throwOnError: false,
|
||||
nonStandard: true
|
||||
})
|
||||
);
|
||||
marked.setOptions({ gfm: true, breaks: false });
|
||||
|
||||
function decodeHtmlEntities(str) {
|
||||
return String(str)
|
||||
.replace(/ /g, "\u00a0")
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, '"')
|
||||
.replace(/'/g, "'")
|
||||
.replace(/&#(\d+);/g, (_, n) => {
|
||||
const code = Number(n);
|
||||
return code >= 0 && code <= 0x10ffff ? String.fromCharCode(code) : "";
|
||||
})
|
||||
.replace(/&#x([0-9a-fA-F]+);/g, (_, h) => {
|
||||
const code = parseInt(h, 16);
|
||||
return code >= 0 && code <= 0x10ffff ? String.fromCharCode(code) : "";
|
||||
});
|
||||
}
|
||||
|
||||
function escapeHtml(s) {
|
||||
return String(s)
|
||||
.replace(/&/g, "&")
|
||||
.replace(/</g, "<")
|
||||
.replace(/>/g, ">")
|
||||
.replace(/"/g, """)
|
||||
.replace(/'/g, "'");
|
||||
}
|
||||
|
||||
function mermaidFencedToDiv(html) {
|
||||
return html.replace(
|
||||
/<pre><code class="language-mermaid">([\s\S]*?)<\/code><\/pre>/gi,
|
||||
(_, inner) => {
|
||||
const raw = decodeHtmlEntities(inner);
|
||||
return `<div class="mermaid">${escapeHtml(raw)}</div>`;
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
function decodeMdFromB64(b64) {
|
||||
return decodeURIComponent(escape(atob(b64)));
|
||||
}
|
||||
|
||||
async function renderOne(el) {
|
||||
const b64 = el.getAttribute("data-b64-md");
|
||||
if (!b64) return;
|
||||
let md;
|
||||
try {
|
||||
md = decodeMdFromB64(b64);
|
||||
} catch {
|
||||
el.innerHTML = "<p>正文解码失败。</p>";
|
||||
el.classList.remove("markdown-pending");
|
||||
return;
|
||||
}
|
||||
el.removeAttribute("data-b64-md");
|
||||
let html = marked.parse(md, { async: false });
|
||||
if (typeof html !== "string") html = "";
|
||||
html = mermaidFencedToDiv(html);
|
||||
el.innerHTML = html;
|
||||
el.classList.remove("markdown-pending");
|
||||
el.querySelectorAll("pre code").forEach((block) => {
|
||||
try {
|
||||
hljs.highlightElement(block);
|
||||
} catch {
|
||||
/* ignore unknown languages */
|
||||
}
|
||||
});
|
||||
const mNodes = el.querySelectorAll(".mermaid");
|
||||
if (mNodes.length) {
|
||||
mermaid.initialize({ startOnLoad: false, theme: "neutral" });
|
||||
await mermaid.run({ nodes: mNodes });
|
||||
}
|
||||
}
|
||||
|
||||
function run() {
|
||||
document.querySelectorAll(".markdown-body[data-b64-md]").forEach((el) => {
|
||||
renderOne(el).catch(() => {
|
||||
el.innerHTML = "<p>渲染失败。</p>";
|
||||
el.classList.remove("markdown-pending");
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") document.addEventListener("DOMContentLoaded", run);
|
||||
else run();
|
||||
Reference in New Issue
Block a user