web-dev-qa-db-fra.com

Modification de la largeur du contenu du thème Sphinx 'Read the Docs'

J'utilise le thème Sphinx "Lisez le document" pour ma documentation. Dans le thème original, donné ci-dessous

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

le contenu ou la largeur de la mise en page principale est conçu pour être compatible avec les appareils mobiles. Cependant, pour mon projet, j'aimerais que cela soit un peu plus large. Je ne connais pas le HTML et apprécierais donc que quelqu'un me donne des indices pour augmenter la largeur du contenu (de la mise en page).

htmlthemeswidthpython-sphinx
24
hypersonics

Une autre option consiste à créer une feuille de style dans source/_static avec uniquement le css souhaité, par exemple.

.wy-nav-content {
    max-width: none;
}

ou

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

Assurez-vous que le répertoire est référencé dans source/conf.py - je crois que par défaut, il existe une ligne pour le faire, c'est-à-dire.

# 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']

Créez ensuite une disposition personnalisée dans source/_templates/layout.html et faites quelque chose comme ceci pour inclure votre feuille de style.

{% extends "!layout.html" %}
{% block extrahead %}
    <link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}

En supposant que vous ayez appelé votre feuille de style style.css

22
Leo

Tout d’abord, je dois dire que lors de mon sphinx quickstart j’ai choisi l’option de dossier distinct pour mes sources et pour mon build .

C'est un processus en 3 étapes:

1. Créez un document pour vos styles:

Où?

  1. Dans le même répertoire que mon conf.py (dans mon cas, source), j'ai créé un dossier pour mes fichiers statiques personnalisés (feuilles de style, javascripts). Je l'ai appelé custom. 
  2. À l'intérieur, j'ai créé un sous-dossier pour mes feuilles de style: source/custom/css. 
  3. Dans ce sous-dossier, je vais créer mes styles personnalisés: source/custom/css/my_theme.css.

2. En parler au sphinx

Maintenant, nous devons dire à sphinx de cracher ce document dans build/_static/css, le même répertoire où se trouve la feuille de style incluse dans le thème Lisez les documents . Nous faisons cela en ajoutant la ligne suivante à conf.py:

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

Terminé. Maintenant, si nous construisons, nous aurons leRTDstyles (theme.css), et notre my_theme.css personnalisé dans le même répertoire, build/_static/css.

3. Sélection de notre thème personnalisé

Maintenant, nous allons dire à sphinx d’utiliser notre my_theme.css personnalisé, au lieu duRTDone. Nous faisons cela en ajoutant cette ligne dans conf.py:

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

Dans notre feuille de style personnalisée, la première ligne doit importer les styles de theme.css avec @import url("theme.css");.

Et nous sommes prêts à commencer à écraser les styles.

UPDATE: IL Y A IS UNE FAÇON SIMPLE.

1. Placez vos personnalisations dans source/_static/css/my_theme.css.

Dans votre feuille de style personnalisée, la première ligne doit importer les styles de theme.css avec @import url("theme.css");.

De cette façon, vous n'avez pas à vous soucier de modifier les styles par défaut si votre feuille de style personnalisée ne fonctionne pas, supprimez-le et recommencez. 

2. Ajoutez la ligne suivante dans conf.py:

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

Juste au cas où quelqu'un chercherait toujours une réponse simple…. Combinant les idées de https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ et les suggestions ci-dessus, j’ai trouvé que le moyen le plus simple d’obtenir un fichier window-width personnalisé est le suivant:

dans conf.py ajoutez une fonction qui ajoute votre feuille de style personnalisée (ajoutez simplement les lignes suivantes):

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

puis créez un fichier nommé my_theme.css dans le dossier _static contenant simplement les lignes suivantes:

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

Les solutions ici sont un peu féroces. Si vous voulez inclure le style, avoir une substitution css et la faire fonctionner sur RTD, vous voudrez quelque chose comme ça.

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',
    ],  
  }

Je l'ai testé moi-même et il semble fonctionner localement et en RDT. Largement plagié de https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/

7
Nick Ellis

Pour que le thème ReadTheDocs utilise toute la largeur de votre écran, vous pouvez modifier le fichier theme.css , en supprimant la propriété max-width: 800px; de la définition de classe wy-nav-content, comme suit:

.wy-nav-content {
    padding: 1.618em 3.236em;
    height: 100%;
    /* max-width: 800px; */
    margin: auto;
}

Quelques notes

  • La source de theme.css est ici: 

    https://github.com/rtfd/readthedocs.org/blob/master/media/css/sphinx_rtd_theme.css

  • Sur votre système de fichiers, il sera inséré (si vous avez exécuté: pip install sphinx_rtd_theme): 

    lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css

  • Pour trouver le chemin absolu de theme.css sur Linux/Mac, vous pouvez l'exécuter sur la ligne de commande (en supposant que vous ayez défini votre variable d'environnement $PYTHONPATH): 

    for p in `echo $PYTHONPATH | tr ":" "\n"`; do 
    find $p -type f -name 'theme.css' | grep sphinx_rtd_theme
done

  • Le fichier theme.css sera réduit afin que vous puissiez utiliser un outil tel que http://unminify.com pour en faciliter la lecture.

Les resultats:

Avant:

Unmodified readthedocs theme

Après:

Modified readthedocs theme

2
chown

Je modifierais ceci dans le css. Vous devez rechercher le fichier theme.css (il se trouve dans les sources read-the-doc sous "sphinx_rtd_theme/static/css/theme.css").

Faites une copie de ce fichier et mettez-le dans votre répertoire sphinx _static. Dans ce fichier css, vous pouvez apporter toutes les modifications de mise en page dont vous avez besoin. (Vous devrez peut-être lire un peu sur les fichiers CSS si vous n'avez jamais travaillé avec ça.)

J'espère que cela t'aides.

1
steffens21

Pour le thème "classique", la solution est aussi simple et nette que:

# Add/Update "html_theme_options" like this on your conf.py
html_theme_options = {'body_max_width': '70%'}

Adaptez le pourcentage à votre goût.

Référence de sphinx: body_max_width (int ou str): largeur maximale du corps du document. Cela peut être un int, qui est interprété en pixels ou une chaîne de dimension CSS valide telle que «70em» ou «50%». Utilisez "none" si vous ne voulez pas de limite de largeur. Les valeurs par défaut peuvent dépendre du thème (souvent 800 pixels).

0
Yahya Yahyaoui