There is a project, layout of the admin panel with numerous components. There is a folder of components, to use them, I use the gulp-ejs plugin and do it like this: <%- include('../components/buttons/_success') %> Naturally, the button has the same text wherever this component is included, and I want to make its text dynamic, for example, I import it into the navigation and change the text. As an example, you can take a react, where instead of the static text of the component, they put some kind of props.title. Please help me how to implement this using gulp-ejs. As you already guessed, the project is built using the gulp builder, clean layout, without any express-js
After a while, I did find a way, for this you can use the "gulp-file-include":
npm i gulp-file-include2. Import it into the gulp configuration file (in my case it is the gulpfile.js file)
const include = require('gulp-file-include');
function html() {
return src([sourceFolder + '/html/**.html', sourceFolder + '/html/*.htaccess']).pipe(include())
...
}
@@ to declare a variable, the value of which can be changed through the parent:button.html:
<button class="btn">@@content</button>
index.html:
<div>
@@include('button.html', { "content" : "Send"})
<div>
It is important to specify the correct path to the component in the first parameter
Ready! Now you have the button text dynamically changing, for a more detailed study, here is a link with a library and documentation