设置特色图片而不将其发布在主题中

支持
21

我认为通常名称会添加到 alt 属性中。当我上传文件时，名称通常会添加到 markdown 中的大小前面，而这部分会被“alt”使用。

22

由于我不是 CSS 专家，我向 ChatGPT 询问了您的选项，并得到了这个答案。我想隐藏以 hide-this-image- 开头的图片，但后面还有其他内容。我得到的答案是：

不，纯 CSS 不支持 alt 属性的通配符或“开头是”选择器。

CSS 属性选择器仅支持：

  • 精确匹配：[alt="value"]
  • 包含单词：[alt~="value"]
  • 包含子字符串：[alt*="value"]
  • 开头是：[alt^="value"]
  • 结尾是：[alt$="value"]

但是，alt^="hide-this-image-" 在您的示例中将无法可靠工作，因为CSS 无法在所有浏览器中匹配渲染图像时的 <img> 的 alt 属性，尤其是在 Discourse 等系统中，因为 alt 属性不一定以 CSS 可以访问的方式反映在 DOM 中。

使用 CSS 的解决方法（仅在某些环境中有效）：

.cooked img[alt^="hide-this-image-"] {
  display: none;
}

但同样，这在 Discourse 中可能无法一致工作，因为图像的渲染方式（例如通过 markdown 或 JS）。在这种情况下，您需要 JavaScript。

JavaScript 可靠的替代方案：

document.querySelectorAll('.cooked img[alt^="hide-this-image-"]').forEach(img => {
  img.style.display = 'none';
});

这将在包括 Discourse 在内的所有环境中可靠地工作。

23

ChatGPT 的解决方案似乎奏效了：

image
image1114×546 58.3 KB

Facebook Debugger 也将其识别为特色图片：

image
image741×377 50.1 KB

带有 Javascript 的组件：

import { apiInitializer } from "discourse/lib/api";

export default apiInitializer((api) => {
  api.onPageChange(() => {
    document
      .querySelectorAll('.cooked img[alt^="featured-image-"]')
      .forEach((img) => {
        const parent = img.closest("div");
        if (parent) {
          parent.style.display = "none";
        } else {
          img.style.display = "none";
        }
      });
  });
});

我注意到它在图片本应在的位置保留了一些空间，所以我再次询问 ChatGPT，它补充说需要隐藏父容器，在这种情况下是 <div> 标签。

现在运行得很棒！

24

谢谢。已添加到我的笔记中。

25

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.