Jcode（杰码集）主题

基于 Z-BlogPHP 精心打造的技术博客主题，极速、优雅、高度可定制。

✨ 主题亮点

• 🎨 现代视觉设计：精美渐变轮播、玻璃拟态卡片、流畅微动效，首屏即惊艳。

• ⚡ 极速性能：零不必要依赖，精简压缩 CSS 与 JS，首屏加载 PageSpeed 跑分极高。

• 🧩 模块化首页：顶部与底部模块区域均支持多个高颜值模块勾选，并可通过拖拽实现任意降升排序。

• 🌗 深色模式：全局优雅的暗黑/白天双主题切换，代码高亮同样支持双配色。

• 💻 代码高亮：集成 Highlight.js 并支持 20+ 款最流行高亮皮肤，附带行号、一键复制、全屏展开、代码折叠等高级功能。

• 📱 完全响应式：移动端、平板、台式机全设备完美自适应，抽屉式移动导航高科技体验。

• 🗂️ 多页脚风格：内置 10 种顶级科技设计页脚风格，配以波浪、粒子流动等酷炫特效。

• 🔧 可视化配置：全部主题选项皆在后台图形化面板中实时呈现并可保存，无需任何代码修改。

• 💬 评论体验增强：支持集成随机头像 API、随机中国风昵称 API，访客免输入即可发表评论，极大降低互动门槛。

• 🏷️ 元信息精细控制：文章列表卡片、文章详情页、独立页面的各项数据元信息可被单独勾选显示。

📋 版本记录

v1.3.0 · 2026-06-03（当前版本）

• 🚀 资源商城完美集成：在服务端（PHP）及客户端（JS）新增了与 XunhuPay (讯虎支付) 资源商城插件的全面兼容。

• 🎨 样式解耦与物理隔离：对前台商城布局样式和 ZUI3 进行作用域隔离限制，避免样式污染导航栏；卡片封面采用 4:3 比例自适应与左对齐排版。

• ⚡ 详情页面极简重构：详情页自适应隐藏面包屑、侧边栏、留言板与页脚，置顶“下载和价格”模块，统一 12px 间距和 6px 圆角，使用 容器与 HTML 反转义完美解析渲染富文本 HTML 实体内容，提升前台加载性能。

• 🔧 导航菜单防丢失保护：支持 LinksManage 多级同步与智能防覆盖保存逻辑，动态维护插件注册的商城链接，确保导航条数据安全完整。

v1.2.1 · 2026-06-01

• 🚀 突破性技术升级：在服务端（PHP）重构了完美的导航栏级联树状重组引擎 jcode_RestructureNavbarItems，实现了彻底脱离前端 JS 依赖的 3 级导航菜单渲染，零布局抖动（CLS）。

• 🐛 修复代码高亮设置页预览区初始化不生效的问题（内联阻断脚本执行时序错误）。

• 🧹 清理所有遗留测试与调试文件（autologin.php、dump_navbar.php、verify_*.js）。

• 📝 补充完整极其详尽的可视化用户说明文档（README）。

v1.2.0 · 2026-05-28

• ✨ 新增代码高亮可视化配置面板，支持 20+ Highlight.js 主题实时预览。

• ✨ 新增广告位模块（adslist），支持 1-4 列自适应并内置带语法高亮的在线代码编辑器。

• ✨ 新增合作伙伴展示（partners）Logo 墙模块。

• ✨ 新增评论随机信息填充：自动调用 API 快速生成随机头像与国风昵称。

• ✨ 新增三种页脚风格（企业型 / 商业型 / 素材站型）及流体波浪与星空粒子特效。

• ✨ 新增正文底部版权协议声明区块，支持自定义支持 HTML 的版权文字。

• 🔧 完善元信息精细控制（文章列表 / 文章详情 / 独立页面分别配置）。

v1.1.0 · 2026-05-24

• ✨ 新增首页模块化系统，顶部/底部区域支持多模块自由勾选 + 鼠标拖拽排序。

• ✨ 新增多类型文章列表组（postlistgroup），7 种高级数据源 × 5 种卡片布局。

• ✨ 新增自选卡片组（cardgrid），4 种高阶彩色/背景大图卡片设计，可视化编辑与排序。

• ✨ 新增一言名言模块，对接第三方 API 并带刷新旋转动效按钮。

• ✨ 新增友情链接模块，支持 Favicon API / 自定义上传图片 / 无图标三种展示模式。

• 🔧 侧边栏显示控制精细化，可按页面类型单独开关。

• 🔧 新增文章分类过滤模式（显示指定/排除指定分类）。

