如何为 reStructuredText、Sphinx、ReadTheDocs 等设置自定义样式?

2024-01-16

我想扩展使用的主题Sphinx and 阅读文档与我自己的自定义样式。

为了让我的更改得以保留,最好的方法是什么?


编辑:截至 2021 年,以下答案已过时,请使用html_css_files = []在你的conf.py而不是使用版本 1.8 之后的应用程序 API(撰写本文时当前的 Sphinx 版本是 4.1.1)。这add_stylesheet下面的选项已被重命名add_css_file在 1.8 版本中,似乎更适合 Sphinx 扩展开发人员。

假设

您的 RTD 文档集具有类似于以下结构的内容:

  • (root path)
    • (其他一些与本次讨论无关的内容)
    • _static/
    • _templates/
    • conf.py

您还在本地使用sphinx-build or sphinx-autobuild使用默认主题,但您部署的服务器可能使用sphinx-rtd-theme反而。

用例:帽子笔记

对于这个插图,我将展示如何为“hatnotes”创建自定义样式,这是 MediaWiki 文档中普遍存在的一个概念,并且对应于roughly to the admonition在 RST 中构建。您可以应用此处显示的内容来创建任何自定义 CSS 并将其包含在您的文档集中。

第 1 步:创建自定义 CSS

自定义 CSS 文件应该位于_static/目录,因为构建过程和脚本将在其中找到它。我会鼓励css/子目录,因为您可能需要添加其他自定义内容,例如 JavaScript 文件。

创建您的自定义 CSS 文件并将其放入此目录中。将您的样式规范编写为您将在构建中使用的主题中可能已存在的任何内容的覆盖。另外,不要假设您的样式是否会覆盖主题中的现有样式,因为您无法保证何时会相对于默认样式添加您的样式。

这是我为帽子笔记定制的 CSS。我把这个保存在_static/css/hatnotes.css.

