javascript - 如何在 Node.js 中基于 Jade 的视图中向 head 部分添加额外的 javascript
问题描述
我有一个 Node.js express 网络应用程序。
看起来layout.jade
像
doctype html
html
head
title= title
link(rel='stylesheet', href='/stylesheets/style.css')
block extraHeader
body
block content
我的 map.jade 看起来像:
extends layout
block extraHeader
link(rel='stylesheet' href='https://unpkg.com/leaflet@1.3.1/dist/leaflet.css')
script(src='https://unpkg.com/leaflet@1.3.1/dist/leaflet.js')
block content
h1= title
h2= count
#map
script.
var locations = !{JSON.stringify(jsonData)};
// Create variable to hold map element, give initial settings to map
var map = L.map('map',{ center: [0, 0], zoom: 7});
// Add OpenStreetMap tile layer to map element
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap'
}).addTo(map);
// Add JSON to map
for(var i = 0; i < locations.length; i++) {
var loc = locations[i];
L.marker([loc.lat, loc.lng]).addTo(map);
}
我想在地图视图头部的部分中包含额外的 javascript,而不是内联脚本,例如
<head>
... ...
<script type="text/javascript">
// DO SOMETHING
var foo = 1;
<script>
</head>
有没有办法做到这一点?
编辑:我的 package.json 看起来像:
{
"name": "app_name",
"version": "0.0.0",
"private": true,
"scripts": {
"start": "node ./bin/www"
},
"dependencies": {
"bluebird": "^3.5.1",
"body-parser": "^1.18.3",
"cookie-parser": "~1.4.3",
"debug": "~2.6.9",
"dotenv": "^5.0.1",
"express": "~4.16.0",
"http-errors": "~1.6.2",
"jade": "~1.11.0",
"morgan": "~1.9.0",
"nodemon": "^1.17.5",
"pg-promise": "^8.4.4"
}
}
解决方案
您使用的是哪个版本的 Jade?如果您使用的是以前版本的 Jade (< 7.0),则可以使用 filter :javascript
。
使用最新版本的 Jade (Pug),您可以简单地使用script
标签,例如:
script(type='text/javascript').
// Your code here
有关该主题的更多信息,请参见:https ://github.com/pugjs/pug
已编辑:如果您想将它包含在布局的标题中,您只需将脚本移动一个放在标题标签内的块,在您的情况下,将脚本标签移入即可extraHeader
。
推荐阅读
- javascript - 转换日期 JavaScript
- python - 向 geopandas 空地理数据框添加值 n 次
- laravel - Laravel:如何处理在不同包的应用程序提供程序中设置的 ResetPassword::createUrlUsing?
- c - 更改数组中的A字符串时出现C分段错误
- python - 马修斯相关性引发除零错误
- javascript - 嵌套路由未按预期工作 - React 路由器
- javascript - 本地存储的加载顺序不正确
- kubernetes - 从 Prometheus alertmanager 向 Google 聊天室发送通知
- c# - 如何在单元测试控制器 moq 上下文中跳过调用函数?
- azure-devops - azure devops cloud 和 azure devops server 2019 之间的区别