Is it possible to keep content and markup in separate HTML file?

maltsev commented 8 years ago

Do you mean something like that?

var fs = require('fs');
var posthtml = require('posthtml');
var html = fs.readFileSync('./article.html', 'utf8');

posthtml([require('posthtml-extend')({
    encoding: 'utf8', // Parent template encoding (default: 'utf8')
    root: './' // Path to parent template directory (default: './')
})]).process(html).then(function (result) {
    console.log(result.html);
});

<!-- article.html -->
<extends src="base.html">
    <block name="title">How to use posthtml-extend</block>
    <block name="content">Read the documentation</block>
</extends>

<!-- base.html -->
<html>
    <head>
        <title><block name="title"> — Github</block></title>
    </head>

    <body>
        <div class="content">
           <block name="content"></block>
        </div>
        <footer>
            <block name="footer">footer content</block>
        </footer>
    </body>
</html>

jitendravyas commented 8 years ago

Yes. Though I would also prefer to not to keep files names mentioned in my gulpfile. Would not want to edit it every time I add a new template and page. I currently user Nunjucks for that http://mozilla.github.io/nunjucks/templating.html#template-inheritance

maltsev commented 8 years ago

Then I guess you could use something like that:

gulp.task('templates', function () {
    return gulp.src('./templates/*')
        .pipe(/* posthtml with posthtml-extend included */)
});

Scrum commented 6 years ago

@jitendravyas did you find a solution for yourself?

posthtml / posthtml-extend

Is it possible to keep content and markup in separate HTML file? #8