企业官网建设流程全解析

酱茄小程序开源版前端个性化改造指南：如何一键更换主题色、TabBar图标与首页样式

【免费下载链接】jiangqie_kafei酱茄小程序开源版，基于WordPress的微信小程序，适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei

酱茄小程序开源版（jiangqie_kafei）是一款基于 WordPress + uni-app 的开源资讯/博客小程序，一套代码可同时发布到微信小程序、百度小程序、QQ 小程序和 H5 端。本文面向新手，手把手教你完成三大前端个性化改造：🎨 一键更换小程序主题色、🖼️ 替换 TabBar 底部图标、📄 快速定制首页样式。只需修改 2 个前端文件 + 在 WordPress 后台点一点，就能把"红色模板"变成你品牌色的专属小程序。

改造前准备：导入项目只需两步

先用 HBuilderX 导入项目中的client_uni目录（uni-app 前端代码），然后修改 client_uni/utils/config.js 里的JQ_DOMAIN为你自己的域名，这是前端唯一必须改的配置。

项目整体结构很简单：

• 前端代码：client_uni/（uni-app，负责页面与界面）
• WordPress 插件：api_uni/jiangqie-api/（负责数据接口与后台设置面板）
• 运行截图：screenshot/（方便你对照效果）

上传并启用jiangqie-api插件、改好域名后，就可以开始下面的改造了。

一键更换主题色：改一个文件搞定全局颜色

酱茄小程序开源版默认是红色系主题。颜色值集中在一个文件里：client_uni/pages.json，主要涉及 4 处：

把这几处色值统一替换成你的品牌色（例如科技蓝#2F6FED）即可。此外还有 3 个页面文件里残留了硬编码色值，建议一并全局搜索替换：

• 首页导航栏与顶栏背景：client_uni/pages/index/index.vue 的#E0301F
• 热榜页选中态颜色：client_uni/pages/hot/hot.vue 的#E6321D
• 文章页点赞按钮：client_uni/pages/article/article.vue 的#E6372F

💡小技巧：在 HBuilderX 里用"全局查找"功能搜索十六进制色值，一次性替换，几分钟就能换完整套主题色。

TabBar 图标怎么换：替换 PNG 并更新路径

底部"首页 / 分类 / 热榜 / 我的"四个 Tab 的图标，是静态 PNG 文件，位于client_uni/static/images/tabbar/目录，每个 Tab 都有"未选中灰色图 + 选中高亮图"两张：

• index_gray.png/index_active.png（首页）
• cat_gray.png/cat_active.png（分类）
• hot_gray.png/hot_active.png（热榜）
• my_gray.png/my_active.png（我的）

替换步骤很简单：

1. 准备 8 张新图标（建议 81×81px 以内，灰度版与高亮版各一套，风格统一）；
2. 用新图标覆盖同名 PNG 文件即可，文件名不变则无需改代码；
3. 如果想换成完全不同的文件名或调整 Tab 文字、顺序，再修改 client_uni/pages.json 中tabBar.list的iconPath/selectedIconPath/text字段。

首页样式快速定制：后台设置 + 前端微调

首页的"内容型样式"大部分不需要改代码，直接在 WordPress 后台的「酱茄设置」菜单里配置即可。

后台配置：幻灯片、Logo 与导航区

在「基础设置」中修改小程序标题和首页 Logo，小程序打开后顶部的 Logo 会立刻换成你上传的图片：

在「首页设置」中可以配置：顶部导航分类（填分类 ID）、幻灯片文章、图标导航项（图标+标题+链接）、活动区域图（左图/右上/右下）、首页热门文章等：

「分类设置」和「热榜设置」分别控制分类页和热榜页的顶部背景图、标题、描述，「我的设置」可配置我的页面顶部背景图与菜单项：

前端微调：banner 尺寸与列表布局

内容之外的"视觉型样式"在前端页面文件里调整，核心就是首页文件 client_uni/pages/index/index.vue：

• 顶部 banner 轮播：模板区第 34-47 行的swiper，高度、圆角、阴影在 SCSS 的.jiangqie-banner-swiper（index.vue）里修改；
• 列表布局：listMode变量决定文章是"图文小图"还是"每 5 篇插入一张宽图"，宽图样式在.image-wide类中；
• 顶部弧形背景：默认的红色弧形背景图存放在插件的api_uni/jiangqie-api/public/images/目录，替换id_bg.png、my_bg.png等背景图即可换掉整个顶部氛围色。

改完在 HBuilderX 中重新编译到微信开发者工具，刷新即可看到新主题色、新 TabBar 图标与新首页样式生效。🎉

常见问题速查清单

• ❓改了 pages.json 没生效？需要重新编译发布，uni-app 的 pages.json 属于运行时配置，改完必须重跑。
• ❓首页内容没变？Logo、幻灯片、导航等属于后台数据，请到 WordPress「酱茄设置」里改，而不是改前端代码。
• ❓Tab 图标变糊？图标请按不超过 81×81px 输出，过大反而会被压缩发虚。
• ❓想查更多功能？完整功能清单与安装教程见 README.md。

至此，酱茄小程序开源版的三大个性化改造全部完成：换主题色改pages.json+ 3 个页面文件，换 TabBar 图标替换static/images/tabbar/下的 PNG，定制首页则"后台配置为主、前端微调为辅"。掌握这套方法后，你可以快速把开源版改造成贴合自己品牌的博客或新闻资讯小程序。

【免费下载链接】jiangqie_kafei酱茄小程序开源版，基于WordPress的微信小程序，适用于博客小程序和新闻资讯小程序。项目地址: https://gitcode.com/gh_mirrors/ji/jiangqie_kafei