Editing the frontend

This article's main purpose is to introduce you how you can design your own frontend for your Vertigo blog.

By default Vertigo is very minimalistic on the frontend, which makes starting from ground-up with frontend easier. Unless you want to bring new functionality to the program, the files found in /templates and /public directories will be enough.

All static resources should be placed to /public, where they can be then imported on templates by omitting the /public from the URL. For example, consider you have jquery.js in /public/js/jquery.js. On HTML templates you could import the file with <script src="/js/jquery.js">.

HTML templates

The main template files you may want to edit are home.tmpl and layout.tmpl. These files determine the HTML structure of you site.

Other template files you may want to edit are:

• /post/display.tmpl (rendered when viewing a single post)
• /search.tmpl (rendered when searching posts)

You may also notice that these files make use of Mustache like template language, which actually is Go text/template package. You can read about the iteration syntax and everything else in here.

Stylesheets

Vertigo comes packaged with two (vanilla) CSS files. The main stylesheet can be found in /public/css/style.css. The style.css is the global stylesheet loaded on every page, whereas the writing.css is only loaded when writing or editing posts. In most cases you can ignore the writing.css file completely.

JavaScript

There is one JavaScript library imported to Vertigo, to-markdown.js on /post/edit.tmpl. Therefore, namespace clashes should not happen.

You should also pay attention to not edit the vanilla JavaScript found on the post templates, because the code is used for backing up your posts to localStorage. In addition, some of it is needed for the editors to work properly. Editing the JavaScript may break your installation - at least partially.

Data on templates

Most template files expose some kind of data structure with them, which you can inspect by inserting {{.}} on top of the template file. Once you know what data structure the template file exposes, you can use it by adding the field name at the end of the dot. For example, on /template/user/index.tmpl, which exposes a User structure, you can echo the user's name by calling {{.Name}}. There are also some builtin template functions, which few you can find under Overview, Functions in the template package manual.

In addition to those helper functions, there are few more listed on main.go file. The helper functions as of now are:

	helpers := template.FuncMap{
		// Unescape unescapes and parses HTML from database objects.
		// Used in templates such as "/post/display.tmpl"
		"unescape": func(s string) template.HTML {
			return template.HTML(html.UnescapeString(s))
		},
		// Title renders post name as a page title.
		// Otherwise it defaults to Vertigo.
		"title": func(t interface{}) string {
			post, exists := t.(Post)
			if exists {
				return post.Title
			}
			return Settings.Name
		},
		// Date helper returns unix date as more readable one in string format.
		"date": func(d int64) string {
			return time.Unix(d, 0).String()
		},
		"env": func(s string) string {
			if s == "MAILGUN_SMTP_LOGIN" {
				return strings.TrimLeft(os.Getenv(s), "postmaster@")
			}
			return os.Getenv(s)
		},
		"Markdown": func() bool {
			if Settings.Markdown {
				return true
			}
			return false
		},
		"ReadOnly": func(p Post) bool {
			if Settings.Markdown && p.Markdown == "" {
				return true
			}
			return false
		},
	}

You can for example echo page HTML <title> by calling {{title .}}.

Questions?

If you have any questions you can page at Gitter or you can open an issue on Github with question label.