How to Use Docs? Step By Step Tutorial.

How To add New Doc

Step 1: Navigate to Docs Folder.

Step 2: Create a New Markdown File. (A Markdown File ends with extension .md)

Step 3: Add Data in the Following Format.

---
id: tutorial
title: How to Use Docs? Step By Step Tutorial.
sidebar_label: Tutorial
---

Here, id - is the unique link to the file. title - is the title of Browser page. sidebar_label: is the title on Sidebar.

Step 4: Save The File.

How to Add Images/other Assets?

Step 1: Create A Folder named as assets under docs. Place your images and other assets here.

Step 2: In your Markdown document. You can Add an Image or any other asset by the following code example.

![alt-text](assets/image.png)

Step 3: Save The File.

How to Add Code Samples Inside the Markdown?

Step 1: Create a code block inside the markdown with placing code between a pair of ```.

Add Doc To Sidebar?

Step 1: Open sidebar.json inside website/ directory.

Step 2: You'll See code similar to following.

{
  "docs": {
    "Getting Started": ["real_time_browser_testing"],
    "Automated Screenshot Testing": ["doc2"],
    "Responsive Testing": ["doc3"]
  },
  "docs-other": {
    "First Category": ["doc4", "doc5"]
  }
}

Place your doc and its label name in similar fashion following a ',' (comma).

Step 3: Save the File.

Build Table of Contents

Step 1: To dynamically build Table of Contents place the Title with "##".

Example :

## My Topic

Change Branding/Header

Step 1: Navigate to website/ and open siteConfig.js.

Step 2: Change Values in accordance to the Keys for example :

title: "My Title",
copyright: `My Copyright`,
tagline: "My Tagline"
headerIcon: "img/header.png",
footerIcon: "img/logo.png",
favicon: "img/favicon.png",

colors: {
primaryColor: "#105d82",
secondaryColor: "#005ec7"
},

Note : The directory in which the images are located by default is : website/static/img/

← Previous