入门#
用法#
只需使用 pip 安装 sphinx-design
并将扩展添加到您的 conf.py
extensions = ["sphinx_design"]
对于与 MyST Parser 一起使用 Markdown 文档,建议使用 colon_fence
语法扩展
extensions = ["myst_parser", "sphinx_design"]
myst_enable_extensions = ["colon_fence"]
配置#
要隐藏页面的标题头,请添加到页面顶部
---
sd_hide_title: true
---
:sd_hide_title:
创建自定义指令#
在 0.6.0 版本中添加。
您可以使用 sd_custom_directives
配置选项在您的 conf.py
中添加自定义指令,以及默认选项值
sd_custom_directives = {
"dropdown-syntax": {
"inherit": "dropdown",
"argument": "Syntax",
"options": {
"color": "primary",
"icon": "code",
},
}
}
键是要添加的新指令名称,值是一个字典,包含以下键
inherit
:要继承的指令(例如dropdown
)argument
:默认参数(可选,仅适用于接受单个参数的指令)options
:指令的默认选项字典(可选)
支持的浏览器#
Chrome >= 60
Firefox >= 60
Firefox ESR
iOS >= 12
Safari >= 12
Explorer >= 12
(镜像: twbs/bootstrap)
从 sphinx-panels 迁移#
此软件包是作为 sphinx-panels 的迭代而出现的,旨在使其更灵活、更易于使用,并最大限度地减少 CSS 与 sphinx 主题的冲突。
显著变化
减少直接使用 CSS 类#
这些被指令选项的使用所取代,这些选项是
更易于理解
更易于验证
更易于处理非 HTML 输出
更易于改进/重构
panel
指令已替换#
panel
指令被顶级 grid
指令的使用所取代,然后使用 grid-item-card
指令子项,而不是通过 ---
分隔卡片。
如果不需要卡片,则可以使用 grid-item
指令代替,并且 card
也可以独立于网格使用。
大致上,.. panels::
等同于 .. grid:: 1 2 2 2
,选项为 :gutter: 2
。
tabbed
指令已替换#
tabbed
指令被顶级 tab-set
指令的使用所取代,然后使用 tab-item
指令子项。
:sync:
选项允许跨集合同步选项卡选择。
tab-set-code
指令为同步的代码示例提供了简写形式。
octicon
图标角色#
现在生成的默认 SVG 大小相对于周围文本(即使用 1em
)。指定自定义大小和添加类的语法也已更改。
这与 favicon 图标类似,其中 ,
分隔符也被 ;
替换,例如 :fa:`name,class`
-> :fa:`name;class`
。
改进的 CSS#
将 Bootstrap CSS 从 v4 更新到 v5,特别是允许顶级网格定义列数和 gutter 大小。
所有 CSS 类都以 sd-
为前缀(与其他主题/扩展 CSS 无冲突)
所有颜色都使用 CSS 变量(可自定义)