v1.0.1 · 2026-05-21

• 🐛 修复移动端导航菜单层叠问题。

• 🐛 修复分类页分页样式错位。

• 🎨 优化文章列表卡片在小屏幕下的封面裁剪比例。

• 🎨 调整代码块默认字体与行高，提升可读性。

• ⚡ 优化首屏 CSS 加载顺序，减少布局抖动。

v1.0.0 · 2026-05-19（首次发布）

• 🎉 基于 Z-BlogPHP 官方文档与 default 主题结构完整重构发布。

• ✨ 支持大气的 轮播图 Hero 与 单图 Hero 模块，可自由配置高度、遮罩不透明度和幻灯片内容。

• ✨ 支持 随机封面 API 与 固定封面图 两种默认封面图模式。

• ✨ 全站高度响应式布局，适配移动端、平板与桌面。

• ✨ 悬浮式固定导航栏、面包屑导航、平滑返回顶部浮动按钮。

• ✨ 相关文章智能推荐、Ajax 无刷新评论、友好时间格式转化。

• ✨ 全局灰色模式、外链新标签页打开等开关。

• 🔧 可视化后台管理面板。

📦 安装方法

1. 将 jcode 文件夹上传至服务器的 zb_users/theme/ 目录。

2. 登录 Z-BlogPHP 后台 → 外观 → 主题管理 → 启用 杰码集（Jcode） 主题。

3. 点击顶部菜单中的 主题配置，即可进入图形化可视化设置面板。

系统要求：PHP 版本 ≥ 5.2（强烈推荐 PHP 7.4 或更高的 PHP 8.x 系列版本）

⚙️ 后台配置图文说明

所有配置均在后台的 主题配置 图形化页面中完成，按标签页分类如下：

🔵 基础设置（Basic）

本页主要用于配置站点的基本元信息、Logo 以及全局默认文章封面图。

• Logo 图片 URL：填入 Logo 图片的 URL 地址，留空则不显示图片 Logo，使用内置默认矢量 Logo。

• 深色模式 Logo URL：单独为暗黑模式主题指定专属的 Logo。

• 显示 Logo：全局开关，控制是否在顶部导航栏显示 Logo。

• Favicon URL：网站浏览器小标签页图标的地址，留空则使用默认配置。

• 显示 Favicon：全局开关，控制是否启用自定义 Favicon 图标。

• 网站名称：导航栏显示的站点文字名称。

• 显示网站名称：Logo 旁是否额外显示文字名称。

• 网站副标题：在首页单图/多图 Hero 模块中显示的一句话描述文字。

• 浏览器标题显示站点名：开关，控制文章标题后是否额外追加「 - 站点名」。

• 封面来源：可选择 API 随机图（每次加载随机封面）或 固定图片（全站统一封面）。

• 随机图 API 地址：使用 API 模式时填入，默认提供高质量的随机图接口。

• 固定图片 URL：使用固定图片模式时填入背景图片地址。

🏠 首页设置（Home）

本页配置非常强大，包含了模块化系统、文章列表组和分类过滤等关键核心配置。

顶部 / 底部模块区：

• 首页分顶部和底部两个模块区域，各支持多个模块同时开启并自由排序。您可以通过在左侧复选框中勾选启用，并在右侧通过鼠标拖拽上下移动来实现实时调整排序。

• 轮播图 Hero：支持多图自动播放、手动切换、自定义高宽，并可关联链接。

• 单图 Hero：静态大图背景 + 主标题 + 副标题。

• 一言名言：实时从 API 接口异步拉取精美名言，带有一键旋转刷新按钮。

• 多类型文章列表组：精细展示各个栏目，支持 7 种数据源 × 5 种卡片布局。

• 自选卡片组：自由添加卡片，提供 4 种高颜值卡片设计，支持拖拽排序。

• 友情链接：展示合作伙伴友情链接，支持 Favicon API 自动解析获取图标。

• 合作伙伴展示：Logo 墙形式展示合作伙伴，响应式网格布局。

• 精美多功能广告位：1-4 列自适应图片网格，支持图片+链接，且内置了专业的带有语法高亮的代码编辑器。

• 文章列表区设置：

• 列表标题：文章列表区块的标题文字（默认「最新文章」）。

• 列表副标题：标题下方的个性说明。

• 摘要截取长度：文章列表中自动截取的摘要字符数（默认 140 字）。

• 列表样式：支持经典（图文左右布局）等精致样式。

• 分页样式：支持“数字分页”和“加载更多（Ajax）”按钮。

• 列表列数：支持自适应或设置固定列数展示。

