Theme development

Overview

A blog can have any number of themes, and each theme can have multiple versions, with one published version at any time. This is useful for example when you want to work on a theme but without affecting what your visitors see until you are happy with your changes and are ready to publish the new version of the theme.

When a blog is created, a default theme is created automatically with the expected default templates, styles and scripts. This theme can be used as is or server as a scaffold if you want to customise it or create more complex themes.

We don't offer multiple themes yet (will do in the near future), but we provide you with a powerful theme editor with which you can edit templates and assets to make your site look exactly as you like, without any restrictions.

There are various types of assets in each theme, including layouts, partials, stylesheets, scripts, images and fonts. Layouts, partials, stylesheets and scripts are also versioned, so you can easily revert to a previous version of the code at any time, if needed.

Theme development requires some familiarity with HTML and CSS (and depending on the website, JavaScript), so we are planning to add more ready-to-use themes in the near future. However if you are familiar with the basics, you will be able to create and customise themes in no time.

Layouts, partials, stylesheets and scripts are processed with Liquid, a powerful but simple markup language that allows you to enhance the HTML with conditionals, loops and more, and inject data relevant to the current page, be it the homepage, an article, or other kind of page.

Layouts and partials

There are two types of templates that you can use in your themes: layouts and partials. Both are basically HTML processed with Liquid; layouts are the main templates that give structure to a page, and can include one or more partials; partials are templates that can be shared by multiple layouts or nested in other partials to avoid duplication of code and make pages look consistently. For example, things like sidebars, headers and footers could be partials because they are typically shared by multiple pages. 

All templates must have the .liquid extension in the filename, and filenames must start with an underscore for partials, to tell them apart from layouts.

In the blog settings you can set the default layouts for the various page types, but you can also override this setting for each post or page.

Stylesheets and scripts

You can style your site with CSS, as it is typically done with websites. Sass syntax is supported, and you can even import one scss file into another using the @import directive. Like layouts and partials, stylesheets are preprocessed with Liquid, allowing you to insert URLs for images or fonts in the code dynamically.

We provide a base.scss stylesheet that removes browser-specific styling (using normalize.css) to allow more consistent look across different browsers. This stylesheets also includes all the styles necessary to make your content look on the public site identical to how it looks in the editor.

You can also add normal JavaScript files (preprocessed with Liquid) to add dynamic behaviour to your pages.

Syntax highlighting

If you build a technical blog or anyway need to insert code snippets into your articles, we recommend highlight.js for syntax highlighting because it works nicely out of the box with the snippets you can add with our editor.

Images and fonts

It is possible to add images (for example for backgrounds, logos, etc) and fonts to further customise the look of your website. We are planning to implement some automatic optimisation of the images for performance reasons (images that are too big can slow down your website), but in the meantime we recommend that you don't use images that are too big in resolution or file size.

© DynaBlogger 2020. All rights reserved.
powered by DynaBlogger