html - 作为前端开发人员使用模板

问题描述

我接受了一份工作，我必须在前端处理一些 html 和 css。但是，我使用的文件似乎是由某种解释器解释的（我认为 Flask 和 Jinja2）。然而，我所拥有的只是前端文件，我无法弄清楚如何在没有任何解释器的情况下调试我的代码。

    F:.
├───static
│   ├───css
│   └───images
│       └───navigation
└───templates
    ├───admin
    ├───cart
    ├───home
    ├───order
    ├───partials
    ├───payment
    ├───product
    ├───ticket
    └───user

上面我列出了我必须使用的文件夹。每个文件夹仅包含 html 文件，例如：

<input id="navi-open" type="checkbox" name="" class="ct" />

<div id="navigation" class="column">
  <label for="navi-open" class="navi-button">
    <img src="{{ url_for('static', filename='images/cancel.png') }}" alt="" />
  </label>

  <div id="navigation-items" class="column h-sb">
    <div class="category">
      <a href="{{ url_for('home.home') }}" style="opacity:1"
        class="navigation-item light {{ 'active' if current_page == 'homepage' else '' }}">
        <div style="opacity:1" class="icon">
          <img src="{{ url_for('static', filename='images/karma_blackwhite.png') }}" alt=""
            style="filter: invert(0);" />
        </div>

        <div class="label">Homepage</div>
        <div class="tooltip">Homepage</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('home.news') }}" class="navigation-item {{ 'active' if current_page == 'news' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/newspaper.png') }}" alt="" />
        </div>

        <div class="label">News</div>
        <div class="tooltip">News</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('home.about') }}" class="navigation-item {{ 'active' if current_page == 'about' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/information.png') }}" alt="" />
        </div>

        <div class="label">About</div>
        <div class="tooltip">About</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('home.reviews') }}"
        class="navigation-item {{ 'active' if current_page == 'reviews' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/feedback.png') }}" alt="" />
        </div>

        <div class="label">Reviews</div>
        <div class="tooltip">Reviews</div>

        <div class="indicator"></div>
      </a>
    </div>

    {% if current_user.is_authenticated %}
    <div class="category">
      <a href="{{ url_for('cart.cart') }}" class="navigation-item {{ 'active' if current_page == 'cart' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/shopping-cart.png') }}" alt="" />
        </div>

        <div class="label">Cart</div>
        <div class="tooltip">Cart</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('ticket.view_all_tickets') }}"
        class="navigation-item {{ 'active' if current_page == 'tickets' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/envelope.png') }}" alt="" />
        </div>

        <div class="label">Tickets</div>
        <div class="tooltip">Tickets</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('user.notifications') }}" num="{{ current_user.notifications|length }}"
        class="navigation-item {{ 'active' if current_page == 'notifications' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/chat-2.png') }}" alt="" />
        </div>

        <div class="label">Notifications</div>
        <div class="tooltip">Notifications</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('order.view_all_orders') }}"
        class="navigation-item {{ 'active' if current_page == 'orders' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/package-6.png') }}" alt="" />
        </div>

        <div class="label">Orders</div>
        <div class="tooltip">Orders</div>

        <div class="indicator"></div>
      </a>
    </div>

    <div class="category">
      <a href="{{ url_for('user.profile') }}"
        class="navigation-item {{ 'active' if current_page == 'settings' else '' }}">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/settings.png') }}" alt="" />
        </div>

        <div class="label">Settings</div>
        <div class="tooltip">Settings</div>

        <div class="indicator"></div>
      </a>

      <a href="{{ url_for('user.logout') }}" class="navigation-item">
        <div class="icon">
          <img src="{{ url_for('static', filename='images/navigation/logout.png') }}" alt="" />
        </div>

        <div class="label">Logout</div>
        <div class="tooltip">Logout</div>

        <div class="indicator"></div>
      </a>
    </div>
    {% else %}
    <label for="login" class="navigation-item">
      <div class="icon">
        <img src="{{ url_for('static', filename='images/navigation/login.png') }}" alt="" />
      </div>

      <div class="label">Login</div>
      <div class="tooltip">Login</div>

      <div class="indicator"></div>
    </label>
    {% endif %}
  </div>

  <input id="login" type="checkbox" name="" class="popup-controller" />

  <div class="popup-wrapper">
    <label for="login" class="popup-bg"></label>
    <div class="popup">
      <div class="popup-content">
        <form id="auth-container" action="{{ url_for('user.login') }}" method="post">
          {{ g.login_form.csrf_token }}

          <div class="title-big">Log in to your account</div>
          <div class="input-group">
            <div class="input-wrapper">
              <div class="input-field column"><input type="text" name="username" required="required"
                  placeholder="Username" />
                <div class="input-label required">Username</div>
                <div class="input-status"></div>
              </div>
            </div>
            <div class="input-wrapper">
              <div class="input-field column"><input type="password" name="password" required="required"
                  placeholder="Password" />
                <div class="input-label required">Password</div>
                <div class="input-status"></div>
              </div>
            </div>
          </div>
          <div class="action-btns btns row">
            <button type="submit" class="button submit">Log in</button>
          </div>
          <div class="infos row h-sb">
            <a href="{{ url_for('user.reset_password') }}" class="forgot">Restore password</a>
            <a href="{{ url_for('user.register') }}" class="accf">Create an account</a>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

如果我只需要更改前端代码，我不知道如何使用它...

谢谢

标签： htmltemplatesflaskstaticjinja2

html - 作为前端开发人员使用模板

问题描述

解决方案

推荐阅读