Theme.Park项目中文本Logo尺寸问题的解决方案

问题背景

在使用Theme.Park主题为Prowlarr和Sonarr等应用添加文本Logo时，许多用户遇到了Logo尺寸显示不正确的问题。具体表现为Logo宽度未被自定义CSS正确调整，导致显示效果不符合预期。

问题现象

用户反映在使用Apache服务器配置文本Logo插件时，虽然按照文档进行了配置，但Logo的尺寸显示异常。通过开发者工具检查发现，原始应用的PageHeader.css样式优先级高于主题提供的自定义样式，导致尺寸调整失效。

根本原因分析

经过深入排查，发现问题主要源于两个方面：

1. CSS优先级问题：原始应用的样式表具有更高的优先级，覆盖了主题提供的样式
2. 配置方式不当：用户错误地将样式注入到HTML的head部分，而非body部分

解决方案

正确的Apache配置方式

正确的配置应该将主题样式注入到body部分，而非head部分。以下是正确的配置示例：

Define theme_park_name nord

<Location "/prowlarr">
    ProxyPass "http://localhost:8001/prowlarr"
    ProxyPassReverse "http://localhost:8001/prowlarr"
    
    RequestHeader unset Accept-Encoding
    AddOutputFilterByType SUBSTITUTE text/html
    Substitute 's|</body>|<link rel="stylesheet" type="text/css" href="https://theme-park.dev/css/base/prowlarr/${theme_park_name}.css"><link rel="stylesheet" type="text/css" href="https://theme-park.dev/css/addons/prowlarr/prowlarr-text-logo/prowlarr-text-logo.css"></body>|ni'
</Location>

CSS优先级处理

如果仍然遇到样式优先级问题，可以考虑以下方法：

1. 在自定义CSS中使用!important声明强制覆盖原始样式
2. 提高自定义CSS的选择器特异性
3. 确保自定义CSS在原始CSS之后加载

注意事项

1. 不同应用可能需要不同的注入点，请参考具体应用的文档
2. 样式注入到body部分是Theme.Park项目较新的推荐做法
3. 配置变更后需要重启Apache服务使更改生效

总结

通过将样式正确注入到body部分，可以有效解决Theme.Park项目中文本Logo尺寸显示异常的问题。这一解决方案不仅适用于Prowlarr和Sonarr，也适用于其他类似应用的主题定制。用户在配置时应特别注意文档中的最新推荐做法，避免使用过时的配置方式。