The Ryder Theme

Welcome to the Ryder theme example site!

Get started and Learn more about The Ryder theme for Hugo websites over at GitHub. If you leave all of the content on this page, this top box will not show up.

README file on github

Here is the theme namesake:

Featured Content

In posts On

Lead with a wide feature

If you want to have wide features, they will get stacked at the top and will take 2 columns. This is done by setting a front matter param homeFeatureWide to enable it, and adding an order-first class and col-span-2 class to the outer div.

Cta Button

In posts On

Easily add a call to action

C.T.A. buttons now take on the characteristic of the category style

CTA Buttons Take you places!

Home Feed Filtering and Colorization

In posts On

Limit your home page feed by Section, Category or Tag

You can now set params in your hugo.toml file to keep any pesky pages off your homepage that you may not wish to promote for whatever reason.

Leaflet Maps

In maps On

Maps on a Hugo website made easy!

Latitude
39° 54' 20.52"
Longitude
-76° 50' 00.60"

Adding a map to your hugo website becomes easy with the leaflet shortcode. You can add a box to display the lat and long as well through the use of the lat-long-box shortcode.

Latest stuff

Maps

In categories

A category homepage

To create a custom taxonomy list page like this one, just create a directory for the taxonomy, in this case categories and the term, here maps and create an index.md in it with front matter like this:

a lot of fun stuff over there

Posts

In posts

A list of all your content under posts will go here on this paginated section. If you only want to show the posts, just have no content on the _index.md file, or remove it completely if you don’t need to set any front matter variables.

A Peaceful Page

In Slash Pages
It is a truly peaceful moment. This is it, just place an image in your sites static/images directory called hidden-home-cover.

A Randomized Peaceful Page

In Slash Pages
This one loads random background images because it has the front matter variables set. Another version of this page is peaceful and it will load just the one bg-image from the tailwind.

Contact

In Slash Pages

Hello 👋

You can get in touch with us at hello @ arts-link.com, or through github issues.

Affiliate Marketing Tools

In posts

Amazon associate cta button for single product

Buy A quick way to add a plug on Amazon.com

Emoji Support

In posts

👋 🥶 🤖

Emoji can be enabled in a Hugo project in a number of ways.

Rich Content

In posts

Use shortcodes to add rich content

Hugo ships with several Built-in Shortcodes for rich content, along with a Privacy Config and a set of Simple Shortcodes that enable static and no-JS versions of various social media embeds.

Markdown Syntax Guide

In posts

Make your content stand out

This article offers a sample of basic Markdown syntax that can be used in Hugo content files, also it shows whether basic HTML elements are decorated with CSS in a Hugo theme.

Alerts

In posts

Create alerts as shortcode or partial or in hugo.toml for global announcements.

Menus

In posts

This is one way to add a menu

I modified the default menu.html partial sample code from the hugo docs to use the tailwindcss group-hover syntax. I made the children menu inside a container div so it is a sibling to the main anchor and on hover it appears. Still needs style work.

All About Hugo

In posts

Background

Written in Go, Hugo is an open source static site generator available under the Apache Licence 2.0. Hugo supports TOML, YAML and JSON data file types, Markdown and HTML content files and uses shortcodes to add rich content. Other notable features are taxonomies, multilingual mode, image processing, custom output formats, HTML/CSS/JS minification and support for Sass SCSS workflows.

Debug Panel

In posts

I made a wrapper around this debug-hugo partial from kaushalmodi

To turn it on, set enabledebugpanel = true in front matter or add the same variable to the site params in hugo.toml.