Hugo uses the config.toml, config.yaml, or config.json (if found in the site root) as the default site config
file. Here is Binario configuration example in TOML with all available theme-specific config params:
baseurl = "/"title = "Binario"languageCode = "en-us"paginate = "10"# Number of posts per pagetheme = "binario"disqusShortname = ""# Enable comments by entering your Disqus shortnamegoogleAnalytics = ""# Enable Google Analytics by entering your tracking id
[Author] # Used in authorboxname = "John Doe"bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer."avatar = "img/avatar.png"
description = "Responsive card-based & code-light Hugo theme"# Site Description. Used in meta descriptioncopyright = "Binario"# Copyright holder, otherwise will use .Site.Titleopengraph = true# Enable OpenGraph if truetwitter_cards = true# Enable Twitter Cards if truecolumns = 2# Set the number of cards columns. Possible values: 1, 2, 3mainSections = ["post"] # Set main page sectionspost_meta = ["date", "categories"] # Enable post meta fields in given orderdateFormat = "January 02, 2006"# Change the format of datescolorTheme = ""# dark-green, dark-blue, dark-red, dark-violetcustomCSS = ["css/custom.css"] # Include custom CSS filescustomJS = ["js/custom.js"] # Include custom JS filesmainMenuAlignment = "right"# Align main menu (desktop version) to the right sideauthorbox = true# Show authorbox at bottom of single pages if truetoc = true# Enable Table of Contents for all site pagestocOpen = true# Open Table of Contents block. Optionalcomments = true# Enable comments for all site pagesrelated = true# Enable Related content for single pagesrelatedMax = 5# Set the maximum number of posts that can be displayed in related block. Optionalmathjax = true# Enable MathJax for all site pagesmathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js"# Specify MathJax path. OptionalmathjaxConfig = "TeX-AMS-MML_HTMLorMML"# Specify MathJax config. OptionalhideNoPostsWarning = false# Don't show no posts empty state warning in main page, if true
previewOnly = false# Show only preview featured image
enable = true# Enable breadcrumb block globallyhomeText = "Binario"# Home node text
email = "email@example.com"facebook = "username"twitter = "username"telegram = "username"instagram = "username"pinterest = "username"vk = "username"linkedin = "username"github = "username"gitlab = "username"stackoverflow = "numberid"mastodon = "https://some.instance/@username"medium = "username"
[Params.Share] # Post Share blockfacebook = truetwitter = truereddit = truetelegram = truelinkedin = truevk = truepocket = truepinterest = true# Web App Manifest settings# https://www.w3.org/TR/appmanifest/# https://developers.google.com/web/fundamentals/web-app-manifest/
name = "Binario"shortName = "Binario"display = "browser"startUrl = "/"backgroundColor = "#2a2a2a"themeColor = "#1b1b1b"description = "Responsive card-based & code-light Hugo theme"orientation = "portrait"scope = "/"
mediaType = "application/json"baseName = "manifest"isPlainText = truenotAlternative = true
home = ["HTML", "RSS", "MANIFEST"]
For more information about Hugo configuration files and all common configuration settings, please read
“Configure Hugo” from Hugo official documentation.
Front Matter example
Hugo supports three formats for front matter: yaml, toml and json. Here is Front Matter example in YAML:
# Common-Defined params
title: "Example article title"
description: "Example article description"
- "Category 1"
- "Category 2"
- "Another tag"
menu: main # Add page to a menu. Options: main, footer# Theme-Defined params
comments: true# Enable/disable Disqus comments for specific post
authorbox: true# Enable/disable Authorbox for specific post
toc: true# Enable/disable Table of Contents for specific post
mathjax: true# Enable/disable MathJax for specific post
related: true# Enable/disable Related content for specific post
url: image.jpg # relative path of the image
alt: A scale model of the Eiffel tower # alternate text for the image
caption: Eiffel tower model # image caption
credit: Unknown author # image credit
previewOnly: false# show only preview image (true/false)
For more information about front matter variables and formats read
“Hugo Front Matter” from Hugo official documentation.
Binario includes some customizable configuration options that may be useful.
By default, Binario works with two columns card layout (if it possible by screen size) for list pages, but you can also
use one or three columns layout. Change Params.columnsto preferable value (from 1 to 3). You can also change this
option for specific list pages in frontmatter params.
If you want to include custom CSS files, you need to assign an array of references in site config file
(config.toml by default) like following:
customCSS = ["css/custom.css"]
Of course, you can reference as many CSS files as you want. Their paths need to be relative to the static folder of
your Hugo site:
There are two main different ways to add a featured image for a page.
Option 1. Put featured.* or thumbnail.* image file in the
Option 2. Put any image in the page bundle & specify featured param in the page’s front matter.
You may put any image in the page bundle and specify featured param in the page’s front matter:
Or you can add some additional params like alt, caption, credit and previewOnly:
alt: A scale model of the Eiffel tower standing on a map
caption: Eiffel tower model
credit: Unknown author
Note: caption and credit appear only on single pages, not summaries.
Breadcrumb navigation is a hierarchical navigation menu presented as a trail of links. The main purpose of breadcrumb is
to help users navigate in the site hierarchy.
For enabling breadcrumb partial globally (for all single and list pages), use enable param under the
[Params.Breadcrumb] section of your config.toml file:
enable = true
The global .Site.Params.Breadcrumb.enable param can be overridden for specific posts with breadcrumb page’s front
Footer Social Icons
With Binario, you have the option to display social icons in the footer. To display them, set up [Params.Social]
specific parameters in your site config file.
Available social services: Email, Facebook, Twitter, Telegram, Instagram, Pinterest, VK, LinkedIn, GitHub, GitLab,
Stack Overflow, Mastodon, Medium
Web App Manifest
Web App Manifest is a simple json file with basic
site info like name, description, icons, etc. This file tells the browser about your web application and how it should
behave when “installed” (as PWA) on the users mobile device or desktop.
To activate Web App Manifest, define MANIFEST as custom output format and include this for home Kind attribute in
your site config file. Here’s how to make it.
First of all, you should define MANIFEST custom output format [config.toml]: