Zeno - Factor Theme #
Zeno is a Factor theme suited for the needs of SaaS and technology companies. Styles are powered by Tailwind, a low-level CSS framework.
Install #
To add Zeno to your Factor app, all you have to do is add it as a dependency:
npm add @factor/theme-zeno
This will add it to your package.json
and should be all you need to do to get it running.
Customization #
Once you've added Zeno to your app, you can easily customize its settings via factor-settings
.
The theme's settings can be referenced here.
To change any setting in this theme's factor-settings file, all you need to do is add the same setting in the settings file in your application.
As an example, adding the below to your factor-settings
file will override the nav value in the theme. In effect, customizing the navigation.
export default {
site: {
nav: [
{
path: "/",
name: "My Home",
},
],
},
}
Overriding Components #
If you'd like to get more advanced with your customization, its also easy to override any templates or components used by the theme (or its plugins) via factor-settings
.
As an example, to override the single post template used by the theme, first find the component in settings:
export default {
// other settings
components: {
blogWrap: (): Promise<any> => import("./blog/blog-wrap.vue"),
blogIndex: (): Promise<any> => import("./blog/blog-index.vue"),
blogSingle: (): Promise<any> => import("./blog/blog-single.vue"),
featuredImage: (): Promise<any> => import("./blog/el-featured-image.vue"),
title: (): Promise<any> => import("./blog/widget-title.vue"),
date: (): Promise<any> => import("./blog/widget-date.vue"),
author: (): Promise<any> => import("./blog/widget-author.vue"),
singleHeader: (): Promise<any> => import("./blog/el-single-header.vue"),
entry: (): Promise<any> => import("./blog/widget-entry.vue"),
social: (): Promise<any> => import("./blog/widget-social.vue"),
pagination: (): Promise<any> => import("./blog/widget-pagination.vue"),
},
// other settings
}
You'll see that it is being loaded in as blogSingle
, so all you have to do in your app to override with my-special-single.vue
is:
export default {
// other settings
components: {
blogSingle: (): Promise<any> => import("./my-special-single.vue"),
},
// other settings
}
Making sure to copy the original or create a new file in your app at that location.
Adding Additional Plugins, Routes #
It's easy to build on top of the baseline functionality that themes create for you.
You can add additional routes and plugins in the standard ways discussed in the Factor Docs.