提问背景 Question:
下面是你设计的页面吧，我比较喜欢，但是css就不要依赖外部引入了。你的详情页有改进的余地，感觉像草稿。给你看看，你自己一开始设计的主页。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AI 智库百科 - 汇聚高价值AI对话</title>
<!-- 引入 Tailwind CSS CDN -->
<script src="https://cdn.tailwindcss.com"></script>
<style>
/* 自定义微调 */
.glass-effect {
background: rgba(255, 255, 255, 0.8);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
}
</style>
</head>
<body class="bg-slate-50 text-slate-800 font-sans antialiased min-h-screen pb-12">
<!-- 顶部导航栏 -->
<header class="sticky top-0 z-50 glass-effect border-b border-slate-200/80">
<div class="max-w-5xl mx-auto px-4 h-16 flex items-center justify-between">
<div class="flex items-center space-x-2">
<span class="text-2xl">🧠</span>
<span class="font-bold text-lg bg-gradient-to-r from-indigo-600 to-violet-600 bg-clip-text text-transparent">AI 智库百科</span>
</div>
<div class="flex items-center space-x-3">
<button class="p-2 text-slate-500 hover:text-slate-700 transition">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</button>
<span class="text-xs bg-indigo-50 text-indigo-600 px-2 py-1 rounded-full font-medium">共 1,204 条沉淀</span>
</div>
</div>
</header>
<!-- 主体区域 -->
<main class="max-w-5xl mx-auto px-4 mt-6 space-y-8">
<!-- 搜索与 Slogan 区 (支持移动端手势与布局) -->
<div class="bg-gradient-to-br from-indigo-900 to-slate-900 rounded-3xl p-6 md:p-10 text-white shadow-xl relative overflow-hidden">
<!-- 背景装饰微光 -->
<div class="absolute -right-10 -top-10 w-40 h-40 bg-indigo-500 rounded-full blur-3xl opacity-30"></div>
<div class="absolute -left-10 -bottom-10 w-40 h-40 bg-violet-500 rounded-full blur-3xl opacity-30"></div>
<div class="relative z-10 space-y-4 max-w-2xl">
<span class="px-2.5 py-1 text-xs bg-indigo-500/30 text-indigo-200 rounded-full font-medium tracking-wide">知识沉淀计划</span>
<h1 class="text-2xl md:text-3xl font-extrabold tracking-tight leading-tight">检索高价值人工智能对话与行业洞察</h1>
<p class="text-sm text-slate-300">基于真实日常对话二次精选，把碎片化的AI聊天转化为结构化的知识百科。</p>
<!-- 搜索框 -->
<form action="/search" method="GET" class="pt-2">
<div class="relative flex items-center bg-white rounded-2xl p-1.5 shadow-lg">
<span class="pl-3 text-slate-400">
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" /></svg>
</span>
<input type="text" name="q" placeholder="输入关键字，如: AI Agent, SQLite, 提示词优化..." class="w-full px-3 py-2.5 text-slate-800 placeholder-slate-400 bg-transparent outline-none text-sm md:text-base" />
<button type="submit" class="bg-indigo-600 hover:bg-indigo-700 text-white px-5 py-2.5 rounded-xl text-sm font-medium transition shrink-0">搜索</button>
</div>
</form>
</div>
</div>
<!-- 热门标签区 (关联 cms_tag 数据库表) -->
<section class="space-y-3">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-slate-800 flex items-center"><span class="mr-2">🏷️</span> 热门主题标签</h2>
<a href="#" class="text-xs text-indigo-600 font-medium hover:underline">全部标签 →</a>
</div>
<!-- 标签包裹区 -->
<div class="flex flex-wrap gap-2">
<!-- 每一个标签对应 cms_tag 数据行 -->
<a href="#" class="flex items-center space-x-1 px-3 py-1.5 bg-white border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 rounded-xl text-xs md:text-sm text-slate-600 transition">
<span class="font-medium"># AI Agent</span>
<span class="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-md">142</span>
</a>
<a href="#" class="flex items-center space-x-1 px-3 py-1.5 bg-white border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 rounded-xl text-xs md:text-sm text-slate-600 transition">
<span class="font-medium"># SQLite 调优</span>
<span class="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-md">58</span>
</a>
<a href="#" class="flex items-center space-x-1 px-3 py-1.5 bg-white border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 rounded-xl text-xs md:text-sm text-slate-600 transition">
<span class="font-medium"># 提示词工程</span>
<span class="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-md">97</span>
</a>
<a href="#" class="flex items-center space-x-1 px-3 py-1.5 bg-white border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 rounded-xl text-xs md:text-sm text-slate-600 transition">
<span class="font-medium"># 大模型架构</span>
<span class="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-md">112</span>
</a>
<a href="#" class="flex items-center space-x-1 px-3 py-1.5 bg-white border border-slate-200 hover:border-indigo-400 hover:bg-indigo-50/30 rounded-xl text-xs md:text-sm text-slate-600 transition">
<span class="font-medium"># 知识库建设</span>
<span class="text-[10px] bg-slate-100 text-slate-400 px-1.5 py-0.5 rounded-md">43</span>
</a>
</div>
</section>
<!-- 最新及高价值内容展示区 (关联 cms_article 数据表) -->
<section class="space-y-4">
<div class="flex items-center justify-between">
<h2 class="text-lg font-bold text-slate-800 flex items-center"><span class="mr-2">⚡</span> 最新收录百科</h2>
<div class="flex space-x-1 bg-slate-200/60 p-0.5 rounded-lg text-xs">
<button class="px-3 py-1 bg-white text-slate-800 font-medium rounded-md shadow-sm">最新</button>
<button class="px-3 py-1 text-slate-500 hover:text-slate-800">最热</button>
</div>
</div>
<!-- 文章卡片列表 (单列布局，移动端至电脑端自适应) -->
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<!-- 卡片一 (对应 cms_article 表中一条数据) -->
<article class="bg-white border border-slate-200 hover:border-indigo-200 rounded-2xl p-5 hover:shadow-md transition flex flex-col justify-between">
<div class="space-y-2">
<!-- 文章分类与热度 -->
<div class="flex items-center justify-between text-xs">
<span class="text-indigo-600 font-semibold uppercase tracking-wider">深度解析</span>
<span class="text-slate-400 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
1,280 次阅读
</span>
</div>
<!-- 标题 (对应 title) -->
<h3 class="font-bold text-base md:text-lg text-slate-900 hover:text-indigo-600 transition">
<a href="/article/1">什么是 AI Agent？为什么说它是大模型的下半场？</a>
</h3>
<!-- 描述摘要 (对应 description) -->
<p class="text-xs md:text-sm text-slate-500 line-clamp-2 leading-relaxed">
本文深度解析当前大热的 AI Agent（智能体）概念，系统阐述其与传统单次大模型调用的区别，并拆解其自主规划、记忆系统及工具调用的核心架构。
</p>
</div>
<!-- 底部附加信息：标签 (关联 cms_article_tag) 与日期 -->
<div class="flex items-center justify-between pt-4 mt-4 border-t border-slate-100 text-xs">
<div class="flex gap-1.5">
<span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded">AI Agent</span>
<span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded">概念科普</span>
</div>
<span class="text-slate-400">1小时前</span>
</div>
</article>
<!-- 卡片二 -->
<article class="bg-white border border-slate-200 hover:border-indigo-200 rounded-2xl p-5 hover:shadow-md transition flex flex-col justify-between">
<div class="space-y-2">
<div class="flex items-center justify-between text-xs">
<span class="text-emerald-600 font-semibold uppercase tracking-wider">工程实践</span>
<span class="text-slate-400 flex items-center">
<svg xmlns="http://www.w3.org/2000/svg" class="h-3.5 w-3.5 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>
845 次阅读
</span>
</div>
<h3 class="font-bold text-base md:text-lg text-slate-900 hover:text-indigo-600 transition">
<a href="/article/2">深度解析大模型长期记忆的技术实现原理</a>
</h3>
<p class="text-xs md:text-sm text-slate-500 line-clamp-2 leading-relaxed">
如何突破大模型无状态的天然瓶颈？详细剖析网页端AI助手利用云端多维数据库、RAG检索增强及向量数据库技术构建长期记忆系统的底层逻辑。
</p>
</div>
<div class="flex items-center justify-between pt-4 mt-4 border-t border-slate-100 text-xs">
<div class="flex gap-1.5">
<span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded">长期记忆</span>
<span class="bg-slate-100 text-slate-600 px-2 py-0.5 rounded">RAG</span>
</div>
<span class="text-slate-400">昨天</span>
</div>
</article>
</div>
</section>
</main>
</body>
</html>
原生CSS/JS极致重构AI智库百科详情页
为了彻底解决 Tailwind CDN 在生产环境中的报错警告，并让详情页拥有与主页高度统一、极具现代感的「毛玻璃+渐变微光」美学设计，我为你编写了这套完全基于纯原生 HTML/CSS/JavaScript的无依赖重构方案。
该方案完全摒弃了外部 CDN 库，所有的布局系统、暗色阴影、毛玻璃特效（Glassmorphism）均采用现代 CSS 原生实现。此外，针对长文本的折叠与定位，引入了智能高度检测，仅在内容确实超出设定高度时才动态挂载「展开/收起」按钮，收起时则能完美平滑滚动回提问顶部。
你可以直接复制以下完整的 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 智库百科</title>
<style>
/* 现代原生 CSS 核心变量系统 */
:root {
--primary-gradient: linear-gradient(135deg, #4f46e5, #7c3aed);
--bg-slate-50: #f8fafc;
--text-slate-800: #1e293b;
--text-slate-500: #64748b;
--border-slate-200: rgba(226, 232, 240, 0.8);
--accent-blue: #3b82f6;
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.05);
--shadow-md: 0 4px 12px rgba(15, 23, 42, 0.05);
--radius-xl: 16px;
--radius-2xl: 24px;
}
/* 基础样式重置 */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bg-slate-50);
color: var(--text-slate-800);
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
padding-bottom: 3rem;
}
/* 容器布局 */
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 1.25rem;
}
/* 顶部导航栏 (纯 CSS 毛玻璃) */
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 var(--border-slate-200);
}
.header-content {
display: flex;
align-items: center;
justify-content: space-between;
height: 4rem;
}
.logo {
display: flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.logo-text {
font-size: 1.125rem;
font-weight: 700;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
/* 回退首页按钮 */
.back-btn {
display: flex;
align-items: center;
gap: 0.25rem;
font-size: 0.875rem;
color: var(--text-slate-500);
text-decoration: none;
transition: color 0.2s;
}
.back-btn:hover {
color: #4f46e5;
}
/* 详情页主卡片 */
.article-card {
background: #ffffff;
border: 1px solid var(--border-slate-200);
border-radius: var(--radius-2xl);
padding: 2rem;
margin-top: 1.5rem;
box-shadow: var(--shadow-md);
}
/* 元信息标签区 */
.meta-container {
display: flex;
align-items: center;
gap: 0.75rem;
font-size: 0.75rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
color: #4f46e5;
margin-bottom: 1rem;
}
.meta-tag {
background: rgba(79, 70, 229, 0.08);
padding: 0.25rem 0.6rem;
border-radius: 9999px;
}
/* 主标题 */
h1 {
font-size: 1.5rem;
font-weight: 800;
line-height: 1.35;
letter-spacing: -0.02em;
color: #0f172a;
margin-bottom: 1.5rem;
}
@media (min-width: 768px) {
h1 { font-size: 2rem; }
}
/* 提问背景框 (锚点区域) */
.question-box {
background: #f8fafc;
border-left: 4px solid var(--accent-blue);
border-radius: 0 12px 12px 0;
padding: 1.25rem;
margin-bottom: 2rem;
position: relative;
}
.question-header {
font-size: 0.75rem;
font-weight: 700;
color: var(--accent-blue);
letter-spacing: 0.05em;
margin-bottom: 0.5rem;
}
/* 折叠容器核心机制 */
.msg-wrapper {
position: relative;
overflow: hidden;
max-height: none; /* 默认展开，由 JS 动态初始化限制高度 */
transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}
.msg-wrapper.collapsed {
max-height: 130px; /* 收起状态限高 */
}
/* 渐变遮罩(仅在收起时展现，防止突兀截断) */
.msg-wrapper.collapsed::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 60px;
background: linear-gradient(to bottom, rgba(248, 250, 252, 0), rgba(248, 250, 252, 1));
pointer-events: none;
}
.msg-content {
font-size: 0.925rem;
color: #334155;
line-height: 1.7;
}
/* 展开/收起按钮 */
.toggle-btn-container {
display: flex;
justify-content: center;
margin-top: 0.75rem;
}
.toggle-btn {
display: none; /* JS 决定是否渲染 */
align-items: center;
gap: 0.25rem;
background: #ffffff;
border: 1px solid var(--border-slate-200);
color: var(--text-slate-800);
font-size: 0.75rem;
font-weight: 600;
padding: 0.5rem 1.25rem;
border-radius: 9999px;
cursor: pointer;
box-shadow: var(--shadow-sm);
transition: all 0.2s ease;
}
.toggle-btn:hover {
border-color: #4f46e5;
color: #4f46e5;
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(79, 70, 229, 0.15);
}
/* 正文内容区域 */
.answer-area {
border-top: 1px solid var(--border-slate-200);
padding-top: 2rem;
margin-top: 2rem;
}
.answer-header {
font-size: 1.125rem;
font-weight: 700;
color: #0f172a;
margin-bottom: 1.25rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.answer-content {
color: #334155;
font-size: 0.95rem;
line-height: 1.8;
}
/* 代码高亮与段落微调 */
.answer-content p {
margin-bottom: 1.25rem;
}
.answer-content pre {
background: #0f172a;
color: #f8fafc;
padding: 1.25rem;
border-radius: 12px;
overflow-x: auto;
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
font-size: 0.85rem;
margin: 1.5rem 0;
}
</style>
</head>
<body>
<!-- 顶部导航 -->
<header>
<div class="container header-content">
<a href="/" class="logo">
<span style="font-size: 1.5rem;">🧠</span>
<span class="logo-text">AI 智库百科</span>
</a>
<a href="/" class="back-btn">
← 返回首页
</a>
</div>
</header>
<!-- 主体内容 -->
<main class="container">
<article class="article-card">
<!-- 元信息 -->
<div class="meta-container">
<span class="meta-tag">{{.Article.TagName}}</span>
<span style="color: var(--text-slate-500);">• {{.Article.ReadCount}}次阅读</span>
</div>
<!-- 标题 -->
<h1>{{.Article.Title}}</h1>
<!-- 提问背景模块（设置精准滚动锚点） -->
<div id="question-top"></div>
<div class="question-box">
<div class="question-header">提问背景 Question Background:</div>
<!-- 包裹层：由 JS 动态决定是否截断并显示按钮 -->
<div id="content-wrapper" class="msg-wrapper">
<div id="content-body" class="msg-content" style="white-space: pre-wrap">{{.Article.Question}}</div>
</div>
<!-- 展开/收起控制按钮区 -->
<div class="toggle-btn-container">
<button id="toggle-action-btn" class="toggle-btn" onclick="toggleContent()">
<span id="btn-text">展开完整背景</span>
<span id="btn-icon">↓</span>
</button>
</div>
</div>
<!-- AI深度解答区 -->
<div class="answer-area">
<h2 class="answer-header"><span>💡</span> AI 百科释义</h2>
<div class="answer-content">
{{.Article.ContentHTML}}
</div>
</div>
</article>
</main>
<!-- 智能交互脚本 -->
<script>
document.addEventListener("DOMContentLoaded", function() {
const wrapper = document.getElementById('content-wrapper');
const body = document.getElementById('content-body');
const btn = document.getElementById('toggle-action-btn');
// 设定的高度截断阈值，像素单位
const maxHeightThreshold = 180;
// 智能判断：如果正文高度大于设定阈值，则使能截断及折叠交互
if (body.scrollHeight > maxHeightThreshold) {
wrapper.classList.add('collapsed');
btn.style.display = 'inline-flex'; // 显式展示居中的按钮
} else {
btn.style.display = 'none'; // 文本少时不显示折叠按钮
}
});
// 切换折叠/展开逻辑
function toggleContent() {
const wrapper = document.getElementById('content-wrapper');
const btnText = document.getElementById('btn-text');
const btnIcon = document.getElementById('btn-icon');
const anchor = document.getElementById('question-top');
if (wrapper.classList.contains('collapsed')) {
// 展开动作
wrapper.classList.remove('collapsed');
btnText.innerText = '收起内容';
btnIcon.innerHTML = '↑';
} else {
// 收起动作
wrapper.classList.add('collapsed');
btnText.innerText = '展开完整背景';
btnIcon.innerHTML = '↓';
// 页面平滑精准定位至该卡片的顶部锚点
anchor.scrollIntoView({ behavior: 'smooth', block: 'start' });
}
}
</script>
</body>
</html>
重构后带来的改变：
- 移除 Tailwind 警告：没有引用任何外部 CSS、JS 脚本，消除了控制台警告，保障了生产环境的安全运行。
- 智能折叠判断：通过
body.scrollHeight > maxHeightThreshold进行检测。文本短时不显示任何多余按钮；文本超出限制时才会自适应截取，避免出现空白或无效交互。 - 居中与视觉体验提升：使用了 Flexbox 容器进行完美居中对齐，并加入了
linear-gradient底边遮罩过渡动画，极大缓解了生硬截断的不适感。 - 无缝平滑回滚：当点击「收起内容」后，会自动触发
scrollIntoView，使页面平滑返回提问容器顶部的锚点#question-top处，不再造成迷失当前视口的问题。