Monster template in depth

This WaveUP Template is a highly customizable Astro theme. With Monster Theme, you can customize everything according to your personal taste. This article will explain how you can make some customizations easily in the config file.

Configuring SITE

First of all, replace site property of _src/config.mjs file with your own deployed domain. (You can omit this step if you don’t have deployed domain yet or you are still in development mode)

Another important configurations lies in src/config.ts file. Within that file, you’ll see the SITE object where you can specify your website’s main configurations.

// file: src/config.ts
export const SITE = {
  name: 'Monster',
  origin: 'https://monster.waveup.dev',
  basePathname: '/',
  trailingSlash: false,

  title: 'Monster — Premium Business Consultancy Artificial Intelligence Template for Standout Websites.',
  description:
    '🚀 Monster is a ready to start template built with Astro and Tailwindcss for Consultancy Artificial Intelligence Company.',

  googleAnalyticsId: false, // or "G-XXXXXXXXXX",
  googleSiteVerificationId: '',
};

This configuration file should be used to set up the website and ensure it is properly configured. Here are SITE configuration options :

Options	Description
name	Your website name
origin	Your deployed website url
basePathname	Change this if you need to deploy to Github Pages, for example
title	Your site title
description	Your site description. Useful for SEO and social media sharing.
googleAnalyticsId and googleSiteVerificationId	google analytics credentiels

Configuring blog section

This configuration section allows you to customize how your blog section looks. You can specify how many posts will be displayed on each page (e.g. if you set postsPerPage to 3, each page will only show 3 posts). You can also change the main path of the blog (e.g. from ‘blog’ to ‘articles’), and the paths of posts, categories, and tags.

// file: src/config.ts
export const BLOG = {
  disabled: false,
  postsPerPage: 4, //You can specify how many posts will be displayed in each posts page. (eg: if you set SITE.postPerPage to 3, each page will only show 3 posts per page)

  blog: {
    disabled: false,
    pathname: 'blog', // blog main path, you can change this to "articles" (/articles)
  },

  post: {
    disabled: false,
    pathname: '', // empty for /some-post, value for /pathname/some-post
  },

  category: {
    disabled: false,
    pathname: 'category', // set empty to change from /category/some-category to /some-category
  },

  tag: {
    disabled: false,
    pathname: 'tag', // set empty to change from /tag/some-tag to /some-tag
  },
};

Configuring social links

You can configure your own social links along with its icons.

// file: src/config.ts
export const SOCIAL = [
  { platform: 'LinkedIn', icon: 'tabler:brand-linkedin', url: '#' },
  { platform: 'Youtube', icon: 'tabler:brand-youtube', url: '#' },
  { platform: 'Twitter', icon: 'tabler:brand-twitter', url: '#' },
  { platform: 'Instagram', icon: 'tabler:brand-instagram', url: '#' },
];

All social icons are supported. (Github, LinkedIn, Facebook etc.) report to astro-icon

You can specify and enable certain social links in hero section and footer. To do this, go to /src/config.ts and then you’ll find SOCIALS array of object.

Configuring services and cases sections

This configuration file manages the services and cases pages of the website. To change the main path of either services or cases pages, simply change the pathname value to the desired name, such as “products” or “showcases”. For individual posts, leave the pathname empty for the service or case objects.

// file: src/config.ts
export const SERVICES = {
  disabled: false,
  services: {
    disabled: false,
    pathname: 'services', // services main path, you can change this to "products" (/products)
  },

  service: {
    disabled: false,
    pathname: 'services', // empty for /some-post, value for /pathname/some-post
  },
};

export const CASES = {
  disabled: false,
  cases: {
    disabled: false,
    pathname: 'cases', // cases main path, you can change this to "showcases" (/showcases)
  },

  case: {
    disabled: false,
    pathname: 'cases', // empty for /some-post, value for /pathname/some-post
  },
};

Conclusion

This is the brief specification of how you can customize this theme. You can customize more if you know some coding. For customizing styles, please read more articles. Thanks for reading.✌🏻