1

http://github.comやhttp://readthedocs.orgなどのサイトを閲覧すると、そこにホストされているドキュメントには、ホバリング時に段落のヘッダーに小さなパーマリンク アイコンが表示されるという優れた特性があります。残念ながら、他の多くのサイトではヘッダーに s が含まれていますが、上記へのパーマリンクが提供されていないか、少なくとも他の場所に隠されていることがあります。例: http://pandoc.org/MANUAL.html#extension-yaml_metadata_block。したがって、私が達成したいのは、デフォルトでは提供されていないウェブサイトで github/rtd-ish on-hover パーマリンクを自動的に取得することです。id#id

だけで実現できますか、が必要ですか? または、さらに良いことに、誰かがすでにそれを実装していますか?

簡単な試みは例えば

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

ただし、これは実際のリンクではなく文字通りレンダリングされます。つまり、html タグを含めることはできません。したがって、特にすべてのヘッダーに があり、一部のサイトが代わりにあるとは限らないことを考えると、もっと複雑なことが必要に思えます...<a href="#id">¶</a>contentid<a name="id">

4

1 に答える 1

4

これにはユーザースクリプトが必要です。スタイリッシュは純粋な CSS のためのものであり、あなたが言ったように、HTML を追加する必要があるため、これは純粋な CSS では実行できません。

一方、ユーザースクリプトを使用すると、カスタム 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 に答える