Zola’da Mermaid.js entegre | Hahwul

Rust tabanlı bir statik site jeneratörü olan Zola’da Mermaid.js’nin uygulanması ve optimize edilmesi

Mermaid.js, Markdown benzeri sözdizimini kullanarak çeşitli diyagramlar oluşturmanıza olanak tanıyan güçlü bir kitaplıktır. Bu yazıda, Mermaid.js’yi bir Zola statik site jeneratörüne entegre etme ve performansını nasıl optimize edeceğinizi entegre edeceğim.

quadrantChart
    title Reach and engagement of campaigns
    x-axis Low Reach --> High Reach
    y-axis Low Engagement --> High Engagement
    quadrant-1 We should expand
    quadrant-2 Need to promote
    quadrant-3 Re-evaluate
    quadrant-4 May be improved
    Campaign A: [0.3, 0.6]
    Campaign B: [0.45, 0.23]
    Campaign C: [0.57, 0.69]
    Campaign D: [0.78, 0.34]
    Campaign E: [0.40, 0.34]
    Campaign F: [0.35, 0.78]

 quadrantChart
      title Reach and engagement of campaigns
      x-axis Low Reach --> High Reach
      y-axis Low Engagement --> High Engagement
      quadrant-1 We should expand
      quadrant-2 Need to promote
      quadrant-3 Re-evaluate
      quadrant-4 May be improved
      Campaign A: [0.3, 0.6]
      Campaign B: [0.45, 0.23]
      Campaign C: [0.57, 0.69]
      Campaign D: [0.78, 0.34]
      Campaign E: [0.40, 0.34]
      Campaign F: [0.35, 0.78]

1. Kısa kod oluşturma

Zola’da Mermaid.js kullanmanın ilk adımı bir kısa kod oluşturmaktır. Şablonlar/kısa kodlar dizininde mermaid.html oluşturdum.

<pre class="mermaid">
 {{ body }}
pre>

Bu kısa kodu çok basit; sadece bir

 tag with the mermaid class. However, Mermaid.js identifies this mermaid class to convert the content into a graph, making it incredibly easy to create diagrams.

2. Adding the Mermaid.js Library
CDN Approach (Initial Method)
Initially, I used a CDN to load Mermaid.js. I added the code to load mermaid.js in my overall layout, base.html:

<script type="module">
   import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.esm.min.mjs';
   mermaid.initialize({ startOnLoad: true, theme: 'dark' });
script>
Bu yöntemin uygulanması kolaydı, ancak dış bağımlılık ve potansiyel ağ gecikmesinin dezavantajları ile geldi.
Yerel dosyalarla içselleştirme (optimizasyon)
Performansı artırmak ve harici bağımlılıkları kaldırmak için, yerel bir dosya olarak kaydederek mermaid.js’yi içselleştirdim.
İlk olarak, .mjs dosyalarının sıklıkla birden fazla parçayı yükledikleri için kullanımı zor olduğunu gördüm. Bu yüzden indirmeyi seçtim .js bunun yerine dosya.
curl -s https://cdn.jsdelivr.net/npm/mermaid@11/dist/mermaid.min.js -o static/js/mermaid.min.js
Daha sonra, yerel yola atıfta bulunarak baz.html’ye yükledim:

<script src="/js/mermaid.min.js">script>
<script>
  mermaid.initialize({ startOnLoad: false, theme: 'dark' });
script>
3. Oluşturma yöntemini optimize etme
Startonload Metodu (başlangıç ​​yöntemi)
Başlangıçta Mermaid.js’nin varsayılan oluşturma yöntemini kullandım, startOnLoad: true.
mermaid.initialize({ startOnLoad: true, theme: 'dark' });
Bu yöntem, sayfa yükü üzerine tüm diyagramları otomatik olarak oluştururken, görüntüler gibi diğer tüm öğelerin sayfaya tam olarak yüklenmesini beklediğinden, oluşturulmada bir gecikmeye neden oldu.
Manuel oluşturma yöntemi (optimizasyon)
Denizkızı kodu tamamen yüklendikten sonra hemen ilerlemenin daha iyi olacağını fark ettim. Böylece, oluşturma süresini manuel olarak belirtmeye geçtim. Ayarladım startOnLoad: false Otomatik oluşturmayı önlemek ve daha sonra DOM yüklendikten sonra yalnızca gerekli öğeleri manuel olarak oluşturacak şekilde değiştirin.
mermaid.initialize({ startOnLoad: false, theme: 'dark' });
document.addEventListener('DOMContentLoaded', async () => {
  const mermaidElements = document.querySelectorAll('.mermaid');

  if (mermaidElements.length > 0) {
      await mermaid.run({
          nodes: mermaidElements
      });
  }
});
Sonuç olarak, denizkızı sınıfına sahip nesneler tanımlanır tanımlanmaz, oluşturma sayfa erişimi ile neredeyse aynı anda başlar.
Çözüm
İyi çalışıp çalışmadığını görmek için basit bir örnekle test edelim
 mindmap
  root((mindmap))
    Origins
      Long history
      ::icon(fa fa-book)
      Popularisation
        British popular psychology author Tony Buzan
    Research
      On effectiveness
and features
      On Automatic creation
        Uses
            Creative techniques
            Strategic planning
            Argument mapping
    Tools
      Pen and paper
      Mermaid
Mükemmel çalışıyor!