ZBlogCMS 怎么自定义网站首页布局

学完这篇，你能自己动手改 ZBlog 网站的首页版式——不管只是想调一下侧栏顺序，还是要把文章列表重排成图文卡片流，都能照着做下来。

ZBlogPHP 的首页就是主题模板里的一个文件，改布局的本质就是改这个文件的 HTML 结构 + CSS。下面按从简单到深入的顺序讲。

第一步：先确认你的首页是哪种模式

ZBlog 的首页有两种可能：一种是直接输出文章列表（默认），另一种是把某个独立页面设成静态首页。这两种模式下，你该改的文件完全不同，所以先确认。

登录后台 → 左侧菜单「网站设置」→「静态首页」（部分 1.7.x 版本显示为「首页设置」）。如果这里启用了某个页面作为首页，那首页内容由那个页面决定，改模板是没用的；关掉它，首页才会走文章列表模板。

注意：不要在没备份的情况下直接关静态首页，记下当前选的是哪个页面，方便随时切回来。

第二步：用后台可视化入口先做能做的事

如果你的需求只是侧栏模块顺序、显示多少篇文章，根本不用碰代码。

• 后台 →「模块管理」：页面左侧列出所有侧栏模块（如「最近发表」「标签云」「文章归档」），按住模块标题拖动即可改变顺序，点模块右上角的设置图标可以改标题和显示条数。
• 后台 →「网站设置」→「页面设置」：修改「首页和列表页每页文章数」，直接决定首页一页出现多少条。
• 后台 →「主题管理」→ 点当前主题的「设置」：不少商业主题自带布局开关（比如「首页样式：卡片/列表」「侧栏位置：左/右/无」），有的话优先在这里改。

第三步：找到首页模板文件

这一步拿到你要改的那个文件路径。ZBlog 所有主题都在 zb_users/theme/ 目录下，主题名就是后台「主题管理」里显示的名字。

进入 zb_users/theme/你的主题名/template/，你会看到：

• index.php —— 首页模板，布局主体
• header.php / footer.php —— 页头页脚
• sidebar.php —— 侧栏
• list.php / single.php —— 列表页和文章页

用记事本或 VS Code 打开 index.php，这就是你要动的地方。

注意：先整个复制一份 zb_users/theme/你的主题名 到同目录下并重命名为 你的主题名-copy，同时把新目录里 theme.xml 的 <id> 值改成别的，再到后台「主题管理」启用副本，改崩了随时切回原主题。直接改原主题，主题一升级你的修改就没了。

第四步：重写文章循环结构

首页的文章列表是靠模板循环输出来的。ZBlog 模板里长这样：

{foreach $articles as $article}
<article class="post-item">
    <h2><a href="{$article.Url}">{$article.Title}</a></h2>
    <div class="post-meta">{$article.Time('Y-m-d')} · {$article.Category.Name}</div>
    {if $article.Intro}<p>{$article.Intro}</p>{/if}
</article>
{/foreach}

要改成图文卡片流，只需在这个循环里加缩略图和一个外层容器：

<div class="card-grid">
{foreach $articles as $article}
<article class="card">
    <a href="{$article.Url}"><img src="{$article.Thumbs[0]}" alt="{$article.Title}"></a>
    <h3><a href="{$article.Url}">{$article.Title}</a></h3>
    <span>{$article.Time('m-d')}</span>
</article>
{/foreach}
</div>

然后去主题的 CSS 文件（一般在 zb_users/theme/你的主题名/style/ 或 css/ 下）给 .card-grid 写 display:grid; grid-template-columns:repeat(3,1fr); gap:16px;，三列卡片布局就成了。

分页别删掉，模板里那行 {template:pagebar} 留着，否则翻不了页。

注意：{$article.Thumbs[0]} 只有在文章设置了缩略图时才有值，没设会输出空白。稳妥写法是套一层判断：{if $article.Thumbs}<img src="{$article.Thumbs[0]}">{/if}。

第五步：调整侧栏和模块位置

想把侧栏挪到左边，或者首页不要侧栏，改的是 index.php 里引用侧栏的那行，通常是 {template:sidebar}。删掉它，首页就是通栏；把它挪到输出文章列表的 <div> 之前，侧栏就跑到左边了。侧栏里各模块的内容在 sidebar.php 中，比如 {module:tags} 是标签云，{module:calendar} 是日历。

第六步：清缓存看效果

模板改完后必须清缓存，否则前台还是旧样子。后台右上角点「清空缓存并重新编译模板」，然后强制刷新首页（Ctrl+F5）。

如果页面报错或白屏，八成是模板标签写错了括号或漏了 {/foreach}，把备份文件覆盖回去即可恢复。

小结

• 先确认首页是文章列表模式还是静态页面模式，两者改法完全不同
• 能在「模块管理」「页面设置」「主题设置」解决的，不要动代码
• 首页布局主体是 zb_users/theme/主题名/template/index.php
• 改之前一定复制主题副本，避免升级丢改动
• 文章循环用 {foreach $articles as $article}...{/foreach}，分页标签 {template:pagebar} 别删
• 改完必须清空缓存并重新编译模板才生效