Alpha - Factor Theme #

Alpha, a minimal portfolio theme for Factor ideal for individuals of creative professions.

Install #

To add Alpha to your Factor app, all you have to do is add it as a dependency:

npm add  @factor/theme-alpha

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 Alpha 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: {
    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"),
    authorDate: (): Promise<any> => import("./blog/widget-author-date.vue"),
    customSingleHeader: (): Promise<any> => import("./blog/el-single-header.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.