स्फिंक्स, पुन: संरचित टेक्स्ट शो स्निपेट्स को दिखाएं/छुपाएं

Question

मैं Sphinx और reStructuredText का उपयोग कर एक सॉफ्टवेयर पैकेज दस्तावेज कर रहा हूं।

मेरे दस्तावेज़ों में, कुछ लंबे कोड स्निपेट हैं। मैं उन्हें "शो/छुपाएं" बटन के साथ डिफ़ॉल्ट रूप से छिपाने में सक्षम होना चाहता हूं जो उन्हें विस्तृत करेगा (Example)।

क्या ऐसा करने का कोई मानक तरीका है?

Answer 1

मुझे लगता है कि ऐसा करने का सबसे आसान तरीका एक कस्टम स्फिंक्स थीम बनाना होगा जिसमें आप कुछ कार्यक्षमता रखने के लिए कुछ HTML तत्व बताएंगे। एक छोटा JQuery यहाँ एक लंबा रास्ता तय करेगा।

अगर, हालांकि आप अपने reStructuredText मार्कअप में यह निर्दिष्ट करने के लिए सक्षम होना चाहते हैं, आप या तो

• ऐसी बात ही स्फिंक्स में शामिल करने के लिए की आवश्यकता होगी या
• एक स्फिंक्स/docutils में इसे लागू एक्सटेंशन ... और फिर एक स्फिंक्स थीम बनाएं जो इस कार्यक्षमता के बारे में जानता था।

यह थोड़ा और काम होगा, लेकिन आपको अधिक लचीलापन देगा।

Answer 2

आपको एक कस्टम थीम की आवश्यकता नहीं है। अंतर्निहित निर्देश container का उपयोग करें जो आपको शो/छुपा-कार्यक्षमता जोड़ने के लिए कुछ जावास्क्रिप्ट जोड़ने के लिए मौजूदा थीम को ब्लॉक और ओवरराइड करने के लिए कस्टम सीएसएस-क्लास जोड़ने की अनुमति देता है।

यह _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 %} 

यह _static/custom.css है:

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

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

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

अब आप/दिखा सकते हैं कोड का एक खंड को छिपाने। https://training.plone.org/5/mastering_plone/about_mastering.html#exercises

Answer 3

बादल स्फिंक्स विषय कस्टम निर्देश html-toggle कि toggleable वर्गों प्रदान करता है:

.. container:: toggle 

    .. container:: header 

     **Show/Hide Code** 

    .. code-block:: xml 
     :linenos: 

     from plone import api 
     ... 

मैं यहाँ अभ्यास के लिए बहुत कुछ इसी तरह का उपयोग करें। उनके web page से उद्धृत करने के लिए:

आप .. rst-class:: html-toggle साथ वर्गों चिह्नित कर सकते हैं, जो शीर्षक की दाईं ओर एक "शो खंड" टॉगल लिंक के साथ, एचटीएमएल तहत ढह किया जा रहा करने के लिए खंड डिफ़ॉल्ट होगा।

Here उनके परीक्षण प्रदर्शन पृष्ठ का एक लिंक है।