dimanche 31 mai 2020

How to parse links (or any HTML tags) from external source (e.g. json) in re-useable pug template?

To my understanding, pug templtes are to be re-used. So I set up a collection for building forms and have partials like input.pug, textarea.pug, checkbox.pug, radio-buttons.pug`, etc.

In order to make sense of their reusability, they of course should show different text whenever they are used. Therefore I use - locals.msg = Some custom Text in the pug template that includes any of the form partials.

But as soon as it comes to provide more complex text that consists of links or contains styling elements (like b or a span tag with classes), the text is not parsed properly. This is what I have: a simple checkbox for GDPR acceptance that a user must click in a form. The explanation text is supposed to provide an external link to a page, where the user can read all about the site's data protection:

// parent pug template
div(class="[...]")

  - var form = { id: 'for-gdpr', txt: 'I have read <a href="#" target="_blank">GDPR</a> ...' }
  include ./form/checkbox.pug


// checkbox pug template
label(class="flex items-baseline block w-full")
  input(class="..." type="checkbox")
    div(class="...")= form.txt 

Of course this does not generate a proper link, instead that a-tag is "written out".

I also tried splitting text like this:

- var form = { msg1: 'I have read ', msg2: 'a(class="..." href="..." target="_blank" data protextion ', msg: ' and concur.'}

but to no avail.

How would I have to prepare the text in order to then parse it properly in a pug template?

Thank you!




Aucun commentaire:

Enregistrer un commentaire