# 27 款作品集版式 URL: https://canvaswp.com/zh-hans/templates/portfolio/ Updated: 2026-11-03 模板 网格与瀑布流布局。筛选与加载样式。以及配套的单个项目页面布局。 [打开在线展示](https://demos.canvaswp.com/classic/) [浏览演示站点](https://canvaswp.com/zh-hans/demos/) 更新于 2026年11月3日 - 网格 - 瀑布流 - 加载样式 - 单个项目 - 布局 ## 网格 5 此处的每个网格都是一个 Canvas Posts 区块，其“布局”设为“作品集”。“列数”决定每行放置多少个项目，“作品集间距”设置项目之间的间距，可设为无。单列版本会启用“交替分栏卡片”，使每个项目与其描述并排显示，图片每隔一张卡片左右互换。 - [1 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-1/) - [2 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-2/) - [3 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-3/) - [5 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-5/) - [6 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-6/) ## 瀑布流 6 同一区块，不同的 Grid Engine 设置。选择瀑布流模式后，卡片会保留各自的高度，并排成多列，无需遵守行线。卡片形状决定了节奏：可将每张图片裁剪为同一形状，或让每个项目保留自己的形状。混合版本还会将标题移至悬停遮罩内。 - [混合列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-mixed-masonry/) - [2 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-2-masonry/) - [3 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-3-masonry/) - [4 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-masonry/) - [5 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-5-masonry/) - [6 列 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-6-masonry/) ## 加载样式 5 这些设置决定访客如何浏览您的其他作品。“分页样式”提供客户端分页器和无限滚动等选项。“在页内打开项目”可在网格上方加载项目，无需离开当前页面；“项目打开方式”可在灯箱弹窗中显示项目。“筛选样式”可设置 Canvas Grid Filter 区块（分类按钮行）的各种样式，并可选择是否带随机排序按钮。 - [jQuery 分页 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-jpagination/) - [无限滚动 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-infinity-scroll/) - [页内 AJAX （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-ajax/) - [模态框内 AJAX （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-ajax-in-modal/) - [筛选样式 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-filter-styles/) ## 单个项目 5 项目页面的布局取自您在编辑项目时，通过“模板”设置选择的模板。这些模板涵盖四种媒体类型：大图、图库滑块、缩略图网格和视频。每种模板都可在任一侧或两侧添加侧边栏，也可采用全宽布局，或置于通栏主视觉之下。此处链接的页面只是该系列模板的部分示例。 - [Parallax Image （在新标签页中打开）](https://demos.canvaswp.com/classic/projects/portfolio-single-fullwidth/) - [滑块图库 （在新标签页中打开）](https://demos.canvaswp.com/classic/projects/portfolio-single-gallery-full/) - [HTML5 视频 （在新标签页中打开）](https://demos.canvaswp.com/classic/projects/portfolio-single-video-fullwidth-left-sidebar/) - [瀑布流缩略图 （在新标签页中打开）](https://demos.canvaswp.com/classic/projects/portfolio-single-thumbs-right-sidebar/) - [嵌入视频 （在新标签页中打开）](https://demos.canvaswp.com/classic/projects/portfolio-single-video-both-sidebar/) ## 布局 6 网格在页面中的位置。侧边栏版本会将同一区块放在主栏中，旁边配有侧边栏小工具，例如最新文章和快速联系表单。100% 宽度会让网格从边缘延伸到边缘，没有间距。将“视差”设为开启即可启用视差卡片，它会把每张图片变为随页面滚动而移动的背景层。 - [默认 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-nomargin/) - [右侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-1-alt-right-sidebar/) - [左侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-3-left-sidebar/) - [双侧边栏 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-2-both-sidebar/) - [100% 宽度 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-fullwidth-notitle/) - [视差 （在新标签页中打开）](https://demos.canvaswp.com/classic/portfolio-parallax/) 每个链接都会打开线上展示站点中的真实页面，这些页面由您安装的同一套主题和区块呈现。 在您自己的站点上 ## 用一个区块即可构建以下任一内容 作品集的展示内容供您浏览。展示中的区块和模板随 Canvas 一同提供，因此上方的每个布局都可以在您的站点上重建。 ### 项目即记录 作品存放在作品集内容类型中，每个项目对应一条记录，分类由 Grid Filter 读取，用于生成其筛选按钮。添加项目后，站点上所有列出该分类的网格都会自动收录该项目。页面本身无需编辑。 ### 网格可通过设置调整 插入 Canvas Posts 区块，选择 Portfolio 布局，然后依照本页所示的名称，逐一设置“Layout”和“Pagination”面板。项目页面本身则由 Canvas 添加 8 个作品集区块，从标题、元信息列表到相关项目，一应俱全。 ### 或导入现成的演示站点 88 个演示站点中有 21 个在导入时已包含作品集项目，版式分别适用于代理机构、摄影师或插画师。选择其中一个开始，您只需编辑项目内容，无需修改版式。 - [作品集演示站点对比](https://canvaswp.com/zh-hans/wordpress-themes/portfolio/) ### 每个套餐，每种布局 作品集没有单独的附加组件。网格、筛选器、加载样式和单项目模板在年付与终身套餐中完全一致，因为每个套餐都包含全部区块。 - [对比套餐](https://canvaswp.com/zh-hans/pricing/) 选择 ## 哪种作品集版式适合您的作品？ 从图片入手，因为布局的存在就是为了展示它们。以同一方向拍摄的照片适合放在固定网格中，各行对齐。竖版与横版作品混合时，则适合使用瀑布流布局，让每张卡片都能保持其图片的形状。 案例研究的呈现方式有所不同。当每个项目都需要一段背景说明时，单列分栏卡片网格能为其留出足够空间；对于希望将联系方式与作品并列展示的代理机构，侧边栏版本更为合适。 别忘了统计项目数量。作品较少时，一屏即可展示，上方配以筛选器。项目超过几行后，请选择一种加载方式，以保持页面打开迅速：分页器适合希望清楚了解自己所在位置的访客，无限滚动适合喜欢随意浏览的访客。对于单个项目，请先根据其媒体类型选择模板：拍摄作品用图库滑块，影片作品用视频，最后再决定是否使用侧边栏。 更多模板 ## 模板库中的其余内容 - [页面模板 13](https://canvaswp.com/zh-hans/templates/page-templates/) - [短代码与元素 57](https://canvaswp.com/zh-hans/templates/shortcodes/) - [博客布局 35](https://canvaswp.com/zh-hans/templates/blog/) - [商店布局 9](https://canvaswp.com/zh-hans/templates/shop/)