• 排序栏显示：可控制是否显示「日期」「评论数」「点赞数」「收藏数」等排序按钮。

• 分类筛选：

• 分类过滤模式：支持“不过滤”（显示全部）、“仅显示指定分类”和“排除指定分类”等检索模式。

• 分类 ID：填入需要过滤的分类 ID，多个分类之间使用英文逗号分隔。

📝 文章设置（Post）

用于微调文章列表、文章正文详情页以及版权信息等细节开关。

• 元信息控制：可针对文章列表、文章详情页、独立页面分别精细化控制显示以下元数据信息：作者、发布日期、所属分类、浏览量、评论数、管理员编辑按钮和管理员删除按钮。

• 相关文章推荐：

• 启用相关文章：控制文章详情页底部是否显示相关文章推荐区块。

• 限制同分类：开启后，系统仅会推荐与当前文章处于同一分类下的文章。

• 推荐数量：设置相关文章的最大限制显示数量（默认 6 篇）。

• 版权声明区块：

• 启用版权声明：在正文底部显示极具质感的版权协议声明信息框。

• 版权声明文字：自定义版权声明内容，支持 HTML 标签代码。

• 其他文章选项：

• 阅读更多按钮：开关，控制文章列表页卡片底部是否显示“继续阅读”按钮。

• 文章评论区：文章页评论区模块总开关。

• 独立页面评论：独立 Page 页面评论总开关。

• 面包屑导航：全站面包屑位置导航，大幅提升 SEO 蜘蛛抓取友好度。

💬 评论设置（Comment）

配置全站评论区的高级参数，尤其是深受用户喜爱的随机信息免填功能。

随机信息填充（Quick Fill）：

• 启用随机信息：开启后，新访客加载评论框时系统会自动调用 API 随机分配专属的昵称和头像，访客无需手动填写任何个人资料即可一键评论，极大地降低了互动门槛并提升互动率。

• 头像 API 地址：返回随机头像图片 URL 链接的 API 接口地址。

• 头像字段路径：支持嵌套对象的解析（例如：data.url 或 img）。

• 昵称 API 地址：返回随机中文昵称的接口 API 地址。

• 昵称字段路径：解析昵称文本所用路径，留空代表接口响应体直接即为昵称文本。

• 其他评论选项：

• Ajax 提交：开关，评论使用 Ajax 无刷新方式异步提交。

• 保存填写信息：在访客端浏览器自动保存用户上次填写的昵称/邮箱，下次免去二次输入。

💻 代码高亮设置（Code）

针对技术博客，配置全站最专业、最高颜值的代码高亮。支持在后台实时预览高亮效果。

• 外观美化：

• 边框样式：提供 8 种顶级高颜值代码边框，如 Mac 亮色、Mac 暗色、Mac 彩色亮色（默认）、Mac 彩色暗色、标准亮色、标准暗色、Layui 亮色、Layui 暗色。

• 高亮主题：集成 Highlight.js，内置了 20+ 款极具人气的代码高亮皮肤（如 Github, Monokai, One Dark, Dracula, VS 2015 等）。

• 显示阴影：开关，代码块外侧是否添加柔和微投影阴影。

• 显示语言标签：在代码块顶部自动识别并标识当前代码的编程语言。

• 显示分隔线：在代码左侧边沿增加行号与代码之间的分隔竖线。

• 显示行号：代码块左侧是否自动加载数字行号。

• 自动换行：开启后超长代码行自动换行，关闭则显示为横向平滑滚动。

• 功能按钮集成：

• 全屏按钮：支持一键将代码块全屏展开，大大提升复杂工程源码的阅读体验。

• 复制按钮：一键复制完整代码到剪贴板，带有成功复制的勾选提示动效。

• 折叠按钮：一键折叠或展开整个代码块。

• 高度限制与控制：

• 最大高度：设置代码块的默认最大显示高度（单位像素，设为 0 表示不限制，超出部分默认折叠）。

• 显示展开按钮：高度限制时是否在底部显示渐变“点击展开”按钮（关闭则直接截断）。

• 默认折叠：开关，控制代码块是否在首屏以折叠状态呈现。

• 自定义全局高亮样式：支持在此输入 CSS rules，覆盖一切默认样式，实现个性化审美。

🔘 侧边栏设置（Sidebar）

细致到极点的页面级别侧边栏控制。

多页面独立控制：支持为首页、文章详情页、独立页面、分类列表页、标签列表页、搜索结果页、归档时间页分别单独开启或关闭侧边栏，完美满足您“部分页面需要大屏单栏阅读，部分页面需要侧边栏多功能展示”的精细需求。

