Question

我有一个简单的烧瓶应用程序只有一个index.html页面（到目前为止），它位于一个包含一堆javascript和CSS的文件夹中，这使得渲染有点困难。

我尝试列出HTML的文件路径，但是，当我打开浏览器时，它会出现内部服务器错误。我是否应该将路径声明为变量并将其传递给？

我在Linux Ubuntu 16.04顺便说一句。

这是我的示例代码：

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8' />
  <title>Quad Pane Display</title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.45.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    #map {
      position: absolute;
      top: 100%;
      bottom: 100%;
      left: 100%, right:100%, width:100%;
      padding: 0;
    }
  </style>

</head>

<body background="bg.jpg">
  <style>
    html,
    body,
    #page,
    #map {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      cursor: url(cursor.gif), pointer;
      overflow: hidden;
    }


    body * {
      -webkit-touch-callout: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }


    .topleftmapclass {
      height: 50%;
      width: 50%;
      bottom: 50%;
      right: 50%;
      position: absolute;
      z-index: 200;
    }

    .toprightmapclass {
      height: 50%;
      width: 50%;
      nottom: 50%;
      left: 50%;
      position: absolute;
      z-index: 200;
    }

    .bottomleftmapclass {
      height: 50%;
      width: 50%;
      top: 50%;
      right: 50%;
      position: absolute;
      z-index: 200;
    }

    .bottomrightmapclass {
      height: 50%;
      width: 50%;
      top: 50%;
      left: 50%;
      position: absolute;
      z-index: 200;
    }
  </style>


  <script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.js'></script>
  <link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-compare/v0.1.0/mapbox-gl-compare.css' type='text/css' />


  <div id='topleftmap' class='topleftmapclass'></div>
  <div id='toprightmap' class='toprightmapclass'></div>
  <div id='bottomleftmap' class='bottomleftmapclass'></div>
  <div id='bottomrightmap' class='bottomrightmapclass'></div>


  <script>
    mapboxgl.accessToken = 'pk.eyJ1IjoiZm9ybXVsYTQiLCJhIjoiY2ppanVpMTIwMDF3NDNrcjA5eHlpMjlsOSJ9._4sT3921GYQlIlsZ31EyQA';


    var topleftmapbox = new mapboxgl.Map({
      container: 'topleftmap',
      zoom: 14,
      pitch: 53,
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963]
    });





    topleftmapbox.on('load', function() {
      topleftmapbox.addSource("dopplerimage", {
        "type": "image",
        "url": "KEWX_L2_Z.gif",
        "coordinates": [
          [-98.0387, 29.7125],
          [-98.0182, 29.7125],
          [-98.0387, 29.6927],
          [-98.0387, 29.6920]
        ]
      })



      topleftmapbox.addLayer({
        "id": "overlay",
        "source": "dopplerimage",
        "type": "raster",
        "paint": {
          "raster-opacity": 0.85
        }
      })
    });


    var toprightmapbox = new mapboxgl.Map({
      container: 'toprightmap',
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });




    var bottomleftmapbox = new mapboxgl.Map({
      container: 'bottomleftmap',
      style: 'mapbox://styles/formula4/cjifi4wp72stq2qp6p4ud3bt9',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });




    var bottomrightmapbox = new mapboxgl.Map({
      container: 'bottomrightmap',
      style: 'mapbox://styles/formula4/cjifh68hb0lus2st8q6rz4v49',
      center: [-98.028491, 29.703963],
      zoom: 7,
      attributionControl: false
    });
  </script>
</body>

</html>

这是我的目录如何列出

from flask import Flask, render_template
app = Flask(__name__)


@app.route("/")
@app.route("/home")
def home():
    return render_template('/frontend/index.html')

Answer 1

如果我正确看到您的文件夹结构。

'templates/frontend/index.html'

此外，你应该有一个单独的模板文件夹和一个单独的文件夹，用于静态文件，如css，js，图片和字体。

Flask渲染模板来自另一个文件夹

1 个答案: