You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

5.2 KiB

VCP Hugo Theme

HUGO-VCP is a responsive, simple, clean and content-focused Hugo theme forked form the [hugo-dpsg theme] (https://github.com/pfadfinder-konstanz/hugo-dpsg/)

Features:

  • Hugo internal templates (Open Graph, Schema, Twitter Cards)
  • No inclusion of third-party libraries, but all hosted locally (fonts, JS etc.)
  • Responsive menu
  • Secondary menus
  • SVG icons
  • Theme options (Sidebar position, Author Box, Post Navigation, highlight color) available through config.toml file parameters
  • Table of Contents
  • privacy settings by default
  • Waldläuferzeichen included (beta) (copyright for the font Verband Christlicher Pfadfinderinnen und Pfadfinder (VCP) e.V.)

Browser support:

  • Desktop: IE11+, Chrome, Firefox, Safari
  • Mobile: Android browser (on Android 4.4+), Safari (on iOS 7+), Google Chrome, Opera mini

Other browsers (like Opera on Blink engine) are also supported, but not tested.

Included Shortcodes

Waldläuferzeichen

{{< wa size="36px" >}}
Letters
{{< /wa >}}

which letter is which sign

Stufen Colors

{{< stufe class="[stufe]" >}}
Text
{{< /stufe >}}

valid input for [stufe] is pfadi, rr, erwachsene, woeli, jufi

Installation

Before starting, please be sure that you have installed Hugo and created a new site. After that, you ready to install HUGO-VCP.

In your Hugo site themes directory, run:

git clone https://codeberg.org/VCP-Feldkirchen_e.V./hugo-vcp

Or, if you don't plan to make any significant changes, but want to track and update the theme, you can add it as a git submodule via the following command:

git submodule add https://codeberg.org/VCP-Feldkirchen_e.V./hugo-vcp

Next, open config.toml in the base of the Hugo site and ensure the theme option is set to hugo-vcp:

theme = "hugo-vcp"

For more information read the official setup guide of Hugo.

Configuration

Sidebar

Hugo-VCP comes with a configurable sidebar that can be on the left, on the right, or disabled. The default layout can be specified in the [Params.sidebar] section of the configuration. The position can be specified for home, list and single pages individually. Use the keys home, list and single with values "left", "right" or false. The layout can be configured per page, by setting the sidebar parameter with one of the same values in the page's front matter.

The sidebar consists of multiple widgets. Widgets can be enabled individually using the widgets key with a list of widget names as value. You can add your own widgets, by placing a template under layouts/partials/widgets/<name>.html. The list of widgets can be overwritten from a page's front matter.

Some widget respect optional configuration. Have a look at the [Params.widgets] and [Params.widgets.social] sections in the example configuration above.

Menus

Hugo-VCP supports multiple menus. The main menu is fully responsive and displayed right under the site header. The secondary menus side and footer are displayed in a sidebar widget and the page footer. To add a page to a menu, add a `menu:

` parameter to the page's front matter:
menu: main # Add page to a main menu

You can also add a page to multiple menus by providing a list:

menu: ["main", "side", "footer"] # Add page to a main, side, and footer menu

Note: Don't forget to enable the sidemenu widget in the widgets configuration param if you want to use the side menu.

Note: Please keep in mind that the menus don't support nested items i.e. submenus.

Hugo-VCP contains built-in social links in the social widget. In addition, you can also set custom social links by adding Params.widgets.social.custom to your config.toml. Here is an example.

[[Params.widgets.social.custom]]
  title = "Youtube"
  url = "https://youtube.com/user/username"
  icon = "youtube.svg"

Note: You need to put your icon file in layouts/partials directory under your project's root if you want to display an icon of your social link. The icon field, which is optional, should be a path relative to layouts/partials.

Note: Only SVG files are supported to be used as custom social icons in the current version. If you use any files of another format, PNG for example, a compile error will be raised by Hugo.

Note: Not every SVG icon can be used. For better results, it should be one-color SVG file with a special class attribute {{ with .class }}{{ . }} {{ end }} and 24x24 size. At a minimum, custom SVG icon needs these attributes:

<svg class="{{ with .class }}{{ . }} {{ end }} icon" width="24" height="24">...</svg>

Carbon Badge

insert carbon = true in the Params section of your config.

License

This theme is released under the GPLv2 license (GPL-2.0-only).