网页设计组件

PyData Sphinx 主题使用 sphinx-design 添加了一些 UI 组件，并为内容创建提供了额外的灵活性。这些组件包括徽章、按钮、卡片和选项卡等。该主题提供了自定义 CSS，以确保 sphinx-design 元素的外观和风格与该主题保持一致。

另请参阅

有关如何使用这些扩展的更多信息，请参阅 sphinx-design 文档。

下面您可以找到一些使用 sphinx-design 扩展创建的组件示例。

徽章和按钮链接#

以下是一些可用的徽章

主要次要成功主要轮廓次要轮廓成功轮廓

以下是一些可用的按钮样式链接，也使用了语义颜色

注意

Sphinx Design 按钮实际上是链接，这意味着它们在 HTML 中使用 <a> 标签而不是 <button> 进行渲染。如果您需要链接看起来像按钮，可以使用它们，但是请注意，它们不遵循原生按钮组件的无障碍最佳实践，例如使用正确的 ARIA 属性。

来自 PyData Sphinx 主题的“杂项”的代码示例

int main(const int argc, const char **argv) {
    return 0;
}

def main():
    return

class Main {
    public static void main(String[] args) {
    }
}

function main()
end

PROGRAM main
END PROGRAM main

带标题的示例

Hello world

语法	描述
标题	标题
段落	文本

def foo(x):
    return x + 1

嗯，这是一个好问题。

另一个 Hello World

下拉菜单看起来类似于警示，但它们是可点击的交互式元素，可用于隐藏内容。有关更多信息，请参阅 Sphinx Design 下拉菜单文档。

::: admonition 用于参考的警示。

以及一些警示内容。 ::

sphinx-copybutton 为每个代码单元添加了一个复制按钮。您可以将鼠标悬停在下面的代码单元格上查看其工作原理

print("A copybutton in the top-right!")

sphinx-togglebutton 允许您将警示转换为可切换的元素。

::: {.admonition .dropdown} 点击我以切换！

这将在点击之前隐藏！ ::

::: toggle 一个独立的切换按钮！ ::

在此页面上