首页 > 代码库 > 实现 kindle 原生系统、多看系弹出注释的通用写法
实现 kindle 原生系统、多看系弹出注释的通用写法
入手 Kindle 后开始自己做 ePub，之前一直用原生系统，使用的弹出注释代码如下：
<p class="P_Footnote" id="ref_footnotebookmark_end_9_1"><span style=" font-size: 0.75em; vertical-align: super;"><a href="#ref_footnotebookmark_start_9_1">①</a></span>注释的内容</p>
逐渐由于制作 ePub 的需要，我开始使用多看系统，这时候原生系统弹出注释代码失效，这样就造成极大的不便——我必须制作两个不同的 ePub 来适应系统切换。多看弹出注释代码如下：
<ol class="duokan-footnote-content"> <li class="duokan-footnote-item" id="a_1_1"><a href="#c_1_1">这里是注释</li></ol>
于是我开始寻求一种方法，使得弹窗注释能支持原生和多看。上面的两处代码中可以发现，原生系统的弹窗注释基于标签<p>，而多看系统的弹窗注释依赖于<ol>，于是我有一个思路，如果将两个标签嵌套使用，是否就能实现双系统的弹窗呢？
一开始我将<p>嵌套在<li>中，将<p>嵌套在<a>中，代码如下：
1 <ol class="duokan-footnote-content">2 <li class="duokan-footnote-item" id="a_1_1">3 <p><a href="#c_1_1">这里是注释</a></p>4 </li>5 </ol>6 <!--<p>嵌套在<li>-->
1 <ol class="duokan-footnote-content">2 <li class="duokan-footnote-item" id="a_1_1">3 <a href="#c_1_1"><p>这里是注释</p></a>4 </li>5 </ol>6 <!--<p>嵌套在<a>-->
然而这两种方法在实际测试中都失效。不过在论坛坛友的指点下，找到了这么一种方法，代码如下：
1 <ol class="duokan-footnote-content">2 <li class="duokan-footnote-item" id="ref_footnotebookmark_end_1_1">3 <p class="f"><a href="#ref_footnotebookmark_start_1_1">这里是注释</a>??​??????</p>4 </li>5 </ol>
P.S. "​"这个字串是 Zero-width space （ 零宽度非换行空格 ）
P.S.想要批量修改可以使用通配符，如下：
Search:<li class="duokan-footnote-item" id="(.*?)"><a href="http://www.mamicode.com/#(.*?)">(.*?)</li>
Replace:<li class="duokan-footnote-item" id="\1"><p class="f"><a href="http://www.mamicode.com/#/2">\3</a>​?????????</p>
实现 kindle 原生系统、多看系弹出注释的通用写法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。