第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號安全，請及時綁定郵箱和手機立即綁定
已解決430363個問題，去搜搜看，總會有你想問的

如何在 Javascript 文件（.js）中使用 Python Flask？

如何在 Javascript 文件（.js）中使用 Python Flask？

繁星點點滴滴 2022-10-21 17:38:19
當 Javascript 代碼在 HTML 文件中時，這不是問題。但是，當我將腳本標記的內(nèi)容移動到 js 文件以用于其他 HTML 文件時，就會出現(xiàn)無法讀取圖像的問題。代碼如下。腳本.jsfunction mouseOverSelf() {    let img = document.getElementById("changeImg1");    let m = document.getElementById("changeColor1");    img.src = "{{ url_for('static', filename='img/edit_w.svg') }}";    m.style.color = "white";}function mouseOutSelf() {    let img = document.getElementById("changeImg1");    let m = document.getElementById("changeColor1");    img.src = "{{ url_for('static', filename='img/edit.svg') }}";    m.style.color = "black";}function mouseOverExcel() {    let img = document.getElementById("changeImg2");    let m = document.getElementById("changeColor2");    img.src = "{{ url_for('static', filename='img/spreadsheet_w.svg') }}";    m.style.color = "white";}function mouseOutExcel() {    let img = document.getElementById("changeImg2");    let m = document.getElementById("changeColor2");    img.src = "{{ url_for('static', filename='img/spreadsheet.svg') }}";    m.style.color = "black";}索引.html<script type="text/javascript" src="{{ url_for('static', filename='js/script.js') }}"></script>我能怎么做？
查看完整描述

1 回答

?
慕田峪4524236

TA貢獻1875條經(jīng)驗 獲得超5個贊

{% block %}解決方案是通過模板中的標記而不是通過<script src="..">html 標記 ( )包含 javascript 代碼（與 css 相同<link rel="stylesheet" href="..">）。

您有兩個選擇，javascript 代碼（與 css 相同）旨在加載和執(zhí)行：

  • 特定頁面（本地）

  • 所有頁面（全局）

使用jinja2模板繼承機制，下面你可以怎么做：

在base.html

<!doctype html>

<html class="no-js">

<head>

  <meta charset="utf-8">

  <title>{% block title %}{% endblock %}</title>

  <meta name="description" content="{% block description %}{% endblock %}">

  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


  <link rel="manifest" href="{{ url_for('static', filename='site.webmanifest') }}">

  <link rel="apple-touch-icon" href="{{ url_for('static', filename='icon.png') }}">

  <link rel="shortcut icon" href="{{ url_for('static', filename='favicon.ico') }}">


  {% block stylesheets %}


  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">

  {% block stylesheets_others %}{% endblock %}

  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-override.css') }}">

  <link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap-extend.css') }}">

  <link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">

  {% block stylesheets_local %}{% endblock %}


  {% endblock %}


  <meta name="theme-color" content="#fafafa">

</head>

<body>

  <!--[if IE]>

    <p class="browserupgrade">You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/">upgrade your browser</a> to improve your experience and security.</p>

  <![endif]-->


  {% block body %}

    {% include 'includes/header.html' %}

    {% block content %}{% endblock %}

    {% include 'includes/footer.html' %}

  {% endblock %}


  {% block javascripts %}


  <script src="{{ url_for('static', filename='js/vendor/modernizr-3.8.0.min.js') }}"></script>

  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>

  <script>window.jQuery || document.write('<script src="{{ url_for('static', filename='js/vendor/jquery-3.4.1.min.js') }}"><\/script>')</script>

  <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>

  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>

  {% block javascripts_others %}{% endblock %}

  <script src="{{ url_for('static', filename='js/vendor/vendor.min.js') }}"></script>

  <script src="{{ url_for('static', filename='js/plugins.js') }}"></script>

  <script src="{{ url_for('static', filename='js/main.js') }}"></script>

  {% block javascripts_local %}{% endblock %}

  <!-- Google Analytics: change UA-XXXXX-Y to be your site's ID. -->

  <script>

    window.ga = function () { ga.q.push(arguments) }; ga.q = []; ga.l = +new Date;

    ga('create', 'UA-XXXXX-Y', 'auto'); ga('set','transport','beacon'); ga('send', 'pageview')

  </script>

  <script src="https://www.google-analytics.com/analytics.js" async></script>


  {% endblock %}

</body>

</html>

在my-page.html


{% extends 'base.html' %}


[..]

{% block stylesheets_local %}

  {{ super() }} {# to load the parent assets #}

  <style>

  /* You "Local" css goes here .. (if any) */

  </style>

{% endblock %}


{% block body %}

  [..]

{% endblock %}



[..]

{% block javascripts_local %}

  {{ super() }} {# to load the parent assets #}

  <script>

  // You "Local" javascript code goes here ..

  </script>

{% endblock %}

如果您想通過例如加載其他 javascript 或 css外部庫：cdn對于特定頁面，邏輯是相同的，您需要在模板中擴展{% block javascripts_others %}{% endblock %}和{% block stylesheets_others %}{% endblock %}阻止，但不要忘記包括{{ super }}加載父資產(chǎn)（如果有）。


但是，如果您認為應(yīng)該全局加載外部庫（javascript 或 css），則將它們base.html分別添加到下面bootstrap和font awesome庫中。因此，使用此邏輯，您將以正確的順序為任何頁面加載資產(chǎn)，而不會發(fā)生沖突。


但是碰巧您的代碼（js或css）是為幾個頁面而不是所有頁面（不是全局）加載的，在這種情況下，創(chuàng)建一個單獨的模板并將您的js或css代碼包含在正確的位置和訂單（就像我們之前做的那樣）


在page-1.html, page-2.html, page-3.html..


{% extends 'base.html' %}


[..]

{% block stylesheets_local %}


  {{ super() }} {# to load the parent assets #}

  {% include 'includes/mycss.css.html' %}


{% endblock %}


{% block body %}

  [..]

{% endblock %}



[..]

{% block javascripts_local %}


  {{ super() }} {# to load the parent assets #}

  {% include 'includes/myscript.js.html' %}


{% endblock %}

請注意我如何將部分模板命名為約定，這是一個很好的做法。


查看完整回答
反對 回復 2022-10-21
  • 1 回答
  • 0 關(guān)注
  • 145 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯(lián)系客服咨詢優(yōu)惠詳情

 幫助反饋 APP下載

慕課網(wǎng)APP
您的移動學習伙伴

 公眾號

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號