Skip to content
damios edited this page Oct 20, 2021 · 6 revisions

A page is a .md (or .html) file for our website. It is used for standalone content that isn't associated with a specific date (which is the difference to a post). Pages are, for example, our features overview or our documentation.

Pages are all placed within the _pages directory, and, if needed, organised in sub-folders.

Example 1

---
permalink: /dev/setup/
title: "Setup"
classes: wide2
header:
  overlay_color: "#000"
  overlay_filter: "0.3"
  overlay_image: /assets/images/dev/dev.jpeg
  caption: "Photo credit: [**Florian Olivo**](https://unsplash.com/photos/Ek9Znm8lQ1U)"
  actions:
    - label: "Download gdx-liftoff"
      url: "https://github.com/tommyettinger/gdx-liftoff/releases"

excerpt: "LibGDX offers a community-made setup tool, which automatically creates a project and downloads everything necessary."

toc: true
toc_sticky: false # the toc doesn't move with the page when scrolling
---

{% include breadcrumbs.html %}

If this is your **first time** using [libGDX](https://libgdx.github.io), you're at the right place. The following article details how you can get your fist libGDX project up and running.

This is a very basic example of a Jekyll page:

  • Front matter: The Front matter is a snippet of YAML which sits between two triple-dashed lines (---) right at the top of a file. Front matter is used to set variables for the page.
    • First, a permalink for the site is set: permalink: /dev/setup/. This page could now be accessed under https://libgdx.com/dev/setup/.
    • Then the page is given a title: title: "Setup". This title is render on top of the header (see below)
    • classes: wide2 sets the used css classes. If there is no sidebar, wide2 should be used.
    • header: this section enables a header image. The title and the excerpt are rendered on top, the action is rendered as a button.
    • toc: true: enables a table of contents; automatically uses the markdown headings of the site
  • The page content:
    • {% include breadcrumbs.html %} enables a breadcrumb bar; see here. This is a Liquid expression, which allows including more complex widgets.
    • The rest is written in markdown (see here for a short guide), but HTML tags can be used as well

Example 2

---
permalink: /community/
title: "Community"
classes: wide2

feature_row2:
  - image_path: /assets/images/discord.png
    alt: "Discord"
    title: "The Official Discord Sever"
    excerpt: 'LibGDX also has a friendly Discord community. There are a number of channels, including but not limited to: screenshot sharing, question & answers, and kotlin discussions.'
    url: "https://discord.gg/6pgDK9F"
    btn_label: "Join Us"
    btn_class: "btn--primary"
---

{% include feature_row id="feature_row2" type="right" %}

In this example, a feature row is used. This is offered by the Minimal Mistakes theme.