将外部文件内容导入车把
Import external file content into handlebar
希望有人能给我指点。
我想将一个文件中的内容导入到我的车把文件中。可能吗?
在我的例子中,它是一个 css/scss 文件(例如 reset.css),我想将其样式导入到我的把手文件中(styleReset.hbs)。
"styleReset.hbs" 应该看起来像这样:
<style type="text/css">
<!-- import of reset.css content -->
</style>
P.S。我不想使用 -tag
您不能导入带车把的文件,只能导入部分文件。你可以预编译你的 reset.css 就好像它是一个车把部分并将其包含在 {{> filename}}
.
在不了解您的构建设置的情况下,我认为我无法详细介绍。
http://handlebarsjs.com/precompilation.html
(我个人会将 sass to import my reset.css 用于我包含在页面中的一些主要样式表。)
是的,可以将外部 css 文件导入到您的 handlebars .hbs 文件(即模板引擎)。
按照以下步骤操作:
- 首先创建一个文件夹 public,将您的 css
文件夹,其中包含所有 css 文件。对于 ex 文件夹结构将是 - public/css/style.css(注意:此 public 文件夹包含所有静态文件,如 css、图像等)
- 通过
app.use(express.static(__dirname + '/public'));
注册您的 public 文件夹以在您的 .js 文件中表达
- 现在您可以在 handlerbars 模板文件中导入外部 css 文件
通过
<link rel="stylesheet" href="../css/style.css">
index.js
public:
style.css
views:
index.hbs
Inside index.js
var express=require('express');
var app=express();
var hbs = require('hbs');
app.set('view engine', 'hbs');
app.use(express.static('.'));
Inside index.hbs
<head>
<link href="./public/style.css" rel="stylesheet">
</head>
也可以有一个 'main' 布局,它可以包括页眉和页脚。
app.engine('.hbs', exphbs({
extname: '.hbs',
defaultLayout: 'main'
}))
app.set('view engine', '.hbs')
此外,如果您正在使用该模块,"express-handlebars"(而不是 "hbs")。您也可以设置您的分机名称。
1) 为了在车把中使用您的 .css 文件,应注册该文件以便在如下所示的 app.js/server.js 文件中使用。
app.use("/bootstrap",express.static(__dirname+"/node_modules/bootstrap/dist"))
2) 将文件导入您的车把文件中,如下图所示(它适用于主布局和子布局。
i) 在主布局文件中
ii) 在子布局中
希望有人能给我指点。 我想将一个文件中的内容导入到我的车把文件中。可能吗? 在我的例子中,它是一个 css/scss 文件(例如 reset.css),我想将其样式导入到我的把手文件中(styleReset.hbs)。
"styleReset.hbs" 应该看起来像这样:
<style type="text/css">
<!-- import of reset.css content -->
</style>
P.S。我不想使用 -tag
您不能导入带车把的文件,只能导入部分文件。你可以预编译你的 reset.css 就好像它是一个车把部分并将其包含在 {{> filename}}
.
在不了解您的构建设置的情况下,我认为我无法详细介绍。
http://handlebarsjs.com/precompilation.html
(我个人会将 sass to import my reset.css 用于我包含在页面中的一些主要样式表。)
是的,可以将外部 css 文件导入到您的 handlebars .hbs 文件(即模板引擎)。
按照以下步骤操作:
- 首先创建一个文件夹 public,将您的 css 文件夹,其中包含所有 css 文件。对于 ex 文件夹结构将是 - public/css/style.css(注意:此 public 文件夹包含所有静态文件,如 css、图像等)
- 通过
app.use(express.static(__dirname + '/public'));
注册您的 public 文件夹以在您的 .js 文件中表达
- 现在您可以在 handlerbars 模板文件中导入外部 css 文件
通过
<link rel="stylesheet" href="../css/style.css">
index.js
public:
style.css
views:
index.hbs
Inside index.js
var express=require('express');
var app=express();
var hbs = require('hbs');
app.set('view engine', 'hbs');
app.use(express.static('.'));
Inside index.hbs
<head>
<link href="./public/style.css" rel="stylesheet">
</head>
也可以有一个 'main' 布局,它可以包括页眉和页脚。
app.engine('.hbs', exphbs({
extname: '.hbs',
defaultLayout: 'main'
}))
app.set('view engine', '.hbs')
此外,如果您正在使用该模块,"express-handlebars"(而不是 "hbs")。您也可以设置您的分机名称。
1) 为了在车把中使用您的 .css 文件,应注册该文件以便在如下所示的 app.js/server.js 文件中使用。
app.use("/bootstrap",express.static(__dirname+"/node_modules/bootstrap/dist"))
2) 将文件导入您的车把文件中,如下图所示(它适用于主布局和子布局。
i) 在主布局文件中
ii) 在子布局中