GL.iNet Documentation

This repository contains the source files for GL.iNet KVM documentation.

It is structured as a multilingual documentation repository. The current language site is:

• English: docs/en/

Each language has its own mkdocs.yml, docs/, and overrides/ directory.

Environment

The documentation is built with MkDocs 1.5.3 and the Material for MkDocs theme 9.4.6.

Installation

Create a Python virtual environment:

python -m venv .venv

Activate the virtual environment, then install dependencies:

pip install -r requirements.txt

You can also install Material for MkDocs directly:

pip install mkdocs-material

Refer: https://squidfunk.github.io/mkdocs-material/getting-started/#with-pip

Repository Structure

The root docs/ folder contains one MkDocs project per language:

docs/
  en/
    mkdocs.yml
    mkdocs.fast.yml
    docs/
    overrides/

In most cases, localized pages should mirror the corresponding English page path under docs/en/docs/.

Local Preview

Run MkDocs against the language you want to preview.

mkdocs serve -f docs/en/mkdocs.yml

For faster local editing, use:

mkdocs serve -f docs/en/mkdocs.fast.yml --dirty

Online View

Please view the docs online at https://docs.gl-inet.com/kvm/en/

Guide

Markdown syntax

Each page use markdown, please check out this basic syntax of markdown here.

Open in new tab

If you wanna a link to open in new tab, add {target="_blank"} at the end of link block.

Image file type

Prefer to use png.

Image lightbox

If the size of image is too big, please use the PhotoSwipe, check out here.

Image size

Use gl-50-desktop, gl-60-desktop, gl-70-desktop,gl-80-desktop, gl-90-desktop to set the percentage of the image width on desktop browser.

Example:

![gl.inet enable vpn cascading](https://static.gl-inet.com/docs/router/en/4/tutorials/vpn_cascading/enable_vpn_cascading.png){class="gl-50-desktop"}

Image shadow effect

Use {class="glboxshadow"} to add shadow effect to the image.

Example:

![tap block](https://static.gl-inet.com/docs/router/en/4/tutorials/how-to-block-client-devices/tap-block.jpeg){class="glboxshadow"}

Image captions

<figure>
  <img src="https://dummyimage.com/600x400/eee/aaa" width="300" />
  <figcaption>Image caption</figcaption>
</figure>

Use relative path to link internal content

[easytethering](../../../tutorials/tether)

About plugin PhotoSwipe

Using the v4 version, v5 version looks better, but need to load js module. Don't know how to work it out in mkdocs.

Suggest to use PhotoSwipe when the width of image is large than 1021px.

<div class="gl-lightbox" itemscope itemtype="http://schema.org/ImageGallery">
  <figure itemprop="associatedMedia" itemscope itemtype="http://schema.org/ImageObject">
    <a href="https://static.gl-inet.com/docs/router/en/3/setup/gl-b2200/hardware/hardware_1.jpg" itemprop="contentUrl" data-size="3167x2480">
      <img src="https://static.gl-inet.com/docs/router/en/3/setup/gl-b2200/hardware/hardware_1.jpg" itemprop="thumbnail" alt="gl-b2200 pcb pinout" />
    </a>
  </figure>
</div>

Reference:

https://photoswipe.com/documentation/getting-started.html

https://codepen.io/dimsemenov/pen/ZYbPJM