1

当您浏览http://github.com和http://readthedocs.org之类的网站时，托管在那里的文档具有很好的属性，即段落标题在悬停时会显示一个小的永久链接图标。不幸的是，尽管许多其他网站的标题中确实有s，但有时没有提供指向 say 的永久链接，或者至少隐藏在其他地方。例如： http: //pandoc.org/MANUAL.html#extension-yaml_metadata_block。所以我想要实现的是在默认情况下不提供它们的网站上自动获取 github/rtd-ish 悬停永久链接。id#id

这可以仅通过来实现还是涉及？或者更好的是，有人已经实施了吗？

一个简单的尝试是例如

h4:after { content: "<a href=\"#" attr(id) "\">¶</a>" ; }

但这实际上是呈现为<a href="#id">¶</a>而不是实际链接，即content不能包含 html 标记。所以更复杂的东西似乎是必要的，特别是考虑到并非所有的标题都有一个id和一些网站是<a name="id">...

4

1 回答 1

4

这需要一个用户脚本；时尚纯粹是针对 CSS 的，正如您所说，这不能用纯 CSS 完成，因为我们需要添加一些额外的 HTML。

另一方面，用户脚本允许您向页面添加自定义 Javascript，因此您需要遍历h4页面中的所有元素并附<a href="#" + id>¶</a>加到它们。类似的东西（如果你是//@requirejQuery）：

$('h4').each(function() {
    var id = $(this).attr('id');
    if (id) { //make sure the element has an id
        $(this).append($('<a/>', {
            href: '#' + $(this).attr('id'),
            text: '¶'
        });
    }
});

此外，在 HTML5 中，该a name属性不再存在，您应该只id使用#id.

于 2017-01-06T20:01:05.263 回答