Как вместе с html запустить js и css файлы (flask)?

@the_best_hux · Регистрация: 28.03.2018

Author24 — интернет-сервис помощи студентам

Есть функция для запуска html файла фласком.

Python

1
2
3

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

что туда добавить или как написать новую функцию для js и css к нему привязанных? а то страничка есть, но вообще без всего..

vic5710 · 10.04.2018, 21:24

Сообщение от the_best_hux

как написать новую функцию для js и css

так и пиши
https://metanit.com/web/javascript/1.4.php

@outoftime · 10.04.2018, 22:10

Сообщение от the_best_hux

Есть функция для запуска html файла фласком.

HTML это язык разметки, оне не запускается, он интерпретируется браузером.

Сообщение от the_best_hux

что туда добавить или как написать новую функцию для js и css к нему привязанных?

В соответсвии с документацией

Dynamic web applications also need static files. That’s usually where the CSS and JavaScript files are coming from. Ideally your web server is configured to serve them for you, but during development Flask can do that as well. Just create a folder called static in your package or next to your module and it will be available at /static on the application.

@Wi0M · 11.04.2018, 00:07

the_best_hux, это тебе в раздел посвященный html.

Рыжий Лис · 11.04.2018, 04:48

Сообщение от outoftime

он интерпретируется браузером.

Если придираться к словам, то интерпретация - это всё же выполнение интерпретатором кода программы. html просто парсится в DOM дерево.

@cdake · 11.04.2018, 07:14

Необходимо в папке приложения создать папку static/ в нее вложить свои css, js файлы.
в идеале импортировать url_for

Python

from flask import Flask, render-template, url_for
 
app = Flask (__name__)
 
@app_route('/')
def index():
    return render_template('index.html')

в HTML надо будет в секции HEAD указать

HTML5

<head>
<script src = "{{ url_for('static', filename = 'js/file.js') }}"></script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
</head>

Ну вот как-то так

@IRIP · 11.04.2018, 07:18

the_best_hux, приветствую!

чтобы в html вставить js - его нужно загрузить в static (или какая в settings папка написана)

потом, делаешь что-то вроде этого =)

HTML5

{% load static %}
<!DOCTYPE html>
<html>
    <head>  
 
    <title>{% block title %}{% endblock %}</title>
    <meta name="description" content="{% block description %}{% endblock %}" />
    <meta name="keywords" content="{% block keywords %}{% endblock %}" />
 
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
    <script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
    
    <!-- bootstrap-css -->
    <link rel="stylesheet" href="{% static 'css/bootstrap2.min.css' %}" >
    <!-- //bootstrap-css -->
    
    <!-- Custom CSS -->
    <link href="{% static 'css/style2.css' %}" rel='stylesheet' type='text/css' />
    <link href="{% static 'css/style-responsive2.css' %}" rel="stylesheet"/>
   
    <!-- font CSS -->
    <link href='//fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    
    <!-- font-awesome icons -->
    <link rel="stylesheet" href="{% static 'css/font2.css' %}" type="text/css"/>
    <link href="{% static 'css/font-awesome2.css' %}" rel="stylesheet"> 
    <link rel="stylesheet" href="{% static 'css/morris2.css' %}" type="text/css"/>
    <!-- calendar -->
    <link rel="stylesheet" href="{% static 'css/monthly2.css' %}">
    <!-- //calendar -->
    <!-- //font-awesome icons -->
    <script src="{% static 'js/jquery22.0.3.min.js' %}"></script>
    <script src="{% static 'js/raphael-min2.js' %}"></script>
    <script src="{% static 'js/morris2.js' %}"></script>
 
 
 
    </head>

Добавлено через 50 секунд
cdake, меня чуть чуть опередил =)

@cdake · 11.04.2018, 07:25

IRIP, Извини=)

@IRIP · 11.04.2018, 11:47

the_best_hux,

для каждого app в рамках одного project в папке templates должен быть свой index.html в котором это все и пишется

@outoftime · 11.04.2018, 14:38

Сообщение от cdake

Необходимо в папке приложения создать папку static/ в нее вложить свои css, js файлы.
в идеале импортировать url_for

Зря понадеялся что ТС знает английский.

Сообщение от IRIP

чтобы в html вставить js - его нужно загрузить в static (или какая в settings папка написана)

Вопрос по flask а не django

Сообщение от IRIP

для каждого app в рамках одного project в папке templates должен быть свой index.html в котором это все и пишется

Опять же django

vic5710 928 / 690 / 269 Регистрация: 10.12.2016 Сообщений: 1,698
	10.04.2018, 21:24	2
	Сообщение от the_best_hux как написать новую функцию для js и css так и пиши https://metanit.com/web/javascript/1.4.php 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	10.04.2018, 22:10	3
	Сообщение от the_best_hux Есть функция для запуска html файла фласком. HTML это язык разметки, оне не запускается, он интерпретируется браузером. Сообщение от the_best_hux что туда добавить или как написать новую функцию для js и css к нему привязанных? В соответсвии с документацией Dynamic web applications also need static files. That’s usually where the CSS and JavaScript files are coming from. Ideally your web server is configured to serve them for you, but during development Flask can do that as well. Just create a folder called static in your package or next to your module and it will be available at `/static` on the application. 0

@Wi0M 394 / 122 / 48 Регистрация: 26.10.2013 Сообщений: 734
	11.04.2018, 00:07	4
	the_best_hux, это тебе в раздел посвященный html. 0

Рыжий Лис Просто Лис 5731 / 3530 / 1055 Регистрация: 17.05.2012 Сообщений: 10,360 Записей в блоге: 9
	11.04.2018, 04:48	5
	Сообщение от outoftime он интерпретируется браузером. Если придираться к словам, то интерпретация - это всё же выполнение интерпретатором кода программы. html просто парсится в DOM дерево. 2

@cdake 3 / 3 / 0 Регистрация: 11.04.2018 Сообщений: 3
	11.04.2018, 07:25	8
	IRIP, Извини=) 1

@IRIP 513 / 145 / 28 Регистрация: 18.04.2015 Сообщений: 1,879 Записей в блоге: 15
	11.04.2018, 11:47	9
	the_best_hux, для каждого app в рамках одного project в папке templates должен быть свой index.html в котором это все и пишется 0

@outoftime ║XLR8║ 1212 / 909 / 270 Регистрация: 25.07.2009 Сообщений: 4,361 Записей в блоге: 5
	11.04.2018, 14:38	10
	Сообщение от cdake Необходимо в папке приложения создать папку static/ в нее вложить свои css, js файлы. в идеале импортировать url_for Зря понадеялся что ТС знает английский. Сообщение от IRIP чтобы в html вставить js - его нужно загрузить в static (или какая в settings папка написана) Вопрос по flask а не django Сообщение от IRIP для каждого app в рамках одного project в папке templates должен быть свой index.html в котором это все и пишется Опять же django 1