为帖子中的单词添加 <abbr> 标签

自定义 主题组件
24

That’s really up to the mobile browser in how they implement the HTML tag.

1 个赞
25

这个插件运行良好，谢谢。不过，与 linkify 结合使用时无法正常工作。是否可以让链接在带有 类时也能正常工作？

26

在此也重新发布一下答案。:slightly_smiling_face:

我认为问题在于 abbrify 插件默认会跳过链接标签。你可以通过修改代码来尝试修复，删除 head_tag.html 中的第 16 行：

'a': 1,

如果有效或需要更多指导，请告诉我。:slightly_smiling_face:

注意，对于 linkify 主题，有一个独立的用户设置可以修改要跳过的标签。我会在有机会时向此仓库提交一个 PR。

3 个赞
27

这里有可能添加工具提示主题组件的功能吗？

这将是一个很好的补充，因为 abbr 标签在移动设备上基本上没什么用。

2 个赞
28

我写了一个粗糙的用户样式表（CSS），以便在移动设备上查看工具提示。
它需要 Stylus 扩展（我在 Android 上使用支持扩展的 Firefox）。

这类功能本可以包含在插件中，但我实际上在所有网站上都使用它。

abbr[title]:hover {
    border: 2px solid white;
    color: #333;
    background: #FF6;
}
abbr[title]:hover:after {
    content: " (" attr(title) ")";
}
6 个赞
Discourse Dictionary Plugin :ab:
29

您好！感谢分享代码 :raised_hands:
如何才能实现如图所示的，在缩写词上方显示注释的效果呢？

image
image350×192 12.3 KB

1 个赞
30

在折腾了半天之后，我终于能够使用 @Falco 的 Discourse AI 机器人创建代码了 :muscle:
两周以来，我一直在获得机器人的帮助，无论是在 Meta 上（搜索查询的含义）还是在我的网站上编写代码。这是我为解决上述问题而能够整合的代码：

abbr[title] {
    position: absolute;
    background: transparent; /* 非活动状态下的透明背景 */
    overflow: visible; /* 允许内容超出元素边界 */
}

@media (prefers-color-scheme: light) {
    abbr[title] {
        color: var(--primary); /* 脚本的白色或黑色色调？ */
    }
}
abbr[title]:hover {
    background: #FF6; /* 悬停时，背景呈现鲜艳的黄色。 */
}
abbr[title]:hover:after {
    content: " " attr(title) "";
    position: absolute;
    border-radius: 3px;
    bottom: 70%; /* 更改此值以控制差异。 */
    left: 0;
    width: 250px; /* 固定宽度 */
    height: auto; /*“可调高度” */
    padding: 2px;
    z-index: 9;
    background: #00FF00; /* 指定注释的背景色调。 */
    color: #333;
    margin-bottom: 10px; /* 增加下边距以形成分隔。 */
}

我把这个留在这里；也许有人会觉得它有用 :slightly_smiling_face:

附注：如果您在代码中遇到错误，请多多包涵，因为我绝非专业软件工程师。

6 个赞