本教程将指导你如何在“悦览”主题中，自定义分类、标签及搜索页面的顶部背景颜色或渐变色。

🎯 目标效果

修改后，你的网站在访问特定分类（如“技术”）、标签或搜索结果页时，顶部的标题区域将显示你设定的背景色（如下图所示的红框区域）。

页头背景色位置.png


🛠️ 操作步骤

第一步：进入主题设置

  1. 登录你的 ZBlogPHP 后台。

  2. 点击左侧菜单的 外观 -> 主题设置。

  3. 确保当前选中的是 悦览 主题，点击进入设置页面。

第二步：找到文章列表设置

  1. 在顶部的选项卡导航栏中，点击 文章列表 选项卡（参考图1中的绿色高亮按钮）。

  2. 向下滚动页面，找到 页头背景 这一栏。

  3. 页头.png



第三步：配置背景样式

在这一栏中，你可以输入 CSS 颜色代码或渐变代码。系统提供了两种主要模式：

  • 纯色背景

    • 直接输入十六进制颜色代码，例如：#10b981 (绿色) 或 #3b82f6 (蓝色)。

  • 渐变背景（推荐）

    • 135deg：代表渐变的角度。

    • #4facfe：起始颜色。

    • #00f2fe：结束颜色。

    • 使用 linear-gradient 语法可以制作更现代的视觉效果。

    • 默认示例代码： linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)

💡 快捷操作：
在输入框下方，系统提供了一排 推荐背景 按钮（蓝紫、绿色、粉紫、蓝青、绿青、橙红）。你可以直接点击这些色块，代码会自动填入输入框中，无需手动编写。

第四步：保存设置

  1. 选择好你喜欢的颜色或点击了推荐色块后。

  2. 点击页面右下角的绿色 保存设置 按钮。

💡 常见问题与提示

  • 为什么前台没有变化？

    • 请尝试清除浏览器缓存，或者在后台首页点击“清空缓存并重新编译模板”。

  • 我想用图片做背景可以吗？

    • 该选项主要设计用于颜色设置。如果需要复杂的图片背景，通常需要修改主题的 CSS 文件或查看是否有单独的“自定义CSS”选项。

  • 这个设置影响哪些页面？

    • 根据图示说明，此设置专门针对 分类页、标签页、搜索页 的页头。首页和文章详情页通常有独立的设置逻辑。


感谢支持

如果这篇文章对您有帮助，欢迎扫码支持作者的创作

微信赞赏
微信赞赏二维码

打开微信扫一扫

支付宝赞赏
支付宝赞赏二维码

打开支付宝扫一扫

标签： 悦览