Question

我想要一个Tumblr主题，为帖子内容中的每个标题添加可链接的锚点。我无权访问或控制该内容的呈现;对于Markdown标题，Tumblr倾向于吐出简单<h2>和类似的东西：

## Hello,  friend !        ->       <h2>Hello,  friend !</h2>

我想确保帖子的任何部分都可以直接通过anchor link进行超链接，例如http://thing.place/post/12345#hello-friend。有没有人有一个简单，相当通用的JavaScript代码段来清理任何标题元素的内容，并将其作为id添加到该标题中？

（据推测，如果你已经为自己编写了这个;你可能还有一些额外的代码来添加一个自我链接的锚链接指示器;如果你已经得到它，就分享它。）

Answer 1

我维护的项目可以完成您所描述的内容： AnchorJS

文档：http://bryanbraun.github.io/anchorjs/
Github Repo：https://github.com/bryanbraun/anchorjs

包含脚本后，您可以使用选择器选择它添加锚点的元素：

// Add anchors to all h1's and h2's on the page
anchors.add('h1, h2');

它与Jquery或Lodash没有任何依赖关系，如果这是Tumblr的问题（我对Tumblr不太熟悉以了解其中的约束）。

Answer 2

我有一个非常天真的解决方案，它取决于jQuery和Lodash（我的意思是完整的jQuery，如Zepto和朋友don't include :header）;但是首选的是轻量级，优雅，纯JavaScript的解决方案：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.0/lodash.min.js"></script>
<script>
   jQuery.noConflict(true)(function($){
      var lodash = _.noConflict()
        , anchor = "\u2693\uFE0E"

      $(':header')
      .wrap(function(){
         var wrapper = document.createElement('header')
           ,   title = lodash.kebabCase( $(this).text() )

         return $(wrapper).attr('id', title) })
   })
</script>

这会增加我计划用于其他目的的语义<header>元素的额外工作，但这可能没有必要。

向HTML标头动态添加可锚定ID的最简单，最安全的方法是什么？

2 个答案: