• elm

    故障:page_head_html() 中 page.head 钩子输出位于 <link stylesheet> 之前,导致插件 CSS 被覆盖

    环境

    • bbs1org 版本:v3.6(APP_VERSION 定义为 v3.6)
    • PHP 8.x / SQLite / Docker 部署

    问题描述

    在 v3.5/v3.6 中,page_head_html() 函数将 $meta 参数(包含 page.head 钩子的输出)放在了 <link rel="stylesheet" href="/index.css"> 之前。这导致通过 page.head 钩子注入 CSS 的插件(如 themes 主题插件)的样式被 index.css 覆盖,主题插件完全失效。

    当前代码(index.php 第 2296-2299 行):

    function page_head_html(string $page_title, string $meta): string
    {
        return '<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">'
            . $meta                                              // ← page.head 输出在这里
            . '<title>' . h($page_title) . '</title>'
            . '<link rel="icon" type="image/svg+xml" href="' . h(asset_url('logo.svg')) . '">'
            . '<link rel="stylesheet" href="/index.css?v=' . h(APP_VERSION) . '">'  // ← index.css 在后面,覆盖了前面的插件 CSS
            . '</head><body>';
    }

    影响

    所有依赖 page.head 钩子注入 <style> 标签的插件均受影响。以主题插件为例:插件输出的 CSS 变量覆盖和自定义样式在 HTML 中出现在 index.css 之前,由于 CSS 同优先级规则中后出现的覆盖先出现的,index.css 的默认样式将主题样式全部覆盖,导致主题完全不生效。

    修复方案

    将 $meta 移到 <link rel="stylesheet"> 之后:

    function page_head_html(string $page_title, string $meta): string
    {
        return '<!doctype html><html lang="zh-CN"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1">'
            . '<title>' . h($page_title) . '</title>'
            . '<link rel="icon" type="image/svg+xml" href="' . h(asset_url('logo.svg')) . '">'
            . '<link rel="stylesheet" href="/index.css?v=' . h(APP_VERSION) . '">'
            . $meta                                              // ← page.head 输出移到这里
            . '</head><body>';
    }
    主楼
  • bbs1org

    我调整一下钩子的位置

    #1
  • bbs1org

    3.7 已经修复

    #2
  • elm

    @admin #247 感谢!

    #3

发表回复

登录后回复