gulp-ejs可以动态使用吗?

huwehgph  于 2022-12-08  发布在  Gulp
关注(0)|答案(1)|浏览(165)

有一个项目,管理面板的布局与众多的组件。有一个文件夹的组件,使用它们,我使用gulp-ejs插件,这样做:<%- include('../components/buttons/_success') %>自然地,按钮在包含此组件的任何地方都具有相同的文本,并且我想使其文本动态化,例如,我将其导入到导航中并更改文本。作为一个示例,您可以举一个react,其中他们放置了某种props. title,而不是组件的静态文本。请帮助我如何使用gulp-ejs实现这一点。正如您已经猜到的,项目是使用gulp生成器生成的,布局简洁,没有任何express-js

mcvgt66p

mcvgt66p1#

过了一会儿,我确实找到了一种方法,为此你可以使用“gulp-file-include”:
1.安装软件包:
npm i gulp-file-include 2.将其导入gulp配置文件(在我的例子中是gulpfile.js文件)
const include = require('gulp-file-include');
1.生成html时使用它:
function html() {
return src([sourceFolder + '/html/**.html', sourceFolder + '/html/*.htaccess'])
.pipe(include())
...
}
1.假设有一个按钮的模板,并且您希望动态地将文本传递到那里,为此您使用@@声明一个变量,该变量的值可以通过父变量进行更改:

按钮.html:

<button class="btn">@@content</button>

1.现在,要在另一个文件中使用按钮组件并更改其文本,您需要在导入时传递第二个参数:

索引.html:

<div>
  @@include('button.html', { "content" : "Send"})
<div>
  • 在第一个参数中指定组件的正确路径非常重要 *

准备好了!现在你有了动态变化的按钮文本,为了更详细的研究,这里是一个link与一个库和文档

相关问题