You need to enable JavaScript to run this app.
最新活动
大模型
产品
解决方案
定价
生态与合作
支持与服务
开发者
了解我们

如何在Sphinx中为生成的<ul>元素自定义class属性

如何在Sphinx中为生成的
    元素自定义class属性

嗨Olivier,我来帮你搞定这个问题!你想给Sphinx生成的引用列表<ul>替换自定义class,方便用CSS样式化,对吧?这里有几个实用的方法,你可以根据自己的需求选择:

方法1:用容器间接样式化(最推荐,简单通用)

如果不想折腾复杂的配置,这个方法最省心——用reStructuredText的容器指令把你的引用列表包起来,然后通过容器的class来定位内部的<ul>元素。写法如下:

.. _ahn-kwon-14:
.. container:: my-ref-container

   * A----. 2014, J. Number Theory, 145, 433--473.

生成的HTML会是这样的结构:

<div class="my-ref-container">
  <ul class="simple" id="ahn-kwon-14">
    <li><p>A----. 2014, J. Number Theory, 145, 433–473.</p></li>
  </ul>
</div>

之后你就可以在CSS里这样写样式:

.my-ref-container ul {
  /* 这里写你的自定义样式 */
  color: #333;
  margin-left: 2em;
}

这种方法不影响其他输出格式(比如PDF、EPUB),兼容性最好。

方法2:直接给列表指定自定义class

如果你想直接给<ul>元素添加自定义class,可以用reStructuredText的.. class::指令,写法如下:

.. _ahn-kwon-14:
.. class:: my-very-own-refs

* A----. 2014, J. Number Theory, 145, 433--473.

生成的HTML里,<ul>会同时保留默认的simple类和你自定义的my-very-own-refs类:

<ul class="simple my-very-own-refs" id="ahn-kwon-14">
  <li><p>A----. 2014, J. Number Theory, 145, 433–473.</p></li>
</ul>

这样你就可以直接用.my-very-own-refs来写CSS样式了,默认的simple类如果有冲突,用CSS优先级覆盖就行(比如.my-very-own-refs { ... }的优先级足够)。

方法3:直接写HTML(仅适合纯HTML输出场景)

如果你的项目只需要生成HTML格式,也可以直接用raw指令写原生HTML,这样完全自定义结构:

.. raw:: html

   <ul class="my-very-own-refs" id="ahn-kwon-14">
     <li><p>A----. 2014, J. Number Theory, 145, 433–473.</p></li>
   </ul>

不过这种方法的缺点是,其他输出格式(比如PDF)会忽略raw HTML内容,所以只适合单一HTML输出的项目。

你之前试过CSS类但没找到门路,应该是没把.. class::指令和引用标签、列表的格式配合对,试试上面的方法1或2,应该就能解决你的问题啦!

内容来源于stack exchange

火山引擎 最新活动