提问背景 Question:
请将下面的模板，不要有<script src="https://cdn.tailwindcss.com"></script>这样的外部依赖。重新改一下。另外最新，最热无法切换。
```
<!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>
```
AI百科模版移除CDN与切换逻辑设计
为了满足你的需求，我将模板进行了如下优化：
- 移除CDN依赖：建议将 Tailwind CSS 的
output.css部署在本地/static/css/目录下，并在模板中引入：<link rel="stylesheet" href="/static/css/tailwind.css">。 - 实现切换逻辑：通过 URL 参数
?sort=new或?sort=hot进行切换，模板中使用 Go 模板语法判断高亮状态。
模板片段更新方案
<!-- 头部切换栏 -->
<div class="flex space-x-1 bg-slate-200/60 p-0.5 rounded-lg text-xs">
<a href="/baike?sort=new" class="px-3 py-1 {{if eq .Sort "new"}}bg-white shadow-sm text-slate-800{{else}}text-slate-500{{end}} font-medium rounded-md">最新</a>
<a href="/baike?sort=hot" class="px-3 py-1 {{if eq .Sort "hot"}}bg-white shadow-sm text-slate-800{{else}}text-slate-500{{end}} font-medium rounded-md">最热</a>
</div>
后端处理建议
在 Go 处理函数中获取 sort := r.URL.Query().Get("sort")，如果为空则默认为 new，并将该值传递给模板 data 结构体，这样页面加载时就能正确显示当前选中的状态。