Skip to content

mkdocs.yml

This is main config file, let's learn about it2

Basic Structure

# Project Information
site_name: My Documentation
site_url: https://example.com
site_author: Your Name
site_description: A description of your site

# Repository (optional - adds "Edit on GitHub" button)
repo_name: username/repo-name
repo_url: https://github.com/username/repo-name

# Navigation
nav:
  - Home: index.md
  - About: about.md

# Theme
theme:
  name: material

# Markdown Extensions
markdown_extensions:
  - admonition

# Plugins
plugins:
  - search

1. Project Information Section

# Basic site metadata
site_name: This is my browser tab bar  #(Required) Shows in header and browser tab
site_url: https://docs.mynotes.com     # this is website name which where it will be live
site_author: Rishabh Raj               # Author name
site_description: Personal study notes # you can add SEO description

# Copyright notice (appears in footer)
copyright: Copyright © 2026 Rishabh Raj

2. Repository Section (Optional)

repo_name: rishabh679/FoodDonationProject           # Display name for repo link
repo_url: https://github.com/rishabh679/FoodDonationProject  # GitHub URL
# edit_uri: edit/main/docs/             # Path for "Edit" button

# Or disable edit button:
# edit_uri: ""

3. Navigation (nav) - IMPORTANT

nav:
#   - Label:URL
  - Home: index.md
  - Python: #this is label
      - Basics: #this label is inside above
          - Variables: python/basics/variables.md
          - Data Types: python/basics/data-types.md
          - Functions: python/basics/functions.md
      - Advanced:
          - Decorators: python/advanced/decorators.md
          - Generators: python/advanced/generators.md
  - JavaScript:
      - Basics:
          - Variables: js/basics/variables.md
  1. Ensure all file paths are relative to your docs/
  2. First Item is label - which will be shown in sidebar
  3. Second item is filepath
  4. File not in nav will not appear in sidebar, but accesible via URL

Tip

nav can also be autogenerated by looking at folder structure if you don't specify it.

Undetrstanding this Nav

  • Isko ek Dir and File jaise samjho
  • Ek Dir Ke andar jaana hai isme to ek label ke andar ek aur label bana do
nav:
  - dir1:
    - dir2:
  • ab dir2 ke andar kuch files hai aar kuch dir bhi hai to use kaise dikhayenge?
nav:
  - dir1:
    - dir2:
      - dir2_File1: file1_path
      - dir_2_File2L: file2_path
      - dir3:
  • ab dir3 ke andar bhi kuch files and folders hai
nav:
  - dir1:
    - dir2:
      - (index.md)default_file_path #hwhich will displayes when we click on dir3 otherwise it will be just a label
      - File1: file1_path
      - File2L: file2_path
      - dir3: #yaha gaur karne wali baat ye hai ki ye dir3, dir2 ke andar hai na ki , dir2 ke kisi file ke andar - kyoki file ke andar dir nahi ho sakta na
        - (index.md)default_file_path #hwhich will displayes when we click on dir3 otherwise it will be just a label
        - dir3_file1: dir3_file1_path
  • so yaha pe dir just ek label hai un dir label ko aap actual dir jaise samajh sakte hai aur us dir me aur bhi files and sub dir as a label de sakte hai
  • for exampple ab mai ek aur dir showe karna chahta hu dir3 ke andar to mai
############# WRONG ##############

nav:
  - dir1:
    - dir2:
      - (index.md)default_file_path
      - File1: file1_path
      - File2L: file2_path
      - dir3: #yaha gaur karne wali baat ye hai ki ye dir3, dir2 ke andar hai na ki , dir2 ke kisi file ke andar - kyoki file ke andar dir nahi ho sakta na
        - (index.md)default_file_path
        - dir3_file1: dir3_file1_path
          - dir4: #ye karna galat hai kyoki dir4 ,dir3_file1 ke andar kaise ho sakta hai ise to kisi dir ke andar honi chahiye


############# CORRECT ##############

nav:
  - dir1:
    - dir2:
      - (index.md)default_file_path
      - File1: file1_path
      - File2L: file2_path
      - dir3: #yaha gaur karne wali baat ye hai ki ye dir3, dir2 ke andar hai na ki , dir2 ke kisi file ke andar - kyoki file ke andar dir nahi ho sakta na
        - (index.md)default_file_path
        - dir3_file1: dir3_file1_path
        - dir4: #sahi hai, kyoki dir4 dir3 ke andar hai jo ki ek directory hai

Tip

  • directory ke andar directory ho sakta hai
  • na ki file ke andar direcotory
  • dir ek andar files and dir both ho sakte hai

4. How to Configure theme

Using Material Theme (which i have used in this project)

theme:
  name: material                        # Theme name
  logo: assets/Wiki-fellatio.svg        # Logo in header
  favicon: assets/Autofellatio6.jpg     # Browser tab icon

  # Language
  language: en

  # Features (toggles functionality)
  features:
    - navigation.instant      # Fast page loading (SPA-like)
    - navigation.tracking     # Updates URL as you scroll
    - navigation.tabs         # Top-level nav as tabs
    - navigation.sections     # Sections in sidebar
    - navigation.expand       # Expand all sections by default
    - navigation.top          # "Back to top" button
    - navigation.footer       # Previous/Next links in footer
    - navigation.indexes      # Section index pages
    - search.suggest          # Search suggestions
    - search.highlight        # Highlight search terms
    - content.code.copy       # Copy button on code blocks
    - content.code.annotate   # Add annotations to code
    - toc.follow              # Sidebar follows scroll

  # Color scheme (light/dark mode)
  palette:
    # Light mode
    - media: "(prefers-color-scheme: light)"
      scheme: default         # or your custom scheme
      primary: indigo         # Header color
      accent: indigo          # Link/button color
      toggle:
        icon: material/brightness-7
        name: Switch to dark mode

    # Dark mode
    - media: "(prefers-color-scheme: dark)"
      scheme: slate           # or your custom scheme
      primary: indigo
      accent: indigo
      toggle:
        icon: material/brightness-4
        name: Switch to light mode

  # Custom directory for overrides
  custom_dir: docs/.overrides

  # Font
  font:
    text: Roboto              # Body text font
    code: Roboto Mono         # Code font