Что такое статический файл
Для определения пути хранения статических файлов в проекте используются два параметра ContentRoot и WebRoot . Статические файлы должны располагаться в каталоге ContentRoot/WebRoot . По умолчанию "ContentRoot" представляет каталог текущего проекта, а "WebRoot" по умолчанию представляет каталог wwwroot . То есть если использовать значения по умолчанию, то статические файлы следует располагать в папке "wwwroot", которая должна находиться в текущем проекте. Но естественно эти параметры можно переопределить.
В разных типах проектов ASP NET Core данная папка может уже быть по умолчанию в проекте, а может отсутствовать. Например, в проекте по типу Empty данная папка отсутствует, поэтому ее надо добавлять вручную.
Итак, возьмем проект по типу Empty и добавим в него новую папку wwwroot . Далее добавим в папку wwwroot новый файл index.html . Для его добавления нажмем на wwwroot правой кнопкой мыши и далее в контекстном меню выберем Add ->New Item . Затем в окне добавления нового элемента найдем шаблон для html-файлов:
Структура проекта после добавления папки и файла index.html:
Изменим код файла index.html, например, следующим образом:
Но чтобы приложение могло бы отдавать статические файлы клиенту, нам надо добавить в конвейер обработки запроса в методе Configure() класса Startup компонент middleware в виде метода расширения UseStaticFiles() :
По всем остальным запросам браузер выводил бы строку "Hello World".
2. Укажите статический URL Django в настройках
Теперь убедитесь, что статические файлы Django django.contrib.staticfiles указаны в списке установленных приложений в settings.py.
Они должны быть там по умолчанию.
После этого пролистайте в нижнюю часть файла настроек и укажите статический URL, если такого еще нет. Вы также можете указать статическую папку, чтобы Django знал, где искать статические файлы.
Не забудьте импортировать библиотеку os после добавления кода выше.
После завершения базовой настройки рассмотрим, как добавлять и показывать изображения в шаблонах, а также как подключить свои JavaScript и CSS файлы.
Обслуживание файлов вне корневого веб-каталога
Пусть имеется иерархия каталогов, в которой статические файлы обслуживаются вне корневого каталога документов:
В запросе можно получить доступ к файлу red-rose.jpg , настроив ПО промежуточного слоя для статических файлов следующим образом:
Следующая разметка ссылается на MyStaticFiles/images/red-rose.jpg :
В приведенном выше коде для параметра max-age устанавливается значение 604800 секунд (7 дней).
Обслуживание документов по умолчанию
Для обслуживания файла по умолчанию метод UseDefaultFiles должен быть вызван до метода UseStaticFiles . UseDefaultFiles — это средство переопределения URL-адресов, которое не обслуживает файл.
При использовании UseDefaultFiles запросы к папке в wwwroot будут искать следующие файлы:
- default.htm
- default.html
- index.htm
- index.html
Первый найденный файл из списка будет обслужен, как если бы запрос включал имя файла. URL-адрес в браузере будет соответствовать запрошенному URI.
Следующий код позволяет изменить имя файла по умолчанию на mydefault.html :
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
7. Создание папки и файла для CSS
Также можно подключить CSS-файлы. Для этого создайте папку «css» внутри «static». Вы также можете использовать элемент и вложить все стили туда.
Но в случае создания отдельных классовых атрибутов, которые затем используются в разных шаблонах, лучше создавать отдельные папки и файлы.
FileExtensionContentTypeProvider
Класс FileExtensionContentTypeProvider содержит свойство Mappings , которое используется для сопоставления расширений файлов и типов содержимого MIME. В следующем примере несколько расширений файлов сопоставляются с известными типами MIME. Расширение .rtf заменяется, а .mp4 удаляется:
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
Дополнительные ресурсы
Авторы: Рик Андерсон (Rick Anderson) и Кирк Ларкин (Kirk Larkin)
Вопрос. Какое назначение у тега ?
Ответ. Строка необходима для ссылки на статические файлы в таких элементах, как и . В примере, показанном в этом разделе, под "статическими файлами" понимается набор пользовательских тегов шаблонов Django, который позволяет ссылаться на статические файлы с помощью синтаксиса . Без при выполнении приложения отобразится исключение.
Обслуживание файлов за пределами wwwroot путем обновления IWebHostEnvironment.WebRootPath
Если для IWebHostEnvironment.WebRootPath задана папка, отличная от wwwroot :
- В среде разработки статические ресурсы, найденные как в обоих wwwroot , так и в обновленных IWebHostEnvironment.WebRootPath , обслуживаются из wwwroot .
- В любой среде, отличной от среды разработки, дублирующиеся статические ресурсы обслуживаются из обновленной папки IWebHostEnvironment.WebRootPath .
Рассмотрим веб-приложение, созданное с помощью пустого веб-шаблона:
Содержит файл Index.html в wwwroot и wwwroot-custom .
С использованием следующего обновленного файла Program.cs , который задает WebRootPath = "wwwroot-custom" :
В приведенном выше коде запросы к / :
- В среде разработки возвращают wwwroot/Index.html .
- В любой среде, отличной от среды разработки, возвращают wwwroot-custom/Index.html .
Чтобы обеспечить возврат ресурсов из wwwroot-custom , используйте один из следующих подходов:
Удаление повторяющихся именованных ресурсов в wwwroot .
Задание для "ASPNETCORE_ENVIRONMENT" в Properties/launchSettings.json любого значения, отличного от "Development" .
Полностью отключите статические веб-ресурсы, задав
Добавьте следующий JSON в файл проекта:
Следующий код изменяет IWebHostEnvironment.WebRootPath на значение, отличное от значения для среды разработки, гарантируя, что повторяющееся содержимое возвращается из wwwroot-custom вместо wwwroot :
Безопасность статических файлов
Использование UseDirectoryBrowser и UseStaticFiles может привести к утечке конфиденциальной информации. Настоятельно рекомендуется отключать просмотр каталогов в рабочей среде. Тщательно проверьте, просмотр каких каталогов разрешен посредством UseStaticFiles или UseDirectoryBrowser . Весь каталог и его подкаталоги становятся общедоступными. Храните файлы, предназначенные для общего доступа, в выделенных каталогах, таких как /wwwroot . Отделите эти файлы от представлений MVC, Razor Pages, файлов конфигурации и т. д.
К URL-адресам содержимого, к которому предоставлен доступ методами UseDirectoryBrowser и UseStaticFiles , применяются те же требования по регистрозависимости и запрещенным символам, что и к базовой файловой системе. Например, в Windows регистр не учитывается, а в macOS и Linux учитывается.
Выполните следующие шаги в диспетчере служб IIS для удаления обработчика статических файлов IIS на уровне сервера или веб-сайта:
В предыдущих шагах этого руководства вы научились создавать минимальное приложение Django с одной страницей HTML. Однако современные веб-приложения содержат множество страниц. Для обеспечения единообразия стиля и поведения в современных веб-страницах используются такие общие ресурсы, как файлы CSS и JavaScript.
На этом шаге вы научитесь делать следующее:
- с помощью шаблонов элементов Visual Studio быстро добавлять новые файлы различных типов с удобным стереотипным кодом (шаг 3.1);
- настраивать проект Django для обработки статических файлов (шаг 3–2),
- добавлять дополнительные страницы в приложение (шаг 3–3);
- использовать наследование шаблона для создания заголовка и панели навигации, которая используется на разных страницах (шаг 3–4).
Авторизация статических файлов
- для статических файлов не выполняются проверки авторизации;
- статические файлы, обслуживаемые ПО промежуточного слоя статического файла, например те, которые находятся в wwwroot , являются общедоступными.
Для обслуживания статических файлов на основе авторизации:
- сохраните их за пределами wwwroot ;
- вызовите UseStaticFiles , указав путь, после вызова UseAuthorization ;
- задайте резервную политику авторизации.
В приведенном выше коде резервная политика авторизации требует проверки подлинности всех пользователей. Конечные точки, такие как контроллеры, страницы Razor и т. д., которые определяют собственные требования к авторизации, не используют резервную политику авторизации. Например, Razor Pages, контроллеры или методы действий с [AllowAnonymous] или [Authorize(PolicyName="MyPolicy")] используют примененный атрибут авторизации вместо резервной политики авторизации.
RequireAuthenticatedUser добавляет DenyAnonymousAuthorizationRequirement к текущему экземпляру, что обеспечивает проверку подлинности текущего пользователя.
Альтернативный подход к обработке файлов на основе авторизации:
- Сохраните файлы за пределами каталога wwwroot в любом каталоге, к которому имеет доступ ПО промежуточного слоя для статических файлов.
- Обслуживайте их через метод действия, к которому применима авторизация, и получите объект FileResult:
Создание файла стилей css
Создайте файл «stylesheet.css» в static > css . Там будут храниться все ваши стили.
Обслуживание документов по умолчанию
Для обслуживания файла по умолчанию метод UseDefaultFiles должен быть вызван до метода UseStaticFiles . UseDefaultFiles — это средство переопределения URL-адресов, которое не обслуживает файл.
При использовании UseDefaultFiles запросы к папке в wwwroot будут искать следующие файлы:
- default.htm
- default.html
- index.htm
- index.html
Первый найденный файл из списка будет обслужен, как если бы запрос включал имя файла. URL-адрес в браузере будет соответствовать запрошенному URI.
Следующий код позволяет изменить имя файла по умолчанию на mydefault.html :
4. Загрузите статический файл в свой HTML-шаблон
Теперь в выбранном шаблоне (например, в «home.html») загрузите статический файл в верхней части страницы.
Важно добавить до того, как добавлять изображение. В противном случае оно не будет загружено.
Обслуживание статических файлов
Статические файлы хранятся в корневом каталоге документов проекта. Каталог по умолчанию — /wwwroot , но его можно изменить с помощью метода UseWebRoot. См. разделы Корневой каталог содержимого и Корневой веб-каталог.
Метод CreateBuilder устанавливает текущий каталог в качестве корневого каталога содержимого:
Статические файлы доступны по относительному пути от корневого каталога документов. Например, шаблоны проекта Web Application содержат несколько папок в папке wwwroot :
Следующие шаги
Tutorial step 4: Use the full Django Web Project template (Руководство (шаг 4). Использование полного шаблона веб-проекта Django)
Если вы искали способ добавить изображения, стили и js в свой проект на Django, то пришли по адресу.
Что такое статические файлы в Django?
Изображения, JS и CSS-файлы называются статическими файлами или ассетами проекта Django.
3. Создайте папку для изображений
Создайте папку в «static» специально для изображений. Назовите ее «img». Главное после этого правильно ссылаться на нее в шаблонах.
Просмотр каталогов
Просмотр каталогов позволяет просматривать список каталогов в указанных каталогах.
По соображениям безопасности просмотр каталогов отключен по умолчанию. Дополнительные сведения см. в разделе Замечания по безопасности для статических файлов.
Включите просмотр каталогов с помощью AddDirectoryBrowser и UseDirectoryBrowser:
AddDirectoryBrowser добавляет службы, необходимые для ПО промежуточного слоя для просмотра каталогов, включая HtmlEncoder. Эти службы можно добавить с помощью вызова других методов, например AddRazorPages, но мы рекомендуем вызвать метод AddDirectoryBrowser , чтобы обеспечить добавление служб во все приложения.
Просмотр каталогов
Просмотр каталогов позволяет просматривать список каталогов в указанных каталогах.
По соображениям безопасности просмотр каталогов отключен по умолчанию. Дополнительные сведения см. в разделе Замечания по безопасности для статических файлов.
Включите просмотр каталогов с помощью:
Использование UseFileServer для документов по умолчанию
UseFileServer объединяет функции UseStaticFiles , UseDefaultFiles и при необходимости UseDirectoryBrowser .
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов:
Пусть имеется следующая иерархия каталогов:
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов MyStaticFiles :
AddDirectoryBrowser должно вызываться, когда свойство EnableDirectoryBrowsing имеет значение true .
При указанных выше иерархии файлов и коде URL-адреса будут разрешаться следующим образом:
Предоставление файлов из нескольких расположений
В качестве значений UseStaticFiles и UseFileServer по умолчанию используется поставщик файлов, указывающий на wwwroot . Вы можете предоставить дополнительные экземпляры UseStaticFiles и UseFileServer с другими поставщиками файлов для обслуживания файлов из других расположений. Дополнительные сведения см. в этой статье об ошибке на GitHub.
Обучение с трудоустройством
Я создал этот блог в 2018 году, чтобы распространять полезные учебные материалы, документации и уроки на русском. На сайте опубликовано множество статей по основам python и библиотекам, уроков для начинающих и примеров написания программ.
Нестандартные типы содержимого
ПО промежуточного слоя для статических файлов распознает почти 400 известных типов содержимого файлов. Если пользователь запрашивает файл неизвестного типа, ПО промежуточного слоя статических файлов передает запрос следующему компоненту ПО промежуточного слоя в конвейере. Если ПО промежуточного слоя не удается обработать запрос, возвращается ответ 404 Не найдено. Если просмотр каталогов разрешен, то в списке каталогов отображается ссылка на файл.
Следующий код включает обслуживание неизвестных типов и обслуживает неизвестные файлы как изображения:
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
При выполнении вышеописанного кода ответ на запрос файла с неизвестным типом содержимого вернется в виде изображения.
При включении ServeUnknownFileTypes возникает угроза безопасности. По умолчанию он отключен, и его использование не рекомендуется. Использование класса FileExtensionContentTypeProvider является более безопасной альтернативой для обслуживания файлов с нестандартными расширениями.
8. Загрузите ссылку на CSS в шаблон
Для подключения собственных стилей к проекту, добавьте HTML-элемент в «header.html». Файл вызывается так же, как изображения и JS-файлы.
И снова не забудьте о в верхней части страницы. Если не добавить эту строку, то будет ошибка.
Если класс custom добавить к container вы увидите изменения:
Обслуживание файлов в корневом каталоге веб-сайта
Шаблоны веб-приложений по умолчанию вызывают метод UseStaticFiles в Program.cs , который позволяет обслуживать статические файлы:
Эта перегрузка метода UseStaticFiles не принимает параметров, она помечает файлы в корневом каталоге документов как обслуживаемые. Следующая разметка ссылается на wwwroot/images/MyImage.jpg :
В приведенной выше разметке знак тильды ~ указывает на корневой каталог документов.
Просмотр каталогов
Просмотр каталогов позволяет просматривать список каталогов в указанных каталогах.
По соображениям безопасности просмотр каталогов отключен по умолчанию. Дополнительные сведения см. в разделе Замечания по безопасности для статических файлов.
Включите просмотр каталогов с помощью AddDirectoryBrowser и UseDirectoryBrowser:
AddDirectoryBrowser добавляет службы, необходимые для ПО промежуточного слоя для просмотра каталогов, включая HtmlEncoder. Эти службы можно добавить с помощью вызова других методов, например AddRazorPages, но мы рекомендуем вызвать метод AddDirectoryBrowser , чтобы обеспечить добавление служб во все приложения.
Обслуживание документов по умолчанию
Для обслуживания файла по умолчанию метод UseDefaultFiles должен быть вызван до метода UseStaticFiles . UseDefaultFiles — это средство переопределения URL-адресов, которое не обслуживает файл.
При использовании UseDefaultFiles запросы к папке в wwwroot будут искать следующие файлы:
- default.htm
- default.html
- index.htm
- index.html
Первый найденный файл из списка будет обслужен, как если бы запрос включал имя файла. URL-адрес в браузере будет соответствовать запрошенному URI.
Следующий код позволяет изменить имя файла по умолчанию на mydefault.html :
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
Использование тега static в шаблоне
После этого вы можете использовать тег «static» в шаблоне для работы с источником изображения.
dstatic > templates > home.html
Стоит отметить, что этот файл использует также Bootstrap CDN. Результат:
Авторизация статических файлов
- для статических файлов не выполняются проверки авторизации;
- статические файлы, обслуживаемые ПО промежуточного слоя статического файла, например те, которые находятся в wwwroot , являются общедоступными.
Для обслуживания статических файлов на основе авторизации:
- сохраните их за пределами wwwroot ;
- вызовите UseStaticFiles , указав путь, после вызова UseAuthorization ;
- задайте резервную политику авторизации.
В приведенном выше коде резервная политика авторизации требует проверки подлинности всех пользователей. Конечные точки, такие как контроллеры, страницы Razor и т. д., которые определяют собственные требования к авторизации, не используют резервную политику авторизации. Например, Razor Pages, контроллеры или методы действий с [AllowAnonymous] или [Authorize(PolicyName="MyPolicy")] используют примененный атрибут авторизации вместо резервной политики авторизации.
RequireAuthenticatedUser добавляет DenyAnonymousAuthorizationRequirement к текущему экземпляру, что обеспечивает проверку подлинности текущего пользователя.
Альтернативный подход к обработке файлов на основе авторизации:
- Сохраните файлы за пределами каталога wwwroot в любом каталоге, к которому имеет доступ ПО промежуточного слоя для статических файлов.
- Обслуживайте их через метод действия, к которому применима авторизация, и получите объект FileResult:
Изменение пути к статическим файлам
Что делать, если нас не устраивает стандартная папка wwwroot. И мы, к примеру, хотим, чтобы все статические файлы в проекте находились в папке static . Для этого добавим папку static в проект, и затем в ней определим какой-нибудь html-файл. Пусть он будет называться content.html :
Чтобы приложение восприняло эту папку, изменим код создания хоста в файле Program.cs:
Для объекта IWebHostBuilder определен метод UseWebRoot() , который позволяет переопределить папку.
И после этого мы также сможем обращаться к статическим файлам, только теперь они будут браться из папки static, а не из wwwroot.
Шаг 3–2. Обработка статических файлов из приложения
В веб-приложении, созданном на Python (при помощи любой платформы), файлы Python всегда выполняются на сервере веб-узла. Файлы Python никогда не передаются на компьютер пользователя. Другие файлы, такие как файлы CSS и JavaScript, используются исключительно браузером. Поэтому, когда они запрашиваются, сервер узла просто доставляет их в исходном виде. Такие файлы называются статическими файлами, Django может доставлять их автоматических без необходимости написания кода.
По умолчанию в проекте Django настроена обработка статических файлов из папки приложения static с помощью следующих строк в файле settings.py проекта Django:
Файлы в папке static можно систематизировать с помощью любой предпочитаемой структуры папок, а затем ссылаться на них с помощью относительных путей в этой папке. Попробуйте это сделать: следуйте описанным ниже шагам, чтобы добавить CSS-файл в приложение и использовать таблицу стилей в шаблоне index.html:
В обозревателе решений в проекте Visual Studio щелкните папку HelloDjangoApp правой кнопкой мыши, выберите Добавить > Новая папка и назовите папку static .
Щелкните папку static правой кнопкой мыши и выберите Добавить > Новый элемент. В появившемся диалоговом окне выберите шаблон Таблица стилей, укажите имя файла site.css и нажмите Добавить.
Файл site.css появится в проекте и откроется в редакторе. Структура папок должна походить на изображенную ниже:
Замените содержимое файла site.css следующим кодом и сохраните файл:
Замените содержимое файла templates/HelloDjangoApp/index.html приложения следующим кодом. Этот код заменяет использованный на шаге 2 элемент на , который ссылается на класс стилей message . Использование класса стилей обеспечивает большую гибкость при задании стиля элемента. (Если вы не переместили файл index.html во вложенную папку в templates и используете VS 2017 версии 15.7 или более ранних, ознакомьтесь с пунктом о пространстве имен шаблонов на шаге 2–4.)
Запустите проект для просмотра результатов. После его завершения остановите сервер и при необходимости зафиксируйте изменения в системе управления версиями (как описано в шаге 2).
Нестандартные типы содержимого
ПО промежуточного слоя для статических файлов распознает почти 400 известных типов содержимого файлов. Если пользователь запрашивает файл неизвестного типа, ПО промежуточного слоя статических файлов передает запрос следующему компоненту ПО промежуточного слоя в конвейере. Если ПО промежуточного слоя не удается обработать запрос, возвращается ответ 404 Не найдено. Если просмотр каталогов разрешен, то в списке каталогов отображается ссылка на файл.
Следующий код включает обслуживание неизвестных типов и обслуживает неизвестные файлы как изображения:
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
При выполнении вышеописанного кода ответ на запрос файла с неизвестным типом содержимого вернется в виде изображения.
При включении ServeUnknownFileTypes возникает угроза безопасности. По умолчанию он отключен, и его использование не рекомендуется. Использование класса FileExtensionContentTypeProvider является более безопасной альтернативой для обслуживания файлов с нестандартными расширениями.
Авторизация статических файлов
- для статических файлов не выполняются проверки авторизации;
- статические файлы, обслуживаемые ПО промежуточного слоя статического файла, например те, которые находятся в wwwroot , являются общедоступными.
Для обслуживания статических файлов на основе авторизации:
- сохраните их за пределами wwwroot ;
- вызовите UseStaticFiles , указав путь, после вызова UseAuthorization ;
- задайте резервную политику авторизации.
В приведенном выше коде резервная политика авторизации требует проверки подлинности всех пользователей. Конечные точки, такие как контроллеры, страницы Razor и т. д., которые определяют собственные требования к авторизации, не используют резервную политику авторизации. Например, Razor Pages, контроллеры или методы действий с [AllowAnonymous] или [Authorize(PolicyName="MyPolicy")] используют примененный атрибут авторизации вместо резервной политики авторизации.
RequireAuthenticatedUser добавляет DenyAnonymousAuthorizationRequirement к текущему экземпляру, что обеспечивает проверку подлинности текущего пользователя.
Альтернативный подход к обработке файлов на основе авторизации:
- Сохраните файлы за пределами каталога wwwroot в любом каталоге, к которому имеет доступ ПО промежуточного слоя для статических файлов.
- Обслуживайте их через метод действия, к которому применима авторизация, и получите объект FileResult:
Нестандартные типы содержимого
ПО промежуточного слоя для статических файлов распознает почти 400 известных типов содержимого файлов. Если пользователь запрашивает файл неизвестного типа, ПО промежуточного слоя статических файлов передает запрос следующему компоненту ПО промежуточного слоя в конвейере. Если ПО промежуточного слоя не удается обработать запрос, возвращается ответ 404 Не найдено. Если просмотр каталогов разрешен, то в списке каталогов отображается ссылка на файл.
Следующий код включает обслуживание неизвестных типов и обслуживает неизвестные файлы как изображения:
При выполнении вышеописанного кода ответ на запрос файла с неизвестным типом содержимого вернется в виде изображения.
При включении ServeUnknownFileTypes возникает угроза безопасности. По умолчанию он отключен, и его использование не рекомендуется. Использование класса FileExtensionContentTypeProvider является более безопасной альтернативой для обслуживания файлов с нестандартными расширениями.
Авторизация статических файлов
- для статических файлов не выполняются проверки авторизации;
- статические файлы, обслуживаемые ПО промежуточного слоя статического файла, например те, которые находятся в wwwroot , являются общедоступными.
Для обслуживания статических файлов на основе авторизации:
- сохраните их за пределами wwwroot ;
- вызовите UseStaticFiles , указав путь, после вызова UseAuthorization ;
- задайте резервную политику авторизации.
В приведенном выше коде резервная политика авторизации требует проверки подлинности всех пользователей. Конечные точки, такие как контроллеры, страницы Razor и т. д., которые определяют собственные требования к авторизации, не используют резервную политику авторизации. Например, Razor Pages, контроллеры или методы действий с [AllowAnonymous] или [Authorize(PolicyName="MyPolicy")] используют примененный атрибут авторизации вместо резервной политики авторизации.
RequireAuthenticatedUser добавляет DenyAnonymousAuthorizationRequirement к текущему экземпляру, что обеспечивает проверку подлинности текущего пользователя.
Альтернативный подход к обработке файлов на основе авторизации:
- Сохраните файлы за пределами каталога wwwroot в любом каталоге, к которому имеет доступ ПО промежуточного слоя для статических файлов.
- Обслуживайте их через метод действия, к которому применима авторизация, и получите объект FileResult:
Безопасность статических файлов
Использование UseDirectoryBrowser и UseStaticFiles может привести к утечке конфиденциальной информации. Настоятельно рекомендуется отключать просмотр каталогов в рабочей среде. Тщательно проверьте, просмотр каких каталогов разрешен посредством UseStaticFiles или UseDirectoryBrowser . Весь каталог и его подкаталоги становятся общедоступными. Храните файлы, предназначенные для общего доступа, в выделенных каталогах, таких как /wwwroot . Отделите эти файлы от представлений MVC, Razor Pages, файлов конфигурации и т. д.
К URL-адресам содержимого, к которому предоставлен доступ методами UseDirectoryBrowser и UseStaticFiles , применяются те же требования по регистрозависимости и запрещенным символам, что и к базовой файловой системе. Например, в Windows регистр не учитывается, а в macOS и Linux учитывается.
Выполните следующие шаги в диспетчере служб IIS для удаления обработчика статических файлов IIS на уровне сервера или веб-сайта:
- Размещайте файлы с кодом, включая файлы .cs и .cshtml , за пределами корневого веб-каталога проекта приложения. Таким образом, в приложении создается логическое разделение между клиентским содержимым и серверным кодом. Это предотвращает утечку серверного кода.
Обслуживание файлов в корневом каталоге веб-сайта
Шаблоны веб-приложений по умолчанию вызывают метод UseStaticFiles в Startup.Configure , который позволяет обслуживать статические файлы:
Эта перегрузка метода UseStaticFiles не принимает параметров, она помечает файлы в корневом каталоге документов как обслуживаемые. Следующая разметка ссылается на wwwroot/images/MyImage.jpg :
В приведенном выше коде знак тильды ~/ указывает на корневой каталог документов.
Предоставление файлов из нескольких расположений
В качестве значений UseStaticFiles и UseFileServer по умолчанию используется поставщик файлов, указывающий на wwwroot . Вы можете предоставить дополнительные экземпляры UseStaticFiles и UseFileServer с другими поставщиками файлов для обслуживания файлов из других расположений. Дополнительные сведения см. в этой статье об ошибке на GitHub.
Предоставление файлов из нескольких расположений
В качестве значений UseStaticFiles и UseFileServer по умолчанию используется поставщик файлов, указывающий на wwwroot . Вы можете предоставить дополнительные экземпляры UseStaticFiles и UseFileServer с другими поставщиками файлов для обслуживания файлов из других расположений. В следующем примере метод UseStaticFiles вызывается дважды для обслуживания файлов из wwwroot и static :
Вопрос. Как Visual Studio определяет, какой шаблон элемента предложить?
Ответ. Файл проекта Visual Studio (PYPROJ) содержит идентификатор типа проекта, который помечает его как проект Python. Visual Studio использует идентификатор типов, чтобы отображать только шаблоны элементов, подходящие для типа проекта. Таким образом Visual Studio может предоставить обширный набор шаблонов элементов для множества типов проектов без необходимости каждый раз запрашивать их сортировку.
Предоставление файлов из нескольких расположений
В качестве значений UseStaticFiles и UseFileServer по умолчанию используется поставщик файлов, указывающий на wwwroot . Вы можете предоставить дополнительные экземпляры UseStaticFiles и UseFileServer с другими поставщиками файлов для обслуживания файлов из других расположений. В следующем примере метод UseStaticFiles вызывается дважды для обслуживания файлов из wwwroot и static :
Просмотр каталогов
Просмотр каталогов позволяет просматривать список каталогов в указанных каталогах.
По соображениям безопасности просмотр каталогов отключен по умолчанию. Дополнительные сведения см. в разделе Замечания по безопасности для статических файлов.
Включите просмотр каталогов с помощью:
Дополнительные ресурсы
Авторы: Рик Андерсон (Rick Anderson) и Кирк Ларкин (Kirk Larkin)
Шаг 3-4. Использование наследования шаблона для создания заголовка и навигационной панели
В современных веб-приложениях вместо явных навигационных ссылок используются фирменный заголовок и панель навигации. На панели навигации находятся ссылки на наиболее важные страницы, всплывающие меню и пр. Чтобы убедиться, что заголовок и панель навигации одинаковы на всех страницах, не нужно повторять один и тот же код в шаблоне каждой страницы. Вместо этого необходимо определить общие компоненты всех страниц в одном месте.
Система шаблонов Django предоставляет два способа повторного использования определенных элементов в нескольких шаблонах: включение и наследование.
Включение. Это другие шаблоны страниц, которые вставляются в определенное место в ссылочном шаблоне, используя синтаксис %> . Чтобы динамически изменять путь в коде, можно воспользоваться переменной. Включения используются в основной части страницы для извлечения общего шаблона в конкретном расположении на странице.
Наследование. В начале шаблона страницы используется %> для определения общего базового шаблона, на основе которого затем создается ссылочный шаблон. Наследование обычно используется для определения общего макета, панели навигации и других структур для страниц приложения, так чтобы ссылающиеся на них шаблоны могли только добавлять или изменять определенные области базового шаблона, называемые блоками.
В обоих случаях относится к папке templates приложения ( ../ или ./ также разрешены).
Базовый шаблон отделяет блоки с помощью тегов %> и . Если ссылающийся на него шаблон использует теги с тем же именем блока, содержимое его блока переопределяет содержимое базового шаблона.
Далее демонстрируется наследование:
В папке приложения templates/HelloDjangoApp создайте новый HTML-файл. Щелкните правой кнопкой мыши папку templates/HelloDjangoApp, нажмите Добавить > Новый элемент и выберите шаблон элемента HTML-страница. Присвойте файлу имя layout.html и нажмите Добавить.
Замените содержимое файла layout.html следующей разметкой. Обратите внимание, что в этом шаблоне содержится блок под названием "content", который необходимо заменить для всех страниц, на которые создается ссылка:
Добавьте следующие стили в файл static/site.css приложения (в этом пошаговом руководстве мы не пытаемся продемонстрировать гибкость дизайна; эти стили просто позволяют получить интересные результаты):
Измените файл templates/HelloDjangoApp/index.html, чтобы создать ссылку на базовый шаблон и переопределить блок "content". Можно увидеть, что с помощью наследования этот шаблон упрощается:
Измените файл templates/HelloDjangoApp/about.html, чтобы создать ссылку на базовый шаблон и переопределить блок "content":
Запустите сервер для просмотра результатов. После завершения закройте сервер.
Так как в приложение были внесены значительные изменения, самое время зафиксировать изменения в системе управления версиями.
Шаг 3-1. Знакомство с шаблонами элементов
По мере разработки приложения Django обычно добавляется множество файлов Python, HTML, CSS и JavaScript. Для каждого типа файла (а также таких файлов, как web.config, которые могут понадобиться при развертывании) Visual Studio предоставляет удобные шаблоны элементов для начала работы.
Чтобы просмотреть доступные шаблоны, перейдите в Обозреватель решений, щелкните правой кнопкой мыши папку, в которой нужно создать элемент, и выберите Добавить > Новый элемент.
Чтобы использовать шаблон, выберите желаемый шаблон, укажите имя файла и нажмите Добавить. При добавлении элемента таким образом автоматически добавляется файл в проект Visual Studio и отмечает изменения для системы управления версиями.
Создание файла script.js
В папке static > js создайте файл «script.js», в котором будут храниться все функции JavaScript.
FileExtensionContentTypeProvider
Класс FileExtensionContentTypeProvider содержит свойство Mappings , которое используется для сопоставления расширений файлов и типов содержимого MIME. В следующем примере несколько расширений файлов сопоставляются с известными типами MIME. Расширение .rtf заменяется, а .mp4 удаляется:
Шаг 3-3. Добавление страницы в приложение
Добавление дополнительной страницы в приложение потребует следующих действий:
- добавление функции Python, которая определяет представление;
- добавление шаблона для исправления страницы;
- добавление необходимой маршрутизации в файл urls.py проекта Django.
В следующих шагах описано добавление в проект "HelloDjangoApp" страницы "Дополнительные сведения" и создание ссылки на нее с домашней страницы:
В Обозревателе решений щелкните правой кнопкой мыши папку templates/HelloDjangoApp. Нажмите Добавить > Новый элемент и выберите шаблон элемента HTML-страница. Присвойте файлу имя about.html и нажмите Добавить.
Если в меню Добавить отсутствует команда Новый элемент, убедитесь, что вы остановили сервер, чтобы служба Visual Studio вышла из режим отладки.
Замените содержимое файла about.html следующей разметкой (в шаге 3–4 вы замените явную ссылку на домашнюю страницу простой панелью навигации):
Откройте файл views.py приложения и добавьте функцию с именем about , которая использует шаблон:
Откройте файл urls.py проекта Django и добавьте следующую строку в массив urlPatterns :
Откройте файл templates/HelloDjangoApp/index.html и добавьте следующую строку перед элементом , чтобы создать ссылку на страницу "Дополнительные сведения" (в шаге 3–4 вы замените эту ссылку панелью навигации):
Сохраните все файлы с помощью команды меню Файл > Сохранить все или просто нажмите клавиши CTRL+SHIFT+S. (Технически этот шаг не требуется, так как при запуске проекта в Visual Studio файлы автоматически сохраняются. Тем не менее эта полезная команда может пригодиться.)
Запустите проект, чтобы просмотреть результаты и проверить постраничную навигацию. После завершения закройте сервер.
Безопасность статических файлов
Использование UseDirectoryBrowser и UseStaticFiles может привести к утечке конфиденциальной информации. Настоятельно рекомендуется отключать просмотр каталогов в рабочей среде. Тщательно проверьте, просмотр каких каталогов разрешен посредством UseStaticFiles или UseDirectoryBrowser . Весь каталог и его подкаталоги становятся общедоступными. Храните файлы, предназначенные для общего доступа, в выделенных каталогах, таких как /wwwroot . Отделите эти файлы от представлений MVC, Razor Pages, файлов конфигурации и т. д.
К URL-адресам содержимого, к которому предоставлен доступ методами UseDirectoryBrowser и UseStaticFiles , применяются те же требования по регистрозависимости и запрещенным символам, что и к базовой файловой системе. Например, в Windows регистр не учитывается, а в macOS и Linux учитывается.
Выполните следующие шаги в диспетчере служб IIS для удаления обработчика статических файлов IIS на уровне сервера или веб-сайта:
Вопрос. Можно ли выполнить эту задачу без использования тега ?
Ответ. Да, можете.
Обслуживание файлов за пределами wwwroot путем обновления IWebHostEnvironment.WebRootPath
Если для IWebHostEnvironment.WebRootPath задана папка, отличная от wwwroot :
- В среде разработки статические ресурсы, найденные как в обоих wwwroot , так и в обновленных IWebHostEnvironment.WebRootPath , обслуживаются из wwwroot .
- В любой среде, отличной от среды разработки, дублирующиеся статические ресурсы обслуживаются из обновленной папки IWebHostEnvironment.WebRootPath .
Рассмотрим веб-приложение, созданное с помощью пустого веб-шаблона:
Содержит файл Index.html в wwwroot и wwwroot-custom .
С использованием следующего обновленного файла Program.cs , который задает WebRootPath = "wwwroot-custom" :
В приведенном выше коде запросы к / :
- В среде разработки возвращают wwwroot/Index.html .
- В любой среде, отличной от среды разработки, возвращают wwwroot-custom/Index.html .
Чтобы обеспечить возврат ресурсов из wwwroot-custom , используйте один из следующих подходов:
Удаление повторяющихся именованных ресурсов в wwwroot .
Задание для "ASPNETCORE_ENVIRONMENT" в Properties/launchSettings.json любого значения, отличного от "Development" .
Полностью отключите статические веб-ресурсы, задав
Добавьте следующий JSON в файл проекта:
Следующий код изменяет IWebHostEnvironment.WebRootPath на значение, отличное от значения для среды разработки, гарантируя, что повторяющееся содержимое возвращается из wwwroot-custom вместо wwwroot :
Обслуживание статических файлов
Статические файлы хранятся в корневом каталоге документов проекта. Каталог по умолчанию — /wwwroot , но его можно изменить с помощью метода UseWebRoot. См. разделы Корневой каталог содержимого и Корневой веб-каталог.
Метод CreateDefaultBuilder устанавливает текущий каталог в качестве корневого каталога содержимого:
Предыдущий код создан с помощью шаблона веб-приложения.
Статические файлы доступны по относительному пути от корневого каталога документов. Например, шаблоны проекта Web Application содержат несколько папок в папке wwwroot :
Использование UseFileServer для документов по умолчанию
UseFileServer объединяет функции UseStaticFiles , UseDefaultFiles и при необходимости UseDirectoryBrowser .
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов:
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
Пусть имеется следующая иерархия каталогов:
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов MyStaticFiles :
AddDirectoryBrowser должно вызываться, когда свойство EnableDirectoryBrowsing имеет значение true .
При указанных выше коде и иерархии файлов URL-адреса будут разрешаться следующим образом:
1. Создадим папку для статических файлов
В папке проекта Django создайте новую папку «static». В примере выше она находится в директории «dstatic».
Обслуживание файлов в корневом каталоге веб-сайта
Шаблоны веб-приложений по умолчанию вызывают метод UseStaticFiles в Program.cs , который позволяет обслуживать статические файлы:
Эта перегрузка метода UseStaticFiles не принимает параметров, она помечает файлы в корневом каталоге документов как обслуживаемые. Следующая разметка ссылается на wwwroot/images/MyImage.jpg :
В приведенной выше разметке знак тильды ~ указывает на корневой каталог документов.
Обслуживание файлов вне корневого веб-каталога
Пусть имеется иерархия каталогов, в которой статические файлы обслуживаются вне корневого каталога документов:
В запросе можно получить доступ к файлу red-rose.jpg , настроив ПО промежуточного слоя для статических файлов следующим образом:
Следующая разметка ссылается на MyStaticFiles/images/red-rose.jpg :
В приведенном выше коде статические файлы становятся общедоступными в локальном кэше на одну неделю (604800 секунд):
6. Загрузите скрипт в шаблон
Теперь для подключения JS-файла к проекту добавьте файл в «header.html». Файл должен вызываться так же, как и в случае с изображениями.
Не забудьте и о в верхней части страницы для корректной работы тегов.
Обслуживание файлов вне корневого веб-каталога
Пусть имеется иерархия каталогов, в которой статические файлы обслуживаются вне корневого каталога документов:
В запросе можно получить доступ к файлу red-rose.jpg , настроив ПО промежуточного слоя для статических файлов следующим образом:
Следующая разметка ссылается на MyStaticFiles/images/red-rose.jpg :
В приведенном выше коде для параметра max-age устанавливается значение 604800 секунд (7 дней).
Обслуживание статических файлов
Статические файлы хранятся в корневом каталоге документов проекта. Каталог по умолчанию — /wwwroot , но его можно изменить с помощью метода UseWebRoot. См. разделы Корневой каталог содержимого и Корневой веб-каталог.
Метод CreateBuilder устанавливает текущий каталог в качестве корневого каталога содержимого:
Статические файлы доступны по относительному пути от корневого каталога документов. Например, шаблоны проекта Web Application содержат несколько папок в папке wwwroot :
Обслуживание файлов вне корневого веб-каталога
Пусть имеется иерархия каталогов, в которой статические файлы обслуживаются вне корневого каталога документов:
В запросе можно получить доступ к файлу red-rose.jpg , настроив ПО промежуточного слоя для статических файлов следующим образом:
Следующая разметка ссылается на MyStaticFiles/images/red-rose.jpg :
В приведенном выше коде статические файлы становятся общедоступными в локальном кэше на одну неделю (604800 секунд):
Вопрос. Я пытался использовать index для связи с домашней страницей, но он не работает. Почему?
Ответ. Несмотря на то что функция представления в файле views.py называется index , шаблоны маршрутизации URL-адресов в файле urls.py проекта Django не содержат регулярных выражений, которые совпадают со строкой "index". Чтобы выполнить сопоставление со строкой, вам понадобится дополнительная запись для шаблона ^index$ .
5. Создание папки и файла JavaScript
Если нужно добавить кастомные JS-файлы в проект, создайте папку «js» внутри «static».
Можно также использовать элемент внутри шаблона, но создание отдельного JS-файла улучшит организацию проекта и поможет проще находить все скрипты в одном месте.
Вопрос. Существуют ли соглашения для организации статических файлов?
Ответ. В папку static можно добавить дополнительные файлы CSS, JavaScript и HTML любым предпочитаемым образом. Типичный способ организации статических файлов — это создание вложенных папок fonts, scripts и content (для таблиц стилей и других файлов). Вне зависимости от выбранной структуры не забудьте включить эти папки в относительный путь к файлу в ссылках .
Обслуживание документов по умолчанию
Для обслуживания файла по умолчанию метод UseDefaultFiles должен быть вызван до метода UseStaticFiles . UseDefaultFiles — это средство переопределения URL-адресов, которое не обслуживает файл.
При использовании UseDefaultFiles запросы к папке в wwwroot будут искать следующие файлы:
- default.htm
- default.html
- index.htm
- index.html
Первый найденный файл из списка будет обслужен, как если бы запрос включал имя файла. URL-адрес в браузере будет соответствовать запрошенному URI.
Следующий код позволяет изменить имя файла по умолчанию на mydefault.html :
Использование UseFileServer для документов по умолчанию
UseFileServer объединяет функции UseStaticFiles , UseDefaultFiles и при необходимости UseDirectoryBrowser .
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов:
Пусть имеется следующая иерархия каталогов:
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов MyStaticFiles :
AddDirectoryBrowser должно вызываться, когда свойство EnableDirectoryBrowsing имеет значение true .
При указанных выше иерархии файлов и коде URL-адреса будут разрешаться следующим образом:
Изменение пути к статическим файлам
Что делать, если нас не устраивает стандартная папка wwwroot. И мы, к примеру, хотим, чтобы все статические файлы в проекте находились в папке static . Для этого добавим папку static в проект, и затем в ней определим какой-нибудь html-файл. Пусть он будет называться content.html :
Чтобы приложение восприняло эту папку, изменим код создания хоста в файле Program.cs:
Для объекта IWebHostBuilder определен метод UseWebRoot() , который позволяет переопределить папку.
И после этого мы также сможем обращаться к статическим файлам, только теперь они будут браться из папки static, а не из wwwroot.
Обслуживание статических файлов
Статические файлы хранятся в корневом каталоге документов проекта. Каталог по умолчанию — /wwwroot , но его можно изменить с помощью метода UseWebRoot. См. разделы Корневой каталог содержимого и Корневой веб-каталог.
Метод CreateDefaultBuilder устанавливает текущий каталог в качестве корневого каталога содержимого:
Предыдущий код создан с помощью шаблона веб-приложения.
Статические файлы доступны по относительному пути от корневого каталога документов. Например, шаблоны проекта Web Application содержат несколько папок в папке wwwroot :
Использование UseFileServer для документов по умолчанию
UseFileServer объединяет функции UseStaticFiles , UseDefaultFiles и при необходимости UseDirectoryBrowser .
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов:
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
Пусть имеется следующая иерархия каталогов:
Следующий пример кода позволяет обслуживать статические файлы, файл по умолчанию и просмотр каталогов MyStaticFiles :
AddDirectoryBrowser должно вызываться, когда свойство EnableDirectoryBrowsing имеет значение true .
При указанных выше коде и иерархии файлов URL-адреса будут разрешаться следующим образом:
Безопасность статических файлов
Использование UseDirectoryBrowser и UseStaticFiles может привести к утечке конфиденциальной информации. Настоятельно рекомендуется отключать просмотр каталогов в рабочей среде. Тщательно проверьте, просмотр каких каталогов разрешен посредством UseStaticFiles или UseDirectoryBrowser . Весь каталог и его подкаталоги становятся общедоступными. Храните файлы, предназначенные для общего доступа, в выделенных каталогах, таких как /wwwroot . Отделите эти файлы от представлений MVC, Razor Pages, файлов конфигурации и т. д.
К URL-адресам содержимого, к которому предоставлен доступ методами UseDirectoryBrowser и UseStaticFiles , применяются те же требования по регистрозависимости и запрещенным символам, что и к базовой файловой системе. Например, в Windows регистр не учитывается, а в macOS и Linux учитывается.
Выполните следующие шаги в диспетчере служб IIS для удаления обработчика статических файлов IIS на уровне сервера или веб-сайта:
- Размещайте файлы с кодом, включая файлы .cs и .cshtml , за пределами корневого веб-каталога проекта приложения. Таким образом, в приложении создается логическое разделение между клиентским содержимым и серверным кодом. Это предотвращает утечку серверного кода.
FileExtensionContentTypeProvider
Класс FileExtensionContentTypeProvider содержит свойство Mappings , которое используется для сопоставления расширений файлов и типов содержимого MIME. В следующем примере несколько расширений файлов сопоставляются с известными типами MIME. Расширение .rtf заменяется, а .mp4 удаляется:
В следующем коде демонстрируется Startup.Configure с приведенным выше кодом:
Ошибки, связанные с загрузкой статических файлов Django
Если вы получили ошибку «Invalid block tag on line 8: ‘static’, expected ‘endblock’. Did you forget to register or load this tag?», то вы наверняка забыли добавить тег загрузки статических файлов в верхней части страницы: до вызова самого изображения.
Такая ошибка «Could not parse the remainder: ‘/photo.jpg’ from ‘img/photo.jpg’» значит, что вы забыли добавить кавычки вокруг ссылки на изображения. В этом случае нужно использовать две пары кавычек: одни для всего содержимого src , а вторые — для ссылки на изображение.
«Invalid block tag on line 9: »static/img/photo.jpg», expected ‘endblock’. Did you forget to register or load this tag?» говорит о том, что вы случайно добавили тег static в URL.
Если страница не загружается, и появляется следующая ошибка: «django.core.exceptions.ImproperlyConfigured: You’re using the staticfiles app without having set the required STATIC_URL setting», то это указывает на то, что вы забыли указать статический URL в файле настроек. Его нужно задать в settings.py и сохранить документ.
Наконец, если вы не получаете ошибку, но изображение не отображается, то убедитесь, что вы правильно используете тег.
FileExtensionContentTypeProvider
Класс FileExtensionContentTypeProvider содержит свойство Mappings , которое используется для сопоставления расширений файлов и типов содержимого MIME. В следующем примере несколько расширений файлов сопоставляются с известными типами MIME. Расширение .rtf заменяется, а .mp4 удаляется:
Нестандартные типы содержимого
ПО промежуточного слоя для статических файлов распознает почти 400 известных типов содержимого файлов. Если пользователь запрашивает файл неизвестного типа, ПО промежуточного слоя статических файлов передает запрос следующему компоненту ПО промежуточного слоя в конвейере. Если ПО промежуточного слоя не удается обработать запрос, возвращается ответ 404 Не найдено. Если просмотр каталогов разрешен, то в списке каталогов отображается ссылка на файл.
Следующий код включает обслуживание неизвестных типов и обслуживает неизвестные файлы как изображения:
При выполнении вышеописанного кода ответ на запрос файла с неизвестным типом содержимого вернется в виде изображения.
При включении ServeUnknownFileTypes возникает угроза безопасности. По умолчанию он отключен, и его использование не рекомендуется. Использование класса FileExtensionContentTypeProvider является более безопасной альтернативой для обслуживания файлов с нестандартными расширениями.
Обслуживание файлов в корневом каталоге веб-сайта
Шаблоны веб-приложений по умолчанию вызывают метод UseStaticFiles в Startup.Configure , который позволяет обслуживать статические файлы:
Эта перегрузка метода UseStaticFiles не принимает параметров, она помечает файлы в корневом каталоге документов как обслуживаемые. Следующая разметка ссылается на wwwroot/images/MyImage.jpg :
В приведенном выше коде знак тильды ~/ указывает на корневой каталог документов.
Читайте также: