Introduction
Understanding the basics
Comprehensive guide to installing, utilizing, and customizing the Knowledge Base Hugo theme available for purchase on ThemeForest.
Setup
Installation and development
Install Hugo.
Install dependencies:
npm install
To start developing:
npm run dev
To get out of developing mode you need to do Ctrl+c twice.
Basic theme setup
Site URL
Set the base hostname and protocol for your site in config.yml
file:
baseURL: "https://my-site.com"
Update favicon
You can find the current favicons inside the /static/images/
directory, just replace it with your new favicons.
Update logo
The theme uses two logo files one larger for desktop and one smaller mark logo for mobile. If you don’t intend to use mark logo, set the same logo file for both.
Add your logo image files to /static/images/
directory, then specify the logo files in config.yml
:
params:
logo: "/images/logo-main.svg"
logo_mark: "/images/logo-mark.svg"
Navigation menus
Theme uses four default Hugo menus, these can be set in config.yml
under relevant language:
- Navbar
- Footer
- Social
- Docs
Docs menu is used for the documentation sidebar, set the parent items in config.yml
:
languages:
en:
menu:
docs:
- name: Introduction
weight: 10
pre: square-3-stack-3d #optional icon from https://heroicons.com/
params:
description: Sint ipsa praesentium dolor error cumque velit tenetur quaerat exercitationem conse.
- name: Tutorials
weight: 20
pre: academic-cap
params:
description: Sint ipsa praesentium dolor error cumque velit tenetur quaerat exercitationem conse.
Next set child menu items in docs posts front matter:
menu:
docs:
weight: 20
parent: Introduction
Analytics
Theme support Google analytics and Fathom analytics, enable by setting ID in config.yml
:
params:
analytics_fathom: ANALYTICS_ID
analytics_google: ANALYTICS_ID
Content
Authors
Set author in post front matter, reference author username
from data/authors.yml
:
author: joshua
Add authors in data/authors.yml
:
- username: joshua
name: Joshua Birdman
image: images/joshua.jpg
Blocks
Theme uses blocks layout as source of content for pages. The blocks layout and contents are defined in page front matter. Set the page layout to layout: blocks
. Available blocks: cards, contact-form, contact-info, cta, faq, navigation
.
Example CTA block:
blocks:
- block: cta
heading: Ready to get started?
copy: Morbi eget neque vel turpis lacinia eget neque vel turpis lacinia lacinia eget neque.
icon: thin-rocket
button:
text: Get started
url: "#"
All block demos are included in the theme pages.
Icons
Some blocks have options to display icons, the icons are located in layouts/partials/icons/
folder, when specifying icons in block reference only the icon file name without the .svg
extension.
Contact form
Contact form is setup and ready to use with Netlify hosting.
Post content
For general markdown syntax see Cheatsheet.
Image shortcode
Upload images to /assets/images/
folder and use this shortcode to add it in content:
{{< image src=“images/abstract-1.jpg” alt=“Lorem” >}}
Customization
String translation
Set your default language code in config.yml
:
defaultContentLanguage: "en"
Theme strings can be translated in i18n/en.yml
, duplicate the current English translation en.yml
file, then replace en
with your new language code.
name:
other: "Name"
email:
other: "Email"
Code highlighter style
Set the style in config.yml
:
markup:
highlight:
style: nord
List of available styles can be found here.
Page blocks
New site blocks can be added in layouts/partials/blocks/
directory.
Brand colors
Theme uses TailwindCSS default colors:
text-sky-500
text-sky-600
bg-sky-500
bg-sky-600
bg-sky-700
Search and replace the colors or modify sky colors in tailwind.config.js
:
theme: {
extend: {
colors: {
sky: {
500: '#0ea5e9',
600: '#0284c7',
700: '#1d4ed8',
}
}
}
}
Support
Customer support is provided through our Envato item support tab for up to six months from the purchase date and is provided Monday to Friday during the business week. We aim to answer all support requests daily, most are handled within 24h.
Please note items downloaded from Envato Elements are not supported so you will be unable to get assistance with technical questions, installation, third-party assets or direct guidance.
Before contacting support please:
- Read this documentation
- Describe your problem in detail
- Include links
- Attach screenshot