partial.js logo
Latest version
v1.3.1 (RC2)

How to create a website using partial.js?

Create website directory

Firstly we must create directory for the website.

$ mkdir website
cd website

Download this tutorial (.zip)

Installation

$ npm install partial.js

partial.js installation

First steps

For more informations about directories read: project directory structure.

website/index.js

This script is a base application script and this script will run with node.js.

var framework = require('partial.js');
var http = require('http');

var debug = true;

framework.run(http, debug, 8005);

Empty project in Sublime Text Editor

Create definition: definitions/database.js

We must create a temporary database of blogs. For creating database we use definitions. Definition script is automatically run after the framework is loaded. How do definitions work?

var db = [];

db.push({ title: 'How to create a website?', link: 'how-to-create-a-website', date: new Date().add('m', -5), body: 'Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.' });
db.push({ title: 'Search engine optimization', link: 'search-engine-optimalization', date: new Date().add('m', -4), body: 'It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.' });
db.push({ title: 'JavaScript Best Practices', link: 'javascript-best-practices', date: new Date().add('m', -3), body: 'Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 45 BC, making it over 2000 years old.' });
db.push({ title: 'Sass vs. LESS', link: 'sass-vs-less', date: new Date().add('m', -2), body: 'This book is a treatise on the theory of ethics, very popular during the Renaissance.' });
db.push({ title: 'Mobile and tablet development', link: 'mobile-and-tablet-development', date: new Date().add('m', -1), body: 'There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which dont look even slightly believable.' });
db.push({ title: 'Web application framework for node.js', link: 'web-application-framework-for-node-js', date: new Date(), body: 'If you are going to use a passage of Lorem Ipsum, you need to be sure there isnt anything embarrassing hidden in the middle of text.' });

framework.global.db = db;

Temporary database definition

Create controller: controllers/default.js

How do controllers work?

Define routes and actions

exports.install = function(framework) {
	framework.route('/', view_homepage);
	framework.route('/{link}/', view_detail);
};

// Blog list
function view_homepage() {
	var self = this;
	self.view('homepage');
}

// Blog detail
function view_detail(link) {
	var self = this;

	var blog = self.global.db.find(function(blog) {
		return blog.link === link;
	});

	if (blog === null) {
		self.view404();
		return;
	}

	self.view('detail', blog);
}

Define controller


Create views

How do views work?

views/_layout.html

In _layout.html we will generate dynamic content - H1, sitemap and body.

<!DOCTYPE html>
<html>
<head>
    @{meta}
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=10" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=1280, user-scalable=yes" />
    <meta name="robots" content="all,follow" />
    @{head}
    @{favicon('favicon.ico')}
<head>
<body>

    <h1>@{title}</h1>

    @{template('sitemap', sitemap)}

    <div>
        @{body}
    </div>

</body>
</html>

Define layout

views/homepage.html

In this "view" we will add MetaTags, sitemap and show all blogs.

@{meta('My blog website', 'Description', 'Keywords')}
@{sitemap('Homepage')}

<h2>All blogs</h2>

@{template('blogs', global.db, '', global.db)}

Define homepage view

views/detail.html

In this "view" we will show blog detail.

@{meta(model.title)}
@{sitemap('Homepage', '../')}
@{sitemap(model.title)}

<h2>Blog body</h2>
<div>@{model.body}</div>

Define detail view


Create templates

How do templates work?

templates/blogs.html

In this "template" we define rendering blogs from database.

<ul>
	<!--
	<li>
		<div><a href="/{link}/">{title}</a></div>
		<div>{date | dd.MM.yyyy}</div>
	</li>
	-->
</ul>
<div>Blogs: {length} {length | 'items', 'item', 'items', 'items'}</div>

Define template for rendering blogs

templates/sitemap.html

In this "template" we define rendering sitemap.

<div>
	Sitemap:&nbsp;
	<!--
	&rarr; <a href="{url}">{name}</a>
	-->
</div>

Define template for rendering sitemap

Run website

Run website via Sublime Text Editor (CMD+B) or open terminal and type:

$ node index.js

Run in Sublim Text


Open website in web browser


Homepage



Detail
Download this tutorial (.zip)