.hatnote
{
    border-color: #c8c8c8 ;
    border-style: solid ;
    border-width: 1px ;
    font-size: x-small ;
    font-style: italic ;
    margin-left: auto ;
    margin-right: auto ;
    padding: 3px 2em ;
}
.hatnote-gray { background-color: #e8e8e8 ; color: #000000 ; }
.hatnote-yellow { background-color: #ffffe8 ; color: #000000 ; }
.hatnote-red { background-color: #ffe8e8 ; color: #000000 ; }
.hatnote-icon { height: 16px ; width: 16px ; }

第 2 步:向模板添加样式

对于默认主题,创建一个覆盖默认主题的模板就足够了layout.html将您的自定义 CSS 添加到布局中。模板的使用有详细记录在 sphinxdoc.org http://sphinx-doc.org/templating.html#configuration-variables。在您的覆盖模板中,只需设置css-files变量(一个数组),附加了自定义 CSS 文件的列表。

这是我的模板,添加了帽子注释 CSS。我将其另存为_templates/layout.html.

{% extends "!layout.html" %}
{% set css_files = css_files + [ "_static/css/hatnotes.css" ] %}

这就是您需要为默认主题做的全部事情。对于 Sphinx/RTD 主题,还有一个额外的步骤,您...

第 3 步:将样式表添加到主题

对于 Sphinx/RTD 主题,您的模板将被忽略。您必须向您的模板添加一个函数,而不是使用模板机制conf.py将 CSS 文件添加到应用程序主题的文件。靠近你的conf文件设置的地方html_theme属性,添加如下内容:

def setup(app):
  app.add_stylesheet( "css/hatnotes.css" )

请注意,这次没有_static/在小路的前面;这add_stylesheet()函数假定路径的该部分。

完成用例

现在您已经为默认主题和 Sphinx/RTD 主题设置了自定义样式,您实际上可以在文档中使用它们。

遵循 MediaWiki 中将股票帽注定义为“模板”的通常范例(抱歉,与 Sphinx 和 RTD 中的模板不同),我设置了一个includes/存储我所有帽子笔记的目录。

以下是如何使用自定义样式信息构建帽注。这个文件是includes/hatnotes/stub-article.rst.

.. container:: hatnote hatnote-gray

   |stub| This article is a stub. Please improve the docs by expanding it.

.. |stub| image:: /images/icons/stub.png
          :class: hatnote-icon

在这里,我们将“存根”帽子笔记设置为具有默认的帽笔记样式、灰色背景,并使用“存根”图标作为内嵌图像,其中hatnote-icon应用于该图像的样式。

现在我们可以将该文件用作文档中包含的资源。

Foo Article
===========

.. include:: /includes/hatnotes/stub-article.rst

Blah blah I haven't written this article yet.

无论您使用本地默认主题还是 Sphinx/RTD 主题,帽注都将使用您通过设置添加的样式进行渲染_templates/layout.html模板和conf.py脚本都包含您放置在_static/目录。

结束状态

您的文档存储库现在包含以下内容:

  • (root path)
    • _static/
      • css/
        • (自定义 CSS 文件...)
    • _templates/
      • layout.html(将您的自定义 CSS 添加到默认布局)
    • conf.py(具有将自定义 CSS 添加到应用程序主题的新功能)
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何为 reStructuredText、Sphinx、ReadTheDocs 等设置自定义样式? 的相关文章

  • 有没有办法编写屏幕阅读器会忽略的内容?

    我刚刚开发了一个需要视力正常和视障用户都可以访问的页面 内容的某些元素仅与视觉元素相关 因此根本不适用于使用屏幕阅读器的人 例如 链接在新窗口中打开视听演示文稿 但由于我无法控制的情况 窗口的大小被笨拙地调整 因此有一条消息说您应该调整窗口
  • 当鼠标悬停在伪元素上时触发CSS动画?

    我试图在伪元素悬停时触发 CSS 动画 我目前有 2 个视频 显示鼠标悬停在浏览器的 50 一侧 我想应用类似的效果来为某些文本添加动画效果 我想要 p 标签在移动时向上移动并淡入 p h1 同时以同样的方式标记 就像这个网站一样 http
  • 在 javascript、jQuery 或 css 中,如何让 div 或 iframe 展开以填充其余空间

    我有三个 iframe 我将顶部 iframe 设置为 50px 高度 将底部 iframe 设置为 50px 但我希望中间 iframe 扩展以填充其余空间 有没有一种技术可以用来对任何窗口屏幕尺寸执行此操作 谢谢 example
  • 如何动态突出显示网页上的字符串?

    我想创建带有 url 的页面 例如 http xyzcorp schedules 2015Aug24 Aug28 Jim Hawkins http xyzcorp schedules 2015Aug24 Aug28 Billy Bones
  • 如何仅在 css/html 中强制在单词之间换行?

    我只有一段普通的文本 p 标签内的 p div 标签 但只有 Firefox 可以正确显示 Firefox 打破了单词之间的界限 所有其他浏览器都会在单词中间断行 这使得阅读变得困难 这是我的意思的一个例子 火狐浏览器 工作中 This w
  • 如何向 Rails 应用程序添加自定义字体?

    我想在 RoR 应用程序中使用几种字体 但它们的格式主要是 ttf 和 otf 等 我该如何将这些文件嵌入到我的 Rails 应用程序中 也就是说 一旦我将它们放入我的资产文件夹中 将它们嵌入我的 CSS 和 或 LESS 文件中的语法到底
  • 引导行之间的垂直间距

    所以我正在研究布局 为了 响应能力 我决定使用 Bootstrap 现在我猜网格系统有问题 我想要的结果如下 1 4 2
  • 以编程方式使用 Sphinx 特定指令解析 .rst 文件

    我希望能够在 Python 中解析基于 sphinx 的 rst 以便进一步处理和检查 就像是 import sphinx p sphinx parse path to file rst do something with p 似乎在 do
  • 如何让div与包含td的高度相匹配?

    我沿着桌子的一排布置了三个 面板 一个比另外两个高 我希望所有三个面板都与最高的一个的高度相匹配 我尝试将 div 的样式设置为 height 100 但是即使包含的 tds 增长 短面板仍然很短 我的 HTML 是由 JSF 生成的 因此
  • 元素和 svg 形状之间的白线

    大家好 我正在使用由 shapedivider 生成的 svg 整形器 您可以看到 有一条白线 我不知道为什么它在那里以及如何删除它 请你帮助我好吗 有形状分隔符的代码 custom shape divider bottom 1640714
  • 我可以根据同一容器中另一个元素的大小强制内联文本换行吗?

    考虑这个 jsbin http jsbin com ElIKOKe 3 edit html css output 我有这个html div class container span The lime outlined container h
  • CSS: *html #id_name

    我有这个代码 html alertBox height 100px modalContainer gt alertBox position fixed 这是由CSS支持的吗 我在其他网站上找到了这段代码 我忘记了链接 html alertB
  • 更改

    标签中一个单词的颜色

    我正在处理一份 html 文档 并且只想在我的文档中创建一个单词 p 标记不同的颜色 如果不做完全不同的事情 这可能吗 p p tag p p I want to make only THIS word blue p p style dis
  • 如何处理 Django 中的错误

    我想让我的 django 应用程序尽可能对用户友好 并且我想处理适当的错误并让它推出类似于 javascript 中的警报的错误消息 我想在没有上传文件时执行此操作 因此 当按下上传按钮并且尚未上传任何内容时 将会发出一条警报消息 我的看法
  • 为什么此 TTF 字体在我的浏览器中无法使用?

    我下载了一种名为 Clunk 的 TTF 字体 并尝试将其应用于某些文本 这是我正在使用的代码 h1 Test h1 这似乎不起作用 Chrome 给了我两个错误 Failed to decode downloaded font path
  • 将按钮文本放在一行上

    我的按钮文本在 safari 中显示在一行上 即使在初次单击后 但是在 google chrome 上 当您第一次到达该按 钮时 我的按钮将显示在一行上 但是当您浏览更多帖子并再次遇到 加载更多 按钮时 文本搞砸了 这只发生在谷歌浏览器上
  • 为不同的字体系列指定不同的字体大小

    有没有办法为不同的字体系列指定不同的字体大小 我想要使 用的字体 出于产品品牌目的 是一种有点罕见的字体 FlashDLig 并非所有 PC 和浏览器都支持 我的一台带有 IE 9 的 Windows 7 PC 不显示它 现在 对于我使用
  • CSS 网格框架中的间距有什么作用?

    我正在深入研究 Web 开发 并且正在使用 Blueprint CSS 框架 其中包括网格系统 我有几个问题 水沟有什么用处 当然 它们不用于在列之间包含空间 因为您可以使用 margin CSS 属性来实现这一点 对吗 或者排水沟只是一种
  • 在 Sphinx 文档中*仅*显示文档字符串?

    Sphinx有一个功能叫做automethod从方法的文档字符串中提取文档并将其嵌入到文档中 但它不仅嵌入了文档字符串 还嵌入了方法签名 名称 参数 我如何嵌入only文档字符串 不包括方法签名 ref http www sphinx do
  • 如何使整个跨度落入新行?

    这个片段显示了我想要的 http jsfiddle net 945Df 3 http jsfiddle net 945Df 3 div class sup strong a href Rosario Santa Fe Argentina a

随机推荐

  • 使用 IoC 在 SOA 应用程序中通过 DDD 进行验证

    在我的服务外观层中 我有一个服务类 其方法 操作接受 DTO 数据契约 对象 AutoMapper 用于将此 DTO 映射到我的域对象的实例以应用任何更改 该请求被传递到我的域服务 该服务执行实际工作 该方法可能如下所示 public En
  • 如何在 Angular 2 中使用 FullCalendar

    我对 Angular 2 相当陌生 正在尝试掌握如何将 Angular 2 与现有的 Javascript UI 框架库集成 现在我正在尝试使用 jQuery 插件http fullcalendar io http fullcalendar
  • 投影深度的法线

    我想计算法线贴图N i j 从深度图D i j where i j 描述 2D 像素位置 这里讨论这个问题的基本情况 使用相邻像素叉积从深度图像计算表面法线 https stackoverflow com questions 3464410
  • MVC @Url.Content 与 @Url.Action

    我在网上查过但无法找到两者之间的区别 使用 Url Content vs Url Action Url Content当您希望解析站点上任何文件或资源的 URL 并且将相对路径传递给它时使用 Url Content path file ht
  • 两个相同的 URL,但参数顺序不同:内容重复?

    我自己的 CMS 会自动向页面中的链接添加新参数以指定给定语言 它工作得很好 但它并不总是将 var 放在相同的位置 给我一个指向相同页面 语言的链接 www xxx yy index php mod blog page 3 lang en
  • Android WebView如何处理数据?

    Android的WebView可以使用本地存储 Service Workers IndexedDB和许多其他功能 但是 我无法找到有关此数据存储位置以及何时清除的任何信息 通过一些测试 我已经能够确定它们没有存储在缓存中 因为我可以删除缓存
  • CSS 仅适用于 IE 8

    我需要为某些项目设置仅适用于 IE 8 的样式 如果我这样做 然后我这样做 会发生什么 我找到了这个链接到之前的SO问题 https stackoverflow com questions 3958913 fix css if lt ie
  • LINQ to Entities 无法识别 ElementAt 方法

    我正在使用该方法Queryable ElementAt Int32 获取查询结果的特定元素 IQueryable
  • Android ListView下拉刷新

    是否有像 iOS 中那样存在的默认功能来更新列表视图 或者任何其他图书馆 现在支持库支持此功能并称为swipeRefreshLayout https developer android com reference android suppo
  • React-native:动态更新堆栈导航器中的标题标题

    我为标题标题 堆栈导航器 制作了一个自定义组件 它显示用户名以及一些图像 在此页面上我必须编辑用户名并成功也在标题中更新它 所以我的问题是如何动态更改 更新标题 这可以使用导航道具来完成 您可以使用this props navigation
  • iOS6旋转问题

    我知道你必须使用IOS6的新旋转方法 但似乎我写的方法不起作用 我将 plist 文件设置为允许所有旋转 但是不是肖像颠倒 然后我的里面有以下内容应用程序委托 self navController UINavigationControlle
  • 为什么我可以在 JavaScript 中定义函数之前使用该函数?

    即使在不同的浏览器中 此代码也始终有效 function fooCheck alert internalFoo We are using internalFoo here return internalFoo And here even t
  • 使用jpype启动jvm时出现分段错误

    我正在尝试在我的 Python 代码中使用 java sutime 直到昨天 代码一直运行良好 但现在以分段错误结束 问题似乎来自于 jpype startJVM getDefaultJVMPath 该函数以分段错误结束 默认的 JVM 路
  • 有条件的列的计数器缓存?

    我对计数器缓存的概念很陌生 并且我的应用程序主页之一的加载时间有些天文数字 我相信我需要继续下去 我需要实现的大多数计数器缓存都附加了某些 简单 条件 例如 这是一个常见的查询 projects employee projects wher
  • 如何使用 ocLazyLoad 进行依赖注入

    我正在使用 ocLazyLoad 并且我有一些外部角度库 例如Chart js and pascalprecht translate 并且我需要在某些路由中延迟加载它们 如您所知 对于常见的角度模块依赖注入应该是这样的 var angula
  • 如何模拟 HttpServletRequest? [复制]

    这个问题在这里已经有答案了 我有一个查找查询参数并返回布尔值的函数 public static Boolean getBooleanFromRequest HttpServletRequest request String key Bool
  • 在 Ruby on Rails 3 上上传多个文件[关闭]

    Closed 此问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我想将多张图片上传到我的 Rails 3 应用程序 我目前正在使用 Paperclip 上传图片 并且我
  • 在 ReactJS 中显示/隐藏组件

    我们现在在使用 React 的过程中遇到了一些问题 但是它kinda归结为我们如何使用 React 的一部分 我们应该如何显示 隐藏子组件 这就是我们编码的方式 这只是我们组件的片段 click function if add here i
  • 如何在 Python 3 中使用 urllib.request 下载文件?

    所以 我正在搞乱urllib request在Python 3中 我想知道如何将获取互联网文件的结果写入本地计算机上的文件 我试过这个 g urllib request urlopen http media mcw cursecdn com
  • 如何为 reStructuredText、Sphinx、ReadTheDocs 等设置自定义样式?

    我想扩展使用的主题Sphinx and 阅读文档与我自己的自定义样式 为了让我的更改得以保留 最好的方法是什么 编辑 截至 2021 年 以下答案已过时 请使用html css files 在你的conf py而不是使用版本 1 8 之后的