{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% load markdown_extras %}

{% block extra_css %}
<link href="{% static 'css/dist/styles.css' %}" rel="stylesheet">
<style>
    .prose {
        color: #374151;
        max-width: none !important;
    }
    .prose p {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
    }
    .prose a {
        color: #2563eb;
        text-decoration: underline;
    }
    .prose strong {
        font-weight: 600;
    }
    .prose ul {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        list-style-type: disc;
        padding-left: 1.625em;
    }
    .prose ol {
        margin-top: 1.25em;
        margin-bottom: 1.25em;
        list-style-type: decimal;
        padding-left: 1.625em;
    }
    .prose h1 {
        font-size: 2.25em;
        margin-top: 0;
        margin-bottom: 0.8888889em;
        line-height: 1.1111111;
    }
    .prose h2 {
        font-size: 1.5em;
        margin-top: 2em;
        margin-bottom: 1em;
        line-height: 1.3333333;
    }
    .prose h3 {
        font-size: 1.25em;
        margin-top: 1.6em;
        margin-bottom: 0.6em;
        line-height: 1.6;
    }
    .prose img {
        margin-top: 2em;
        margin-bottom: 2em;
    }
    .prose code {
        color: #111827;
        font-weight: 600;
        background-color: #f3f4f6;
        padding: 0.2em 0.4em;
        border-radius: 0.375rem;
    }
    .prose pre {
        color: #e5e7eb;
        background-color: #1f2937;
        overflow-x: auto;
        font-size: 0.875em;
        line-height: 1.7142857;
        margin-top: 1.7142857em;
        margin-bottom: 1.7142857em;
        border-radius: 0.375rem;
        padding-top: 0.8571429em;
        padding-right: 1.1428571em;
        padding-bottom: 0.8571429em;
        padding-left: 1.1428571em;
    }
    .prose pre code {
        background-color: transparent;
        padding: 0;
        color: inherit;
        font-weight: inherit;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8">
    <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="px-4 py-5 sm:p-6">
            <div class="prose prose-sm sm:prose lg:prose-lg xl:prose-xl w-full">
                {% filter markdown %}
# Frequently Asked Questions (FAQ)

## Link Types

GoLinks supports three types of links: Normal Links, Template Links, and Custom Pages. Each type serves different purposes and has its own use cases.

### 1. Normal Links

Normal links are the simplest type - they provide direct redirection to a target URL.

**Example:**
- Original URL: `https://github.com/microsoft/vscode`
- Alias: `vscode`
- Access: `http://go/vscode` → Redirects to VS Code GitHub repository

**Use Cases:**
- Quick access to frequently visited websites
- Shortening long URLs
- Creating memorable aliases for complex URLs

### 2. Template Links

Template links allow you to create dynamic URLs that can generate the final URL based on parameters. This is particularly useful for search links, API calls, or any URL that needs dynamic parameters.

**Basic Syntax:**
Use the syntax `{parameter_name, default=default_value}` to define variables in your URL: `https://google.com?q={query, default=hello}`, and set the alias to `google`.

**Examples:**
-  Use the syntax `{query, default=default_value}` to define variables in your URL: `https://google.com?q={query, default=hello}`, and set the alias to `google`.

   Then you can access the link by `http://go/google/<query>`, and the URL will be `https://google.com?q=<query>`.

   When you access the url with `http://go/google/`, the URL will be `https://google.com?q=hello`, which will leverage the `default` value.

### 3. Custom Pages

Custom pages allow you to create markdown-based web pages that can serve as documentation, link collections, or any other content you need.

**Key Features:**
- Write content in Markdown format
- Support for headings, lists, code blocks, and links
- Can include multiple sections and navigation
- Perfect for creating documentation or resource collections

**Example Use Cases:**
  Check http://go.junv.cc/custom/today/



{% endfilter %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
