Let me start by understanding the design system and gathering assets for this personal blog.Now I have a clear vision. Let me build a personal blog that captures the warm, editorial Anthropic/Claude aesthetic — cream canvas, coral accents, serif display headlines, dark code surfaces — tailored for a Python & LLM developer blog.Now I have everything I need. Let me build the complete personal blog page.
```json{
"summary": "基于Anthropic/Claude的温暖编辑风格，为Python与大模型开发者打造的个人博客。采用奶油色画布(#faf9f5)、珊瑚色(#cc785c)主色调、深色(#181715)代码展示区。使用Cormorant Garamond衬线字体作为展示标题，Inter无衬线字体作为正文，JetBrains Mono作为代码字体。包含顶部导航、英雄区、精选文章、分类标签、代码展示、关于我、订阅CTA和深色页脚。响应式设计适配移动端到桌面端。",
"widget": {"type":"full-html","html":"<!DOCTYPE html>\n<html lang=\"zh-CN\">\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n <title>墨客 · Python & LLM 博客</title>\n <script src=\"https://cdn.tailwindcss.com\"></script>\n <link rel=\"preconnect\" href=\"https://fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https://fonts.gstatic.com\" crossorigin>\n <link href=\"https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0…\" rel=\"stylesheet\">\n <link rel=\"stylesheet\" href=\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.c…\">\n <style>\n :root {\n --primary: #cc785c;\n --primary-active: #a9583e;\n --primary-disabled: #e6dfd8;\n --ink: #141413;\n --body: #3d3d3a;\n --body-strong: #252523;\n --muted: #6c6a64;\n --muted-soft: #8e8b82;\n --hairline: #e6dfd8;\n --hairline-soft: #ebe6df;\n --canvas: #faf9f5;\n --surface-soft: #f5f0e8;\n --surface-card: #efe9de;\n --surface-cream-strong: #e8e0d2;\n --surface-dark: #181715;\n --surface-dark-elevated: #252320;\n --surface-dark-soft: #1f1e1b;\n --on-primary: #ffffff;\n --on-dark: #faf9f5;\n --on-dark-soft: #a09d96;\n --accent-teal: #5db8a6;\n --accent-amber: #e8a55a;\n --success: #5db872;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n background-color: var(--canvas);\n color: var(--body);\n font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n font-size: 16px;\n line-height: 1.55;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n h1, h2, h3, h4, .display {\n font-family: 'Cormorant Garamond', 'Times New Roman', serif;\n font-weight: 400;\n color: var(--ink);\n letter-spacing: -0.02em;\n }\n\n .display-xl { font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.03em; }\n .display-lg { font-size: clamp(1.75rem, 4vw, 3rem); line-height: 1.1; letter-spacing: -0.025em; }\n .display-md { font-size: clamp(1.5rem, 3vw, 2.25rem); line-height: 1.15; letter-spacing: -0.015em; }\n .display-sm { font-size: clamp(1.25rem, 2.5vw, 1.75rem); line-height: 1.2; letter-spacing: -0.01em; }\n\n .code, pre, code {\n font-family: 'JetBrains Mono', ui-monospace, monospace;\n font-size: 14px;\n line-height: 1.6;\n }\n\n .nav-link {\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1.4;\n letter-spacing: 0;\n }\n\n .caption-upper {\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 500;\n line-height: 1.4;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n }\n\n .btn-primary {\n background-color: var(--primary);\n color: var(--on-primary);\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n padding: 12px 20px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n transition: background-color 200ms ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .btn-primary:hover { background-color: var(--primary-active); }\n .btn-primary:disabled { background-color: var(--primary-disabled); color: var(--muted); cursor: not-allowed; }\n\n .btn-secondary {\n background-color: var(--canvas);\n color: var(--ink);\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n padding: 12px 20px;\n border-radius: 8px;\n border: 1px solid var(--hairline);\n cursor: pointer;\n transition: background-color 200ms ease, border-color 200ms ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .btn-secondary:hover { background-color: var(--surface-soft); border-color: var(--muted-soft); }\n\n .btn-secondary-dark {\n background-color: var(--surface-dark-elevated);\n color: var(--on-dark);\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n line-height: 1;\n padding: 12px 20px;\n border-radius: 8px;\n border: 1px solid transparent;\n cursor: pointer;\n transition: background-color 200ms ease;\n display: inline-flex;\n align-items: center;\n gap: 8px;\n }\n .btn-secondary-dark:hover { background-color: #33302c; }\n\n .text-link {\n color: var(--primary);\n text-decoration: none;\n font-family: 'Inter', sans-serif;\n font-size: 16px;\n font-weight: 400;\n transition: color 200ms ease;\n }\n .text-link:hover { color: var(--primary-active); text-decoration: underline; }\n\n .badge-pill {\n background-color: var(--surface-card);\n color: var(--ink);\n font-family: 'Inter', sans-serif;\n font-size: 13px;\n font-weight: 500;\n padding: 4px 12px;\n border-radius: 9999px;\n display: inline-block;\n }\n\n .badge-coral {\n background-color: var(--primary);\n color: var(--on-primary);\n font-family: 'Inter', sans-serif;\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 1.5px;\n text-transform: uppercase;\n padding: 4px 12px;\n border-radius: 9999px;\n display: inline-block;\n }\n\n .card-feature {\n background-color: var(--surface-card);\n border-radius: 12px;\n padding: 32px;\n transition: transform 300ms ease, box-shadow 300ms ease;\n }\n .card-feature:hover {\n transform: translateY(-2px);\n box-shadow: 0 8px 24px rgba(20,20,19,0.06);\n }\n\n .card-dark {\n background-color: var(--surface-dark);\n border-radius: 12px;\n padding: 32px;\n color: var(--on-dark);\n }\n\n .card-code {\n background-color: var(--surface-dark);\n border-radius: 12px;\n padding: 24px;\n }\n\n .card-code-inner {\n background-color: var(--surface-dark-soft);\n border-radius: 8px;\n padding: 20px;\n overflow-x: auto;\n }\n\n .card-coral {\n background-color: var(--primary);\n border-radius: 12px;\n padding: 48px;\n color: var(--on-primary);\n }\n\n .section-padding {\n padding: 96px 0;\n }\n\n .container {\n max-width: 1200px;\n margin: 0 auto;\n padding: 0 24px;\n }\n\n /* Spike mark */\n .spike-mark {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 20px;\n height: 20px;\n }\n .spike-mark svg {\n width: 16px;\n height: 16px;\n }\n\n /* Article card */\n .article-card {\n border-bottom: 1px solid var(--hairline-soft);\n padding: 32px 0;\n transition: opacity 200ms ease;\n }\n .article-card:last-child { border-bottom: none; }\n .article-card:hover { opacity: 0.85; }\n\n /* Category tab */\n .cat-tab {\n background: transparent;\n color: var(--muted);\n font-family: 'Inter', sans-serif;\n font-size: 14px;\n font-weight: 500;\n padding: 8px 14px;\n border-radius: 8px;\n border: none;\n cursor: pointer;\n transition: all 200ms ease;\n }\n .cat-tab:hover { color: var(--ink); background: var(--surface-soft); }\n .cat-tab.active {\n background: var(--surface-card);\n color: var(--ink);\n }\n\n /* Syntax highlight colors */\n .syn-kw { color: #cc785c; }\n .syn-fn { color: #5db8a6; }\n .syn-str { color: #e8a55a; }\n .syn-com { color: #6c6a64; font-style: italic; }\n .syn-num { color: #8e8b82; }\n .syn-op { color: #a09d96; }\n\n /* Line numbers */\n .line-nums {\n color: var(--muted-soft);\n user-select: none;\n text-align: right;\n padding-right: 16px;\n border-right: 1px solid #33302c;\n margin-right: 16px;\n min-width: 32px;\n }\n\n /* Animations */\n @keyframes fadeUp {\n from { opacity: 0; transform: translateY(20px); }\n to { opacity: 1; transform: translateY(0); }\n }\n @keyframes fadeIn {\n from { opacity: 0; }\n to { opacity: 1; }\n }\n @keyframes slideIn {\n from { opacity: 0; transform: translateX(-12px); }\n to { opacity: 1; transform: translateX(0); }\n }\n @keyframes pulseGlow {\n 0%, 100% { box-shadow: 0 0 0 0 rgba(204,120,92,0.3); }\n 50% { box-shadow: 0 0 0 8px rgba(204,120,92,0); }\n }\n\n .animate-fade-up {\n animation: fadeUp 600ms ease-out forwards;\n opacity: 0;\n }\n .animate-fade-in {\n animation: fadeIn 500ms ease-out forwards;\n opacity: 0;\n }\n .animate-slide-in {\n animation: slideIn 400ms ease-out forwards;\n opacity: 0;\n }\n\n .delay-100 { animation-delay: 100ms; }\n .delay-200 { animation-delay: 200ms; }\n .delay-300 { animation-delay: 300ms; }\n .delay-400 { animation-delay: 400ms; }\n .delay-500 { animation-delay: 500ms; }\n .delay-600 { animation-delay: 600ms; }\n\n /* Mobile nav */\n .mobile-menu {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n background: var(--canvas);\n z-index: 100;\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n gap: 32px;\n opacity: 0;\n pointer-events: none;\n transition: opacity 300ms ease;\n }\n .mobile-menu.open {\n opacity: 1;\n pointer-events: all;\n }\n\n /* Scrollbar */\n ::-webkit-scrollbar { width: 6px; height: 6px; }\n ::-webkit-scrollbar-track { background: transparent; }\n ::-webkit-scrollbar-thumb { background: var(--hairline); border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: var(--muted-soft); }\n\n /* Responsive */\n @media (max-width: 768px) {\n .section-padding { padding: 64px 0; }\n .card-coral { padding: 32px 24px; }\n .card-feature { padding: 24px; }\n .card-dark { padding: 24px; }\n .container { padding: 0 16px; }\n .article-card { padding: 24px 0; }\n }\n\n /* Texture overlay */\n .texture-overlay {\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E\");\n opacity: 0.4;\n }\n </style>\n</head>\n<body>\n\n<!-- Noise Texture Overlay -->\n<div class=\"texture-overlay\"></div>\n\n<!-- Mobile Menu -->\n<div id=\"mobileMenu\" class=\"mobile-menu\">\n <button onclick=\"toggleMobile()\" class=\"absolute top-6 right-6 text-2xl\" style=\"color:var(--ink);background:none;border:none;cursor:pointer;\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n <a href=\"#\" class=\"nav-link text-2xl\" style=\"color:var(--ink);text-decoration:none;\">首页</a>\n <a href=\"#articles\" class=\"nav-link text-2xl\" style=\"color:var(--ink);text-decoration:none;\">文章</a>\n <a href=\"#projects\" class=\"nav-link text-2xl\" style=\"color:var(--ink);text-decoration:none;\">项目</a>\n <a href=\"#about\" class=\"nav-link text-2xl\" style=\"color:var(--ink);text-decoration:none;\">关于</a>\n <a href=\"#subscribe\" class=\"btn-primary\">订阅 <i class=\"fa-solid fa-arrow-right\"></i></a>\n</div>\n\n<!-- Top Navigation -->\n<nav style=\"background:var(--canvas);height:64px;border-bottom:1px solid var(--hairline-soft);position:sticky;top:0;z-index:50;\">\n <div class=\"container h-full flex items-center justify-between\">\n <div class=\"flex items-center gap-3\">\n <span class=\"spike-mark\">\n <svg viewBox=\"0 0 16 16\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M8 0L9.5 6.5L16 8L9.5 9.5L8 16L6.5 9.5L0 8L6.5 6.5L8 0Z\" fill=\"#141413\"/>\n </svg>\n </span>\n <span style=\"font-family:'Cormorant Garamond',serif;font-size:22px;font-weight:500;color:var(--ink);letter-spacing:-0.01em;\">墨客</span>\n </div>\n <div class=\"hidden md:flex items-center gap-8\">\n <a href=\"#\" class=\"nav-link\" style=\"color:var(--ink);text-decoration:none;\">首页</a>\n <a href=\"#articles\" class=\"nav-link\" style=\"color:var(--muted);text-decoration:none;transition:color 200ms;\" onmouseover=\"this.style.color='var(--ink)'\" onmouseout=\"this.style.color='var(--muted)'\">文章</a>\n <a href=\"#projects\" class=\"nav-link\" style=\"color:var(--muted);text-decoration:none;transition:color 200ms;\" onmouseover=\"this.style.color='var(--ink)'\" onmouseout=\"this.style.color='var(--muted)'\">项目</a>\n <a href=\"#about\" class=\"nav-link\" style=\"color:var(--muted);text-decoration:none;transition:color 200ms;\" onmouseover=\"this.style.color='var(--ink)'\" onmouseout=\"this.style.color='var(--muted)'\">关于</a>\n </div>\n <div class=\"flex items-center gap-3\">\n <a href=\"#subscribe\" class=\"hidden sm:inline-flex btn-primary\">\n <i class=\"fa-regular fa-bell\"></i> 订阅\n </a>\n <button onclick=\"toggleMobile()\" class=\"md:hidden\" style=\"background:none;border:none;font-size:20px;color:var(--ink);cursor:pointer;\">\n <i class=\"fa-solid fa-bars\"></i>\n </button>\n </div>\n </div>\n</nav>\n\n<!-- Hero Section -->\n<section class=\"section-padding\" style=\"padding-top:80px;padding-bottom:80px;\">\n <div class=\"container\">\n <div class=\"grid lg:grid-cols-2 gap-12 items-center\">\n <div>\n <span class=\"badge-coral mb-6 animate-fade-up\">\n <i class=\"fa-regular fa-star\"></i> 新文章每周更新\n </span>\n <h1 class=\"display-xl mb-6 animate-fade-up delay-100\" style=\"font-weight:400;\">\n 在 Python 与<br/>\n <span style=\"color:var(--primary);\">大模型</span> 的世界<br/>\n 持续探索\n </h1>\n <p class=\"animate-fade-up delay-200\" style=\"font-size:18px;color:var(--body-strong);line-height:1.6;max-width:480px;font-weight:300;\">\n 记录从 Transformer 架构到 LangChain 应用、从 PyTorch 调优到 RAG 实践的\n 每一段代码与思考。\n </p>\n <div class=\"flex flex-wrap gap-3 mt-8 animate-fade-up delay-300\">\n <a href=\"#articles\" class=\"btn-primary\">\n 浏览文章 <i class=\"fa-solid fa-arrow-right\"></i>\n </a>\n <a href=\"#about\" class=\"btn-secondary\">\n <i class=\"fa-regular fa-user\"></i> 关于我\n </a>\n </div>\n <div class=\"flex items-center gap-6 mt-10 animate-fade-up delay-400\">\n <div class=\"flex -space-x-2\">\n <div style=\"width:36px;height:36px;border-radius:50%;background:var(--surface-card);border:2px solid var(--canvas);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);\"><i class=\"fa-brands fa-python\"></i></div>\n <div style=\"width:36px;height:36px;border-radius:50%;background:var(--surface-card);border:2px solid var(--canvas);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);\"><i class=\"fa-solid fa-brain\"></i></div>\n <div style=\"width:36px;height:36px;border-radius:50%;background:var(--surface-card);border:2px solid var(--canvas);display:flex;align-items:center;justify-content:center;font-size:12px;color:var(--muted);\"><i class=\"fa-solid fa-code\"></i></div>\n </div>\n <span style=\"font-size:14px;color:var(--muted);\">36 篇文章 · 持续更新中</span>\n </div>\n </div>\n <div class=\"animate-fade-up delay-200\">\n <div class=\"card-code\" style=\"padding:0;overflow:hidden;\">\n <div style=\"background:var(--surface-dark-elevated);padding:12px 20px;display:flex;align-items:center;gap:8px;border-bottom:1px solid #33302c;\">\n <div style=\"width:10px;height:10px;border-radius:50%;background:#c64545;\"></div>\n <div style=\"width:10px;height:10px;border-radius:50%;background:#e8a55a;\"></div>\n <div style=\"width:10px;height:10px;border-radius:50%;background:#5db872;\"></div>\n <span style=\"font-size:12px;color:var(--on-dark-soft);margin-left:8px;font-family:'JetBrains Mono',monospace;\">transformer_attention.py</span>\n </div>\n <div class=\"card-code-inner\" style=\"border-radius:0;background:var(--surface-dark);\">\n <pre style=\"margin:0;font-size:13px;line-height:1.7;display:flex;\"><span class=\"line-nums\"> 1\n 2\n 3\n 4\n 5\n 6\n 7\n 8\n 9\n10\n11\n12</span><code><span class=\"syn-kw\">import</span> torch\n<span class=\"syn-kw\">import</span> torch.nn <span class=\"syn-kw\">as</span> nn\n<span class=\"syn-kw\">import</span> torch.nn.functional <span class=\"syn-kw\">as</span> F\n\n<span class=\"syn-kw\">class</span> <span class=\"syn-fn\">MultiHeadAttention</span>(nn.Module):\n <span class=\"syn-str\">\"\"\"\n 多头注意力机制实现\n 用于大模型训练推理\n \"\"\"</span>\n <span class=\"syn-kw\">def</span> <span class=\"syn-fn\">__init__</span>(<span class=\"syn-op\">self</span>, d_model, n_heads):\n <span class=\"syn-op\">super</span>().<span class=\"syn-fn\">__init__</span>()\n <span class=\"syn-op\">self</span>.n_heads = n_heads\n <span class=\"syn-op\">self</span>.d_k = d_model // n_heads</code></pre>\n </div>\n </div>\n </div>\n </div>\n </div>\n</section>\n\n<!-- Featured Articles Section -->\n<section id=\"articles\" class=\"section-padding\" style=\"background:var(--surface-soft);\">\n <div class=\"container\">\n <div class=\"flex flex-col md:flex-row md:items-end justify-between mb-12 gap-4\">\n <div>\n <span class=\"caption-upper\" style=\"color:var(--primary);\">精选文章</span>\n <h2 class=\"display-lg mt-2\">最新技术笔记</h2>\n </div>\n <div class=\"flex flex-wrap gap-2\">\n <button class=\"cat-tab active\" onclick=\"filterArticles(this,'all')\">全部</button>\n <button class=\"cat-tab\" onclick=\"filterArticles(this,'python')\">Python</button>\n <button class=\"cat-tab\" onclick=\"filterArticles(this,'llm')\">大模型</button>\n <button class=\"cat-tab\" onclick=\"filterArticles(this,'rag')\">RAG</button>\n <button class=\"cat-tab\" onclick=\"filterArticles(this,'tool')\">工具</button>\n </div>\n </div>\n\n <div class=\"grid md:grid-cols-2 lg:grid-cols-3 gap-6\">\n <!-- Article 1 -->\n <article class=\"card-feature article-item\" data-category=\"llm\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"badge-pill\">大模型</span>\n <span style=\"font-size:13px;color:var(--muted);\">3天前</span>\n </div>\n <h3 class=\"display-sm mb-3\" style=\"font-size:22px;\">\n 从零实现一个迷你 Transformer\n </h3>\n <p style=\"color:var(--body);font-size:15px;line-height:1.6;margin-bottom:20px;\">\n 用 PyTorch 从张量运算开始，逐行构建一个可训练的 Transformer 模型，深入理解 Scaled Dot-Product Attention 的核心机制。\n </p>\n <div class=\"flex items-center justify-between\">\n <span style=\"font-size:13px;color:var(--muted);\"><i class=\"fa-regular fa-clock\"></i> 15 分钟阅读</span>\n <a href=\"#\" class=\"text-link\" style=\"font-size:14px;\">阅读 <i class=\"fa-solid fa-arrow-right\" style=\"font-size:12px;\"></i></a>\n </div>\n </article>\n\n <!-- Article 2 -->\n <article class=\"card-feature article-item\" data-category=\"rag\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"badge-pill\">RAG</span>\n <span style=\"font-size:13px;color:var(--muted);\">1周前</span>\n </div>\n <h3 class=\"display-sm mb-3\" style=\"font-size:22px;\">\n LangChain + Chroma 构建知识库问答\n </h3>\n <p style=\"color:var(--body);font-size:15px;line-height:1.6;margin-bottom:20px;\">\n 手把手搭建一个基于 RAG 的企业知识库问答系统，涵盖文档分割、向量存储、检索增强生成全流程。\n </p>\n <div class=\"flex items-center justify-between\">\n <span style=\"font-size:13px;color:var(--muted);\"><i class=\"fa-regular fa-clock\"></i> 20 分钟阅读</span>\n <a href=\"#\" class=\"text-link\" style=\"font-size:14px;\">阅读 <i class=\"fa-solid fa-arrow-right\" style=\"font-size:12px;\"></i></a>\n </div>\n </article>\n\n <!-- Article 3 -->\n <article class=\"card-feature article-item\" data-category=\"python\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"badge-pill\">Python</span>\n <span style=\"font-size:13px;color:var(--muted);\">2周前</span>\n </div>\n <h3 class=\"display-sm mb-3\" style=\"font-size:22px;\">\n Python 异步编程与 LLM API 调用优化\n </h3>\n <p style=\"color:var(--body);font-size:15px;line-height:1.6;margin-bottom:20px;\">\n 使用 asyncio 和 aiohttp 实现高效的并发 API 调用，将大模型推理的吞吐量提升 10 倍以上。\n </p>\n <div class=\"flex items-center justify-between\">\n <span style=\"font-size:13px;color:var(--muted);\"><i class=\"fa-regular fa-clock\"></i> 12 分钟阅读</span>\n <a href=\"#\" class=\"text-link\" style=\"font-size:14px;\">阅读 <i class=\"fa-solid fa-arrow-right\" style=\"font-size:12px;\"></i></a>\n </div>\n </article>\n\n <!-- Article 4 -->\n <article class=\"card-feature article-item\" data-category=\"tool\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"badge-pill\">工具</span>\n <span style=\"font-size:13px;color:var(--muted);\">3周前</span>\n </div>\n <h3 class=\"display-sm mb-3\" style=\"font-size:22px;\">\n Ollama + Open WebUI 本地部署指南\n </h3>\n <p style=\"color:var(--body);font-size:15px;line-height:1.6;margin-bottom:20px;\">\n 在消费级 GPU 上部署 Llama 3、Qwen 2 等开源大模型，搭建完全离线的 AI 助手服务。\n </p>\n <div class=\"flex items-center justify-between\">\n <span style=\"font-size:13px;color:var(--muted);\"><i class=\"fa-regular fa-clock\"></i> 10 分钟阅读</span>\n <a href=\"#\" class=\"text-link\" style=\"font-size:14px;\">阅读 <i class=\"fa-solid fa-arrow-right\" style=\"font-size:12px;\"></i></a>\n </div>\n </article>\n\n <!-- Article 5 -->\n <article class=\"card-feature article-item\" data-category=\"llm\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"badge-pill\">大模型</span>\n <span style=\"font-size:13px;color:var(--muted);\">1月前</span>\n </div>\n <h3 class=\"display-sm mb-3\" style=\"font-size:22px;\">\n LoRA 微调：用少量数据定制大模型\n </h3>\n <p style=\"color:var(--body);font-size:15px;line-height:1.6;margin-bottom:20px;\">\n 深入 Low-Rank Adaptation 的原理与实战，在 HuggingFace PEFT 框架下微调 Llama 模型。\n </p>\n <div class=\"flex items-center justify-between\">\n <span style=\"font-size:13px;color:var(--muted);\"><i class=\"fa-regular fa-clock\"></i> 18 分钟阅读</span>\n <a href=\"#\" class=\"text-link\" style=\"font-size:14px;\">阅读 <i class=\"fa-solid fa-arrow-right\" style=\"font-size:12px;\"></i></a>\n </div>\n </article>\n\n <!-- Article 6 -->\n <article class=\"card-feature article-item\" data-category=\"python\">\n <div class=\"flex items-center gap-2 mb-4\">\n <span class=\"badge-pill\">Python</span>\n <span style=\"font-size:13px;color:var(--muted);\">1月前</span>\n </div>\n <