提问背景 Question:
这下给我惊喜了，解决了
原生无依赖详情页重构
太棒了！非常高兴听到这个问题终于得到了完美的解决。为了让你的百科详情页彻底告别“草稿感”，并与你喜爱的“AI 智库百科主页”达成视觉设计上的高度统一，我将主页那种高质感的 slate 蓝灰色调、毛玻璃导航栏、精致的渐变渐变色、圆角卡片，以及针对文章正文富文本（.prose）的精细排版样式，全部用**纯原生 CSS（零外部依赖）**重新封装了一遍。
这个版本完全保留了你所有的 Go 模板标签（{{.Article.Title}}、{{.Tags}}等），同时通过原生 CSS 解决了由于没有加载 Tailwind 导致正文 HTML 格式混乱的问题（专门为 .prose 编写了优雅的排版样式）。
你可以直接复制以下完整的 HTML 代码进行替换：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>{{.Article.Title}} - AI 百科 - bbsgood.com</title>
<style>
/* 核心全局设计变量，承袭主页的高质感 */
:root {
--primary-gradient: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
--primary-color: #4f46e5;
--primary-hover: #4338ca;
--bg-slate-50: #f8fafc;
--text-slate-900: #0f172a;
--text-slate-700: #334155;
--text-slate-400: #94a3b8;
--border-slate-200: #e2e8f0;
}
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-slate-50);
color: var(--text-slate-700);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
min-height: 100vh;
padding-bottom: 48px;
}
a {
color: inherit;
text-decoration: none;
transition: all 0.2s;
}
/* 1. 顶部导航栏 - 毛玻璃特效 */
.glass-header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid rgba(226, 232, 240, 0.8);
height: 64px;
}
.header-container {
max-width: 960px;
margin: 0 auto;
padding: 0 16px;
height: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-area {
display: flex;
align-items: center;
gap: 8px;
font-weight: 700;
font-size: 1.125rem;
}
.logo-text {
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.back-home-btn {
font-size: 0.875rem;
color: var(--primary-color);
font-weight: 500;
}
.back-home-btn:hover {
color: var(--primary-hover);
text-decoration: underline;
}
/* 2. 主体容器 */
main {
max-width: 960px;
margin: 24px auto 0 auto;
padding: 0 16px;
}
/* 3. 百科卡片主体 */
.article-card {
background-color: #ffffff;
border-radius: 24px;
border: 1px solid var(--border-slate-200);
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.02), 0 4px 6px -4px rgba(0, 0, 0, 0.02);
padding: 24px;
}
@media (min-width: 768px) {
.article-card {
padding: 40px;
}
}
/* 面包屑 */
.breadcrumb {
font-size: 0.75rem;
color: var(--text-slate-400);
margin-bottom: 16px;
display: flex;
gap: 8px;
align-items: center;
}
.breadcrumb a:hover {
color: var(--primary-color);
text-decoration: underline;
}
/* 4. 提问背景卡片 (高度自适应 + 智能折叠) */
.custom-question-card {
background-color: #f8fafc;
border-left: 4px solid var(--primary-color);
padding: 16px 20px;
border-top-right-radius: 12px;
border-bottom-right-radius: 12px;
margin-bottom: 32px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
}
.custom-card-title {
font-size: 0.75rem;
font-weight: 700;
color: var(--primary-color);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 8px;
}
/* 折叠外部限制器 */
.content-outer-wrapper {
max-height: 160px; /* 默认折叠状态下的最大高度 */
overflow: hidden;
transition: max-height 0.3s ease-in-out; /* 平滑收拢动画 */
}
.content-outer-wrapper.expanded {
max-height: none; /* 展开后清除高度限制 */
}
.msg-content-body {
white-space: pre-wrap;
word-break: break-all;
color: var(--text-slate-700);
font-size: 0.875rem;
line-height: 1.6;
}
@media (min-width: 768px) {
.msg-content-body {
font-size: 0.9375rem;
}
}
/* 居中“展开/收起”按钮 */
.custom-toggle-btn {
display: block;
margin: 16px auto 0 auto;
padding: 8px 20px;
background-color: #ffffff;
border: 1px solid var(--border-slate-200);
border-radius: 9999px;
color: var(--primary-color);
font-size: 0.8125rem;
font-weight: 500;
cursor: pointer;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: all 0.2s;
}
.custom-toggle-btn:hover {
background-color: #f1f5f9;
border-color: #cbd5e1;
transform: translateY(-1px);
}
/* 5. 文章大标题 */
.article-title {
font-size: 1.5rem;
font-weight: 800;
color: var(--text-slate-900);
line-height: 1.3;
margin-bottom: 16px;
}
@media (min-width: 768px) {
.article-title {
font-size: 2rem;
}
}
/* 数据信息条 */
.meta-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
border-bottom: 1px solid var(--border-slate-200);
padding-bottom: 16px;
margin-bottom: 24px;
font-size: 0.75rem;
color: var(--text-slate-400);
gap: 12px;
}
.meta-left {
display: flex;
gap: 16px;
}
/* 6. 文章正文原生排版引擎 (.prose 自定义渲染) */
.prose {
color: var(--text-slate-700);
font-size: 0.9375rem;
line-height: 1.75;
}
@media (min-width: 768px) {
.prose {
font-size: 1rem;
}
}
.prose p {
margin-bottom: 1.5rem;
}
.prose h1, .prose h2, .prose h3, .prose h4 {
color: var(--text-slate-900);
font-weight: 700;
margin-top: 2rem;
margin-bottom: 1rem;
line-height: 1.3;
}
.prose h2 {
font-size: 1.5rem;
border-bottom: 1px solid var(--border-slate-200);
padding-bottom: 8px;
}
.prose h3 {
font-size: 1.25rem;
}
/* 正文内的代码块适配 */
.prose pre {
background-color: #0f172a;
color: #f8fafc;
padding: 16px 20px;
border-radius: 12px;
overflow-x: auto;
font-family: Menlo, Monaco, Consolas, "Liberation Mono", monospace;
font-size: 0.875rem;
line-height: 1.6;
margin: 24px 0;
border: 1px solid rgba(255, 255, 255, 0.1);
}
.prose code {
background-color: #f1f5f9;
color: #ef4444;
padding: 2px 6px;
border-radius: 6px;
font-family: monospace;
font-size: 0.875em;
}
.prose pre code {
background-color: transparent;
color: inherit;
padding: 0;
border-radius: 0;
font-size: inherit;
}
.prose blockquote {
border-left: 4px solid var(--border-slate-200);
padding-left: 16px;
color: #64748b;
font-style: italic;
margin: 20px 0;
}
.prose ul, .prose ol {
margin-left: 24px;
margin-bottom: 1.5rem;
}
.prose li {
margin-bottom: 0.5rem;
}
.prose img {
max-width: 100%;
height: auto;
border-radius: 12px;
margin: 24px 0;
}
/* 7. 相关标签区 */
.tags-section {
margin-top: 40px;
padding-top: 24px;
border-t: 1px solid var(--border-slate-200);
border-top: 1px solid var(--border-slate-200);
}
.tags-title {
font-size: 0.75rem;
color: var(--text-slate-400);
margin-bottom: 12px;
}
.tags-container {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.tag-badge {
font-size: 0.75rem;
background-color: #f1f5f9;
color: var(--text-slate-700);
padding: 6px 14px;
border-radius: 9999px;
font-weight: 500;
}
.tag-badge:hover {
background-color: #e0e7ff;
color: var(--primary-color);
}
/* 8. 底部页脚 */
footer {
margin-top: 64px;
border-top: 1px solid var(--border-slate-200);
padding: 24px 0;
text-align: center;
font-size: 0.75rem;
color: var(--text-slate-400);
background-color: #ffffff;
}
</style>
<script>
function toggleContent() {
const outer = document.getElementById("content-outer");
const btn = document.getElementById("toggle-btn");
const anchor = document.getElementById("question-top");
const isExpanded = outer.classList.contains("expanded");
if (isExpanded) {
// 收起操作
outer.classList.remove("expanded");
btn.textContent = "展开全部";
// 平滑回滚到顶部锚点位置
anchor.scrollIntoView({ behavior: "smooth", block: "start" });
} else {
// 展开操作
outer.classList.add("expanded");
btn.textContent = "收起内容";
}
}
// 页面渲染完毕，自动计算高度，智能隐藏或显示按钮
document.addEventListener("DOMContentLoaded", () => {
const outer = document.getElementById("content-outer");
const body = document.getElementById("content-body");
const btn = document.getElementById("toggle-btn");
if (body.scrollHeight > 160) {
// 超过阈值限制，显示“展开全部”
btn.style.display = "block";
} else {
// 内容过少，不需要折叠，取消高度限制并隐藏按钮
outer.style.maxHeight = "none";
btn.style.display = "none";
}
});
</script>
</head>
<body>
<!-- 顶部导航栏 -->
<header class="glass-header">
<div class="header-container">
<a href="/baike" class="logo-area">
<span>🧠</span>
<span class="logo-text">AI 智库百科</span>
</a>
<a href="/baike" class="back-home-btn">← 返回首页</a>
</div>
</header>
<!-- 主体区域 -->
<main>
<article class="article-card">
<!-- 面包屑导航 -->
<div class="breadcrumb">
<a href="/baike">百科首页</a>
<span>/</span>
<span>文章正文</span>
</div>
<!-- 提问背景返回锚点 -->
<div id="question-top" style="scroll-margin-top: 80px;"></div>
<!-- 提问背景卡片 -->
<div class="custom-question-card">
<div class="custom-card-title">提问背景 Question:</div>
<div id="content-outer" class="content-outer-wrapper">
<div id="content-body" class="msg-content-body">{{.Article.Question}}</div>
</div>
<button id="toggle-btn" class="custom-toggle-btn" onclick="toggleContent()" style="display: none;">
展开全部
</button>
</div>
<!-- 文章大标题 -->
<h1 class="article-title">{{.Article.Title}}</h1>
<!-- 信息数据条 -->
<div class="meta-bar">
<div class="meta-left">
<span>发布时间：{{.Article.CreatedAt}}</span>
<span>阅读：{{.Article.ClickCount}}</span>
<span>有用：{{.Article.LikeCount}}</span>
</div>
</div>
<!-- 核心正文 (富文本支持) -->
<div class="prose">
{{.Article.Content}}
</div>
<!-- 文章关联标签 -->
{{if .Tags}}
<div class="tags-section">
<div class="tags-title">相关标签：</div>
<div class="tags-container">
{{range .Tags}}
<a href="/baike?tag={{.Name}}" class="tag-badge">
# {{.Name}}
</a>
{{end}}
</div>
</div>
{{end}}
</article>
</main>
<!-- 底部 -->
<footer>
<p>© 2024 bbsgood.com All Rights Reserved.</p>
</footer>
</body>
</html>