分类图片高度 / 主题变量的通用理解

支持
1

大家好，

在尝试一些主题修改时，我注意到了这段 SCSS 代码：

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 150px;
    max-height: var(--max-height);
    max-width: 60%;
    height: auto;
    width: calc(var(--max-height) * var(--aspect-ratio));

  }
}

我想知道（如果有的话）修改此处 max-height 变量的正确方法是什么。

2

我不太确定您想实现什么目标，但如果您只是想调整 Logo 的大小，这里有一些可以帮您起步的内容。

分类 Logo 默认会在几个地方使用——在分类页面和特定分类页面上。

如果您想同时修改这两个位置的 Logo 大小，可以使用以下代码：

@supports (--custom: property) {
  .category-logo.aspect-image {
    --max-height: 200px; // 将 200 更改为您需要的高度
  }
}

修改 --max-height 变量后，宽度应会自动调整。

如果您有更具体的需求，例如仅修改分类页面上的 Logo 大小，请检查您网站的 desktop_category_page_style 站点设置，并告诉我它的当前值。

如果您希望更改仅在桌面端生效，请将上述 CSS 添加到您主题的桌面 CSS 选项卡中；如果仅在移动端生效，请添加到移动端 CSS 选项卡中；如果希望在桌面端和移动端都生效，请将其添加到通用 CSS 选项卡中。

3

嗯，我尝试按照您的建议更改了 --max-height，虽然在检查器中该部分已更新，但图像大小保持不变。

我注意到在检查器中，--aspect-ratio 值似乎未设置（Chrome 中没有可点击的链接指向该值），而且我找不到它可能是在哪里设置的。我在 Discourse GitHub 代码中搜索过，但仍然找不到。

您有什么想法，我该如何找到设置 --aspect-ratio 的位置，或者应该设置什么值？

编辑：找到了问题，高度是由 Discourse Category Headers theme component 设置的。

.category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img {
    float: left;
    margin: 0 0.5em 0.25em 0;
    max-height: 150px;
}

所以我只是在我的主题中覆盖了 max-height。

category-header-widget .category-logo.aspect-image,
.category-header-widget .category-logo.aspect-image>img  {
	max-height: 80px;
}

编辑 #2：您的建议确实对分类页面上的分类图标起作用了，谢谢！