如何使用 ID 自动创建指向 headers 的 on-hover 永久链接？

Question

当您像 http://github.com and http://readthedocs.org, the documents hosted there have the nice property that headers of paragraphs reveal a small permalink icon on hovering. Unfortunately, though many other sites do have ids in headers, permalinks to said #id are sometimes not provided or at least hidden elsewhere. As an example: http://pandoc.org/MANUAL.html#extension-yaml_metadata_block 一样浏览网站时。所以我想实现的是在默认情况下不提供的网站上自动获取 github/rtd-ish on-hover permalinks。

这可以通过 stylish alone or does this involve a userscript 实现吗？或者更好的是，有人已经实施了吗？

一个简单的尝试就是例如

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

但这是 字面意思 呈现为 <a href="#id">¶</a> 而不是实际的 link，即 content 不能包含 html 标签.所以更复杂的东西似乎是必要的，特别是考虑到不是 all headers 有一个 id 而有些网站是 <a name="id">...

Answer 1

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

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

$('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 和 link 与 #id.

如何使用 ID 自动创建指向 headers 的 on-hover 永久链接？

How to automatically create on-hover permalinks to headers with ids?

hover

greasemonkey

permalinks

userscripts

stylish