Путь для включения css, javascript в приложении для флиса python?

Я использую код от this github project, чтобы создать приложение флага python с диаграммами d3js. Файл templates/index.html содержит код css и js, написанный в файле HTML. Но, если я попытаюсь поместить этот код во внешние файлы и ссылаться на него в моем index.html, файл не отслеживается. Я пробовал разные пути (папка шаблонов, а также корневая папка), но никто из них не работал.Путь для включения css, javascript в приложении для флиса python?

Пожалуйста, предложите, как я должен использовать внешние файлы css и js.

Это мой шаблоны/код index.html:

<!DOCTYPE HTML> 
<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=utf-8"> 

    <title>flask+d3 Hello World</title> 

    <script src="http://d3js.org/d3.v2.js"></script> 
    <link rel="stylesheet" type="text/css" href="mystyle.css"> 
    <link rel="stylesheet" type="text/css" href="templates/mystyle.css"> 
    <link rel="stylesheet" type="text/css" href="../mystyle.css"> 

</head> 
<body> 

    <h1>Hello World using d3.js &amp; Flask</h1> 

    <div id="info"> 
     <div id="point-info"> 
      Click on a point. 
     </div> 
    </div> 

    <div id="plot"> 
    </div> 

    <script> 

     // Set up the plot window. 
     var margin = 80; 
     var w = 700 - 2 * margin, h = 500 - 2 * margin; 
     var svg = d3.select("#plot").append("svg") 
         .attr("width", w + 2 * margin) 
         .attr("height", h + 2 * margin) 
        .append("svg:g") 
         .attr("transform", "translate(" + margin + ", " + margin + ")"); 

     // The colorbar. 
     var color = d3.scale.quantize() 
         .range(["#156b87", "#876315", "#543510", "#872815"]) 
         .domain([0, 1]); 

     // Axes scaling functions. 
     var xscale = d3.scale.linear().range([0, w]); 
     var yscale = d3.scale.linear().range([h, 0]); 

     // The axes objects themselves. 
     var xaxis = d3.svg.axis().scale(xscale).ticks(8); 
     var yaxis = d3.svg.axis().scale(yscale).ticks(8).orient("left"); 

     svg.append("svg:g").attr("class", "x axis") 
          .attr("transform", "translate(0, " + h + ")"); 
     svg.append("svg:g").attr("class", "y axis"); 

     // Show the information about a particular point. 
     var show_info = function (d) { 
      d3.select("#point-info").text("This is point " + d._id + ". " 
       + "It has the coordinates (" + d.x + ", " + d.y + ")."); 
     }; 

     // Load the data. 
     var callback = function (data) { 
      // Rescale the axes. 
      xscale.domain([d3.min(data, function (d) { return d.x; }) - 0.05, 
          d3.max(data, function (d) { return d.x; }) + 0.05]); 
      yscale.domain([d3.min(data, function (d) { return d.y; }) - 0.05, 
          d3.max(data, function (d) { return d.y; }) + 0.05]); 

      // Display the axes. 
      svg.select(".x.axis").call(xaxis); 
      svg.select(".y.axis").call(yaxis); 

      // Insert the data points. 
      svg.selectAll("circle").data(data).enter() 
       .append("circle") 
        .attr("id", function (d) { return d._id; }) 
        .attr("cx", function (d) { return xscale(d.x); }) 
        .attr("cy", function (d) { return yscale(d.y); }) 
        .attr("r", function (d) { return 2 * Math.sqrt(d.area); }) 
        .style("fill", function (d) { return color(d.color); }) 
        .on("mousedown", show_info); 
     }; 

     d3.json("/data", callback); 

    </script> 

</body> 
</html>

Это мой mystyle.css код:

path.line { 
    fill: none; 
    stroke: #666; 
    stroke-width: 1.5px; 
} 

.domain { 
    stroke-width: 1px; 
} 

circle { 
    cursor: pointer; 
} 

.axis { 
    shape-rendering: crispEdges; 
} 

.axis line, .axis path { 
    stroke-width: 1px; 
    stroke: #000; 
    fill: none; 
} 

.tooltip { 
    display: none; 
} 

.tooltip.active { 
    display: block; 
} 

.tooltip rect { 
    fill: #ff0000; 
}

источник

2014-12-16 user3422637

Можете ли вы поделиться образцом того, как вы в настоящее время пытаетесь сделать это (будь то в ваших HTML-шаблонах или в вашем Python-коде)? – rchang

добавлен код в поле вопроса – user3422637

Простой ответ: создайте папку с именем 'статический', поместите статические файлы в нем и их URL-адрес в HTML: '/static/your_file_path/your_file_name.extension'.

Здесь находится документация по адресу static file, где вы можете найти аутентичный ответ.

Если вы хотите изменить «статическую» папку по умолчанию, а также изменить по умолчанию статического пути файла URL-адрес, вы можете прочитать эти application startup configurations

источник

2014-12-16 23:38:19 chfw

Путь для включения css, javascript в приложении для флиса python?

ответ

Смежные вопросы