366 lines
11 KiB
HTML
366 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>阅读 · 知识库</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
|
<style>
|
|
:root {
|
|
--bg: #fafafa;
|
|
--surface: #fff;
|
|
--text: #1a1a2e;
|
|
--text-secondary: #6b7280;
|
|
--text-muted: #9ca3af;
|
|
--border: #e5e7eb;
|
|
--accent: #6366f1;
|
|
--accent-hover: #4f46e5;
|
|
--quote-bar: #d1d5db;
|
|
--quote-bg: #f3f4f6;
|
|
--code-bg: #1e293b;
|
|
--code-text: #e2e8f0;
|
|
--shadow: 0 1px 3px rgba(0,0,0,.06), 0 1px 2px rgba(0,0,0,.04);
|
|
--radius: 8px;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg: #0f172a;
|
|
--surface: #1e293b;
|
|
--text: #e2e8f0;
|
|
--text-secondary: #94a3b8;
|
|
--text-muted: #64748b;
|
|
--border: #334155;
|
|
--accent: #818cf8;
|
|
--accent-hover: #6366f1;
|
|
--quote-bar: #475569;
|
|
--quote-bg: #1e293b;
|
|
--code-bg: #0f172a;
|
|
--code-text: #e2e8f0;
|
|
--shadow: 0 1px 3px rgba(0,0,0,.2), 0 1px 2px rgba(0,0,0,.15);
|
|
}
|
|
}
|
|
|
|
* { margin: 0; padding: 0; box-sizing: border-box; }
|
|
|
|
body {
|
|
font-family: -apple-system, "Noto Serif SC", "Source Han Serif SC", "Songti SC", Georgia, serif;
|
|
background: var(--bg);
|
|
color: var(--text);
|
|
line-height: 1.9;
|
|
font-size: 17px;
|
|
-webkit-font-smoothing: antialiased;
|
|
}
|
|
|
|
/* Top bar */
|
|
.top-bar {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 10;
|
|
background: rgba(250,250,250,.85);
|
|
backdrop-filter: blur(12px);
|
|
-webkit-backdrop-filter: blur(12px);
|
|
border-bottom: 1px solid var(--border);
|
|
padding: 12px 24px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 12px;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.top-bar { background: rgba(15,23,42,.85); }
|
|
}
|
|
.back-btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
background: var(--surface);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-secondary);
|
|
padding: 6px 14px;
|
|
border-radius: var(--radius);
|
|
cursor: pointer;
|
|
font-size: 13px;
|
|
font-family: -apple-system, "PingFang SC", sans-serif;
|
|
transition: all .2s;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
.back-btn:hover {
|
|
border-color: var(--accent);
|
|
color: var(--accent);
|
|
box-shadow: 0 2px 8px rgba(99,102,241,.15);
|
|
}
|
|
.back-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
|
|
.top-bar .doc-title {
|
|
font-family: -apple-system, "PingFang SC", sans-serif;
|
|
font-size: 14px;
|
|
color: var(--text-muted);
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
flex: 1;
|
|
}
|
|
|
|
/* Content area */
|
|
#content {
|
|
max-width: 720px;
|
|
margin: 0 auto;
|
|
padding: 48px 32px 100px;
|
|
animation: fadeUp .35s ease;
|
|
}
|
|
@keyframes fadeUp {
|
|
from { opacity: 0; transform: translateY(12px); }
|
|
to { opacity: 1; transform: translateY(0); }
|
|
}
|
|
|
|
/* Typography */
|
|
#content h1 { font-size: 1.9em; font-weight: 700; margin: 0 0 .3em; line-height: 1.3; letter-spacing: -.02em; color: var(--text); }
|
|
#content h2 { font-size: 1.45em; font-weight: 600; margin: 1.8em 0 .5em; padding-bottom: .3em; border-bottom: 1px solid var(--border); line-height: 1.35; color: var(--text); }
|
|
#content h3 { font-size: 1.2em; font-weight: 600; margin: 1.6em 0 .4em; line-height: 1.4; color: var(--text); }
|
|
#content h4 { font-size: 1.05em; font-weight: 600; margin: 1.4em 0 .3em; color: var(--text); }
|
|
#content p { margin: .9em 0; }
|
|
#content p:first-child { margin-top: 0; }
|
|
#content a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color .2s; }
|
|
#content a:hover { border-bottom-color: var(--accent); }
|
|
|
|
#content blockquote {
|
|
position: relative;
|
|
margin: 1.2em 0;
|
|
padding: 14px 20px;
|
|
border-left: 3px solid var(--accent);
|
|
background: var(--quote-bg);
|
|
border-radius: 0 var(--radius) var(--radius) 0;
|
|
color: var(--text-secondary);
|
|
font-style: italic;
|
|
}
|
|
#content blockquote p { margin: .4em 0; }
|
|
|
|
/* Meta blockquote (本文共…字, 自动生成等) */
|
|
#content blockquote.meta-note {
|
|
border-left-color: var(--border);
|
|
background: transparent;
|
|
color: var(--text-muted);
|
|
font-size: 13px;
|
|
padding: 8px 16px;
|
|
margin: 0 0 1.5em;
|
|
font-style: normal;
|
|
font-family: -apple-system, "PingFang SC", sans-serif;
|
|
}
|
|
|
|
#content code {
|
|
font-family: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;
|
|
font-size: .88em;
|
|
background: rgba(99,102,241,.08);
|
|
color: var(--accent);
|
|
padding: 2px 7px;
|
|
border-radius: 4px;
|
|
}
|
|
#content pre {
|
|
margin: 1.2em 0;
|
|
background: var(--code-bg);
|
|
border-radius: var(--radius);
|
|
overflow-x: auto;
|
|
box-shadow: 0 2px 12px rgba(0,0,0,.15);
|
|
}
|
|
#content pre code {
|
|
display: block;
|
|
padding: 20px;
|
|
background: transparent;
|
|
color: var(--code-text);
|
|
font-size: .85em;
|
|
line-height: 1.7;
|
|
tab-size: 2;
|
|
}
|
|
#content img {
|
|
max-width: 100%;
|
|
border-radius: var(--radius);
|
|
margin: 1.5em 0;
|
|
box-shadow: var(--shadow);
|
|
}
|
|
#content table {
|
|
border-collapse: collapse;
|
|
width: 100%;
|
|
margin: 1.5em 0;
|
|
font-size: .92em;
|
|
font-family: -apple-system, "PingFang SC", sans-serif;
|
|
}
|
|
#content th, #content td {
|
|
border: 1px solid var(--border);
|
|
padding: 10px 14px;
|
|
text-align: left;
|
|
line-height: 1.6;
|
|
}
|
|
#content th {
|
|
background: var(--quote-bg);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
#content tr:nth-child(even) { background: rgba(0,0,0,.015); }
|
|
@media (prefers-color-scheme: dark) {
|
|
#content tr:nth-child(even) { background: rgba(255,255,255,.02); }
|
|
}
|
|
#content hr {
|
|
border: none;
|
|
border-top: 1px solid var(--border);
|
|
margin: 2.5em 0;
|
|
}
|
|
#content ul, #content ol {
|
|
padding-left: 1.5em;
|
|
margin: .7em 0;
|
|
}
|
|
#content li { margin: .3em 0; }
|
|
#content li > ul, #content li > ol { margin: .2em 0; }
|
|
#content strong { font-weight: 700; color: var(--text); }
|
|
#content em { font-style: italic; }
|
|
|
|
/* Loading state */
|
|
.loading {
|
|
text-align: center;
|
|
padding: 80px 20px;
|
|
color: var(--text-muted);
|
|
}
|
|
.loading .spinner {
|
|
display: inline-block;
|
|
width: 28px; height: 28px;
|
|
border: 3px solid var(--border);
|
|
border-top-color: var(--accent);
|
|
border-radius: 50%;
|
|
animation: spin .7s linear infinite;
|
|
margin-bottom: 16px;
|
|
}
|
|
@keyframes spin { to { transform: rotate(360deg); } }
|
|
.loading p { font-family: -apple-system, "PingFang SC", sans-serif; font-size: 14px; }
|
|
|
|
/* Error */
|
|
.error {
|
|
text-align: center;
|
|
padding: 80px 20px;
|
|
color: #ef4444;
|
|
font-family: -apple-system, "PingFang SC", sans-serif;
|
|
}
|
|
.error p { font-size: 14px; margin-top: 8px; color: var(--text-muted); }
|
|
|
|
/* Responsive */
|
|
@media (max-width: 600px) {
|
|
#content { padding: 32px 20px 80px; font-size: 16px; }
|
|
.top-bar { padding: 10px 16px; }
|
|
#content h1 { font-size: 1.6em; }
|
|
#content pre { font-size: .85em; }
|
|
#content table { font-size: .85em; }
|
|
#content th, #content td { padding: 6px 10px; }
|
|
.top-bar .doc-title { display: none; }
|
|
}
|
|
|
|
/* Scrollbar */
|
|
#content ::-webkit-scrollbar { height: 6px; width: 6px; }
|
|
#content ::-webkit-scrollbar-track { background: transparent; }
|
|
#content ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
|
|
#content ::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="top-bar">
|
|
<button class="back-btn" onclick="goBack()">
|
|
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M19 12H5"/><path d="M12 19l-7-7 7-7"/></svg>
|
|
返回
|
|
</button>
|
|
<span class="doc-title" id="docTitle"></span>
|
|
</div>
|
|
<div id="content">
|
|
<div class="loading" id="loading">
|
|
<div class="spinner"></div>
|
|
<p>加载中...</p>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const params = new URLSearchParams(location.search);
|
|
const url = params.get('url');
|
|
const isMemos = params.get('memos');
|
|
const memosUid = params.get('memosUid');
|
|
const MEILI_URL = '/search-api/indexes/knowledge/search';
|
|
const SEARCH_KEY = '12d3464de5e0b9bb098952f1a1fe99da0b8fe9111737a71eeddb5456278f6c7c';
|
|
|
|
// Back button: always go back to search
|
|
function goBack() {
|
|
window.location.href = '/search.html';
|
|
}
|
|
|
|
// Extract a readable title from the URL for the top bar
|
|
function guessTitle(u) {
|
|
if (!u) return '';
|
|
// Remove query params, get last path segment
|
|
const segments = u.split('?')[0].split('/');
|
|
const last = segments[segments.length - 1] || '';
|
|
// Remove .md extension
|
|
return last.replace(/\.md$/i, '').replace(/[_-]/g, ' ') || '阅读';
|
|
}
|
|
|
|
if (!url && !memosUid) {
|
|
document.getElementById('content').innerHTML = '<div class="error"><div style="font-size:40px;margin-bottom:8px;">📄</div><strong>缺少参数</strong><p>未指定要阅读的内容</p></div>';
|
|
} else if (memosUid) {
|
|
// Load Memos content from Meilisearch by _memos_uid
|
|
document.title = '随手记 · 知识库';
|
|
document.getElementById('docTitle').textContent = '随手记';
|
|
fetch(MEILI_URL, {
|
|
method: 'POST',
|
|
headers: { 'Authorization': `Bearer ${SEARCH_KEY}`, 'Content-Type': 'application/json' },
|
|
body: JSON.stringify({ filter: `_memos_uid = ${memosUid}`, limit: 1 })
|
|
})
|
|
.then(r => r.json())
|
|
.then(d => {
|
|
const h = d.hits && d.hits[0];
|
|
if (!h) throw new Error('未找到');
|
|
const md = h.content || '';
|
|
const html = marked.parse(md, { breaks: true, gfm: true });
|
|
document.title = (h.title || '随手记') + ' · 知识库';
|
|
document.getElementById('docTitle').textContent = h.title || '随手记';
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('content').innerHTML = html;
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('loading').innerHTML =
|
|
'<div class="error"><div style="font-size:40px;margin-bottom:8px;">⚠️</div><strong>' + err.message + '</strong><p>内容加载失败</p></div>';
|
|
});
|
|
} else {
|
|
// Standard Markdown file from gitea-raw proxy
|
|
const guessed = guessTitle(url);
|
|
document.title = guessed + ' · 知识库';
|
|
document.getElementById('docTitle').textContent = guessed;
|
|
|
|
fetch(url)
|
|
.then(r => {
|
|
if (!r.ok) throw new Error('加载失败 (' + r.status + ')');
|
|
return r.text();
|
|
})
|
|
.then(raw => {
|
|
// Strip YAML frontmatter (--- ... --- block at the start)
|
|
let md = raw.replace(/^---[\s\S]*?---\n*/, '');
|
|
|
|
// Strip auto-generated word-count blockquote (本文共...字)
|
|
md = md.replace(/^> 本文共[^\n]*\n*/m, '');
|
|
|
|
// Strip auto-generated AI analysis headings
|
|
md = md.replace(/^## AI 分析（自动生成，请勿编辑）\n*/m, '');
|
|
|
|
// Strip leading blank lines
|
|
md = md.replace(/^\n+/, '');
|
|
|
|
const html = marked.parse(md, { breaks: true, gfm: true });
|
|
document.getElementById('loading').style.display = 'none';
|
|
document.getElementById('content').innerHTML = html;
|
|
|
|
// Downstyle the first blockquote if it's meta info (has 本文共 / 字数 / 阅读)
|
|
const firstQuote = document.querySelector('#content blockquote');
|
|
if (firstQuote && /本文共|字数|阅读|分钟/.test(firstQuote.textContent)) {
|
|
firstQuote.className = 'meta-note';
|
|
}
|
|
})
|
|
.catch(err => {
|
|
document.getElementById('loading').innerHTML =
|
|
'<div class="error"><div style="font-size:40px;margin-bottom:8px;">⚠️</div><strong>' + err.message + '</strong><p>内容可能已被移动或删除</p></div>';
|
|
});
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|