Изменение ширины содержимого темы Sphinx 'Read the Docs'
Я использую тему "Прочитайте Документы" Sphinx для моей документации. В оригинальной теме, приведенной ниже
http://read-the-docs.readthedocs.org/en/latest/theme.html
ширина содержимого или основной макета предназначена для мобильных устройств. Однако для моего проекта я хотел бы, чтобы это было немного шире. Я не знаю HTML и, следовательно, был бы признателен, если бы кто-нибудь мог дать мне некоторые подсказки для увеличения ширины содержимого (макета).
Ответы
Ответ 1
Другой вариант - создать таблицу стилей в source/_static
с помощью только того css, который вы хотите, например.
.wy-nav-content {
max-width: none;
}
или
.wy-nav-content {
max-width: 1200px !important;
}
Убедитесь, что каталог указан в source/conf.py
. По-моему, по умолчанию есть строка для этого, т.е.
# Add any paths that contain custom static files (such as style sheets) here,
# relative to this directory. They are copied after the builtin static files,
# so a file named "default.css" will overwrite the builtin "default.css".
html_static_path = ['_static']
Затем создайте собственный макет в source/_templates/layout.html
и сделайте что-то вроде этого, чтобы включить таблицу стилей
{% extends "!layout.html" %}
{% block extrahead %}
<link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
Предполагая, что вы вызвали свою таблицу стилей style.css
Ответ 2
Прежде всего, я должен сказать, что во время моего сфинкса quickstart я выбрал вариант отдельной папки для моих источников и для моей сборки.
Это трехэтапный процесс:
1. Создайте документ для своих стилей:
Где?
- В том же каталоге, где живет мой
conf.py
(в моем случае source
), я создал папку для своих статических файлов (stylesheets, javascripts). Я назвал его custom
.
- Внутри я создал подпапку для своих таблиц стилей:
source/custom/css
.
- В этой подпапке я создам свои собственные стили:
source/custom/css/my_theme.css
.
2. Рассказывать о сфинксе об этом
Теперь нам нужно сказать sphinx, чтобы плюнуть на этот документ внутри build/_static/css
, тот же каталог, где находится таблица стилей, включенная в тему Прочитать документы. Мы делаем это, добавляя следующую строку к conf.py
:
html_static_path = ['custom'] # Directory for static files.
Готово. Теперь, если мы построим, у нас будут стили RTD (theme.css
) и наш пользовательский my_theme.css
в том же каталоге, build/_static/css
.
3. Выбор нашей пользовательской темы
Теперь мы попросим sphinx использовать наш пользовательский my_theme.css
вместо RTD. Мы делаем это, добавляя эту строку в conf.py
:
html_style = 'css/my_theme.css' # Choosing my custom theme.
В нашей пользовательской таблице стилей первая строка должна импортировать стили theme.css
с помощью @import url("theme.css");
.
И мы готовы начать переписывать стили.
ОБНОВЛЕНИЕ: ЕСТЬ ПРОСТО МНОГО.
1. Поместите свои настройки внутри source/_static/css/my_theme.css
.
В вашей пользовательской таблице стилей первая строка должна импортировать стили theme.css
с помощью @import url("theme.css");
.
Таким образом, вам не нужно беспокоиться о том, чтобы испортить стили по умолчанию, если ваша пользовательская таблица стилей не работает, удаляется и начинается снова.
2. Добавьте в строку conf.py
следующую строку:
html_style = 'css/my_theme.css'
Ответ 3
Просто на тот случай, если кто-то все еще ищет простой ответ... объединяя идеи из https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ и приведенные выше предложения, я обнаружил, что самый простой способ получения пользовательской ширины окна заключается в следующем:
в conf.py добавьте функцию, которая добавляет вашу собственную таблицу стилей (просто добавьте следующие строки):
def setup(app):
app.add_stylesheet('my_theme.css')
а затем создайте файл my_theme.css в папке _static, который просто содержит следующие строки:
.wy-nav-content {
max-width: 1200px !important;
}
Ответ 4
Решения здесь несколько хакерские. Если вы хотите включить стиль и переопределить css и работать с RTD, вам понадобится что-то вроде этого.
on_rtd = os.environ.get('READTHEDOCS', None) == 'True'
if not on_rtd: # only import and set the theme if we're building docs locally
import sphinx_rtd_theme
html_theme = 'sphinx_rtd_theme'
html_theme_path = [sphinx_rtd_theme.get_html_theme_path()]
html_style = 'css/custom.css'
else:
html_context = {
'css_files': [
'https://media.readthedocs.org/css/sphinx_rtd_theme.css',
'https://media.readthedocs.org/css/readthedocs-doc-embed.css',
'_static/css/custom.css',
],
}
Я сам это испытал и, похоже, работает локально и на RTD. Во многом плагиат из https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/
Ответ 5
Для "классической" темы решение так же просто и чисто, как:
# Add/Update "html_theme_options" like this on your conf.py
html_theme_options = {'body_max_width': '70%'}
Адаптируйте процент по своему вкусу.
Ссылка из sphinx: body_max_width (int или str): максимальная ширина тела документа. Это может быть int, который интерпретируется как пиксели или допустимая строка размера CSS, например, 70em или 50%. Используйте ‘none, если вы не хотите ограничения ширины. Значения по умолчанию могут зависеть от темы (часто 800px).
Ответ 6
Чтобы сделать ReadTheDocs тему использовать всю ширину экрана, вы можете изменить theme.css
, удалив свойство max-width: 800px;
из определения класса wy-nav-content
, например:
.wy-nav-content {
padding: 1.618em 3.236em;
height: 100%;
/* max-width: 800px; */
margin: auto;
}
Некоторые примечания
-
Источник theme.css
находится здесь:
https://github.com/rtfd/readthedocs.org/blob/master/media/css/sphinx_rtd_theme.css
-
В вашей файловой системе он будет находиться (если вы запустили: pip install sphinx_rtd_theme
):
lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css
-
Чтобы найти абсолютный путь theme.css
в Linux/Mac, вы можете запустить это в командной строке (при условии, что вы установили переменную среды $PYTHONPATH
):
for p in `echo $PYTHONPATH | tr ":" "\n"`; do
find $p -type f -name 'theme.css' | grep sphinx_rtd_theme
done
-
Файл theme.css
будет уменьшен, чтобы вы могли использовать инструмент, например http://unminify.com, чтобы было легче читать.
Результаты:
Перед
![Unmodified readthedocs theme]()
После того, как:
![Modified readthedocs theme]()
Ответ 7
Я бы изменил это в css. Вы должны искать файл theme.css(он находится в источниках read-the-doc на странице "sphinx_rtd_theme/static/css/theme.css" ).
Сделайте копию этого файла и поместите его в свой sphinx _static. В этом файле css вы можете внести все изменения макета, которые вам нужны. (Возможно, вам придется немного почитать файлы css, если вы никогда с этим не работали.)
Надеюсь, что это поможет.
Ответ 8
Согласно Прочтите Документацию Docs, рекомендуемый способ добавить пользовательский CSS в тему - это опция html_css_files
в conf.py.
html_css_files = [
'style.css',
]
содержимое style.css
.wy-nav-content {
max-width: 90% !important;
}
Пожалуйста, не забудьте поместить style.css в папку статического пути html (по умолчанию это _static папка).