Как сделать 2 колонны со сфинксом
Я хочу сделать несколько столбцов в моей документации.
В глобальном масштабе я хотел бы сделать что-то похожее на эта домашняя страница, где есть 3 столбца: один с текущим выпуском, один с новостями и обновлениями и основы.
Когда я искал в Google несколько столбцов в Sphinx, я обнаружил разделение списка на 2 столбца, что не в моем случае.
В вики единственное, что я нашел с несколькими столбцами, — это таблица, но я не думаю, что это применимо здесь?
Возможно ли это в первых файлах с использованием Sphinx?
Большое спасибо
Ответы 3
Есть несколько способов сделать это, так что либо вы найдете тему сфинкса на основе трех столбцов (не то, чтобы я знал о какой-либо), либо, как предложил @Steve_Piercy, вы можете создать свою собственную тему, что, вероятно, будет довольно сложной задачей. Однако вместо этого вы можете использовать выбранную тему и просто настроить содержимое файла .rst и перезаписать тему, чтобы отображать содержимое в виде трех столбцов. Однако для этого вам понадобится немного 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')
Вот и все, теперь запускайте и тестируйте. Вывод должен выглядеть примерно так (в зависимости от вашей темы):
О, спасибо. Я попробую и дам вам несколько обновлений. Однако я не очень хорошо разбираюсь в css, поэтому, возможно, это глупый вопрос: можно ли параметрировать высоту столбцов? Я вижу, вы указали высоту: 500 пикселей. Но что, если я не знаю, какая высота будет у моей колонки? Спасибо еще раз
Я думаю, вы можете убрать эту строку, и ваш столбец будет соответствовать высоте вашей страницы. Я тоже не так хорошо разбираюсь в CSS. Обычно я просто пробую разные вещи и смотрю, что работает лучше всего.
Хорошо, я наконец нашел это:
вы можете использовать ключевое слово container в файлах sphinx/rst для разделения вещей
.. 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; */
}
С помощью этого метода вы можете написать в контейнер все, что хотите (изображение, ссылки, текст и т. д.), и все будет отображаться правильно.
Это работает для меня, но я не понимаю, как это конец. Если я оставлю несколько пустых строк и начну новый абзац или даже заголовок, он останется в правом столбце, пока не достигнет одинаковой длины. Я предполагаю, что это означает, что вы должны сбалансировать их вручную. Есть ли способ обойти это?
Хорошо ли вы сделали отступ в своем коде и достаточно ли строк возвращаются? Я не знаю, полезно ли это, но я использую облачную тему в сфинксе. Итак, в моем файле css есть некоторые импорты: «@import url («default.css»); @import url («cloud.css»);»
Это немного старый вопрос, но в настоящее время потенциально лучшим ответом на этот вопрос является использование https://sphinx-panels.readthedocs.io/en/latest/
Это расширение предоставляет различные компоненты, которых нет в обычном reST.
Я не знаю ни одной темы Sphinx с тремя колонками. Вы можете создать собственную тему. Однако это непросто. См. sphinx-doc.org/en/master/theming.html