PT|DocsView Theme|Contact Us

Documentation for Aver Astro

Introduction

Aver - Astro Portfolio and Blog Theme
Aver - Astro Portfolio and Blog Theme

Aver is a modern and elegant Astro theme designed for portfolios and blogs. It features a sleek header, smooth scrolling, and a clean minimal design with dark-light mixed mode.

File Structure

The theme files are structured as follows:

 ./theme-files
β”‚
β”œβ”€β”€ public
β”‚  β”‚
β”‚  β”œβ”€β”€ fonts
β”‚  β”‚
β”‚  β”œβ”€β”€ images
β”‚  β”‚
β”‚  └── plugins
β”‚  
β”œβ”€β”€ src
β”‚  β”‚
β”‚  β”œβ”€β”€ components
β”‚  β”‚
β”‚  β”œβ”€β”€ config
β”‚  β”‚
β”‚  β”œβ”€β”€ content
β”‚  β”‚
β”‚  β”œβ”€β”€ layouts
β”‚  β”‚
β”‚  β”œβ”€β”€ lib
β”‚  β”‚
β”‚  β”œβ”€β”€ pages
β”‚  β”‚
β”‚  β”œβ”€β”€ styles-plugin
β”‚  β”‚
β”‚  └── styles
β”‚  
β”œβ”€β”€ .gitignore
β”‚
β”œβ”€β”€ astro.config.mjs
β”‚
β”œβ”€β”€ package.json
β”‚
└── tsconfig.json

Installation

Checkout Official AstroJS Documentation if you need.

System Requirements

  • Node.js - v18.17.1 or v20.3.0, v22.0.0 or higher. ( v19 and v21 are not supported.)
  • Text editor - We recommend VS Code with our Official Astro extension.
  • Terminal - Astro is accessed through its command-line interface (CLI).

Install dependencies

Nevigate to theme-files/ then open terminal and install dependencies by running

npm install

Preview Theme

Run npm run dev on your terminal and open http://localhost:4321 at your browser to see the local development preview

npm run dev

Configaration

Open theme-files/src/config/site.config.json Change Default settings with yours

{
  "metaData": {
    "title" : "Aver - Astrojs Portfolio and Blog Theme",
    "description" : "Astrojs Portfolio and Blog Theme",
    "ogImage" : "/images/ogimage.jpg",
    "keywords" : "Astrojs, Portfolio, Astrojs Portfolio"
  },

  "logo" : "/images/logo.svg",
  "logoText" : "Aver",
  "favicon" : "/images/favicon.png",
  "baseUrl" : "https://aver-astro.vercel.app/",
  "basePath" : "/",
  "trailingSlash" : false,

  "settings" : {
    "deviceIndicator" : false,
    "pagination_limit" : 6
  },

  "socialLinks" : [
    {
      "name": "FB",
      "fullName": "Facebook",
      "link": "https://facebook.com/"
    },
    ...
  ]
}

Open theme-files/src/config/menus.json
Customize(add or remove) menu Links by changing the name and link value

{
  "mainMenu": [
    {
      "name": "Home",
      "link": "/"
    },
    {
      "name": "About",
      "link": "/about"
    },
    ...
  ],
  "footerMenu": [
    {
      "name": "Imprint",
      "link": "!#"
    },
    {
      "name": "Privacy policy",
      "link": "/privacy"
    }
  ]
}

Content Update

All Contents are written in MDX/Markdown
Checkout MDX doc and Markdown Cheat sheet

πŸ”΄ Video preview

Contact info

Update the Contact Page content by editing theme-files/src/content/pages/contact.mdx file content.
Contact form works with https://formsubmit.co/

In contactForm params, you will find contact_email

  • contact_email: "platoltheme@gmail.com"
    update email with your email-address to recive the message directly to your email.

Changing Font

We are using one Self Hosted Font and one Google Font
Update the fonts form theme-files/src/layouts/Layout.astro file Line no 45 and 49