WordPress Twenty Twenty-Five 主题:终极实操指南
-
WordPress Twenty Twenty-Five 主题:终极实操指南
目录- 1. 主题架构总览
- functions.php:仅 167 行
- 适用场景
- 2. 设计系统详解
- 2.1 颜色调色板(8 色系统)
- 2.2 字体系统
- 2.3 字号系统(5 级流式字号)
- 2.4 间距系统(7 级响应式间距)
- 2.5 布局尺寸
- 3. 模板体系
- 3.1 内置模板一览(8 个)
- 3.2 统一结构模式
- 3.3 模板管理操作
- 3.4 博客首页布局变体
- 4. 模板部件(Template Parts)
- 4.1 页头选择(3 + 额外变体)
- 4.2 页脚选择(3 + 额外变体)
- 4.3 侧边栏
- 4.4 操作方法
- 5. 样式变体系统
- 5.1 完整样式变体(9 种,含默认)
- 5.2 可独立使用的子层(核心亮点:混搭机制)
- 5.3 段落样式(Section Styles)
- 5.4 区块样式变体
- 6. 区块模式(Patterns)
- 6.1 整页级模式(一键生成完整页面)
- 6.2 组件级模式分类总览
- 6.3 英雄区 + 横幅 + CTA 组件速查
- 6.4 新闻博客首页模式深度解析
- 7. 菜单管理
- 默认菜单结构
- 菜单操作速查
- 8. 实操指南:快速上手
- 8.1 一键切换网站风格
- 8.2 切换博客风格
- 8.3 更换页头/页脚
- 8.4 使用 Section 样式创建视觉层次
- 8.5 构建着陆页(完整流程)
- 8.6 自定义颜色的正确方式
- 8.7 在博客页面显示摘要而非全文
- 8.8 使用 Openverse 添加免费图片
- 9. 进阶自定义
- 9.1 创建子主题
- 9.2 启用图片博客模板
- 9.3 制作粘性头部(Sticky Header)
- 9.4 改善深色模式下日历区块的易读性
- 9.5 为自定义文章类型(CPT)创建模板
- 9.6 使用竖排文字(writing-mode)
- 10. 无障碍性(Accessibility)
- 基础特性
- 颜色对比度
- 翻译支持
- 11. 技术亮点与设计哲学
- 11.1 现代 CSS 特性
- 11.2 模式委托模式(Pattern Delegation)
- 11.3 可组合设计系统
- 12. 注意事项与局限
适用环境: WordPress 6.7+|PHP 7.2+ 主题类型: 全站编辑(FSE, Full Site Editing)区块主题 活跃安装量: 700,000+(截至 2025 年) 设计师: Beatriz Fialho(同 Twenty Twenty-Four 设计师)
1. 主题架构总览
Twenty Twenty-Five 完全基于区块(FSE),几乎不依赖传统 PHP 模板逻辑,通过 四层架构 实现一切:
层级 文件 作用 🎯 核心配置 theme.json定义颜色、字体、间距、布局等全部设计令牌(Design Tokens) 📄 模板 templates/*.html定义页面级布局骨架(首页、文章、存档、404 等) 🧩 模板部件 parts/*.html可复用的页面区域(页头、页脚、侧边栏) 🎨 区块模式 patterns/*.php预构建的内容布局组件(英雄区、CTA、定价表等) functions.php:仅 167 行
在传统主题中不可想象的精简程度。它只做 5 件事:
- ✅ 注册 9 种文章格式(aside、audio、chat、gallery、image、link、quote、status、video)
- ✅ 注册编辑器样式
- ✅ 注册一个"对号列表"区块样式
- ✅ 注册两个模式分类(Pages 和 Post formats)
- ✅ 注册一个动态区块绑定(自动显示文章格式名称)
适用场景
该主题专为多种用途而设计:
- 📝 博客 — 个人博客、新闻杂志
- 🖼️ 作品集 — 摄影师、设计师展示
- 📰 杂志网站 — 多栏新闻布局
- 🏢 商业网站 — 企业官网、着陆页
2. 设计系统详解
2.1 颜色调色板(8 色系统)
主题禁用了 WordPress 默认调色板/渐变/双色调,使用自定义的 8 色体系:
色槽 名称 默认值 用途说明 base基底色 #FFFFFF纯白页面背景 contrast对比色 #111111近黑正文文字、按钮背景 accent-1强调色 1 #FFEE58明黄Section-3 背景 accent-2强调色 2 #F6CFF4浅粉紫Section-2 背景 accent-3强调色 3 #503AA8深紫Section-4 背景 accent-4强调色 4 #686868中灰日期、作者等辅助文字 accent-5强调色 5 #FBFAF3奶白Section-1 背景、代码块背景 accent-6强调色 6 color-mix(...)分割线、边框(动态半透明) 💡 关键点:
accent-6是动态的——它会根据当前文字颜色自动计算 20% 透明度(color-mix(in srgb, currentColor 20%, transparent)),在暗色和亮色背景上都能正确显示。🖱️ Gutenberg 操作: 选中任何区块 → 右侧面板「颜色」→ 即可看到这 8 种颜色。修改
base和contrast会改变全站底色和文字色;修改accent-1到accent-5会同时改变所有使用该颜色的 Section 样式。2.2 字体系统
默认激活的 2 个字体家族:
字体 类型 字重范围 用途 Manrope 几何无衬线体 200–800(可变字体) 全站默认字体 Fira Code 等宽字体 300–700(可变字体) 代码块 内置但未默认激活的 7 个字体家族(通过样式变体激活):
字体 风格特点 Beiruti 阿拉伯风格无衬线 Literata 衬线体,72pt 光学尺寸 Vollkorn 经典衬线体 Fira Sans 无衬线体 Platypi 个性衬线体 Ysabeau Office 优雅无衬线 Roboto Slab 粗衬线体 💡 添加更多字体: 外观 → 编辑器 → 样式 → 排版 → 管理字体 → 安装字体 → 从 Google Fonts 库中选择安装。
2.3 字号系统(5 级流式字号)
级别 大小 流式范围 典型用途 Small 0.875rem固定 日期、标签、辅助信息 Medium 1rem1rem → 1.125rem正文、导航 Large 1.38rem1.125rem → 1.375rem默认正文大小、h3 X-Large 1.75rem1.75rem → 2remh2 XX-Large 2.15rem2.15rem → 3remh1 ⚠️ 注意: 主题默认正文用的是 Large 号字,字重仅 300(极细),行高 1.4。这创造了轻盈通透的阅读体验,但在某些屏幕上可能偏细。
2.4 间距系统(7 级响应式间距)
级别 名称 大小 20 Tiny 10px30 X-Small 20px40 Small 30px50 Regular clamp(30px, 5vw, 50px)60 Large clamp(30px, 7vw, 70px)70 X-Large clamp(50px, 7vw, 90px)80 XX-Large clamp(70px, 10vw, 140px)💡 关于
clamp(): 较大间距(50–80)使用clamp()函数,会在手机上自动缩小、大屏上自动放大,无需额外媒体查询。2.5 布局尺寸
属性 值 说明 内容宽度 645px偏窄,优化阅读体验 宽幅宽度 1340px全幅区块的最大限制 3. 模板体系
3.1 内置模板一览(8 个)
模板 文件 功能 博客首页 home.html默认文章列表页 通用索引 index.html终极回退模板 单篇文章 single.html文章详情(含特色图片、作者、评论) 单页 page.html页面(特色图片 + 标题 + 内容) 无标题页面 page-no-title.html无标题无特色图片(适合落地页) 归档页 archive.html分类/标签/作者归档 搜索页 search.html搜索结果(含搜索框 + 文章列表) 404 页 404.html两栏布局:左图右文 + 搜索框 3.2 统一结构模式
所有模板遵循相同的**"三明治"结构**:
┌─────────────────────────────┐ │ 页头模板部件(Header) │ ├─────────────────────────────┤ │ <main> │ │ ├─ constrained 布局 │ │ ├─ margin-top: spacing-60 │ │ └─ 具体内容 │ ├─────────────────────────────┤ │ 页脚模板部件(Footer) │ └─────────────────────────────┘3.3 模板管理操作
操作 方法 查看/编辑 外观 → 编辑器 → 模板 → 点击任一模板 添加模板 点击"添加新模板"按钮,从列表中选择类型 删除模板 仅可删除自创模板:点击模板旁三点菜单 → 删除 重置模板 编辑模板时 → 设置侧边栏 → 模板三点菜单 → 重置 更换设计 编辑模板 → 设置侧边栏 → "设计"选项卡 → 选择替代方案 3.4 博客首页布局变体
"博客首页"模板提供 6 种替代布局,可直接切换:
布局 特点 注意事项 默认 标准垂直列表,特色图片 3:2 — 新闻博客主页 杂志式三栏(25%/50%/25%),100px 大标题页头 — 图片博客主页 3 列网格,方形图片 1:1,极简风格 ⚠️ 必须为文章设置特色图片 带特色文章网格的新闻博客 网格 + 精选文章突出显示 — 纯文本博客 纯文字列表,无图片,带分割线 — 带侧边栏新闻博客 垂直侧边栏导航 + 主内容区 — 🖱️ 切换方法: 外观 → 编辑器 → 模板 → 选择"博客主页" → 设置侧边栏 → "设计"选项卡 → 选择替代布局。
4. 模板部件(Template Parts)
共 7 个模板部件:3 个页头 + 3 个页脚 + 1 个侧边栏。
4.1 页头选择(3 + 额外变体)
页头 特点 Header(默认) 站点标题在左,导航在右,简洁水平布局 Header Large Title 站点标题 100px 超大字号在左,导航垂直堆叠在右,底部分割线 Vertical Header 粘性定位、100vh 高度、站点标题竖排显示、导航始终为汉堡菜单 💡 更多选择: 除上述三种外,在模板编辑器中还可选择居中头部、带栏目头部、透明背景头部、深色背景简单头部等额外变体。
4.2 页脚选择(3 + 额外变体)
页脚 特点 Footer(默认) 站点 Logo + 标题 + 标语 + 两列导航链接 + 底部版权信息 Footer Columns 大号标题 + 标语在左,两个带标题的导航列在右 Footer Newsletter 超大标题"Stories." + 订阅 CTA 按钮 + 版权信息,使用 is-style-section-3着色💡 额外选择: 居中页脚、带社交链接页脚等。
4.3 侧边栏
显示"Other Posts"标题 + 4 篇最新文章(标题 + 日期),仅在特定模板中使用。
4.4 操作方法
操作 方法 查看全部 外观 → 编辑器 → 模板部件 切换页头/页脚 编辑模板 → 选中页头/页脚区块 → 工具栏"替换" 或 设置侧边栏"设计"选项卡 重置 从样板列表中选择 → 三点菜单 → 重置 5. 样式变体系统
🌟 这是 Twenty Twenty-Five 最强大的功能! 实现了一个四层可组合的设计系统。
5.1 完整样式变体(9 种,含默认)
变体 基底色 对比色 标题字体 正文字体 情绪关键词 Default(默认) #FFFFFF纯白#111111近黑Manrope Manrope 经典黑白 Evening(夜晚) #1B1B1B暗#F0F0F0亮灰Manrope Manrope 暗色、沉稳 Noon(正午) #F8F7F5暖白#191919近黑Beiruti Literata 温暖、编辑风 Dusk(黄昏) #E2E2E2浅灰#3B3B3B深灰Vollkorn Fira Code 技术/文学 Afternoon(午后) #DAE7BD鼠尾草绿#516028橄榄Platypi Ysabeau Office 自然、清新 Twilight(暮光) #131313极暗#FFFFFF白Roboto Slab Manrope 大胆、高对比 Morning(清晨) #DFDCD7暖灰#191919近黑Literata Ysabeau Office 柔和、沉思 Sunrise(日出) #330616深酒红#FFFFFF白Platypi Literata 浪漫、戏剧化 Midnight(午夜) #4433A6深靛紫#79F3B1薄荷绿Literata Fira Sans 超现实、赛博 ⭐ 特别注意: Midnight 是唯一定义了双色调图像滤镜的变体——所有图片会被重新着色为靛紫 + 薄荷绿,创造统一的视觉语言。
🖱️ 一键切换: 外观 → 编辑器 → 右上角样式图标(半黑半白的圆形)→ "浏览样式" → 预览并选择。
5.2 可独立使用的子层(核心亮点:混搭机制)
主题将每个完整变体拆解为可独立使用的模块,实现自由混搭:
🎨 仅颜色变体(8 个) — 只改颜色,不改字体
- 文件位置:
styles/colors/01-evening.json到08-midnight.json - 用途示例:想用 Midnight 的颜色但保留默认 Manrope 字体
🔤 仅字体预设(7 个) — 只改字体,不改颜色
- 文件位置:
styles/typography/typography-preset-1.json到7.json
完整对应关系表:
完整变体 颜色层文件 字体层文件 Evening colors/01-evening—(默认字体) Noon colors/02-noonpreset-1(Beiruti + Literata)Dusk colors/03-duskpreset-2(Vollkorn + Fira Code)Afternoon colors/04-afternoonpreset-3(Platypi + Ysabeau Office)Twilight colors/05-twilightpreset-4(Roboto Slab + Manrope)Morning colors/06-morningpreset-5(Literata + Ysabeau Office)Sunrise colors/07-sunrisepreset-6(Platypi + Literata)Midnight colors/08-midnightpreset-7(Literata + Fira Sans)💡 可组合公式: 颜色 × 字体 × 区域样式 × 区块样式 = 几乎无限的视觉组合。例如:Midnight 的颜色 + Afternoon 的字体 + Section-3 的区域样式 = 主题作者从未预想过的全新设计。
5.3 段落样式(Section Styles)
5 种区域级配色方案,可应用于任何 Group、Columns 或 Column 区块:
样式 背景 → 文字 默认效果 适用场景 Section-1 accent-5→contrast奶白背景 微妙区分区域 Section-2 accent-2→contrast粉紫背景 醒目重点区域 Section-3 accent-1→contrast明黄背景 高注意力区域(CTA 等) Section-4 accent-3→accent-2深紫背景 + 粉紫文字 深色区域 Section-5 contrast→base黑底白字(反转配色) 对比强烈的区域 🖱️ 操作方法: 选中 Group 区块 → 右侧面板底部"样式" → 选择 section-1 到 section-5。这些区域样式会自动确保内部链接、日期、分割线等元素颜色正确。
5.4 区块样式变体
样式 适用区块 效果 Display 标题、段落 超大流式字号( 2.2rem → 3.5rem),用于英雄标题Subtitle 标题、段落 中大字号( 1.5rem → 1.75rem),用于副标题Annotation 标题、段落 小号 + 圆角边框 + 紧凑内边距 = 药丸标签形态 Post Terms-1 文章分类/标签 药丸形带边框的分类标签 Checkmark 列表 列表项标记变为 ✓ 对号 6. 区块模式(Patterns)
共计 70 个区块样板,涵盖完整页面到细粒度组件。
6.1 整页级模式(一键生成完整页面)
模式名称 适用场景 核心特点 Business Home 企业首页 英雄区 + 服务介绍 + 团队照片 + CTA Landing Book 图书推广页 大型封面图 + 购买链接 + 摘要 Landing Event 活动着陆页 日程表 + 场地 + RSVP Landing Podcast 播客着陆页 全幅封面 + 最新剧集 Portfolio Home 作品集首页 图片网格 + 简介 Shop Home 电商首页 产品网格 + CTA Coming Soon 即将上线页 全屏背景 + 倒计时文案 CV / Bio 简历页 个人信息 + 经历 Link in Bio(3 种) 链接树页面 类似 Linktree 的链接页 🖱️ 操作方法: 新建页面 → 点击「+」→ 选择「模式」标签 → 找到「Pages」分类 → 选择任意整页模式,一键填充整个页面!
6.2 组件级模式分类总览
分类 数量 包含内容 关于(About) 7 个人/团队介绍 横幅(Banners) 19 英雄区、活动、书籍介绍等 号召性用语(CTA) 13 订阅、定价、活动 RSVP 等 联系(Contact) 3 联系表单/信息 特色(Featured) 16 精选内容展示 页脚(Footers) 5 各类页脚变体 画廊(Gallery) 1 图片画廊 头部(Headers) 5 各类页头变体 媒体(Media) 2 媒体展示 页面(Pages) 11 全页样板 文章形式(Post Formats) 3 音频、链接等 文章(Posts) 4 文章列表/展示 服务(Services) 3 3 列服务介绍 推荐语(Testimonials) 3 2 列 / 6 列 / 大型推荐语 文本(Text) 3 评论、文章导航、FAQ 未分类 3 其他 6.3 英雄区 + 横幅 + CTA 组件速查
🦸 英雄区(Hero)— 4 种:
- 全幅图片英雄区
- 图书封面英雄区
- 播客英雄区
- 重叠式封面
🏷️ 横幅(Banner)— 5 种:
- 大标题封面
- 介绍 + 图片
- 海报式
- 关于书籍
- 描述 + 图片网格
📢 行动号召(CTA)— 6 种:
- 居中标题
- 事件列表
- Newsletter 订阅
- 搜索区
- 产品网格链接
- 图书购买链接
💰 定价表: 2 列 / 3 列
6.4 新闻博客首页模式深度解析
template-home-news-blog是最复杂的模式之一,采用杂志式布局:┌──────────────────────────────────────────┐ │ 左列 25% │ 中列 50% │ 右列 25% │ │ 第1篇 + 第4篇 │ 第2篇(主角) │ 第3篇+第5篇│ │ 3:2 图片 │ 4:3 图片 │ 3:2 图片 │ │ 大号标题+分类 │ h1+分类+摘要 │ 大号标题 │ ├──────────────────────────────────────────┤ │ 中部区域:2 列,3:2 图片 │ │ x-large 标题 + 分类 │ ├──────────────────────────────────────────┤ │ 底部区域:3 列网格,4:3 图片 │ │ large 标题 + 分类 + 分页器 │ └──────────────────────────────────────────┘💡 技术亮点: 使用多个独立的
wp:query区块并通过offset参数错开——不同位置显示不同文章,且每个查询区块可独立调整参数。7. 菜单管理
默认菜单结构
菜单 位置 默认状态 头部菜单 Header 仅包含示例页面(Sample Page) 页脚菜单 ×2 Footer 包含一系列空的自定义链接(无目标地址) ⚠️ 首要任务: 安装后请立即编辑或删除页脚的空链接占位符!
菜单操作速查
操作 步骤 编辑菜单项 点击项目 → 工具栏"链接"符号 → "编辑链接"(铅笔图标)→ 修改文本/地址 → 保存 删除菜单项 点击项目 → 工具栏三点"选项"菜单 → 滚动到底部 → 删除 添加菜单项 选中父级导航区块 → 点击"+"按钮 自动添加新页面 使用"页面列表(Page List)"作为菜单,新页面会自动出现 8. 实操指南:快速上手
8.1 一键切换网站风格
- 进入 外观 → 编辑器
- 点击右上角样式图标(🎨 半圆形)
- 选择**「浏览样式」**
- 预览并选择 9 种完整样式变体之一
- 也可以分别选择颜色和字体进行混搭
8.2 切换博客风格
- 进入 外观 → 编辑器 → 模板
- 选择要修改的模板(如 Home 或 Single)
- 点击编辑,然后可以:
- 在设置侧边栏"设计"选项卡中选择替代布局
- 或手动替换整个模板内容
8.3 更换页头/页脚
- 编辑任意模板
- 点击页头/页脚的模板部件区块
- 在工具栏中选择替换,或在设置侧边栏"设计"选项卡中选择
- 从多种页头/页脚中选择
8.4 使用 Section 样式创建视觉层次
- 插入一个 Group 区块
- 在右侧面板选择样式 → 选择 section-1 到 section-5
- 整个区域(包括内部所有区块)会自动应用对应的背景/文字配色
- 在一个页面中交替使用不同 section 样式来创建视觉节奏
8.5 构建着陆页(完整流程)
步骤 1:新建页面 步骤 2:页面模板选择 → "无标题页面(Page No Title)"(右侧面板 → 模板) 步骤 3:从模式库中依次插入组件: ├── 🦸 一个 Hero 模式 → 开场 ├── 🔧 一个 Services 模式 → 介绍服务 ├── ⭐ 一个 Testimonials 模式 → 展示推荐 ├── 📢 一个 CTA 模式 → 行动号召 └── 💰 一个 Pricing 模式 → 展示价格 步骤 4:每个组件之间用 Section 样式交替着色8.6 自定义颜色的正确方式
- 进入 外观 → 编辑器 → 样式 → 颜色
- 你会看到 8 个颜色槽位
- 修改
base和contrast→ 改变全站底色和文字色 - 修改
accent-1到accent-5→ 同时改变所有使用该颜色的 Section 样式 accent-6建议保持为半透明——它自动用于分割线和边框
8.7 在博客页面显示摘要而非全文
默认情况下,博客主页显示全文。改为摘要:
- 在文档概览中找到**"内容(Content)"区块**
- 在其下方添加"摘要(Excerpt)"区块
- 删除"内容"区块
8.8 使用 Openverse 添加免费图片
WordPress 6.7 集成了 Openverse 媒体库:
- 插入图片时,选择 媒体 → Openverse
- 搜索关键词
- 插入免费的版权图片(通常为 CC0 协议)
9. 进阶自定义
9.1 创建子主题
对于区块主题,创建子主题的需求不如经典主题那么强烈,但如果需要:
- 安装 Create Block Theme 插件
- 转到 外观 → Create Block Theme
- 选择"创建子主题(Create a Child)"
- 填写信息并创建
9.2 启用图片博客模板
- 外观 → 编辑站点 → 模板
- 选择"博客主页"→ 设置侧边栏"设计"选项卡 → 选择"图片博客主页"
- 对"单篇文章"模板重复上述步骤,选择对应图片博客单页设计
- ⚠️ 务必为每篇文章设置特色图片!
9.3 制作粘性头部(Sticky Header)
- 打开模板(如博客主页)
- 选中头部 → 将其"分组(Group)"
- 在分组设置中 → 关闭"内部区块使用内容宽度"
- 在"位置(Position)"选项中 → 选择"粘性(Sticky)"
- 在"样式"选项卡中 → 为分组设置一个实色背景(防止滚动时透明重叠)
9.4 改善深色模式下日历区块的易读性
在某些深色样式中,日历区块文字对比度可能不够:
- 在样式编辑器中 → 点击"修订"图标旁三点菜单 → 选择**"额外 CSS"**
- 添加以下代码:
.wp-block-calendar table:where(:not(.has-text-color)) { color: #fff; }- 如果表头对比度仍有问题 → 在"区块样式"中选择日历区块 → 手动设置文本颜色为深色、链接颜色为浅色
9.5 为自定义文章类型(CPT)创建模板
如果使用插件(如 ACF)创建了自定义文章类型(例如"电影 Movie"):
- 在模板视图中点击"添加新模板"
- 选择"单项:电影(Single item: Movie)"
- 自定义布局以显示自定义字段(如年份、评分等)
9.6 使用竖排文字(writing-mode)
主题在
theme.json中启用了writingMode: true,可以对任何文字区块设置竖排显示。💡 这在 Vertical Header 中已被使用(站点标题使用
vertical-rl模式)。10. 无障碍性(Accessibility)
基础特性
特性 状态 跳过链接(Skip Link) ✅ 头部包含 正文链接下划线 ✅ 有(导航链接无) 键盘焦点样式 ✅ 黑色轮廓 地标区域划分 ✅ 已划分 导航 aria-label ✅ 可在区块设置 > 高级 > 菜单名称中设置 颜色对比度
样式变体 AA 标准 AAA 标准 备注 Default(默认) ✅ 通过 ✅ 通过 最安全选择 其他变体 ⚠️ 部分场景 ⚠️ 部分场景 深色变体在日历等区块上可能对比度不足 ⚠️ 重要提示: 只有默认样式变体必须符合"无障碍就绪(accessibility-ready)"标准。如果不确定,使用默认样式最为稳妥。
翻译支持
Twenty Twenty-Five 目前有 26 种翻译版本,包括法语、德语、西班牙语、意大利语、波斯语和简体中文。
11. 技术亮点与设计哲学
11.1 现代 CSS 特性
特性 应用场景 color-mix()按钮悬停效果(85% 对比色 + 透明)和 accent-6 动态色 clamp()响应式间距和字号,无需媒体查询 text-wrap: pretty自动减少标题中的"寡行"和"孤字" CSS 可变字体 所有字体均为单文件可变字体,大幅减少请求数 11.2 模式委托模式(Pattern Delegation)
所有模板部件的 HTML 文件只有一行——实际内容委托给 PHP 模式文件。好处:
- ✅ 所有文字均可通过
esc_html_e()进行国际化翻译 - ✅ 可以使用 PHP 动态表达式
- ✅ 保持模板系统和实际标记的清晰分离
11.3 可组合设计系统
最优雅的部分是四层可组合:
颜色(8种)× 字体(7种)× 区域样式(5种)× 区块样式(5种) = 几乎无限的视觉组合12. 注意事项与局限
项目 说明 建议 ⚠️ 内容宽度较窄 645px,适合阅读,不适合大量图片/表格 频繁使用宽幅对齐 ⚠️ 默认字重极轻 300,在某些屏幕上可能偏细 在编辑器中测试实际显示效果 ⚠️ 模式中的图片 26+ 张 CC0 图片仅为占位演示 必须替换为你自己的内容 ⚠️ 导航链接 模式中的导航链接均指向 #需手动配置实际链接 ⚠️ 页脚空链接 默认页脚包含空的自定义链接 安装后立即编辑或删除 ⚠️ 自定义模板 仅一个自定义模板(Page No Title) 需更多模板则创建子主题或在编辑器中手动创建 ⚠️ 深色变体对比度 部分深色变体在日历等区块上对比度可能不足 使用额外 CSS 修复,或选用默认变体 小结: Twenty Twenty-Five 是迄今为止最好的默认全站编辑(FSE)主题。它通过四层可组合设计系统(颜色 × 字体 × 区域样式 × 区块样式)实现了几乎无限的视觉组合可能;70 个区块样板覆盖了从企业官网到个人博客的所有常见场景;26 种语言翻译让它非常适合多语言网站。无论你是博客作者、设计师还是企业用户,这个主题都能以最少的代码提供最大的灵活性。
歡迎留言回复交流。
Log in to reply.