How to debug frontend code with template engine syntax

Frontend
1

I got a new job where I need to modify HTML and CSS files for a website. The problem is that all the HTML files have special syntax that looks like it needs some kind of server to run properly. I think it might be using Jinja2 templates but I’m not sure.

Here’s my project structure:

project/
├── assets/
│   ├── styles/
│   └── icons/
│       └── menu/
└── views/
    ├── dashboard/
    ├── shop/
    ├── landing/
    ├── checkout/
    ├── shared/
    ├── billing/
    ├── catalog/
    ├── support/
    └── account/

The HTML files contain code like this:

<input id="menu-toggle" type="checkbox" class="ctrl" />

<nav id="sidebar" class="panel">
  <label for="menu-toggle" class="menu-btn">
    <img src="{{ asset_path('static', filename='icons/close.svg') }}" alt="close" />
  </label>

  <div id="menu-content" class="panel v-between">
    <div class="section">
      <a href="{{ route_to('main.index') }}" 
         class="menu-link bright {{ 'current' if page_name == 'home' else '' }}">
        <div class="icon-box">
          <img src="{{ asset_path('static', filename='icons/home.svg') }}" alt="home" />
        </div>
        <div class="text">Home</div>
        <div class="hover-tip">Home</div>
        <div class="marker"></div>
      </a>

      <a href="{{ route_to('main.blog') }}" 
         class="menu-link {{ 'current' if page_name == 'blog' else '' }}">
        <div class="icon-box">
          <img src="{{ asset_path('static', filename='icons/menu/blog.svg') }}" alt="blog" />
        </div>
        <div class="text">Blog</div>
        <div class="hover-tip">Blog</div>
        <div class="marker"></div>
      </a>
    </div>

    {% if user.logged_in %}
    <div class="section">
      <a href="{{ route_to('shop.basket') }}" 
         class="menu-link {{ 'current' if page_name == 'basket' else '' }}">
        <div class="icon-box">
          <img src="{{ asset_path('static', filename='icons/menu/basket.svg') }}" alt="basket" />
        </div>
        <div class="text">Basket</div>
        <div class="hover-tip">Basket</div>
        <div class="marker"></div>
      </a>

      <a href="{{ route_to('account.settings') }}" 
         class="menu-link {{ 'current' if page_name == 'account' else '' }}">
        <div class="icon-box">
          <img src="{{ asset_path('static', filename='icons/menu/user.svg') }}" alt="settings" />
        </div>
        <div class="text">Account</div>
        <div class="hover-tip">Account</div>
        <div class="marker"></div>
      </a>
    </div>
    {% endif %}
  </div>
</nav>

How can I preview and test my changes to the HTML and CSS when the files have this template syntax? I only have access to the frontend files and no backend setup.

2

Yeah, that’s definitely Jinja2 syntax. Want to test without setting up the backend? Just make static HTML versions by swapping out the template stuff with real data. Change {{ asset_path('static', filename='icons/close.svg') }} to something like assets/icons/close.svg, replace {{ route_to('main.index') }} with # or dummy URLs, and handle the if/else blocks by just including or cutting the content. You can test your CSS and basic functionality in any browser this way. Once everything works, just reverse it back to update your original templates.

3

hey! totaly agree! look for any config files like requirements.txt or package.json, they can show which framework is used. also, check out if there are {% block %} or {% extends %} tags in the templates, then it’s a sure sign of Jinja2!

4

u got it! jinja2 is a common one, and running a local Flask server is super helpful for testing. also, check if ur editor has a jinja2 preview option - way easier than setting up everything just to see the output.