I'll start by getting design system recommendations and assets for this doodle-style humor blog.Now let me get more specific assets for the doodle theme and check what components are available.Now I have all the information I need. Let me create the complete doodle-style humor blog. I'll build a single-page application with all the features described.
```json{
"summary": "创建了一个完整的 Doodle 手绘涂鸦风格搞笑博客 SPA。采用 Delius Swash Caps + Caveat 手写字体组合，暖色调奶油色背景配手绘边框、涂鸦装饰元素。包含：手绘风格导航栏、8篇程序员搞笑文章卡片、笑点展开交互（弹跳动画）、随机段子生成器、分类筛选（最新/最热/程序员专区）、滚动淡入动画、随机涂鸦装饰、响应式布局。所有数据为静态内嵌，无需后端。",
"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>笑掉大牙 · 涂鸦搞笑博客</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=Delius+Swash+Caps&family=Cavea…\" 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 --doodle-yellow: #fbbf24;\n --doodle-orange: #f97316;\n --doodle-pink: #ec4899;\n --doodle-blue: #3b82f6;\n --doodle-green: #22c55e;\n --doodle-purple: #a855f7;\n --doodle-red: #ef4444;\n --paper: #fef9ef;\n --ink: #2d2a24;\n --ink-light: #6b6358;\n --card-bg: #fffcf3;\n }\n\n * {\n margin: 0;\n padding: 0;\n box-sizing: border-box;\n }\n\n body {\n font-family: 'ZCOOL XiaoWei', serif;\n background-color: var(--paper);\n background-image: \n radial-gradient(circle at 20% 50%, rgba(251, 191, 36, 0.06) 0%, transparent 50%),\n radial-gradient(circle at 80% 20%, rgba(236, 72, 153, 0.05) 0%, transparent 50%),\n radial-gradient(circle at 50% 80%, rgba(59, 130, 246, 0.05) 0%, transparent 50%);\n color: var(--ink);\n min-height: 100vh;\n overflow-x: hidden;\n position: relative;\n }\n\n /* 噪点纹理叠加 */\n body::before {\n content: '';\n position: fixed;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n pointer-events: none;\n z-index: 9999;\n opacity: 0.03;\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)'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 256px 256px;\n }\n\n /* 手绘边框 */\n .doodle-border {\n position: relative;\n border: 3px solid var(--ink);\n border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;\n box-shadow: 6px 6px 0 var(--ink);\n transition: all 0.3s ease;\n }\n\n .doodle-border:hover {\n box-shadow: 8px 8px 0 var(--ink);\n transform: translate(-2px, -2px);\n }\n\n .doodle-border-sm {\n border: 2.5px solid var(--ink);\n border-radius: 20px 5px 20px 5px/5px 20px 5px 20px;\n }\n\n /* 手写标题字体 */\n .doodle-title {\n font-family: 'Delius Swash Caps', cursive;\n letter-spacing: 0.02em;\n }\n\n .doodle-hand {\n font-family: 'Caveat', cursive;\n }\n\n /* 手绘导航 */\n .nav-doodle {\n border-bottom: 3px dashed var(--ink);\n position: relative;\n }\n\n .nav-doodle::after {\n content: '';\n position: absolute;\n bottom: -8px;\n left: 0;\n width: 100%;\n height: 3px;\n background: repeating-linear-gradient(\n 90deg,\n var(--ink) 0px,\n var(--ink) 8px,\n transparent 8px,\n transparent 12px\n );\n }\n\n .nav-link {\n font-family: 'Caveat', cursive;\n font-size: 1.4rem;\n position: relative;\n text-decoration: none;\n color: var(--ink);\n padding: 0.25rem 0.5rem;\n transition: all 0.2s;\n }\n\n .nav-link::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n width: 0;\n height: 2px;\n background: var(--doodle-orange);\n transition: width 0.3s ease;\n border-radius: 2px;\n }\n\n .nav-link:hover::after {\n width: 100%;\n }\n\n .nav-link.active {\n background: var(--doodle-yellow);\n border-radius: 5px 15px 5px 15px;\n }\n\n /* 文章卡片 */\n .post-card {\n background: var(--card-bg);\n border: 3px solid var(--ink);\n border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;\n padding: 1.5rem;\n position: relative;\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n opacity: 0;\n transform: translateY(30px);\n }\n\n .post-card.visible {\n opacity: 1;\n transform: translateY(0);\n }\n\n .post-card:hover {\n transform: translateY(-4px) rotate(-0.5deg);\n box-shadow: 10px 10px 0 var(--ink);\n }\n\n .post-card:nth-child(odd):hover {\n transform: translateY(-4px) rotate(0.5deg);\n }\n\n /* 涂鸦标签 */\n .doodle-tag {\n font-family: 'Caveat', cursive;\n font-size: 1rem;\n padding: 0.15rem 0.8rem;\n border: 2px solid var(--ink);\n border-radius: 30px 5px 30px 5px/5px 30px 5px 30px;\n display: inline-block;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .doodle-tag:hover {\n background: var(--ink);\n color: var(--paper);\n }\n\n .doodle-tag.active {\n background: var(--ink);\n color: var(--paper);\n }\n\n /* 笑点展开按钮 */\n .punchline-btn {\n font-family: 'Caveat', cursive;\n font-size: 1.2rem;\n background: var(--doodle-yellow);\n border: 2.5px solid var(--ink);\n border-radius: 30px 5px 30px 5px/5px 30px 5px 30px;\n padding: 0.5rem 1.5rem;\n cursor: pointer;\n transition: all 0.2s;\n position: relative;\n overflow: hidden;\n }\n\n .punchline-btn:hover {\n background: var(--doodle-orange);\n color: white;\n transform: scale(1.05);\n }\n\n .punchline-btn:active {\n transform: scale(0.95);\n }\n\n .punchline-content {\n max-height: 0;\n overflow: hidden;\n transition: max-height 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.4s ease, transform 0.4s ease;\n opacity: 0;\n transform: translateY(-10px);\n }\n\n .punchline-content.open {\n max-height: 500px;\n opacity: 1;\n transform: translateY(0);\n }\n\n .punchline-text {\n font-family: 'Caveat', cursive;\n font-size: 1.5rem;\n background: rgba(251, 191, 36, 0.15);\n border-left: 4px solid var(--doodle-yellow);\n border-radius: 0 15px 15px 0;\n padding: 1rem 1.5rem;\n margin-top: 0.75rem;\n animation: punchBounce 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n\n @keyframes punchBounce {\n 0% { transform: scale(0.8) translateY(10px); opacity: 0; }\n 50% { transform: scale(1.05) translateY(-2px); }\n 100% { transform: scale(1) translateY(0); opacity: 1; }\n }\n\n /* 随机段子生成器 */\n .joke-generator {\n background: var(--card-bg);\n border: 3px dashed var(--ink);\n border-radius: 15px 255px 15px 255px/255px 15px 255px 15px;\n padding: 1.5rem;\n position: relative;\n }\n\n .joke-generator::before {\n content: '✏️';\n position: absolute;\n top: -15px;\n left: 20px;\n font-size: 1.5rem;\n transform: rotate(-15deg);\n }\n\n .joke-text {\n font-family: 'Caveat', cursive;\n font-size: 1.4rem;\n min-height: 4rem;\n transition: all 0.3s;\n }\n\n .joke-btn {\n font-family: 'Caveat', cursive;\n font-size: 1.1rem;\n background: white;\n border: 2.5px solid var(--ink);\n border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;\n padding: 0.4rem 1.2rem;\n cursor: pointer;\n transition: all 0.2s;\n }\n\n .joke-btn:hover {\n background: var(--ink);\n color: white;\n transform: rotate(-1deg);\n }\n\n /* 随机涂鸦装饰 */\n .doodle-deco {\n position: fixed;\n pointer-events: none;\n z-index: 1;\n opacity: 0.12;\n font-size: 2rem;\n }\n\n /* 滚动条 */\n ::-webkit-scrollbar {\n width: 10px;\n }\n ::-webkit-scrollbar-track {\n background: var(--paper);\n border-left: 2px dashed var(--ink);\n }\n ::-webkit-scrollbar-thumb {\n background: var(--ink);\n border-radius: 20px;\n border: 2px solid var(--paper);\n }\n\n /* 点赞动画 */\n .like-btn {\n transition: all 0.2s;\n }\n .like-btn.liked {\n color: var(--doodle-red);\n animation: likePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n @keyframes likePop {\n 0% { transform: scale(1); }\n 50% { transform: scale(1.4); }\n 100% { transform: scale(1); }\n }\n\n /* 筛选按钮动画 */\n .filter-btn {\n transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);\n }\n .filter-btn.active {\n background: var(--ink) !important;\n color: var(--paper) !important;\n transform: scale(1.05);\n }\n\n /* 页脚手绘线 */\n .footer-doodle {\n border-top: 3px dashed var(--ink);\n position: relative;\n }\n .footer-doodle::before {\n content: '☺';\n position: absolute;\n top: -18px;\n left: 50%;\n transform: translateX(-50%);\n font-size: 1.8rem;\n background: var(--paper);\n padding: 0 1rem;\n }\n\n /* 响应式 */\n @media (max-width: 640px) {\n .post-card {\n padding: 1rem;\n }\n .nav-link {\n font-size: 1.1rem;\n }\n .joke-text {\n font-size: 1.2rem;\n }\n .punchline-text {\n font-size: 1.2rem;\n }\n }\n\n /* 涂鸦 SVG 装饰线 */\n .squiggle {\n position: absolute;\n pointer-events: none;\n opacity: 0.08;\n }\n\n /* 加载动画 */\n @keyframes doodleDraw {\n from { stroke-dashoffset: 1000; }\n to { stroke-dashoffset: 0; }\n }\n\n .draw-line {\n stroke-dasharray: 1000;\n stroke-dashoffset: 1000;\n animation: doodleDraw 2s ease forwards;\n }\n\n /* 计数器徽章 */\n .count-badge {\n font-family: 'Caveat', cursive;\n font-size: 0.9rem;\n background: var(--doodle-yellow);\n border: 2px solid var(--ink);\n border-radius: 50%;\n width: 28px;\n height: 28px;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n }\n </style>\n</head>\n<body>\n\n <!-- 随机涂鸦装饰（JS生成） -->\n <div id=\"doodleDecorations\"></div>\n\n <!-- ===== 导航栏 ===== -->\n <header class=\"nav-doodle px-4 sm:px-8 py-4 relative z-50\" style=\"background: var(--paper);\">\n <div class=\"max-w-6xl mx-auto flex items-center justify-between flex-wrap gap-3\">\n <div class=\"flex items-center gap-3\">\n <span class=\"doodle-title text-3xl sm:text-4xl\" style=\"color: var(--ink);\">\n <i class=\"fa-regular fa-face-grin-squint-tears text-3xl sm:text-4xl mr-2\" style=\"color: var(--doodle-orange);\"></i>\n 笑掉大牙\n </span>\n <span class=\"doodle-hand text-lg hidden sm:block\" style=\"color: var(--ink-light);\">· 不笑算我输</span>\n </div>\n <nav class=\"flex items-center gap-1 sm:gap-3 flex-wrap\">\n <a href=\"#\" class=\"nav-link active\" data-section=\"home\">\n <i class=\"fa-regular fa-house mr-1\"></i>首页\n </a>\n <a href=\"#\" class=\"nav-link\" data-section=\"about\">\n <i class=\"fa-regular fa-face-smile mr-1\"></i>关于\n </a>\n <a href=\"#\" class=\"nav-link\" data-section=\"tags\">\n <i class=\"fa-regular fa-tags mr-1\"></i>分类\n </a>\n </nav>\n </div>\n </header>\n\n <!-- ===== 主内容 ===== -->\n <main class=\"max-w-6xl mx-auto px-4 sm:px-8 py-6 sm:py-10 relative z-10\">\n\n <!-- 随机段子生成器 -->\n <section class=\"joke-generator mb-8 sm:mb-10\">\n <div class=\"flex items-start gap-4 flex-wrap\">\n <div class=\"flex-1 min-w-[200px]\">\n <div class=\"doodle-hand text-xl mb-1\" style=\"color: var(--ink-light);\">\n <i class=\"fa-regular fa-lightbulb mr-1\"></i> 随机笑一个\n </div>\n <div id=\"jokeDisplay\" class=\"joke-text\">\n 程序员最怕什么？—— 怕代码写得太好，被产品经理盯上改需求。\n </div>\n </div>\n <div class=\"flex gap-2 flex-shrink-0\">\n <button onclick=\"generateRandomJoke()\" class=\"joke-btn\">\n <i class=\"fa-regular fa-shuffle mr-1\"></i> 换一个\n </button>\n </div>\n </div>\n </section>\n\n <!-- 筛选栏 -->\n <section class=\"mb-6 sm:mb-8\">\n <div class=\"flex items-center gap-2 sm:gap-3 flex-wrap\">\n <span class=\"doodle-hand text-lg\" style=\"color: var(--ink-light);\">\n <i class=\"fa-regular fa-filter mr-1\"></i> 筛选：\n </span>\n <button class=\"doodle-tag active filter-btn\" data-filter=\"all\" onclick=\"filterPosts('all')\">\n <i class=\"fa-regular fa-list mr-1\"></i> 全部\n </button>\n <button class=\"doodle-tag filter-btn\" data-filter=\"latest\" onclick=\"filterPosts('latest')\">\n <i class=\"fa-regular fa-clock mr-1\"></i> 最新\n </button>\n <button class=\"doodle-tag filter-btn\" data-filter=\"hot\" onclick=\"filterPosts('hot')\">\n <i class=\"fa-regular fa-fire mr-1\"></i> 最热\n </button>\n <button class=\"doodle-tag filter-btn\" data-filter=\"programmer\" onclick=\"filterPosts('programmer')\">\n <i class=\"fa-regular fa-terminal mr-1\"></i> 程序员专区\n </button>\n <span id=\"postCount\" class=\"doodle-hand text-sm ml-auto\" style=\"color: var(--ink-light);\">\n 共 <span id=\"countNum\">8</span> 篇\n </span>\n </div>\n </section>\n\n <!-- 文章列表 -->\n <section id=\"postGrid\" class=\"grid grid-cols-1 md:grid-cols-2 gap-5 sm:gap-6\">\n <!-- 由 JS 动态渲染 -->\n </section>\n\n <!-- 关于区域（隐藏） -->\n <section id=\"aboutSection\" class=\"hidden mt-6\">\n <div class=\"doodle-border p-6 sm:p-8\" style=\"background: var(--card-bg);\">\n <h2 class=\"doodle-title text-3xl mb-4\">\n <i class=\"fa-regular fa-face-smile-wink mr-2\" style=\"color: var(--doodle-orange);\"></i>\n 关于这个博客\n </h2>\n <div class=\"space-y-4 text-lg\" style=\"font-family: 'ZCOOL XiaoWei', serif;\">\n <p>这是一个用 <strong>涂鸦手绘风格</strong> 打造的搞笑博客。</p>\n <p>我们相信——<span class=\"doodle-hand text-2xl\" style=\"color: var(--doodle-orange);\">笑一笑，十年少</span>。</p>\n <p>这里汇集了程序员日常、生活趣事和各种无厘头脑洞。所有内容均为虚构，如有雷同，<span class=\"doodle-hand\">那一定是你也在经历</span> 😄</p>\n <div class=\"flex gap-4 mt-4 flex-wrap\">\n <span class=\"doodle-tag\"><i class=\"fa-regular fa-code mr-1\"></i> 程序员日常</span>\n <span class=\"doodle-tag\"><i class=\"fa-regular fa-mug-hot mr-1\"></i> 生活趣事</span>\n <span class=\"doodle-tag\"><i class=\"fa-regular fa-face-laugh-squint mr-1\"></i> 无厘头脑洞</span>\n </div>\n </div>\n </div>\n </section>\n\n <!-- 分类标签页（隐藏） -->\n <section id=\"tagsSection\" class=\"hidden mt-6\">\n <div class=\"doodle-border p-6 sm:p-8\" style=\"background: var(--card-bg);\">\n <h2 class=\"doodle-title text-3xl mb-4\">\n <i class=\"fa-regular fa-tags mr-2\" style=\"color: var(--doodle-orange);\"></i>\n 文章分类\n </h2>\n <div class=\"flex gap-3 flex-wrap mb-6\">\n <span class=\"doodle-tag active\" onclick=\"filterPosts('all')\">全部 (8)</span>\n <span class=\"doodle-tag\" onclick=\"filterPosts('programmer')\">程序员日常 (4)</span>\n <span class=\"doodle-tag\" onclick=\"filterPosts('latest')\">生活趣事 (2)</span>\n <span class=\"doodle-tag\" onclick=\"filterPosts('hot')\">神回复 (2)</span>\n </div>\n <p class=\"doodle-hand text-lg\" style=\"color: var(--ink-light);\">点击上方标签或首页筛选按钮浏览不同分类的文章～</p>\n </div>\n </section>\n\n </main>\n\n <!-- ===== 页脚 ===== -->\n <footer class=\"footer-doodle mt-10 sm:mt-16 px-4 sm:px-8 py-6 relative z-10\" style=\"background: var(--paper);\">\n <div class=\"max-w-6xl mx-auto text-center\">\n <div class=\"doodle-hand text-lg mb-2\" style=\"color: var(--ink-light);\">\n <i class=\"fa-regular fa-face-grin-hearts mr-1\"></i>\n 笑掉大牙 · 涂鸦搞笑博客\n </div>\n <div class=\"doodle-hand text-sm\" style=\"color: var(--ink-light);\">\n © 2025 纯属虚构 · 仅供娱乐 · 笑了就点个赞吧\n </div>\n <div class=\"flex justify-center gap-4 mt-3\">\n <span class=\"doodle-tag text-sm\" style=\"cursor: default;\">\n <i class=\"fa-regular fa-pen-to-square mr-1\"></i> 手绘涂鸦风\n </span>\n <span class=\"doodle-tag text-sm\" style=\"cursor: default;\">\n <i class=\"fa-regular fa-mobile-screen mr-1\"></i> 移动端适配\n </span>\n </div>\n </div>\n </footer>\n\n <script>\n // ===== 文章数据 =====\n const postsData = [\n {\n id: 1,\n title: '程序员面试的终极哲学问题',\n category: 'programmer',\n tag: '程序员日常',\n summary: '面试官：你最大的缺点是什么？我：写代码太投入，经常忘记吃饭。面试官：这不算缺点。我：哦，那我改一下——写代码太投入，经常忘记给产品经理发日报。',\n punchline: '面试官沉默了三秒，然后说："你被录取了，明天来报到。对了，日报还是要发的。"',\n likes: 42,\n hot: true,\n date: '2025-03-15',\n emoji: '💻'\n },\n {\n id: 2,\n title: '产品经理和程序员的日常对话',\n category: 'programmer',\n tag: '程序员日常',\n summary: '产品经理：这个功能很简单，就加一个按钮而已。程序员：好的，那后端接口呢？产品经理：哦对，再加一个接口。程序员：数据库呢？产品经理：嗯…再加一个表吧。程序员：服务器呢？产品经理：……再加一台？',\n punchline: '最后产品经理说："算了，这个功能先不做了，我们改个需求吧。" —— 经典永流传。',\n likes: 67,\n hot: true,\n date: '2025-03-10',\n emoji: '🤝'\n },\n {\n id: 3,\n title: '当甲方说"我想要有高级感"',\n category: 'programmer',\n tag: '程序员日常',\n summary: '甲方：这个页面不够高级，我想要那种……高级感。我：好的，我加个渐变。甲方：不够。我：加个阴影？甲方：不够。我：加个粒子特效？甲方：不够。我：那我把字体改成苹方？甲方：……好像还是不够。',\n punchline: '最后我把背景色从 #FFFFFF 改成了 #FEFEFE，甲方说："对！就是这个感觉！高级！"',\n likes: 89,\n hot: true,\n date: '2025-02-28',\n emoji: '🎨'\n },\n {\n id: 4,\n title: '程序员的代码注释艺术',\n category: 'programmer',\n tag: '程序员日常',\n summary: '// 这段代码不要动 // 为什么？ // 不知道 // 反正动了就炸 // 上次动它的人已经离职了 // 我也快离职了 // 所以你也别动',\n punchline: '三个月后新来的同事在代码里发现了一行注释："我最终还是动了，对不起大家。 —— 已离职的前前前同事"',\n likes: 55,\n hot: false,\n date: '2025-02-20',\n emoji: '📝'\n },\n {\n id: 5,\n title: '论当代年轻人的省钱大法',\n category: 'latest',\n tag: '生活趣事',\n summary: '为了省15块钱的配送费，我凑单凑到了80块钱。为了省5块钱的停车费，我把车停到了两公里外的免费停车场，然后打车回来花了10块钱。为了省电，我把空调关了开风扇，然后热得睡不着，起来开空调到天亮。',\n punchline: '月底算账的时候发现：省了个寂寞，还多花了三倍。但不知道为什么，下次还是会这么做。',\n likes: 73,\n hot: true,\n date: '2025-03-18',\n emoji: '💰'\n },\n {\n id: 6,\n title: '健身房里的心理博弈',\n category: 'latest',\n tag: '生活趣事',\n summary: '办了健身卡之后：第一天：我要练出腹肌！第二天：好累，休息一天。第三天：好像也没那么急。第四天：算了，下个月再说。第五天：健身房倒闭了。',\n punchline: '健身房老板说："我们不是倒闭，是换了个地方继续骗……啊不是，继续服务会员。"',\n likes: 38,\n hot: false,\n date: '2025-03-05',\n emoji: '💪'\n },\n {\n id: 7,\n title: '论如何用一句话惹怒所有人',\n category: 'hot',\n tag: '神回复',\n summary: '对单身的人说："你怎么还不找对象？" 对有对象的人说："你们什么时候结婚？" 对结婚的人说："你们什么时候要孩子？" 对有孩子的人说："你们什么时候要二胎？" 对有二胎的人说："你们真有钱。"',\n punchline: '终极答案：微笑着对所有人说："您说得对。" 然后转身就走。 —— 人类的本质是复读机，也是鸽子。',\n likes: 91,\n hot: true,\n date: '2025-03-12',\n emoji: '😤'\n },\n {\n id: 8,\n title: '当客服遇到奇葩问题',\n category: 'hot',\n tag: '神回复',\n summary: '客户：我手机进水了怎么办？客服：建议您把手机放在米缸里，大米可以吸水。客户：好的。……（一小时后）客户：我按你说的做了，但是手机还是开不了机。客服：请问您把手机埋在大米里多久了？客户：我没埋，我把手机拿出来，把大米塞进充电口了。',\n punchline: '客服沉默了很久，说："先生，您这个操作……建议您来我们公司上班，产品部需要您这样的人才。"',\n likes: 104,\n hot: true,\n date: '2025-03-01',\n emoji: '📞'\n }\n ];\n\n // ===== 随机段子库 =====\n const jokes = [\n '程序员最怕什么？—— 怕代码写得太好，被产品经理盯上改需求。',\n '为什么程序员总分不清万圣节和圣诞节？—— 因为 Oct 31 等于 Dec 25。',\n '产品经理和程序员一起掉进水里，谁先得救？—— 产品经理，因为程序员会先 debug。',\n '程序员最讨厌的两件事：一是写注释，二是别人不写注释。',\n '"这个bug我改好了" —— 每个程序员都说过的最大的谎言。',\n '为什么程序员喜欢用暗色模式？—— 因为亮色模式太亮了，会照出他们的黑眼圈。',\n '程序员最怕听到的三句话：1. 需求变了 2. 这个功能很简单 3. 以前的代码是谁写的？',\n '"我五分钟就到" —— 程序员的五分钟 = 现实世界的半小时。',\n '为什么程序员总是搞混万圣节和圣诞节？因为 Oct 31 = Dec 25（八进制31=十进制25）。',\n '程序员写代码时的状态：10% 写代码，90% 在想"我刚才写到哪了"。',\n '甲方：我要五彩斑斓的黑。设计师：…… 程序员：我来，color: #0a0a0a; background: linear-gradient(...) 搞定。',\n '世界上最远的距离不是生与死，而是我在改bug，你在改需求。',\n '程序员最浪漫的情话："你的 bug，我来修。"',\n '为什么程序员不吵架？—— 因为他们会用 git merge 来解决冲突。',\n '"这个需求很简单" —— 产品经理职业生涯中最危险的五个字。'\n ];\n\n // ===== 涂鸦装饰符号 =====\n const doodleSymbols = [\n '✿', '✦', '✧', '❀', '✽', '★', '☆', '☾', '☽', '♪', '♫', '♬',\n '☁', '✎', '✏', '✐', '⌇', '⏤', '⏥', '⎛', '⎝', '⎞', '⎠',\n '◐', '◑', '◒', '◓', '⬡', '⬢', '⎈', '⌘', '⌥'\n ];\n\n // ===== 渲染文章 =====\n let currentFilter = 'all';\n let currentSection = 'home';\n\n function render