Complete example files is available at: https://github.com/Gottwik/enduro_samples/tree/master/simple_blog
This is a short guide on how to get a simple blog up and running on your website in these easy 4 steps:
Each entry is nothing more than a generator item. To set it up create a template in /pages/generators/blog.hbs
. To keep it simple, just have this there:
<article>
<h1>{{blog_title}}</h1>
<p>{{blog_text}}</p>
</article>
As you can see, each blog entry will have it’s title and text. So let’s set up the content file. Create a first blog entry in /cms/generators/blog/hello-blog.js
with this content:
{
blog_title: 'This is a hello blog entry',
blog_text: 'You just learned how to create a blog with enduro.js'
}
Run enduro dev
and notice your blog page is live at localhost:3000/blog/hello-blog
. Nice, right?
Now we need to create a page that will display all the blog entries. Just go ahead and create file /pages/blog.hbs with this content:
{{#blog}}
{{#each this}}
<article>
<h2>{{blog_entry.blog_title}}</h2>
<p>{{{blog_entry.blog_text}}}</p>
<a href="/blog/{{page_slug}}">Read more...</a>
</article>
{{/each}}
{{/blog}}
Notice the blog helper. This helper will provide the list of articles. Go ahead and create it in /assets/hbs_helpers/blog.js with this content:
var _ = require('lodash')
var Promise = require('bluebird')
enduro.templating_engine.registerHelper('blog', function (options) {
// will store all the blog entries
var blog_entries
// get_cms_list will return a structured list of all pages in a project
return enduro.api.pagelist_generator.get_cms_list()
.then((pagelist) => {
// will store the promises from reading all the blog entries
var get_content_promises = []
blog_entries = _.chain(pagelist.structured.blog)
.filter((o) => { return typeof o === 'object' }).value() // filter pages only
// goes through all the blog entries and loads their content
for (page_id in blog_entries) {
var page = blog_entries[page_id]
function get_content (page) {
get_content_promises.push(enduro.api.flat.load(page.fullpath).then((content) => { page.blog_entry = content }))
}
get_content(page)
}
return Promise.all(get_content_promises)
})
.then(() => {
// pass blog entries as context for the template
return options.fn(blog_entries)
})
})
This implementation uses lodash and bluebird promises. These are used in enduro.js, but we should still declare them as dependencies of this particular project by running npm i lodash bluebird -S
Hey, we are done. Your blog list is accessible on localhost:3000/blog
You can always just create another file in the /cms/generators/blog folder which will create more pages for you.
Nicer way to do this is to add a blog template at /cms/generators/blog/blog.js. This will defines the structure for a blog entry:
{
blog_title: '',
blog_text: ''
}
Now add a admin user by running enduro admin add test test
which you use to login at localhost:5000/admin
. Now you can add blog articles using the admin as well.
You know…