Skip to main content

Home Page

Update home page design UI and content article page.

Home Page Data​

Now you can change and update home page design UI or update article content , access on data/Home.json and open with code editor

SEO home page​

First you can set up SEO for your home page by updating the title and description for your home page.

  "title": "New Docusaurus Themes Template",
  "description": "Docusa is complete set for help you develop modern documentation site - Docusaurus project.",
  "url": "/",
  "image": "img/doc.svg",

Header Area​

To update your header area, you can access this line of code, and edit to your needs there.

Example

  "header": {
    "title": "Your home page header title here..",
    "description": "Header Description for your home page..",
    "intro_text": "Intro text goes here...",
    "button_1": "Text for button 1 here...",
    "button_1_link": "Routes link goes here...",
    "button_2": "Text for button 2 here...",
    "button_2_link": "Router link for button 2 here...",
    "image": "URL CDN or local image for header here..."
  },

Implementation

  "header": {
    "title": "Docusa",
    "description": "Modern and New Documentation Website Themes for Docusarurs Project.",
    "intro_text": "Easy to use , work with JSON data files to update your design and content, markdown is ready for your documentation and blog post article",
    "button_1": "Get Start",
    "button_1_link": "/docs/welcome",
    "button_2": "Download Now",
    "button_2_link": "/order",
    "image": "img/doc.svg"
  },

Features Area​

To edit and update feature areas, you can set how many features for your site. to add a new one you can copy and paste the example code, then you can edit it according to your needs.

Media usage - to add your local image so you can upload your image in static/img then you can add your local image by using this url img/myimage.png, if you want you can use CDN image by copying and paste your CDN image URL.

Example code

  "features": {
    "title": "Your title for features area here...",
    "description": "Description for your features area..."
  },
  "feature_list": [
    {
      "icon": "URL or CDN Image for features 1 here...",
      "title": "Title for your features 1 here...",
      "content": "Write your content features here..."
    },
    // for add new you can use this code
    {
      "icon": "URL or CDN image for new features here..",
      "title": "Title for your new features..",
      "content": "Write content for your new features..."
    },
    // example use local image
    {
      "icon": "img/json.svg",
      "title": "JSON",
      "content": "Full JSON data support for ease of customizing your project."
    },
    // example use CDN image
    {
      "icon": "https://res.cloudinary.com/demo/image/upload/c_thumb,g_face,h_200,w_200/r_max/f_auto/woman-blackdress-stairs.png",
      "title": "JSON",
      "content": "Full JSON data support for ease of customizing your project."
    }
  ],

implementation with 6 features list

  "features": {
    "title": "Docusa Features",
    "description": "Cool and complete Docusa themes features for your docusaurus project."
  },
  "feature_list": [
    {
      "icon": "img/react.svg",
      "title": "React",
      "content": "Using React technology, React is a modern and popular website technology."
    },
    {
      "icon": "img/json.svg",
      "title": "JSON",
      "content": "Full JSON data support for ease of customizing your project."
    },
    {
      "icon": "img/markdown.svg",
      "title": "Markdown",
      "content": "MDX support is more flexible for your content, and with markdown - writing becomes faster."
    },
    {
      "icon": "img/design.svg",
      "title": "Design UI",
      "content": "Unique and modern design for an attractive appearance on your site. Supports Dark and Light Mode"
    },
    {
      "icon": "img/widget.svg",
      "title": "WIdget",
      "content": "The widget section structure makes it easy for developers to make quick adjustments."
    },
    {
      "icon": "img/config.svg",
      "title": "Config",
      "content": "Docusaurus' default configuration makes it easy for you to set up your site."
    }
  ],

Section area​

To update your section area, you can search for this line code, and update according to your needs. to add a new list you simply copy and paste from the example code, then edit it.

  "section": {
    "title": "Why Docusa",
    "description": "Docusa is a multi-purpose docusaurus theme, you can use it for startups, hosting, agencies, apps, developers and more.",
    "image": "img/dev.svg",
    "intro": "It's easy to work with docusa project.",
    "intro_text": "Docusa projects are designed for user convenience, no hardcoding, you only need to work with markdown and JSON files to update or change the design, these are some of the advantages of using Docusa projects.",
    "list": [
      {
        "text": "Static Page"
      },
      {
        "text": "Docs Page"
      },
      {
        "text": "Blog Page"
      },
      {
        "text": "Auto SEO"
      },
      {
        "text": "Dark Mode"
      },
      {
        "text": "Light Mode"
      },
      {
        "text": "Json Data"
      },
      {
        "text": "Markdown"
      },
      {
        "text": "MDX"
      },
      {
        "text": "Others"
      }
    ]
  },

Pricing and Plan area​

To update your price or plan area, you can search for this line code, then edit according to your needs, to add new text info, you can simply copy the example code, then edit with the text according to your needs.

  "plan": {
    "title": "Select Your Plan",
    "description": "Choose Docusa services according to your needs, for theme creation, docusa projects or custom projects."
  },
  "basic_plan": {
    "title": "Themes",
    "icon": "img/basic.svg",
    "currency": "$",
    "price": "75",
    "link": "/",
    "features": [
      {
        "text": "Docusa theme to help build modern documentation sites, with the docusa theme project for docusaurus."
      },
      {
        "text": "Includes Documentation to help you work with Docusa"
      }
    ]
  },
  "standard_plan": {
    "title": "CMS",
    "icon": "img/standard.svg",
    "currency": "$",
    "price": "80",
    "link": "/",
    "features": [
      {
        "text": "Services for building headless CMS backends for your various modern website projects."
      },
      {
        "text": "Headless CMS For Docusaurus, Gatsby, Next, Jekyll, Astro Js, and others."
      }
    ]
  },
  "pro_plan": {
    "title": "Custom",
    "icon": "img/pro.svg",
    "currency": "$",
    "price": "155",
    "link": "/",
    "features": [
      {
        "text": "Develop your project or create a theme for your website from scratch, or help import your theme into modern website technology."
      },
      {
        "text": "All website technology support"
      }
    ]
  },

Contact Area​

And the last part of the home page is the contact area, so you can search for this line code, and edit it according to your needs.

  "contact": {
    "title": "Contact Docusa Dev",
    "description": "If you Need Help or Information, you can contact our team developer.",
    "button": "Contact Us",
    "link": "/contact"
  }
}