JavaScript et bibliothèques externes

Écrire du JavaScript

Vous pouvez ajouter du JavaScript dans vos modèles, celui-ci sera interprété à la génération d’un document.

<script type="text/javascript">
  document.write('Hello World!');
</script>

Bibliothèques externes

Si vous devez utiliser une bibliothèque externe pour transformer du texte, ajouter des filtres sur des images ou, pourquoi pas… insérer des graphiques dans vos documents, vous pouvez l’importer comme vous le feriez dans une page HTML normale.

Imaginons que vous rédigier de la documentation technique et que vous souhaitiez appliquer une coloration syntaxique au code. Vous pourriez importer la CSS de Prism dans l’onglet CSS :

@import url('https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1/themes/prism.min.css');

Puis importer sa bibliothèque JS dans l’onglet HTML :

<pre><code class="language-css">.myComponent {
  display: flex;
  justify-content: space-between;
}</code></pre>

<pre><code class="language-ruby">class Greeter
  def say_hello(name: "Jane")
    puts "Hello #{name}!"
  end
end</code></pre>

{% assign cdnBase = "https://cdnjs.cloudflare.com/ajax/libs/prism/1.17.1" %}
<script src="{{cdnBase}}/prism.min.js"></script>
<script src="{{cdnBase}}/components/prism-css.js"></script>
<script src="{{cdnBase}}/components/prism-ruby.js"></script>

Vous obtenez ainsi du code avec de jolies couleurs dans votre document !

Données dynamiques

Vous pouvez accéder aux données dynamiques de votre document grâce à la variable $docPayload.

<script type="text/javascript">
  let nomClient = $docPayload.client.nom;
</script>

Cela peut être particulièrement pratique pour créer des graphiques par exemple.