如何用狮身人面像制作 2 列
how to make 2 columns with sphinx
我想在我的文档中创建多个专栏。
在全球范围内,我想做一些类似于 this homepage 的事情,其中有 3 列:一列是当前版本,一列是新闻和更新,以及基础知识。
当我在 google 上搜索 Sphinx 中的多列时,我发现将列表拆分为 2 列,这不是我的情况
在 wiki 上,我唯一发现的多列是 table,但我认为这不适用于此处?
这在使用 Sphinx 的第一个文件中是否可行?
非常感谢
有几种方法可以做到这一点,所以您要么找到一个 three-columns-based sphinx 主题(据我所知没有),要么按照 @Steve_Piercy 的建议创建您自己的主题,这可能是一项艰巨的任务。但是,您可以改为使用选择的主题并简单地调整 .rst
文件内容并覆盖您的主题,以 3 列的方式显示您的内容。为此,您需要一些 HTML 和 CSS。
因此,首先您需要创建一个 test.rst
内容作为 html 原始代码,如下所示:
Test
======
.. raw:: html
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
既然内容已准备就绪,我们在 _static/custom_style.css
下为其创建一个样式文件,其中包含以下代码:
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 500px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
最后一步是将此样式添加到您的 conf.py
文件中,以便将其添加到您的主题中。因此,在您的 conf.py
中添加以下行:
def setup(app):
app.add_stylesheet('custom_style.css')
就是这样,现在 运行 并进行测试。输出应该看起来像这样(取决于你的主题):
好的,我终于找到了:
您可以在 sphinx/rst 个文件中使用 container
关键字来分隔内容
.. container:: twocol
.. container:: leftside
text on left column
.. container:: rightside
text on right column
然后在您的 .css 文件中:
div.leftside {
width: 43%;
padding: 0px 3px 0px 0px;
float: left;
}
div.rightside {
margin-left: 45%;
/* float: right; */
}
使用此方法,您可以在容器中写入您想要的所有内容(图片、链接、文本...),它会正常显示。
这是一个有点老的问题,但现在对这个问题可能更好的答案是使用 https://sphinx-panels.readthedocs.io/en/latest/
该扩展提供了普通 reST 中没有的各种组件。
我想在我的文档中创建多个专栏。
在全球范围内,我想做一些类似于 this homepage 的事情,其中有 3 列:一列是当前版本,一列是新闻和更新,以及基础知识。
当我在 google 上搜索 Sphinx 中的多列时,我发现将列表拆分为 2 列,这不是我的情况
在 wiki 上,我唯一发现的多列是 table,但我认为这不适用于此处?
这在使用 Sphinx 的第一个文件中是否可行?
非常感谢
有几种方法可以做到这一点,所以您要么找到一个 three-columns-based sphinx 主题(据我所知没有),要么按照 @Steve_Piercy 的建议创建您自己的主题,这可能是一项艰巨的任务。但是,您可以改为使用选择的主题并简单地调整 .rst
文件内容并覆盖您的主题,以 3 列的方式显示您的内容。为此,您需要一些 HTML 和 CSS。
因此,首先您需要创建一个 test.rst
内容作为 html 原始代码,如下所示:
Test
======
.. raw:: html
<div class="row">
<div class="column" style="background-color:#aaa;">
<h2>Column 1</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#bbb;">
<h2>Column 2</h2>
<p>Some text..</p>
</div>
<div class="column" style="background-color:#ccc;">
<h2>Column 3</h2>
<p>Some text..</p>
</div>
</div>
既然内容已准备就绪,我们在 _static/custom_style.css
下为其创建一个样式文件,其中包含以下代码:
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding: 10px;
height: 500px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
最后一步是将此样式添加到您的 conf.py
文件中,以便将其添加到您的主题中。因此,在您的 conf.py
中添加以下行:
def setup(app):
app.add_stylesheet('custom_style.css')
就是这样,现在 运行 并进行测试。输出应该看起来像这样(取决于你的主题):
好的,我终于找到了:
您可以在 sphinx/rst 个文件中使用 container
关键字来分隔内容
.. container:: twocol
.. container:: leftside
text on left column
.. container:: rightside
text on right column
然后在您的 .css 文件中:
div.leftside {
width: 43%;
padding: 0px 3px 0px 0px;
float: left;
}
div.rightside {
margin-left: 45%;
/* float: right; */
}
使用此方法,您可以在容器中写入您想要的所有内容(图片、链接、文本...),它会正常显示。
这是一个有点老的问题,但现在对这个问题可能更好的答案是使用 https://sphinx-panels.readthedocs.io/en/latest/
该扩展提供了普通 reST 中没有的各种组件。