# 35 种博客布局 URL: https://canvaswp.com/zh-hans/templates/blog/ Updated: 2026-11-03 模板 从经典的侧边栏列表到杂志式网格，各类归档布局一应俱全，并配有相匹配的单篇文章布局。 [打开在线展示](https://demos.canvaswp.com/classic/) [浏览演示站点](https://canvaswp.com/zh-hans/demos/) 更新于 2026年11月3日 - 默认 - 时间线 - 瀑布流 - 网格 - Small Thumbs - 项目拆分 - 编辑风格 - 单篇文章 ## 默认 4 经典的归档样式：一篇文章接一篇文章，每篇文章的图片位于标题上方。它是将布局设为“标准”的 Blog Loop 区块，各个版本的区别仅在于侧边栏的位置（如果有侧边栏）。 - [右侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/) - [左侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-left-sidebar/) - [双侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-both-sidebar/) - [全宽 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-full-width/) ## 时间线 3 文章挂在贯穿页面的一条线上，并以日期标注。Blog Loop 提供两种时间线布局。时间线（网格）在全宽页面中将文章分布在竖线两侧，时间线（列表）则将文章排成单列，侧边栏版本使用的就是这种布局。 - [右侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-timeline-right-sidebar/) - [左侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-timeline-left-sidebar/) - [全宽 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-timeline/) ## 瀑布流 4 卡片保持各自的自然高度并紧密排列成列，因此短文章不会在长文章旁边留下空白。这是 Blog Loop 的瀑布流布局，支持从两列到占满屏幕宽度的多种排列。 - [4 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-masonry/) - [3 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-masonry-3/) - [2 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-masonry-2/) - [100% 宽度 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-masonry-full/) ## 网格 3 卡片等高、整齐排列，由网格布局决定。若每篇文章都带有醒目的特色图片，建议选择此布局，因为图片是对齐各行的关键。 - [4 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid/) - [3 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid-3/) - [2 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid-2/) ## 小缩略图 5 标题和摘要旁边的小图片，让一屏能容纳更多文章。Blog Loop 的小型布局会呈现所有这些元素；各个版本会移动侧边栏或取消侧边栏，另一个版本则改变列表的节奏。 - [左侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-small-left-sidebar/) - [右侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-small/) - [双侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-small-both-sidebar/) - [全宽 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-small-full-width/) - [备用布局 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-small-alt/) ## 项目拆分 2 拆分长归档页有两种方式，都可在 Blog Loop 的分页面板中选择：编号页码，或无限滚动（读者滚动到底部时加载下一页）。同一面板还提供“较早”和“较新”翻页器、“加载更多”按钮以及分批加载功能。 - [Pagination （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-grid/) - [无限滚动 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-masonry/) ## 编辑风格 6 用于出版物的首页。每个首页都组合了多个 Blog Loop 区块，并在其中放置 Post Image、Post Terms 和 Post Title，因此头条报道、卡片列表和标题列表可以共享同一页面。“加载更多”每次显示几篇文章，只有在已显示的文章用完后才向服务器请求更多内容。 - [杂志 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-magazine/) - [混合信息流 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-mixed-feed/) - [叠加卡片 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-cards-overlay/) - [分屏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-list-split/) - [加载更多 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-load-more/) - [带筛选 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog-with-filter/) ## 单篇 8 文章的布局取决于模板，编辑时可在“模板”设置中选择。除带侧边栏的标准文章外，主题还提供小图版和分栏媒体版、全宽文章，以及三种编辑型布局：其中一种带阅读进度条，一种以沉浸式主视觉开头，一种位于页面标题下方。 - [默认布局 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/02/10/blog-single/) - [左侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/02/24/blog-single-left-sidebar/) - [全宽 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/02/16/blog-single-full/) - [小图片 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/03/08/blog-single-small/) - [分栏布局 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2021/04/05/blog-single-split-right-sidebar/) - [编辑风格 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/03/12/the-slow-web/) - [编辑沉浸式 （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/02/24/night-train-to-trieste/) - [编辑风格（带标题） （在新标签页中打开）](https://demos.canvaswp.com/classic/blog/2026/02/11/jane-doe-on-building-type/) 每个链接都会打开线上展示站点中的真实页面，这些页面由您安装的同一套主题和区块呈现。 在您自己的站点上 ## 此处的每个归档页只需一个可配置的区块 这些页面上的内容都不是必须全盘接受的固定设计。每个归档都是一个可自由设置布局的区块，每张卡片则是您可以排列的若干小型区块组合。 ### 选择布局 插入 Blog Loop 区块，然后从标准、网格、小型、小型备选、三种列表样式、瀑布流以及两种时间线中选择。分页样式在单独的面板中设置，因此任何布局都可以分页、滚动或分批加载。 ### 编排卡片 循环内是构成每张卡片的文章区块：标准布局中包含 Post Media、Post Title、Post Meta 和 Post Excerpt。如需制作标题列表，可删除 Post Excerpt；如需显示分类标签，可添加 Post Terms。Canvas 共有 31 个文章区块。 ### 或直接插入一个模式 模式插入器提供可直接编辑的博客区段，其中包括网格、列表、瀑布流和时间线。模式以普通区块的形式插入，即本页所述的同一种区块。 ### 或导入整个博客 88 个演示网站中有 57 个在导入时即包含博客文章及其分类，而“博客”和“现代博客”演示则围绕内容发布而打造。 - [浏览演示站点目录](https://canvaswp.com/zh-hans/demos/) 选择 ## 哪种博客布局适合您的发布频率 选择之前，先估算一下您的发帖频率。每月发布一次的企业，其归档内容较少，而带侧边栏的标准布局能很好地展示这些内容，又不会显得单薄。 每天更新的媒体网站需要高信息密度。小尺寸缩略图、网格布局或编辑风格的首页，都能让更多故事同时呈现在视野中，而编辑风格页面还能像编辑部那样，为头条故事留出足够的空间。无限滚动适合喜欢随意浏览的读者，分页则适合那些想回来找回之前看过内容的读者。 瀑布流适用于图片形状各异的文章。时间线适用于按日期顺序阅读的内容，例如更新日志、项目日记或俱乐部赛季记录。然后选择匹配的单篇文章模板：长文适合使用阅读进度条，图片故事则适合使用沉浸式 Hero 区块。 更多模板 ## 模板库中的其余内容 - [页面模板 13](https://canvaswp.com/zh-hans/templates/page-templates/) - [短代码与元素 57](https://canvaswp.com/zh-hans/templates/shortcodes/) - [作品集布局 27](https://canvaswp.com/zh-hans/templates/portfolio/) - [商店布局 9](https://canvaswp.com/zh-hans/templates/shop/)