Yeoman / JS：在HTML模板中重复HTML块-进行编译以最终与Wordpress集成？

Question

Right, so i'm currently working on a project that will eventually be powered by a Wordpress back-end , but on the front end, will be heavily powered by CSS3 and JavaScript - perhaps even taking advantage of history API and dynamically loading in of content via AJAX.

I'm currently working on the static HTML templates, getting the layouts right, getting all the JS required for the interaction and navigation between pages etc. I'm currently using Yeoman as a watch server to compile my SASS templates and merge all JS modules using RequireJS .

Everything's going fine, but i'm starting to notice i'm repeating a lot of HTML blocks in the HTML templates, and it's not very efficient - i want to just edit the block in one place and have it repeat however many times i need on a page - headers, footers, single blog items on blog listing pages etc. while i'm scaffolding the front-end templates.

Essentially, what i'd like to do is have block templates, that i can import into a parent file, loop through to generate the files i need, and once i'm ready to power the final markup by Wordpress, i can just build the project, export the static HTML files, along with the compiled JS and CSS3, and then break down the HTML into a Wordpress build at the very end.

How am i best going about this?

Integrating Jade ? Using Handlebars ? I'm not really too bothered about the shortened syntax Jade offers, i just want to be able to compile vanilla HTML from templates while i'm scaffolding. Perhaps something like Jekyll ? Is there a node based version?

Is this even the right way to go about things? I have considered generating all my front end from JSON, and during the Wordpress integration, expose the JSON API within Wordpress, but generating all the templates in the DOM won't yield any SEO whatsoever, which is a concern.

What do you guys think?

Answer 1

I've been looking for exactly the same thing. Being used to using jekyll for html pre-processing I assumed Yeoman would naturally support layouts and includes.

Unfortunately it doesn't https://github.com/yeoman/yeoman/issues/700

Not to say it doesn't work, but I have tried using yeoman-jekyll and after an hour of battling with it on both OSX and Windows found it not to generate as comprehensive a gruntfile as the default Yeoman init build.

You mentioned Jade, I'm not clued up on it but this looked like a handy post: Integrating Jade in Yeoman's server/watch/reload tasks

Keep it simple, I wish I did!