有一个项目,管理面板的布局与众多的组件。有一个文件夹的组件,使用它们,我使用gulp-ejs插件,这样做:<%- include('../components/buttons/_success') %>
自然地,按钮在包含此组件的任何地方都具有相同的文本,并且我想使其文本动态化,例如,我将其导入到导航中并更改文本。作为一个示例,您可以举一个react,其中他们放置了某种props. title,而不是组件的静态文本。请帮助我如何使用gulp-ejs实现这一点。正如您已经猜到的,项目是使用gulp生成器生成的,布局简洁,没有任何express-js
1条答案
按热度按时间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:
1.现在,要在另一个文件中使用按钮组件并更改其文本,您需要在导入时传递第二个参数:
索引.html:
准备好了!现在你有了动态变化的按钮文本,为了更详细的研究,这里是一个link与一个库和文档