原生HTML分组href链接以便重复使用以获得最佳维护

Question

我最近开始做降价文档，它有一个非常有用的功能，允许您将所有链接分组到一个地方，并通过调用您的引用来重用它们。这极大地方便了文档的维护。

例如在markdown中，可重用链接的代码如下所示：

[Abbreviations]: http://pythonhosted.org/Markdown/extensions/abbreviations.html
[Attribute Lists]: http://pythonhosted.org/Markdown/extensions/attr_list.html
[Definition Lists]: http://pythonhosted.org/Markdown/extensions/definition_lists.html
[Fenced Code Blocks]: http://pythonhosted.org/Markdown/extensions/fenced_code_blocks.html
[Footnotes]: http://pythonhosted.org/Markdown/extensions/footnotes.html
[Tables]: http://pythonhosted.org/Markdown/extensions/tables.html
[Smart Strong]: http://pythonhosted.org/Markdown/extensions/smart_strong.html

只需调用您的引用名称即可在文档中的任何位置使用这些链接，例如：

* `abbr` -- [Abbreviations][]
* `attr_list` -- [Attribute Lists][]
* `def_list` -- [Definition Lists][]
* `fenced_code` -- [Fenced Code Blocks][]
* `footnotes` -- [Footnotes][]
* `tables` -- [Tables][]
* `smart_strong` -- [Smart Strong][]

我搜索了很多，而且我没有使用原生HTML找到任何类似的功能。

有人有什么想法吗？

Answer 1

从技术上讲，在运行时可以通过javascript实现 - 虽然为了超文本文档的完整性，但我不建议在生产环境中使用它：

＆＃13;

＆＃13;

// SET UP REFERENCES OBJECT

var references = {

  abbr : {
      text : 'Abbreviations',
      hyperlink : 'http://pythonhosted.org/Markdown/extensions/abbreviations.html'
    },

  footnotes : {
      text : 'Footnotes',
      hyperlink : 'http://pythonhosted.org/Markdown/extensions/footnotes.html'
    },

  tables : {
      text : 'Tables',
      hyperlink : 'http://pythonhosted.org/Markdown/extensions/tables.html'
    }

}


// LOOP THROUGH REFERENCES OBJECT

Object.keys(references).forEach(function(reference) {

    var text = references[reference].text;
    var hyperlink = references[reference].hyperlink;
    var referenceSet = [...document.getElementsByClassName(reference)];

    referenceSet.forEach(function(referenceAnchor) {
        referenceAnchor.setAttribute('href', hyperlink);
        referenceAnchor.textContent = text;
    });
});

＆＃13;

<ul>
<li><a class="abbr"></a></li>
<li><a class="footnotes"></a></li>
<li><a class="tables"></a></li>
<li><a class="abbr"></a></li>
<li><a class="footnotes"></a></li>
</ul>

＆＃13;

＆＃13;

＆＃13;