🦶 页脚设置（Footer）

提供 10 种顶级科技美学设计页脚风格，让您的技术站点大气非凡。

• 10 种完全不同的顶级页脚风格：

• 页脚风格 1：Stripe (微渐变企业型)：包含注册引导横幅、联系热线电话、多列分块导航栏、底部友情链接等。

• 页脚风格 2：Linear (极客深色微光商业型)：包含数据统计面板、大站点 Logo、服务时间说明、多列分块导航栏等。

• 页脚风格 3：Vercel (黑白极简素材资源型)：包含“联系我们”区块、站点简介描述、多列分块导航栏、双 Logo 等。

• 页脚风格 4：Railway (卡片网格复古终端)：采用独特的终端卡片分块网络设计，科技感与硬核范十足。

• 页脚风格 5：Apple (经典手风琴折叠)：模仿苹果官网的高雅折叠卡片列表式多列布局，极致精致。

• 页脚风格 6：GitLab (复合胖版网站地图)：具有极宽、超大容量的多列链接图谱网格，适合大体量内容导航。

• 页脚风格 7：Refokus (动效先锋创意)：运用错落排版与流动微动效，科技动感拉满。

• 页脚风格 8：Raycast (扁平命令式)：仿 Raycast 扁平极简布局，带有快捷指令与简洁的品牌标识。

• 页脚风格 9：Framer (模块网格化拼贴)：拼贴网格磁贴布局，支持多区域块级色彩对比与模块化设计。

• 页脚风格 10：Tailwind UI (合并单行紧凑)：极简单行排列设计，适合现代 SaaS/极简博客，完美兼容并高度内聚。

• 高级页脚特效：

• 无特效：静态经典页脚展示。

• 波浪特效：在页脚顶部增加多层平滑流动的科技波浪动效。

• 粒子特效：在页脚背景中增加自动浮动、聚散的星空粒子特效。

• 页脚配置详情：支持配置备案号、版权声明文字、各类跳转链接、社交图标、Logo 地址、客服热线及统计代码。

🌐 全局设置

管理全站最基础的全局开关项。

• 悬浮导航栏：页面向上或向下滚动时，导航栏自动悬浮固定在最顶部。

• 外链新窗口打开：自动为文章中的所有外部超链接添加 target="_blank" 和 rel="noopener noreferrer" 属性，极大防止站点权重流失。

• 全站灰色模式：一键将全站置为素雅的黑白灰色（适用于特殊纪念日）。

• 清除空段落：自动过滤并清理文章编辑器生成的无意义空段落

  


  ，保持排版极度整洁。

  
  

• 友好时间格式：启用智能友好时间，将绝对时间智能显示为“10 分钟前”、“3 小时前”等相对时间。

• 返回顶部按钮：在屏幕右下角提供带平滑滚动过渡的圆形“返回顶部”火箭按钮。

🖼️ 文章封面设置优先级

文章的封面图将自动遵循以下优先级规则提取，从高到低：

1. 文章自定义封面：在发布/编辑文章时，在后台编辑器右侧的“文章自定义封面图”中手动上传的图片。

2. 文章正文首图：系统自动扫描文章正文中出现的第一张图片。

3. 全局默认封面：在后台“基础设置”中配置的默认封面（支持 API 随机图 或 自定义静态封面图）。

🤔 常见问题

• Q：代码高亮不生效？
  A：请确认文章内的代码块使用了标准的 Markdown 代码围栏格式（即三个反引号 包裹代码并接上语言名，如php ），主题便会自动调用 Highlight.js 进行识别高亮。

• Q：侧边栏没有显示出来？
  A：首先在「侧边栏设置」中确认对应页面类型已勾选开启了显示，并且需要在 Z-BlogPHP 后台的“模块管理”→“侧边栏”中拖入添加了对应组件。

• Q：首页轮播图显示纯色背景？
  A：这是因为您没有在后台配置幻灯片图片。轮播图未配图时会默认渲染主题自带的科技渐变色动态背景。前往「首页设置」→「轮播图幻灯片列表」中可视化添加幻灯片并填入图片地址即可。

• Q：如何更换代码高亮主题？
  A：进入后台「代码高亮设置」→「高亮主题」下拉菜单选择，右侧预览区会进行实时渲染，找到您喜欢的主题保存后，全站即时生效。

• Q：评论区没有自动随机生成昵称和头像？
  A：确认「评论设置」→「启用随机信息」总开关已经开启，且所配置的 API 头像和昵称接口可正常通畅地被浏览器访问。