想要将渲染 html 转换为带有变量和所有东西的 nunjucks

Question

becuase i want to manuplate/add some html tags after html render and save into nunjucks (like before rendering);

nunjucks before render

<div class="ps-4">
        <h1>{{heading}}</h1>
        {% if isShowLi %}
            <div class="px-4">
                {% for item in items %}
                    <div>{{item.name}}</div>
                {% endfor %}
            </div>
        {% endif %}
</div>

nunjucks after render and html modification

<div class="ps-4">
        <h1>hello world</h1>
          <img src="abc.png" />
            <div class="px-4">
                    <div>item 1</div>
                    <div>item 2</div>
                    <div>item 3</div>
                    <div>item 4</div>
                    <div>item 5</div>
            </div>
 </div>

and i want it like that

<div class="ps-4">
        <h1>{{heading}}</h1>
       <img src="abc.png" />
        {% if isShowLi %}
            <div class="px-4">
                {% for item in items %}
                    <div>{{item.name}}</div>
                {% endfor %}
            </div>
        {% endif %}
 </div>

please solve and suggest any way to do this thing pleassssss

Answer 1

If you want the output to look like the original nunjucks logic you typed in, then you can try the following technique. On your HTML template within your nunjucks project...

<pre>
  <code>
    <div class="ps-4">
      <h1>{{heading}}</h1>
      <img src="abc.png" />
      {% if isShowLi %}
        <div class="px-4">
         {% for item in items %}
           <div>{{item.name}}</div>
         {% endfor %}
        </div>
      {% endif %}
    </div>
  </code>
</pre>