html - hacer - Modificación del ancho del contenido del tema de Sphinx ''Leer los documentos''
ajustar div al contenido alto (6)
En caso de que alguien todavía esté buscando una respuesta simple ... combinando las ideas de https://samnicholls.net/2016/06/15/how-to-sphinx-readthedocs/ y las sugerencias anteriores, encontré que la más fácil La forma de obtener un ancho de ventana personalizado es la siguiente:
en conf.py agregue una función que agregue su hoja de estilo personalizada (solo agregue las siguientes líneas):
def setup(app):
app.add_stylesheet(''my_theme.css'')
y luego cree un archivo llamado my_theme.css en la carpeta _static que simplemente contiene las siguientes líneas:
.wy-nav-content {
max-width: 1200px !important;
}
Estoy usando el tema ''Lea los documentos de Sphinx'' para mi documentación. En el tema original, a continuación.
http://read-the-docs.readthedocs.org/en/latest/theme.html
El contenido o el ancho del diseño principal está diseñado para ser compatible con dispositivos móviles. Sin embargo, para mi proyecto me gustaría que fuera un poco más amplio. No sé HTML y, por lo tanto, agradecería que alguien me diera algunas pistas para aumentar el ancho del contenido (diseño).
En primer lugar debo decir que, durante mi inicio rápido con la esfinge, elegí la opción de una carpeta separada para mis fuentes y para mi compilación .
Es un proceso de 3 pasos:
1. Crea un documento para tus estilos:
¿Dónde?
- En el mismo directorio donde vive
conf.py
(en mi caso, lasource
), creé una carpeta para mis archivos estáticos personalizados (hojas de estilo, javascripts). Lo llamécustom
. - Dentro de ella creé una subcarpeta para mis hojas de estilo:
source/custom/css
. - En esta subcarpeta voy a crear mis estilos personalizados:
source/custom/css/my_theme.css
.
2. Diciéndole a la esfinge
Ahora tenemos que decirle a sphinx que escupa este documento dentro de build/_static/css
, el mismo directorio donde se encuentra la hoja de estilo incluida en el tema Leer los documentos . Lo hacemos agregando la siguiente línea a conf.py
:
html_static_path = [''custom''] # Directory for static files.
Hecho. Ahora, si construimos, tendremos los estilos RTD ( theme.css
) y nuestro my_theme.css
personalizado en el mismo directorio, build/_static/css
.
3. Seleccionando nuestro tema personalizado.
Ahora le diremos a la esfinge que use nuestro my_theme.css
personalizado, en lugar del RTD . Hacemos eso agregando esta línea en conf.py
:
html_style = ''css/my_theme.css'' # Choosing my custom theme.
En nuestra hoja de estilo personalizada, la primera línea debe importar los estilos de theme.css
con @import url("theme.css");
.
Y estamos listos para comenzar a sobrescribir los estilos.
ACTUALIZACIÓN: hay un camino aún más simple.
1. Ponga sus personalizaciones dentro de source/_static/css/my_theme.css
.
En su hoja de estilo personalizada, la primera línea debe importar los estilos de theme.css
con @import url("theme.css");
.
De esta manera, no tiene que preocuparse por desordenar los estilos predeterminados, si su hoja de estilo personalizada no funciona, elimínela y comience de nuevo.
2. Agregue la siguiente línea en conf.py
:
html_style = ''css/my_theme.css''
Las soluciones aquí son algo piratas. Si desea incluir el estilo, tener una anulación de css y hacer que funcione en RTD, querrá algo como esto.
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'',
],
}
He probado esto por mí mismo y parece funcionar localmente y en RTD. En gran parte plagiado desde https://blog.deimos.fr/2014/10/02/sphinxdoc-and-readthedocs-theme-tricks-2/
Para hacer que el tema ReadTheDocs use todo el ancho de su pantalla, puede modificar el archivo theme.css
, eliminando el max-width: 800px;
propiedad de la definición de la clase wy-nav-content
, así:
.wy-nav-content {
padding: 1.618em 3.236em;
height: 100%;
/* max-width: 800px; */
margin: auto;
}
Algunas notas
Fuente de
theme.css
está aquí:En su sistema de archivos estará (asumiendo que ha ejecutado:
pip install sphinx_rtd_theme
):lib/python2.7/site-packages/sphinx_rtd_theme/static/css/theme.css
Para encontrar la ruta absoluta de
theme.css
en Linux / Mac, puede ejecutar esto en la línea de comandos (suponiendo que haya establecido su variable de entorno$PYTHONPATH
):for p in `echo $PYTHONPATH | tr ":" "/n"`; do find $p -type f -name ''theme.css'' | grep sphinx_rtd_theme done
El archivo
theme.css
se minimizará para que pueda utilizar una herramienta como http://unminify.com para que sea más fácil de leer.
Los resultados:
Antes de:
Después:
Yo modificaría esto en el css. Debe buscar el archivo theme.css (se encuentra en las fuentes de read-the-doc en "sphinx_rtd_theme / static / css / theme.css").
Haga una copia de ese archivo y póngala en su dir. Spstix _static. En ese archivo css puedes hacer todos los cambios de diseño que necesites. (Es posible que tenga que leer un poco en archivos css si nunca ha trabajado con eso).
Espero que esto ayude.
Otra opción es crear una hoja de estilo en source/_static
con solo el css que desee, por ejemplo
.wy-nav-content {
max-width: none;
}
o
.wy-nav-content {
max-width: 1200px !important;
}
Asegúrese de que se haga referencia al directorio en source/conf.py
- Creo que por defecto hay una línea para hacer esto, es decir
# 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'']
Luego cree un diseño personalizado en source/_templates/layout.html
y haga algo como esto para incluir su hoja de estilo
{% extends "!layout.html" %}
{% block extrahead %}
<link href="{{ pathto("_static/style.css", True) }}" rel="stylesheet" type="text/css">
{% endblock %}
Suponiendo que haya llamado a su hoja de estilo style.css