zoukankan      html  css  js  c++  java
  • 实现 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>​​&#8203;​​​​​​</p>
    4     </li>
    5   </ol>

    P.S. "&#8203;"这个字串是 Zero-width space ( 零宽度非换行空格 )

    P.S.想要批量修改可以使用通配符,如下:

    Search:<li class="duokan-footnote-item" id="(.*?)"><a href="#(.*?)">(.*?)</li>

    Replace:<li class="duokan-footnote-item" id="1"><p class="f"><a href="#2">3</a>&#8203;​​​​​​​​​</p>

  • 相关阅读:
    解决做好一个机器学习项目的3个问题
    VMwareworkstations14 安装arch
    python3学习笔记——数字、字符串、列表、字典、元组
    python2和python3编码
    重定向和伪静态的原理、语法、实践
    HTTP中的重定向和请求转发的区别
    linux+Apache开启伪静态配置
    Centos7下Yum安装PHP5.5,5.6,7.0
    windows10图形化连接CentOS7
    python学习笔记--类(一)
  • 原文地址:https://www.cnblogs.com/RhinoC/p/4004722.html
Copyright © 2011-2022 走看看