Hugo Tella主题无法通过参数调整Logo大小的求助

问题背景 #

我正在使用基于Tella Theme的Hugo网站，希望放大Logo。config.toml中的尺寸配置参数如下：

[params.logo]
main = "img/logo/bnb_logo_transparent.svg"
alt = "Logo"
size = "h-14"

h-14的尺寸过小，但修改size参数为其他值时，Logo会直接消失。另外尝试使用custom.css调整样式，但不确定文件是否正确加载，且存在css文件夹和static文件夹下两个custom.css文件。

解决方法 #

1. 正确使用Tailwind CSS类调整尺寸 #

Tella主题采用Tailwind CSS，size参数仅支持合法的Tailwind类名，之前Logo消失是因为用了不存在的类。

• 优先使用官方预设类：比如h-16（对应64px）、h-20（对应80px），这类类是Tailwind预定义的，不会出错；
• 自定义精确尺寸：如果需要非8px倍数的尺寸，可使用Tailwind v3的自定义数值类，比如h-[70px]；
• 保持比例：搭配w-auto避免Logo拉伸，示例配置：

[params.logo]
main = "img/logo/bnb_logo_transparent.svg"
alt = "Logo"
size = "w-auto h-20"

2. 自定义CSS强制覆盖样式 #

如果Tailwind类方式不生效，直接用自定义CSS更可靠：

• 选对文件位置：Hugo会优先加载static/css/custom.css（该目录下的文件会直接部署到网站根目录），主题自带的css/custom.css可能被更新覆盖，建议用static目录下的文件；
• 添加样式规则：通过浏览器F12开发者工具找到Logo元素的类名（比如.site-logo），添加如下样式：

/* static/css/custom.css */
.site-logo img {
    height: 70px; /* 按需设置高度 */
    width: auto; /* 自动适配宽度，保持比例 */
}

• 确保主题加载自定义CSS：如果主题未自动加载，在config.toml中添加：

[params]
customCSS = ["css/custom.css"]

3. SVG Logo额外处理 #

如果你的Logo是SVG格式，需确保文件本身没有固定宽高限制：
打开SVG文件，删除<svg>标签中的width和height属性，只保留viewBox，示例：

<!-- 修改前 -->
<svg width="50" height="50" viewBox="0 0 50 50">...</svg>

<!-- 修改后 -->
<svg viewBox="0 0 50 50">...</svg>

最后验证 #

修改完成后，重启Hugo本地服务（hugo server），清空浏览器缓存（Ctrl+Shift+R），查看Logo尺寸是否生效。

内容的提问来源于stack exchange，提问作者MrZebes