it-swarm.com.ru

Изменение ширины содержимого темы "Сфинкс" "Читать документы"

Я использую тему Sphinx «Прочитайте документы» для своей документации. В оригинальной теме, приведенной ниже

http://read-the-docs.readthedocs.org/en/latest/theme.html

содержание или ширина основного макета предназначены для мобильных устройств. Однако для моего проекта я бы хотел, чтобы это было немного шире. Я не знаю HTML и, следовательно, был бы признателен, если бы кто-нибудь дал мне несколько подсказок для увеличения ширины контента (макета).

24
hypersonics

Другой вариант - создать таблицу стилей в 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

22
Leo

Прежде всего, я должен сказать, что во время моего sphinx quickstart я выбрал вариант отдельной папки для моих sources и для моего build .

Это трехэтапный процесс:

1. Создайте документ для ваших стилей:

Куда?

  1. В той же директории, где живет мой conf.py (в моем случае source), я создал папку для моих пользовательских статических файлов (таблиц стилей, javascripts). Я назвал это custom
  2. Внутри я создал подпапку для моих таблиц стилей: source/custom/css
  3. В этой подпапке я собираюсь создать свои собственные стили: source/custom/css/my_theme.css.

2. Рассказывая сфинксу об этом

Теперь мы должны сказать sphinx плевать на этот документ внутри build/_static/css, того же каталога, в котором находится таблица стилей, включенная в тему Read The Documents . Мы делаем это, добавляя следующую строку в conf.py:

html_static_path = ['custom']       # Directory for static files.

Готово. Теперь, если мы создадим, у нас будутRTDstyles (theme.css) и наш собственный my_theme.css в той же директории, build/_static/css.

3. Выбор нашей пользовательской темы

Теперь мы скажем sphinx использовать наш собственный my_theme.css вместоRTDone. Мы делаем это, добавляя эту строку в conf.py:

html_style = 'css/my_theme.css'     # Choosing my custom theme.

В нашей пользовательской таблице стилей первая строка должна импортировать стили theme.css с @import url("theme.css");.

И мы готовы начать переписывать стили.

ОБНОВЛЕНИЕ: ТАМ IS ДАЖЕ ПРОСТО.

1. Поместите ваши настройки в source/_static/css/my_theme.css.

В вашей пользовательской таблице стилей первая строка должна импортировать стили theme.css с @import url("theme.css");.

Таким образом, вам не нужно беспокоиться о путанице стилей по умолчанию, если ваша пользовательская таблица стилей не работает, удалите и запустите снова. 

2. Добавьте следующую строку в conf.py:

html_style = 'css/my_theme.css' 
12
Bobby wankenoby

На всякий случай, если кто-то все еще ищет простой ответ ... объединяя идеи из https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ и вышеупомянутые предложения я обнаружил, что самый простой способ получить пользовательский window-width - это:

в conf.py добавьте функцию, которая добавляет вашу пользовательскую таблицу стилей (просто добавьте следующие строки):

def setup(app):
    app.add_stylesheet('my_theme.css')

а затем создайте файл с именем my_theme.css в папке _static, который просто содержит следующие строки:

.wy-nav-content {
max-width: 1200px !important;
}
8
se_pp

Решения здесь несколько хакерские. Если вы хотите включить стиль, переопределить 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/

7
Nick Ellis

Чтобы тема 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

2
chown

Я бы изменил это в CSS. Вам следует поискать файл theme.css (он находится в источниках для чтения документов в «sphinx_rtd_theme/static/css/theme.css»).

Сделайте копию этого файла и поместите его в каталог sphinx _static. В этом файле CSS вы можете сделать все необходимые изменения макета. (Возможно, вам придется немного прочитать о файлах CSS, если вы никогда не работали с этим.)

Надеюсь это поможет.

1
steffens21

Для «классической» темы решение так же просто и чисто, как:

# 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).

0
Yahya Yahyaoui