Creating Pages¶

Learn how to create and organize pages in your U.WIKI.

Creating Your First Page¶

1. Create a Markdown File¶

Create a new file in the docs/ directory:

touch docs/my-first-page.md

2. Add Content¶

Open the file and add your content:

# My First Page

Welcome to my first wiki page!

## Introduction

This is a paragraph with **bold** and *italic* text.

## Features

- Feature one
- Feature two
- Feature three

Update mkdocs.yml:

nav:
  - Home: index.md
  - My First Page: my-first-page.md

4. Preview¶

The page will automatically appear when you refresh your browser.

Page Structure¶

Front Matter (Optional)¶

Add metadata to your pages:

---
title: My Custom Title
description: A description for SEO
tags:
  - tutorial
  - beginner
---

# My First Page

Headings¶

Create a logical hierarchy:

# Page Title (H1)

## Major Section (H2)

### Subsection (H3)

#### Minor Section (H4)

Table of Contents¶

The table of contents is automatically generated from your headings.

Organizing Content¶

Directory Structure¶

Organize related pages in directories:

docs/
├── index.md
├── getting-started/
│   ├── index.md
│   ├── installation.md
│   └── configuration.md
├── guides/
│   ├── index.md
│   └── creating-pages.md
└── api/
    ├── index.md
    └── endpoints.md

Index Pages¶

Each directory can have an index.md that serves as the section homepage:

# Guides

Welcome to the guides section. Choose a guide below:

- [Creating Pages](creating-pages.md)
- [Markdown Syntax](markdown-syntax.md)
- [Advanced Features](advanced.md)

Linking Between Pages¶

Relative Links¶

Link to pages in the same directory:

See the [installation guide](installation.md)

Absolute Links¶

Link from the docs root:

Return to [home](/index.md)

Section Links¶

Link to specific sections:

See [configuration options](configuration.md#basic-configuration)

Adding Media¶

Images¶

Create an assets directory:
```
mkdir docs/assets/images
```

Add images:

![Alt text](assets/images/screenshot.png)

Videos¶

Embed videos using HTML:

<video width="100%" controls>
  <source src="assets/videos/demo.mp4" type="video/mp4">
</video>

Diagrams¶

Use Mermaid for diagrams:

```mermaid
graph TD
    A[Start] --> B{Decision}
    B -->|Yes| C[Do this]
    B -->|No| D[Do that]
```

Page Templates¶

Tutorial Template¶

# Tutorial: [Topic]

## Overview

Brief description of what will be learned.

## Prerequisites

- Requirement 1
- Requirement 2

## Steps

### Step 1: [Action]

Detailed instructions...

### Step 2: [Action]

More instructions...

## Summary

What was accomplished.

## Next Steps

- Link to related content
- Suggested follow-up

API Documentation Template¶

# API: [Endpoint Name]

## Description

What this endpoint does.

## Request

### Method
`GET` | `POST` | `PUT` | `DELETE`

### URL
`/api/v1/resource`

### Parameters

| Parameter | Type | Required | Description |
|-----------|------|----------|-------------|
| id | string | Yes | Resource ID |

## Response

### Success Response

```json
{
  "status": "success",
  "data": {}
}

Error Response¶

{
  "status": "error",
  "message": "Error description"
}

## Best Practices

### 1. Consistent Naming

Use lowercase with hyphens:
- ✅ `getting-started.md`
- ❌ `Getting_Started.md`

### 2. Clear Titles

Make page titles descriptive:
- ✅ "How to Create Custom Themes"
- ❌ "Themes"

### 3. Use Sections

Break content into logical sections with headings.

### 4. Include Examples

Always include code examples and screenshots where relevant.

### 5. Cross-Reference

Link to related pages to help navigation.

## Advanced Features

### Custom CSS Classes

Add custom classes to elements:

```markdown
!!! note custom-class
    This note has a custom CSS class.

Include Files¶

Include content from other files:

--8<-- "includes/footer.md"

Variables¶

Use variables in your content:

The site name is {{ config.site_name }}.

Publishing Workflow¶

Create - Write your content in Markdown
Preview - Check locally with mkdocs serve
Commit - Save to version control
Deploy - Publish with mkdocs gh-deploy