2010-03-16 13 views

Odpowiedz

5

Myślę, że najprostszym sposobem na zrobienie tego byłoby stworzenie niestandardowego motywu Sphinx, w którym powiesz niektórym elementom html, że mają tę funkcję. Trochę JQuery pójdzie tutaj daleko.

Jeśli jednak chcesz być w stanie określić to w swoim reStructuredText znaczników, trzeba by albo

  • dostać coś takiego zawarte w Sfinks samodzielnie lub
  • wdrożyć go w sfinks/docutils rozszerzenie ... a następnie utworzyć motyw Sphinx, który wiedział o tej funkcjonalności.

To byłoby trochę więcej pracy, ale dałoby Ci więcej elastyczności.

+2

Czy możesz podzielić się tym, co i jak opracowałeś dla obiektu 'show/hide' w dokumentacji Sphinx? – shahjapan

23

Nie potrzebujesz niestandardowego motywu. Użyj wbudowanej dyrektywy container, która umożliwia dodawanie niestandardowych klas css do bloków i przesłonięcie motywu existsting w celu dodania javascript w celu dodania funkcji show/hide.

To _templates/page.html:

{% extends "!page.html" %} 

{% set css_files = css_files + ["_static/custom.css"] %} 

{% block footer %} 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".toggle > *").hide(); 
     $(".toggle .header").show(); 
     $(".toggle .header").click(function() { 
      $(this).parent().children().not(".header").toggle(400); 
      $(this).parent().children(".header").toggleClass("open"); 
     }) 
    }); 
</script> 
{% endblock %} 

To _static/custom.css:

.toggle .header { 
    display: block; 
    clear: both; 
} 

.toggle .header:after { 
    content: " ▼"; 
} 

.toggle .header.open:after { 
    content: " ▲"; 
} 

Teraz możesz pokazać/ukryć blok kodu.

.. container:: toggle 

    .. container:: header 

     **Show/Hide Code** 

    .. code-block:: xml 
     :linenos: 

     from plone import api 
     ... 

używam coś bardzo podobnego do ćwiczeń tutaj: https://training.plone.org/5/mastering_plone/about_mastering.html#exercises

+1

Dziękuję, to jest bardzo przydatne :) –

+0

Piękny! Byłoby miło, gdyby przełączane rozwiązania pojawiły się jako klikalne linki w vimperatorze/cvim/pentadactyl. –

4

Chmura sfinks motyw dyrektywy ma niestandardową html-toggle który zapewnia sekcje toggleable. Cytując z ich web page:

Można oznaczyć sekcje z .. rst-class:: html-toggle, co uczyni sekcji Domyślne zwinięciem pod html, z „pokaz sekcji” link przełącznikiem po prawej stronie tytułu.

Here to link do strony demonstracyjnej testu.