Theming

It is possible to change the look and feel of your blog by changing the theme. By default, Bloggrify comes with the "Mistral" theme, but you can create your own theme or use a theme created by the community. You can find some templates here.

The theming system use extensively the concept of layers and layouts in Nuxt. A theme extends Bloggrify and brings its own configuration and components.

Structure of a theme

A theme is a Nuxt module. It is a folder that contains :

• an app.config.ts file. The app.config.ts file contains the configuration of the theme.
• a components/themes/MYTHEME folder. The components folder contains the components of the theme.
• a layouts/themes/MYTHEME folder. The layout that can be used into each page.
• a content folder. It is where you write your articles.
• an assets folder (OPTIONAL). It is where you put your images and other assets (css files, etc.)
• a public folder (OPTIONAL). It is where you put your static files (like a favicon etc.)

Each theme should have the following components (with the exact same name):

• layouts/themes/MYTHEME/default.vue: The default layout for all pages. Of course you can create other layouts if you want for specific pages (like the home page)

And then you can select the theme in the app.config.ts file.

export default defineAppConfig({
    theme: "MYTHEME",
    // ...
})

Create a new theme

To create a new theme, you can either:

• start from the "Mistral" theme. It is a simple and clean template. You can clone the repository and start modifying it.
• start from scratch. You can follow the theme creation guide to create your own theme.

This is a nuxt-application so you can benefit from all the features of Nuxt. You can use the Nuxt documentation to help you. But most of the time, you'll only need to modify the files in the components folder and the app.config.ts file.

Supporting tags and categories

If you want to support tags and categories, you should create the following layouts in your theme:

• layouts/themes/MYTHEME/tag.vue
• layouts/themes/MYTHEME/category.vue

These layouts will be used to display the list of articles for a specific tag or category. You can check the Mistral theme for an example.