- Notifications
You must be signed in to change notification settings - Fork20
Hugo theme based on the DPSG theme for German scout websites. Forked from the Mainroad theme
License
pfadfinder-konstanz/hugo-dpsg
Folders and files
| Name | Name | Last commit message | Last commit date | |
|---|---|---|---|---|
Repository files navigation
DPSG is a responsive, simple, clean and content-focusedHugo theme that imitates theofficial Wordpessthemefeatured by the DPSG German scout association. It's forked from theMainroad Hugo theme.
Demo:
- Ademo page is built from withexampleSite.
- Thereference implementation is visible on thewebsite of DPSG Stamm Bruder Klaus Konstanz, whosesource is also public.
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
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.
Before starting, please be sure that you haveinstalled Hugo andcreated a new site.After that, you ready to installDPSG.
In your Hugo sitethemes directory, run:
git clone https://github.com/pfadfinder-konstanz/hugo-dpsgOr, if you don't plan to make any significant changes, but want to track andupdate the theme, you can add it as a git submodule via the following command:
git submodule add https://github.com/pfadfinder-konstanz/hugo-dpsgNext, openconfig.toml in the base of the Hugo site and ensure the themeoption is set tohugo-dpsg:
theme = "hugo-dpsg"For more information read the officialsetup guide of Hugo.
baseurl ="/"title ="Hugo DPSG"languageCode ="de"DefaultContentLanguage ="de"paginate ="10"# Number of posts per pagetheme ="hugo-dpsg"[Params]description ="Welcome to our scout group!"# Site description. Used in meta descriptioncopyright ="DGSP local group"# Footer copyright holder, otherwise will use site titleopengraph =true# Enable OpenGraph if trueschema =true# Enable Schematwitter_cards =true# Enable Twitter Cards if truereadmore =false# Show "Read more" button in list if trueauthorbox =true# Show authorbox at bottom of pages if truetoc =true# Enable Table of Contentspager =true# Show pager navigation (prev/next links) at the bottom of pages if trueindexPager =false# Show pager navigation on index pagepost_meta = ["author","date","categories","translations"]# Order of post meta informationmainSections = ["post","blog","news"]# Specify section pages to show on home page and the "Recent articles" widgetphotosSections = ["photos"]# Specify section pages to show on home page and the "Recent photos" widgetphotoTag ="photos"# Specify one tag to show on home page and the "Recent photos" widget. Similar as photoSections, but with 1 tag instead of 1 or multiple sectionsdateformat ="02.01.2006"# Change the format of datescustomCSS = ["css/custom.css"]# Include custom CSS files, can also be used per-page as front matter attributecustomJS = ["js/custom.js"]# Include custom JS filescustomPartial ="piwik.html"# Include custom partials at the end of the page, e.g. tracking codesbelowTitlePartial ="alert.html"# Include custom partial below the pages title[Params.Author]# Used in authorboxname ="Scout Master"bio ="The Scout Master is the leader of this local scout group"avatar ="img/avatar.png"[Params.style.vars]highlightColor ="#003056"# Override main theme color[Params.logo]image ="img/placeholder.png"# Logo image. Path relative to "static"image_alt ="Logo image"# alt text for logo image, be screen reader friendly!header ="img/header.jpg"# Header image. Path relative to "static"title ="DPSG local group"# Logo title, otherwise will use site titlesubtitle ="Welcome to our group site"# Logo subtitle[Params.sidebar]home ="right"# Configure layout for home pagelist ="left"# Configure layout for list pagessingle =false# Configure layout for single pages# Enable widgets in given orderwidgets = ["search","recent","recent_photos","recent_photos_tags","categories","taglist","social","languages"]# alternatively "ddg-search" can be used, to search via DuckDuckGo# widgets = ["ddg-search", "recent", "categories", "taglist", "social", "languages"][Params.footer]text ="[Imprint and Privacy](/imprint)"# Extra text in footer row, understands markdownright ="Donate!"# Right-aligned text in footer row, optional, understands markdown[Params.widgets]recent_num =5# Set the number of articles in the "Recent articles" widgettags_counter =false# Enable counter for each tag in "Tags" widget[Params.widgets.social]# Enable parts of social widgetfacebook ="username"twitter ="username"instagram ="username"linkedin ="username"telegram ="username"github ="username"gitlab ="username"bitbucket ="username"email ="example@example.com"# Custom social links[[Params.widgets.social.custom]]title ="Youtube"url ="https://youtube.com/user/username"icon ="youtube.svg"# Optional. Path relative to "layouts/partials"[[Params.widgets.social.custom]]title ="My Home Page"url ="http://example.com"
A good idea is not to copy all these settings without understanding how itworks. Use only those parameters that you need.
For more information about all available standard configuration settings, pleasereadAll Hugo ConfigurationSettings.
---# Common-Defined paramstitle:"Example article title"date:"2017-08-21"description:"Example article description"categories: -"Category 1" -"Category 2"tags: -"Test" -"Another test"menu:main# Optional, add page to a menu. Options: main, side, footer# Theme-Defined paramsthumbnail:"img/placeholder.jpg"# Thumbnail imagethumbnail_alt:"Thumbnail"# alt text for thumbnail image, be screen reader friendly!thumbnail_hide_post:false# Hide thumbnail on single post viewlead:"Example lead - highlighted near the title"# Lead textauthorbox:true# Enable authorbox for specific pagepager:true# Enable pager navigation (prev/next) for specific pagetoc:true# Enable Table of Contents for specific pagesidebar:"right"# Enable sidebar (on the right side) per pagewidgets:# Enable sidebar widgets in given order per page -"search" -"recent" -"taglist"sitemap_hide:false# Do not add this page to the sitemapscripts_head:# optional: include some literal <head> matter, e.g. for page-specific JS imports; safeHTML-filtered -"<!-- -->"scripts_body:# optional: include some literal html just before <body/> tag, e.g. JS initialization; safeHTML-filtered -"<!-- -->"---
For more information about front matter variables readHugo FrontMatter from Hugo officialdocumentation.
Hugo DPSG comes with a configurable sidebar that can be on the left, on the right, ordisabled. The default layout can be specified in the[Params.sidebar] sectionof the configuration. The position can be specified for home, list and singlepages individually. Use the keyshome,list andsingle with values"left","right" orfalse. The layout can be configured per page, bysetting thesidebar parameter with one of the same values in the page's frontmatter.
The sidebar consists of multiple widgets. Widgets can be enabled individuallyusing thewidgets key with a list of widget names as value. You can add yourown widgets, by placing a template underlayouts/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 exampleconfiguration above.
Hugo DPSG supports multiple menus. Themain menu is fully responsive and displayed rightunder the site header. The secondary menusside andfooter are displayed ina sidebar widget and the page footer. To add a page to a menu, add a `menu:
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 thesidemenu widget in thewidgetsconfiguration param if you want to use theside menu.
Note: Please keep in mind that the menus don't support nested itemsi.e. submenus.
Hugo DPSG contains built-in social links in the social widget. In addition,you can also set custom social links by addingParams.widgets.social.custom toyourconfig.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 inlayouts/partials directory under yourproject's root if you want to display an icon of your social link. Theiconfield, which is optional, should be a path relative tolayouts/partials.
Note:Only SVG files are supported to be used as custom social icons in the currentversion. If you use any files of another format, PNG for example, a compileerror will be raised by Hugo.
Note: Not every SVG icon can be used. For better results, it should be one-color SVGfile with a special class attribute{{ with .class }}{{ . }} {{ end }} and24x24 size. At a minimum, custom SVG icon needs these attributes:
<svgclass="{{ with .class }}{{ . }} {{ end }} icon"width="24"height="24">...</svg>
Have you found a bug or got an idea for a new feature? Feel free to use theissue tracker to letme know. Or make directly apullrequest.
This theme is released under theGPLv2 license (GPL-2.0-only).
About
Hugo theme based on the DPSG theme for German scout websites. Forked from the Mainroad theme
Topics
Resources
License
Uh oh!
There was an error while loading.Please reload this page.
Stars
Watchers
Forks
Releases
Packages0
Contributors10
Uh oh!
There was an error while loading.Please reload this page.