暗黑暖金杂志风博客列表页设计

By admin, 1 May, 2026

推理

用户想要一个博客列表页面。我需要先查询系统中的设计系统推荐，获取相关的资源和内容。

让我先查一下博客相关的设计建议和已有的内容。Let me look at the existing blog list content to understand what's already there, and also get some assets for blog images.

Let me check the existing blog list node and also look for some blog-related content and conversations.Let me check the previous blog list conversations to see what was generated before, and also check the existing "博客列表" node content.

Let me look at the most recent blog list conversation to understand what was already created, and also look at some of the other content.Let me look at the most recent blog list conversation to see what was already generated, so I can iterate on it or create a fresh design.

Let me check the latest session data for the blog list.Now I have a good understanding of the context. The user wants a "博客列表" (blog list). Let me create a unique, visually stunning blog list page. I'll go for a modern editorial/minimalist style with dark mode, using beautiful typography and smooth animations.

Let me design a complete blog list page with:
1. A navigation/header
2. Featured/sticky post section
3. Blog grid with filtering
4. Pagination
5. Newsletter subscription
6. Footer

For the aesthetic direction, I'll go with a **modern editorial dark mode** style - sophisticated, with excellent typography, subtle animations, and a clean but characterful design.

Let me use:
- Fonts: "Playfair Display" for headings (editorial feel) + "DM Sans" for body text
- Dark background with warm accent colors
- Beautiful card design with subtle hover effects
- Smooth scroll-triggered animations

Let me build this now.Now I have the assets and design context. Let me create a visually stunning blog list page. I'll go with a **dark editorial magazine style** - sophisticated, with excellent typography using Playfair Display for headings and DM Sans for body text, warm gold/amber accents against a deep dark background.

The blog list will include:
1. A stylish header with navigation
2. Featured article hero
3. Category filters with animated pills
4. Blog card grid with beautiful hover effects
5. Pagination
6. Newsletter subscription section
7. Footer

Let me build something truly unique and stunning.Let me now create a stunning blog list page. I'll use the assets wisely. Let me design a unique magazine-style blog list with:

- Dark mode aesthetic with warm amber/gold accent
- Playfair Display + DM Sans font pairing
- Featured grid with beautiful imagery
- Category filter pills
- Animated card entries
- Newsletter section
- Clean footer

Let me build this now!Let me now create the stunning blog list page. I'll use a mix of assets where appropriate - the business-03.jpg for a desk/workspace image for the featured post, and the travel-nature-31.jpg for another visual element. For other blog cards, I'll use placeholder images with nice colors.

Let me design the complete HTML now.

角色

assistant

content

