تصميم المستند

تصميم المستند

تصميم المستند هو نمط ذو عمودين لصفحات الوثائق - الوصف على اليسار، والشفرة على اليمين - ويتقلص إلى عمود واحد على الهواتف المحمولة.

البنية

استخدم .doc كحاوية خارجية و.doc-section لكل صف. يحتوي كل قسم على عمود .doc-section--description وعمود .doc-section--code.

قسم أساسي

قسم نموذجي يربط بين كتلة وصف وشفرة برمجية.

محتوى تجريبي
<div class="doc">
  <div class="doc-section">
    <div class="doc-section--description">
      <h3>Title</h3>
      <p>Description</p>
    </div>
    <div class="doc-section--code">
      <!-- code snippet -->
    </div>
  </div>
</div>

مع كتلة شفرة

استخدم الجزء code-block داخل .doc-section--code للأمثلة المميزة بالنحو.

محتوى تجريبي
{{ include('@Bundle/partials/code-block.html.twig', {
  lang: 'bash',
  code: 'curl https://api.example.com/resource'
}) }}