```json
{
"summary": "生成暗黑编辑风博客列表页。采用深色背景(#0a0a0a)搭配暖金点缀(#c9a84c)，Playfair Display标题字+DM Sans正文字体组合，营造高级杂志质感。包含导航栏、精选置顶文章（配办公桌场景图）、分类筛选标签、6篇博客网格卡片（悬停放大+光影动效）、订阅区、分页器及页脚。所有元素均带入场动画（stagger fade-up），响应式适配移动端。",
"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\">\n </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=Playfair+Display:ital,wght@0,4…\" 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 --bg-primary: #0a0a0a;\n --bg-secondary: #111111;\n --bg-card: #141414;\n --bg-card-hover: #1a1a1a;\n --text-primary: #f0ede8;\n --text-secondary: #a09b94;\n --text-muted: #6b6660;\n --accent: #c9a84c;\n --accent-light: #e8d081;\n --accent-dark: #a88830;\n --border: #1e1e1e;\n --border-light: #2a2a2a;\n }\n\n * { margin: 0; padding: 0; box-sizing: border-box; }\n\n body {\n font-family: 'DM Sans', sans-serif;\n background: var(--bg-primary);\n color: var(--text-primary);\n overflow-x: hidden;\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n }\n\n /* Scrollbar */\n ::-webkit-scrollbar { width: 6px; }\n ::-webkit-scrollbar-track { background: var(--bg-primary); }\n ::-webkit-scrollbar-thumb { background: #333; border-radius: 3px; }\n ::-webkit-scrollbar-thumb:hover { background: #555; }\n\n /* Ambient grain */\n body::before {\n content: '';\n position: fixed;\n inset: 0;\n z-index: 9999;\n pointer-events: none;\n opacity: 0.035;\n background-image: url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E\");\n background-repeat: repeat;\n background-size: 200px 200px;\n }\n\n /* Glass overlay */\n .glass {\n background: rgba(17, 17, 17, 0.7);\n backdrop-filter: blur(20px);\n -webkit-backdrop-filter: blur(20px);\n border-bottom: 1px solid var(--border);\n }\n\n /* Featured card */\n .featured-card {\n position: relative;\n border-radius: 20px;\n overflow: hidden;\n background: var(--bg-card);\n border: 1px solid var(--border);\n transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);\n cursor: pointer;\n }\n .featured-card:hover {\n border-color: var(--accent-dark);\n transform: translateY(-4px);\n box-shadow: 0 20px 60px rgba(201, 168, 76, 0.08);\n }\n .featured-card .featured-img {\n transition: transform 0.8s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .featured-card:hover .featured-img {\n transform: scale(1.04);\n }\n\n /* Blog cards */\n .blog-card {\n position: relative;\n border-radius: 16px;\n overflow: hidden;\n background: var(--bg-card);\n border: 1px solid var(--border);\n transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);\n cursor: pointer;\n will-change: transform;\n }\n .blog-card:hover {\n border-color: rgba(201, 168, 76, 0.3);\n transform: translateY(-6px) scale(1.01);\n box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(201, 168, 76, 0.08);\n background: var(--bg-card-hover);\n }\n .blog-card .card-img {\n transition: transform 0.7s cubic-bezier(0.23, 1, 0.32, 1);\n }\n .blog-card:hover .card-img {\n transform: scale(1.06);\n }\n .blog-card .card-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(to top, rgba(10,10,10,0.85) 0%, rgba(10,10,10,0.1) 60%, transparent 100%);\n opacity: 0.6;\n transition: opacity 0.4s ease;\n }\n .blog-card:hover .card-overlay {\n opacity: 0.8;\n }\n\n /* Category pill */\n .cat-pill {\n display: inline-flex;\n align-items: center;\n padding: 0.35rem 1rem;\n border-radius: 100px;\n font-size: 0.75rem;\n font-weight: 500;\n letter-spacing: 0.04em;\n text-transform: uppercase;\n transition: all 0.3s ease;\n cursor: pointer;\n border: 1px solid var(--border-light);\n color: var(--text-secondary);\n background: transparent;\n font-family: 'DM Sans', sans-serif;\n }\n .cat-pill:hover {\n border-color: var(--accent);\n color: var(--accent);\n }\n .cat-pill.active {\n background: var(--accent);\n color: #0a0a0a;\n border-color: var(--accent);\n font-weight: 600;\n }\n\n /* Tag label */\n .tag-label {\n display: inline-block;\n padding: 0.2rem 0.7rem;\n border-radius: 4px;\n font-size: 0.65rem;\n font-weight: 600;\n letter-spacing: 0.06em;\n text-transform: uppercase;\n background: rgba(201, 168, 76, 0.12);\n color: var(--accent-light);\n border: 1px solid rgba(201, 168, 76, 0.15);\n }\n .tag-label.featured {\n background: var(--accent);\n color: #0a0a0a;\n border: none;\n }\n\n /* Newsletter */\n .newsletter-input {\n background: transparent;\n border: none;\n border-bottom: 2px solid var(--border-light);\n color: var(--text-primary);\n font-family: 'DM Sans', sans-serif;\n font-size: 1rem;\n padding: 0.75rem 0;\n width: 100%;\n transition: border-color 0.3s ease;\n outline: none;\n }\n .newsletter-input:focus {\n border-color: var(--accent);\n }\n .newsletter-input::placeholder {\n color: var(--text-muted);\n font-weight: 300;\n }\n\n /* Pagination */\n .page-btn {\n display: inline-flex;\n align-items: center;\n justify-content: center;\n width: 40px;\n height: 40px;\n border-radius: 50%;\n border: 1px solid var(--border-light);\n color: var(--text-secondary);\n background: transparent;\n font-family: 'DM Sans', sans-serif;\n font-size: 0.85rem;\n transition: all 0.3s ease;\n cursor: pointer;\n }\n .page-btn:hover {\n border-color: var(--accent);\n color: var(--accent);\n }\n .page-btn.active {\n background: var(--accent);\n border-color: var(--accent);\n color: #0a0a0a;\n font-weight: 600;\n }\n\n /* Section divider */\n .divider-line {\n height: 1px;\n background: linear-gradient(to right, var(--border), var(--accent-dark), var(--border));\n opacity: 0.3;\n }\n\n /* Animations */\n .animate-in {\n opacity: 0;\n transform: translateY(30px);\n animation: fadeUp 0.7s ease forwards;\n }\n @keyframes fadeUp {\n to {\n opacity: 1;\n transform: translateY(0);\n }\n }\n\n .delay-1 { animation-delay: 0.1s; }\n .delay-2 { animation-delay: 0.2s; }\n .delay-3 { animation-delay: 0.3s; }\n .delay-4 { animation-delay: 0.4s; }\n .delay-5 { animation-delay: 0.5s; }\n .delay-6 { animation-delay: 0.6s; }\n .delay-7 { animation-delay: 0.7s; }\n .delay-8 { animation-delay: 0.8s; }\n .delay-9 { animation-delay: 0.9s; }\n .delay-10 { animation-delay: 1.0s; }\n\n /* Mobile menu */\n .mobile-menu-open {\n transform: translateX(0) !important;\n }\n .menu-overlay {\n position: fixed;\n inset: 0;\n background: rgba(0, 0, 0, 0.7);\n backdrop-filter: blur(8px);\n -webkit-backdrop-filter: blur(8px);\n z-index: 40;\n opacity: 0;\n pointer-events: none;\n transition: opacity 0.4s ease;\n }\n .menu-overlay.show {\n opacity: 1;\n pointer-events: all;\n }\n\n /* Shimmer loading effect for images */\n .img-shimmer {\n background: linear-gradient(90deg, #1a1a1a 25%, #222 50%, #1a1a1a 75%);\n background-size: 200% 100%;\n animation: shimmer 1.5s infinite;\n }\n @keyframes shimmer {\n 0% { background-position: 200% 0; }\n 100% { background-position: -200% 0; }\n }\n\n /* Hover line accent */\n .hover-line {\n position: relative;\n display: inline-block;\n }\n .hover-line::after {\n content: '';\n position: absolute;\n left: 0;\n bottom: -2px;\n width: 0;\n height: 1px;\n background: var(--accent);\n transition: width 0.4s ease;\n }\n .hover-line:hover::after {\n width: 100%;\n }\n\n /* Responsive */\n @media (max-width: 640px) {\n .featured-card {\n border-radius: 14px;\n }\n .blog-card {\n border-radius: 12px;\n }\n }\n </style>\n</head>\n<body>\n\n \n <div id=\"menuOverlay\" class=\"menu-overlay\" onclick=\"closeMenu()\"></div>\n\n \n <div id=\"mobileMenu\" class=\"fixed top-0 right-0 h-full w-72 z-50 bg-[#0d0d0d] border-l border-[#1e1e1e] transform translate-x-full transition-transform duration-400 ease-[cubic-bezier(0.23,1,0.32,1)] p-8\" style=\"transition-duration: 0.4s;\">\n <div class=\"flex justify-end mb-10\">\n <button onclick=\"closeMenu()\" class=\"text-[#a09b94] hover:text-[#c9a84c] transition-colors text-xl cursor-pointer\">\n <i class=\"fa-solid fa-xmark\"></i>\n </button>\n </div>\n <nav class=\"flex flex-col gap-6\">\n <a href=\"#\" class=\"text-[#f0ede8] text-lg font-medium tracking-wide hover:text-[#c9a84c] transition-colors\">首页</a>\n <a href=\"#\" class=\"text-[#a09b94] text-lg font-medium tracking-wide hover:text-[#c9a84c] transition-colors\">文章</a>\n <a href=\"#\" class=\"text-[#a09b94] text-lg font-medium tracking-wide hover:text-[#c9a84c] transition-colors\">专题</a>\n <a href=\"#\" class=\"text-[#a09b94] text-lg font-medium tracking-wide hover:text-[#c9a84c] transition-colors\">关于</a>\n <a href=\"#\" class=\"text-[#a09b94] text-lg font-medium tracking-wide hover:text-[#c9a84c] transition-colors\">订阅</a>\n </nav>\n <div class=\"mt-12 pt-8 border-t border-[#1e1e1e]\">\n <div class=\"flex gap-4\">\n <a href=\"#\" class=\"text-[#6b6660] hover:text-[#c9a84c] transition-colors text-lg\"><i class=\"fa-brands fa-twitter\"></i></a>\n <a href=\"#\" class=\"text-[#6b6660] hover:text-[#c9a84c] transition-colors text-lg\"><i class=\"fa-brands fa-github\"></i></a>\n <a href=\"#\" class=\"text-[#6b6660] hover:text-[#c9a84c] transition-colors text-lg\"><i class=\"fa-brands fa-dribbble\"></i></a>\n <a href=\"#\" class=\"text-[#6b6660] hover:text-[#c9a84c] transition-colors text-lg\"><i class=\"fa-brands fa-linkedin-in\"></i></a>\n </div>\n </div>\n </div>\n\n \n <header class=\"glass fixed top-0 left-0 right-0 z-30\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"flex items-center justify-between h-16 lg:h-20\">\n \n <a href=\"#\" class=\"flex items-center gap-2 group\">\n <span class=\"text-2xl font-bold tracking-tight\" style=\"font-family: 'Playfair Display', serif; color: var(--accent);\">\u25d3</span>\n <span class=\"text-lg font-semibold tracking-wide text-[#f0ede8] group-hover:text-[#c9a84c] transition-colors\" style=\"font-family: 'Playfair Display', serif;\">\u7F16\u8F91\u90E8</span>\n </a>\n\n \n <nav class=\"hidden md:flex items-center gap-8\">\n <a href=\"#\" class=\"text-sm font-medium tracking-wider text-[#a09b94] hover:text-[#c9a84c] transition-colors uppercase\">\u9996\u9875</a>\n <a href=\"#\" class=\"text-sm font-medium tracking-wider text-[#f0ede8] hover:text-[#c9a84c] transition-colors uppercase relative\">\u6587\u7AE0 <span class=\"absolute -bottom-1 left-0 right-0 h-[2px] bg-[#c9a84c]\"></span></a>\n <a href=\"#\" class=\"text-sm font-medium tracking-wider text-[#a09b94] hover:text-[#c9a84c] transition-colors uppercase\">\u4E13\u9898</a>\n <a href=\"#\" class=\"text-sm font-medium tracking-wider text-[#a09b94] hover:text-[#c9a84c] transition-colors uppercase\">\u5173\u4E8E</a>\n </nav>\n\n \n <div class=\"flex items-center gap-4\">\n <button class=\"hidden sm:inline-flex items-center gap-2 px-4 py-2 rounded-full text-xs font-semibold uppercase tracking-wider transition-all duration-300 cursor-pointer\" style=\"background: var(--accent); color: #0a0a0a;\" onmouseover=\"this.style.background='var(--accent-light)'\" onmouseout=\"this.style.background='var(--accent)'\">\n <i class=\"fa-solid fa-envelope\"></i> \u8BA2\u9605\n </button>\n <button onclick=\"toggleMenu()\" class=\"md:hidden text-[#a09b94] hover:text-[#c9a84c] transition-colors text-xl cursor-pointer\">\n <i class=\"fa-solid fa-bars\"></i>\n </button>\n </div>\n </div>\n </div>\n </header>\n\n \n <div class=\"h-16 lg:h-20\"></div>\n\n \n <section class=\"relative pt-12 pb-8 lg:pt-20 lg:pb-12 overflow-hidden\">\n \n <div class=\"absolute top-0 left-0 right-0 h-px\" style=\"background: linear-gradient(to right, transparent, var(--accent-dark), transparent); opacity: 0.2;\"></div>\n\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"flex flex-col lg:flex-row lg:items-end lg:justify-between gap-6\">\n <div class=\"animate-in\">\n <div class=\"flex items-center gap-3 mb-4\">\n <span class=\"tag-label\">\u7F16\u8F91\u7CBE\u9009</span>\n <span class=\"text-xs text-[#6b6660] font-mono\">\u2022 \u5171 24 \u7BC7\u6587\u7AE0</span>\n </div>\n <h1 class=\"text-4xl sm:text-5xl lg:text-6xl font-bold leading-[1.1] tracking-tight\" style=\"font-family: 'Playfair Display', serif;\">\n \u601D\u8003\u2014\u2014\u8BB0\u5F55<br>\n <span class=\"italic\" style=\"color: var(--accent);\">\u4E0E\u4E16\u754C\u5BF9\u8BDD</span>\n </h1>\n <p class=\"mt-4 text-[#a09b94] max-w-xl text-base lg:text-lg leading-relaxed\">\n \u6DF1\u5EA6\u89E3\u8BFB\u6280\u672F\u3001\u8BBE\u8BA1\u4E0E\u521B\u65B0\u7684\u4E13\u680F\u6587\u7AE0\uFF0C\u6BCF\u5468\u66F4\u65B0\u3002\u4ECE\u6846\u67B6\u601D\u8003\u5230\u5B9E\u8DF5\u7ECF\u9A8C\uFF0C\u4E3A\u524D\u6CBF\u601D\u8003\u800C\u5199\u3002\n </p>\n </div>\n\n \n <div class=\"flex gap-8 lg:gap-12 pb-1 animate-in delay-3\">\n <div class=\"text-center\">\n <div class=\"text-2xl lg:text-3xl font-bold\" style=\"font-family: 'Playfair Display', serif; color: var(--accent);\">128+</div>\n <div class=\"text-xs text-[#6b6660] uppercase tracking-widest mt-1\">\u6587\u7AE0</div>\n </div>\n <div class=\"text-center\">\n <div class=\"text-2xl lg:text-3xl font-bold\" style=\"font-family: 'Playfair Display', serif; color: var(--accent);\">6</div>\n <div class=\"text-xs text-[#6b6660] uppercase tracking-widest mt-1\">\u4E13\u680F</div>\n </div>\n <div class=\"text-center\">\n <div class=\"text-2xl lg:text-3xl font-bold\" style=\"font-family: 'Playfair Display', serif; color: var(--accent);\">3.2k</div>\n <div class=\"text-xs text-[#6b6660] uppercase tracking-widest mt-1\">\u8BA2\u9605\u8005</div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <section class=\"pb-12 lg:pb-16\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"featured-card animate-in delay-2\">\n <div class=\"grid md:grid-cols-5 min-h-[340px]\">\n \n <div class=\"md:col-span-3 relative overflow-hidden min-h-[240px] md:min-h-full\">\n <img\n src=\"/assets/images/16-9/business-03.jpg\"\n alt=\"Featured article\"\n class=\"featured-img w-full h-full object-cover absolute inset-0\"\n onerror=\"this.parentElement.classList.add('img-shimmer')\"\n loading=\"lazy\"\n >\n <div class=\"absolute inset-0\" style=\"background: linear-gradient(to right, rgba(10,10,10,0.6) 0%, rgba(10,10,10,0.1) 100%);\"></div>\n </div>\n \n <div class=\"md:col-span-2 p-6 sm:p-8 lg:p-10 flex flex-col justify-center relative\">\n <div class=\"flex items-center gap-3 mb-3\">\n <span class=\"tag-label featured\">\u7F6E\u9876</span>\n <span class="text-xs text-[#6b6660]\">2025.04.28 \u00B7 8 \u5206\u949F\u9605\u8BFB</span>\n </div>\n <h2 class=\"text-2xl sm:text-3xl lg:text-4xl font-bold leading-[1.2] mb-3\" style=\"font-family: 'Playfair Display', serif;\">\n \u4ECE\u96F6\u6784\u5EFA\u4E00\u4E2A\u73B0\u4EE3\u5316\u8BBE\u8BA1\u7CFB\u7EDF\uFF1A\u6211\u4EEC\u7684\u5B9E\u8DF5\u4E0E\u601D\u8003\n </h2>\n <p class=\"text-[#a09b94] text-sm sm:text-base leading-relaxed mb-4\">\n \u5982\u4F55\u5728\u590D\u6742\u7684\u4E1A\u52A1\u573A\u666F\u4E0B\uFF0C\u4ECE\u96F6\u5F00\u59CB\u6784\u5EFA\u4E00\u5957\u9AD8\u6548\u3001\u7F8E\u89C2\u4E14\u53EF\u7EF4\u62A4\u7684\u8BBE\u8BA1\u7CFB\u7EDF\uFF1F\u8FD9\u7BC7\u6587\u7AE0\u5C06\u5206\u4EAB\u6211\u4EEC\u5728\u5B9E\u6218\u4E2D\u7684\u7ECF\u9A8C\u4E0E\u6559\u8BAD\u3002\n </p>\n <div class=\"flex items-center gap-3\">\n <span class=\"w-8 h-8 rounded-full bg-[#c9a84c] flex items-center justify-center text-[#0a0a0a] text-xs font-bold\">LM</span>\n <span class=\"text-sm text-[#a09b94]\">\u674E\u660E \u00B7 \u4E3B\u7F16</span>\n </div>\n <div class=\"mt-4 pt-4 border-t border-[#1e1e1e] flex items-center gap-3 text-xs text-[#6b6660]\">\n <span><i class=\"fa-regular fa-eye mr-1\"></i> 2.4k \u6B21\u6D4F\u89C8</span>\n <span><i class=\"fa-regular fa-heart mr-1\"></i> 86</span>\n <span><i class=\"fa-regular fa-bookmark mr-1\"></i> \u6536\u85CF</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </section>\n\n \n <section class=\"pb-8\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"flex flex-wrap items-center gap-3 animate-in delay-3\">\n <button class=\"cat-pill active\">\u5168\u90E8</button>\n <button class=\"cat-pill\">\u6280\u672F</button>\n <button class=\"cat-pill\">\u8BBE\u8BA1</button>\n <button class=\"cat-pill\">\u6DF1\u5EA6\u62A5\u9053</button>\n <button class=\"cat-pill\">\u521B\u4E1A</button>\n <button class=\"cat-pill\">\u751F\u6D3B\u65B9\u5F0F</button>\n <button class=\"cat-pill\">\u4EBA\u7269</button>\n </div>\n </div>\n </section>\n\n \n <section class=\"pb-16 lg:pb-24\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-3 gap-5 sm:gap-6 lg:gap-7\" id=\"blogGrid\">\n\n \n <article class=\"blog-card animate-in delay-2\">\n <div class=\"relative aspect-[16/10] overflow-hidden\">\n <div class=\"card-img w-full h-full bg-cover bg-center\" style=\"background-image: url('/assets/images/16-9/business-05.jpg');\"></div>\n <div class=\"card-overlay\"></div>\n <div class=\"absolute top-3 left-3 z-10\">\n <span class=\"tag-label\">\u6280\u672F</span>\n </div>\n <div class=\"absolute bottom-3 left-3 right-3 z-10\">\n <h3 class=\"text-white text-base sm:text-lg font-bold leading-snug\" style=\"font-family: 'Playfair Display', serif;\">\n Rust \u5728\u524D\u7AEF\u5DE5\u5177\u94FE\u4E2D\u7684\u5E94\u7528\u4E0E\u5B9E\u8DF5\n </h3>\n </div>\n </div>\n <div class=\"p-4 sm:p-5\">\n <div class=\"flex items-center gap-2 text-xs text-[#6b6660] mb-2\">\n <span>2025.04.25</span>\n <span>\u00B7</span>\n <span><i class=\"fa-regular fa-clock mr-1\"></i>6 \u5206\u949F</span>\n </div>\n <p class=\"text-[#a09b94] text-sm leading-relaxed line-clamp-2\">\n \u63A2\u8BA8 Rust \u8BED\u8A00\u5982\u4F55\u5728\u524D\u7AEF\u5DE5\u5177\u94FE\u4E2D\u53D1\u6325\u4F5C\u7528\uFF0C\u4ECE\u6784\u5EFA\u5DE5\u5177\u5230\u7F16\u7801\u8D28\u91CF\u4FDD\u969C\u3002\n </p>\n <div class=\"mt-3 flex items-center gap-2\">\n <span class=\"w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-[10px] text-[#a09b94] font-bold\">ZH</span>\n <span class=\"text-xs text-[#6b6660]\">\u5F20\u8D6B</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"blog-card animate-in delay-3\">\n <div class=\"relative aspect-[16/10] overflow-hidden\">\n <div class=\"card-img w-full h-full bg-cover bg-center\" style=\"background-image: url('/assets/images/16-9/business-13.jpg');\"></div>\n <div class=\"card-overlay\"></div>\n <div class=\"absolute top-3 left-3 z-10\">\n <span class=\"tag-label\">\u8BBE\u8BA1</span>\n </div>\n <div class=\"absolute bottom-3 left-3 right-3 z-10\">\n <h3 class=\"text-white text-base sm:text-lg font-bold leading-snug\" style=\"font-family: 'Playfair Display', serif;\">\n \u6570\u636E\u53EF\u89C6\u5316\u7684\u8BBE\u8BA1\u4E4B\u7F8E\uFF1A\u4ECE\u56FE\u8868\u5230\u6545\u4E8B\n </h3>\n </div>\n </div>\n <div class=\"p-4 sm:p-5\">\n <div class=\"flex items-center gap-2 text-xs text-[#6b6660] mb-2\">\n <span>2025.04.22</span>\n <span>\u00B7</span>\n <span><i class=\"fa-regular fa-clock mr-1\"></i>10 \u5206\u949F</span>\n </div>\n <p class=\"text-[#a09b94] text-sm leading-relaxed line-clamp-2\">\n \u6570\u636E\u53EF\u89C6\u5316\u4E0D\u4EC5\u662F\u6280\u672F\uFF0C\u66F4\u662F\u4E00\u79CD\u8BBE\u8BA1\u8BED\u8A00\u3002\u770B\u770B\u5982\u4F55\u7528\u56FE\u8868\u8BB2\u597D\u4E00\u4E2A\u6570\u636E\u6545\u4E8B\u3002\n </p>\n <div class=\"mt-3 flex items-center gap-2\">\n <span class=\"w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-[10px] text-[#a09b94] font-bold\">WY</span>\n <span class=\"text-xs text-[#6b6660]\">\u738B\u6631</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"blog-card animate-in delay-4\">\n <div class=\"relative aspect-[16/10] overflow-hidden\">\n <div class=\"card-img w-full h-full bg-cover bg-center\" style=\"background-image: url('/assets/images/fashion-lifestyle/fashion-lifestyle-23.jpg');\"></div>\n <div class=\"card-overlay\"></div>\n <div class=\"absolute top-3 left-3 z-10\">\n <span class=\"tag-label\">\u751F\u6D3B\u65B9\u5F0F</span>\n </div>\n <div class=\"absolute bottom-3 left-3 right-3 z-10\">\n <h3 class=\"text-white text-base sm:text-lg font-bold leading-snug\" style=\"font-family: 'Playfair Display', serif;\">\n \u8FDC\u7A0B\u5DE5\u4F5C\u7684\u7B2C\u4E94\u5E74\uFF1A\u6211\u5B66\u4F1A\u7684\u4E8B\n </h3>\n </div>\n </div>\n <div class=\"p-4 sm:p-5\">\n <div class=\"flex items-center gap-2 text-xs text-[#6b6660] mb-2\">\n <span>2025.04.20</span>\n <span>\u00B7</span>\n <span><i class=\"fa-regular fa-clock mr-1\"></i>7 \u5206\u949F</span>\n </div>\n <p class=\"text-[#a09b94] text-sm leading-relaxed line-clamp-2\">\n 4 \u5E74\u8FDC\u7A0B\u5DE5\u4F5C\u7ECF\u5386\uFF0C\u4ECE\u521D\u671F\u7684\u8FF7\u832B\u5230\u5982\u4ECA\u7684\u6E38\u5203\u6709\u4F59\uFF0C\u8FD9\u4E9B\u7ECF\u9A8C\u60F3\u8DDF\u4F60\u5206\u4EAB\u3002\n </p>\n <div class=\"mt-3 flex items-center gap-2\">\n <span class=\"w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-[10px] text-[#a09b94] font-bold\">CJ</span>\n <span class=\"text-xs text-[#6b6660]\">\u9648\u9756</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"blog-card animate-in delay-5\">\n <div class=\"relative aspect-[16/10] overflow-hidden\">\n <div class=\"card-img w-full h-full bg-cover bg-center\" style=\"background-image: url('/assets/images/travel-nature/travel-nature-31.jpg');\"></div>\n <div class=\"card-overlay\"></div>\n <div class=\"absolute top-3 left-3 z-10\">\n <span class=\"tag-label\">\u6DF1\u5EA6\u62A5\u9053</span>\n </div>\n <div class=\"absolute bottom-3 left-3 right-3 z-10\">\n <h3 class=\"text-white text-base sm:text-lg font-bold leading-snug\" style=\"font-family: 'Playfair Display', serif;\">\n AI \u7F16\u7A0B\u52A9\u624B\u5B9E\u6218\u6D4B\u8BC4\uFF1A\u8C01\u662F\u6700\u5F3A\u52A9\u624B\uFF1F\n </h3>\n </div>\n </div>\n <div class=\"p-4 sm:p-5\">\n <div class=\"flex items-center gap-2 text-xs text-[#6b6660] mb-2\">\n <span>2025.04.18</span>\n <span>\u00B7</span>\n <span><i class=\"fa-regular fa-clock mr-1\"></i>15 \u5206\u949F</span>\n </div>\n <p class=\"text-[#a09b94] text-sm leading-relaxed line-clamp-2\">\n \u5BF9\u6BD4\u6D4B\u8BC4\u4E3B\u6D41 AI \u7F16\u7A0B\u52A9\u624B\u5728\u771F\u5B9E\u5F00\u53D1\u573A\u666F\u4E2D\u7684\u8868\u73B0\uFF0C\u5305\u62EC\u4EE3\u7801\u8D28\u91CF\u3001\u95EE\u9898\u89E3\u51B3\u80FD\u529B\u7B49\u3002\n </p>\n <div class=\"mt-3 flex items-center gap-2\">\n <span class=\"w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-[10px] text-[#a09b94] font-bold\">LT</span>\n <span class=\"text-xs text-[#6b6660]\">\u5218\u6D9B</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"blog-card animate-in delay-6\">\n <div class=\"relative aspect-[16/10] overflow-hidden\">\n <div class=\"card-img w-full h-full bg-cover bg-center\" style=\"background-image: url('/assets/images/builder/builder-01.png');\"></div>\n <div class=\"card-overlay\"></div>\n <div class=\"absolute top-3 left-3 z-10\">\n <span class=\"tag-label\">\u6280\u672F</span>\n </div>\n <div class=\"absolute bottom-3 left-3 right-3 z-10\">\n <h3 class=\"text-white text-base sm:text-lg font-bold leading-snug\" style=\"font-family: 'Playfair Display', serif;\">\n \u6784\u5EFA\u4F60\u7684\u7B2C\u4E00\u4E2A\u4F4E\u4EE3\u7801\u5E73\u53F0\uFF1A\u6280\u672F\u67B6\u6784\u6307\u5357\n </h3>\n </div>\n </div>\n <div class=\"p-4 sm:p-5\">\n <div class=\"flex items-center gap-2 text-xs text-[#6b6660] mb-2\">\n <span>2025.04.15</span>\n <span>\u00B7</span>\n <span><i class=\"fa-regular fa-clock mr-1\"></i>12 \u5206\u949F</span>\n </div>\n <p class=\"text-[#a09b94] text-sm leading-relaxed line-clamp-2\">\n \u4ECE\u96F6\u5F00\u59CB\u6784\u5EFA\u4E00\u4E2A\u4F4E\u4EE3\u7801\u5E73\u53F0\u7684\u6280\u672F\u67B6\u6784\u884C\u8D70\u6307\u5357\uFF0C\u5305\u62EC\u524D\u540E\u7AEF\u6280\u672F\u9009\u578B\u3001\u7EC4\u4EF6\u8BBE\u8BA1\u7B49\u3002\n </p>\n <div class=\"mt-3 flex items-center gap-2\">\n <span class=\"w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-[10px] text-[#a09b94] font-bold\">SC</span>\n <span class=\"text-xs text-[#6b6660]\">\u5B59\u8F69</span>\n </div>\n </div>\n </article>\n\n \n <article class=\"blog-card animate-in delay-7\">\n <div class=\"relative aspect-[16/10] overflow-hidden\">\n <div class=\"card-img w-full h-full bg-cover bg-center\" style=\"background-image: url('/assets/images/builder/chat-tailwind.png');\"></div>\n <div class=\"card-overlay\"></div>\n <div class=\"absolute top-3 left-3 z-10\">\n <span class=\"tag-label\">\u4EBA\u7269</span>\n </div>\n <div class=\"absolute bottom-3 left-3 right-3 z-10\">\n <h3 class=\"text-white text-base sm:text-lg font-bold leading-snug\" style=\"font-family: 'Playfair Display', serif;\">\n \u4E0E\u8BBE\u8BA1\u5E08\u5BF9\u8BDD\uFF1A\u4ECE\u5DE5\u4F5C\u53F0\u5230\u5F71\u54CD\u529B\n </h3>\n </div>\n </div>\n <div class=\"p-4 sm:p-5\">\n <div class=\"flex items-center gap-2 text-xs text-[#6b6660] mb-2\">\n <span>2025.04.12</span>\n <span>\u00B7</span>\n <span><i class=\"fa-regular fa-clock mr-1\"></i>9 \u5206\u949F</span>\n </div>\n <p class=\"text-[#a09b94] text-sm leading-relaxed line-clamp-2\">\n \u4E00\u4E2A\u72EC\u7ACB\u8BBE\u8BA1\u5E08\u7684\u5341\u5E74\u4E4B\u8DEF\uFF1A\u4ECE\u81EA\u7531\u804C\u4E1A\u5230\u521B\u7ACB\u5DE5\u4F5C\u5BA4\uFF0C\u4ECE\u5BA2\u6237\u5230\u4EA7\u54C1\u7684\u8F6C\u53D8\u4E0E\u601D\u8003\u3002\n </p>\n <div class=\"mt-3 flex items-center gap-2\">\n <span class=\"w-6 h-6 rounded-full bg-[#333] flex items-center justify-center text-[10px] text-[#a09b94] font-bold\">XY</span>\n <span class=\"text-xs text-[#6b6660]\">\u96C4\u8F69</span>\n </div>\n </div>\n </article>\n\n </div>\n </div>\n </section>\n\n \n <section class=\"pb-16 lg:pb-20\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"divider-line mb-8\"></div>\n <div class=\"flex flex-col sm:flex-row items-center justify-between gap-4\">\n <span class=\"text-xs text-[#6b6660]\">\u663E\u793A 1\u20136 / \u5171 24 \u7BC7\u6587\u7AE0</span>\n <div class=\"flex items-center gap-2\">\n <button class=\"page-btn\"><i class=\"fa-solid fa-chevron-left text-xs\"></i></button>\n <button class=\"page-btn active\">1</button>\n <button class=\"page-btn\">2</button>\n <button class=\"page-btn\">3</button>\n <button class=\"page-btn\">4</button>\n <span class=\"text-[#6b6660] px-1\">...</span>\n <button class=\"page-btn\"><i class=\"fa-solid fa-chevron-right text-xs\"></i></button>\n </div>\n </div>\n </div>\n </section>\n\n \n <section class=\"pb-16 lg:pb-24\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"relative rounded-2xl overflow-hidden border border-[#1e1e1e] animate-in delay-6\" style=\"background: radial-gradient(ellipse at 30% 50%, rgba(201,168,76,0.04) 0%, transparent 70%);\">\n <div class=\"p-8 sm:p-12 lg:p-16 relative z-10\">\n <div class=\"max-w-2xl\">\n <h2 class=\"text-2xl sm:text-3xl lg:text-4xl font-bold leading-[1.2] mb-3\" style=\"font-family: 'Playfair Display', serif;\">\n \u8BA2\u9605\u300A\u7F16\u8F91\u90E8\u300B<span class=\"italic\" style=\"color: var(--accent);\">\u5468\u62A5</span>\n </h2>\n <p class=\"text-[#a09b94] text-sm sm:text-base leading-relaxed mb-6 max-w-lg\">\n \u6BCF\u5468\u83B7\u53D6\u6700\u65B0\u6587\u7AE0\u4E0E\u6DF1\u5EA6\u62A5\u9053\u3002\u4E0D\u6703\u6709\u5783\u573E\u90AE\u4EF6\uFF0C\u53D6\u6D88\u8BA2\u9605\u968F\u65F6\u53EF\u4EE5\u3002\n </p>\n <form class=\"flex flex-col sm:flex-row gap-3 max-w-lg\" onsubmit=\"event.preventDefault();\">\n <div class=\"flex-1 relative\">\n <input type=\"email\" placeholder=\"\u8BF7\u8F93\u5165\u60A8\u7684\u90AE\u7BB1\u5730\u5740\" class=\"newsletter-input\">\n </div>\n <button type=\"submit\" class=\"px-6 py-3 rounded-full text-sm font-semibold uppercase tracking-wider transition-all duration-300 cursor-pointer flex items-center justify-center gap-2\" style=\"background: var(--accent); color: #0a0a0a;\" onmouseover=\"this.style.background='var(--accent-light)'\" onmouseout=\"this.style.background='var(--accent)'\">\n \u8BA2\u9605 <i class=\"fa-solid fa-arrow-right text-xs\"></i>\n </button>\n </form>\n </div>\n </div>\n \n <div class=\"absolute -bottom-20 -right-20 w-64 h-64 rounded-full\" style=\"background: radial-gradient(circle, rgba(201,168,76,0.06) 0%, transparent 70%);\"></div>\n </div>\n </div>\n </section>\n\n \n <footer class=\"border-t border-[#1e1e1e] py-10 lg:py-14\">\n <div class=\"max-w-7xl mx-auto px-6 lg:px-10\">\n <div class=\"grid sm:grid-cols-2 lg:grid-cols-4 gap-8 lg:gap-10 pb-10 border-b border-[#1e1e1e]\">\n \n <div class=\"sm:col-span-2 lg:col-span-1\">\n <a href=\"#\" class=\"flex items-center gap-2 mb-4\">\n <span class=\"text-2xl font-bold\" style=\"font-family: 'Playfair Display', serif; color: var(--accent);\">\u25d3</span>\n <span class=\"text-lg font-semibold tracking-wide\" style=\"font-family: 'Playfair Display', serif;\">\u7F16\u8F91\u90E8</span>\n </a>\n <p class=\"text-sm text-[#6b6660] leading-relaxed max-w-xs\">\n \u4E00\u4E2A\u5173\u4E8E\u6280\u672F\u3001\u8BBE\u8BA1\u4E0E\u521B\u65B0\u7684\u72EC\u7ACB\u5A92\u4F53\u3002\u6BCF\u5468\u63A2\u8BA8\u524D\u6CBF\u8BBD\u9898\u3002\n </p>\n </div>\n \n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-[#6b6660] mb-4\">\u5BFC\u822A</h4>\n <ul class=\"space-y-2.5\">\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u6587\u7AE0</a></li>\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u4E13\u9898</a></li>\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u5173\u4E8E\u6211\u4EEC</a></li>\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u8054\u7CFB\u6211\u4EEC</a></li>\n </ul>\n </div>\n \n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-[#6b6660] mb-4\">\u5206\u7C7B</h4>\n <ul class=\"space-y-2.5\">\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u6280\u672F</a></li>\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u8BBE\u8BA1</a></li>\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u521B\u4E1A</a></li>\n <li><a href=\"#\" class=\"text-sm text-[#a09b94] hover:text-[#c9a84c] transition-colors\">\u751F\u6D3B\u65B9\u5F0F</a></li>\n </ul>\n </div>\n \n <div>\n <h4 class=\"text-xs font-semibold uppercase tracking-widest text-[#6b6660] mb-4\">\u793E\u4EA4</h4>\n <div class=\"flex gap-3\">\n <a href=\"#\" class=\"w-10 h-10 rounded-full border border-[#2a2a2a] flex items-center justify-center text-[#6b6660] hover:text-[#c9a84c] hover:border-[#c9a84c] transition-all duration-300\"><i class=\"fa-brands fa-twitter\"></i></a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full border border-[#2a2a2a] flex items-center justify-center text-[#6b6660] hover:text-[#c9a84c] hover:border-[#c9a84c] transition-all duration-300\"><i class=\"fa-brands fa-github\"></i></a>\n <a href=\"#\" class=\"w-10 h-10 rounded-full border border-[#2a2a2a] flex items-center justify-center text-[#6b6660] hover:text-[#c9a84c] hover:border-[#c9a84c] transition-all duration-300\"><i class=\"fa-brands fa-dribbble\"></i></a>\n </div>\n </div>\n </div>\n <div class=\"pt-6 flex flex-col sm:flex-row items-center justify-between gap-3\">\n <span class=\"text-xs text-[#6b6660]\">\u00A9 2025 \u7F16\u8F91\u90E8. All rights reserved.</span>\n <div class=\"flex items-center gap-4 text-xs text-[#6b6660]\">\n <a href=\"#\" class=\"hover:text-[#c9a84c] transition-colors\">\u9690\u79C1\u653F\u7B56</a>\n <a href=\"#\" class=\"hover:text-[#c9a84c] transition-colors\">\u670D\u52A1\u6761\u6B3E</a>\n </div>\n </div>\n </div>\n </footer>\n\n <script>\n // Mobile menu toggle\n function toggleMenu() {\n const menu = document.getElementById('mobileMenu');\n const overlay = document.getElementById('menuOverlay');\n menu.classList.toggle('mobile-menu-open');\n overlay.classList.toggle('show');\n document.body.style.overflow = menu.classList.contains('mobile-menu-open') ? 'hidden' : '';\n }\n function closeMenu() {\n const menu = document.getElementById('mobileMenu');\n const overlay = document.getElementById('menuOverlay');\n menu.classList.remove('mobile-menu-open');\n overlay.classList.remove('show');\n document.body.style.overflow = '';\n }\n\n // Category pills interaction\n document.querySelectorAll('.cat-pill').forEach(pill => {\n pill.addEventListener('click', function() {\n document.querySelectorAll('.cat-pill').forEach(p => p.classList.remove('active'));\n this.classList.add('active');\n });\n });\n\n // Keyboard ESC close menu\n document.addEventListener('keydown', function(e) {\n if (e.key === 'Escape') closeMenu();\n });\n\n // Intersection Observer for re-triggering animations on scroll\n const observer = new IntersectionObserver((entries) => {\n entries.forEach(entry => {\n if (entry.isIntersecting) {\n entry.target.style.animationPlayState = 'running';\n }\n });\n }, { threshold: 0.1 });\n\n document.querySelectorAll('.animate-in').forEach(el => {\n // Set animation-play-state to paused initially if not in view\n observer.observe(el);\n });\n\n // Handle image errors with shimmer fallback\n document.querySelectorAll('img').forEach(img => {\n img.addEventListener('error', function() {\n this.style.display = 'none';\n if (this.parentElement) {\n this.parentElement.classList.add('img-shimmer');\n }\n });\n });\n\n console.log('\\u7F16\\u8F91\\u90E8 \\u00B7 \\u601D\\u8003\\u4E0E\\u8BB0\\u5F55');\n </script>\n</body>\n</html>"
},
"next": [
"添加搜索栏功能",
"置顶文章轮播",
"暗色/亮色切换",
"文章详情页",
"加载更多按钮"
],
"breakpoint": "none"
}
```

total_tokens

27687

summary

生成暗黑编辑风博客列表页。采用深色背景(#0a0a0a)搭配暖金点缀(#c9a84c)，Playfair Display标题字+DM Sans正文字体组合，营造高级杂志质感。包含导航栏、精选置顶文章（配办公桌场景图）、分类筛选标签、6篇博客网格卡片（悬停放大+光影动效）、订阅区、分页器及页脚。所有元素均带入场动画（stagger fade-up），响应式适配移动端。

uiParsing

关闭