Posts on Toha

Configuring Featured Posts Section

Tue, 06 Feb 2024 06:20:34 +0600

The Fetured Posts section is used to showcase any post you like. To enable this section, create a featured-posts.yaml file in the data/en/sections directory and include the following content:

# section information
section:
 name: Featured Posts # Title of section (default: "")
 id: featured-posts # url id/slug of section *Required*
 enable: true # Boolean to determine if this section is enabled (default: false)
 weight: 6 # Order to display section in (default: alphabetical followed by weight)
 showOnNavbar: true # Boolean to determine if a link should be shown for this section on the navbar
 hideTitle: true # Can optionally hide the title in sections (default: false)

# posts to feature
posts:
 - quickstart
 - update-v3-to-v4
 - prepare-site

How to Contribute?

Fri, 19 Jan 2024 02:30:00 +0600

Ways to Contribute

You can contribute to this theme in various ways.

Code

Pull requests are most welcome and I will be happy to review. Just follow the following principles:

Keep it simple.
Keep it consistent with the design of the UI.
Use as few dependencies as possible.
Be patient.

Testing and reporting issues

You can report a bug
File a feature request
share your thoughts

Documentation

You can also contribute to the theme documentation by:

How to add an unsupported language

Mon, 15 Jan 2024 06:20:50 +0600

If you want to translate to an unsupported language, you can translate the UI elements.

Create an `i18n` file

To do so, you have to create the i18n diretory inside the root of the site, the directory where you can find the hugo.yaml file, and directories like data, content, etc.

Afterwards, you can create the file <language_code>.toml into the i18n directory. In this directory, you can find all language codes with the flag that will appear with that code.

How to Translate Posts

Mon, 15 Jan 2024 06:20:50 +0600

This theme has built-in support for multiple language.

Before starting the post translation, make sure that you have enabled the language to your site. If that’s not the case, you can follow the section Add the language to the site from the guide How to Translate Site Data.

Creating the post

Once you have your desired language added to your website, know you can translate posts to that language. We’re going to assume that you want to translate an existing post.

How to Translate Site Data

Mon, 15 Jan 2024 06:20:50 +0600

This theme has built-in support for multiple language.

Add the language to the site

Adding the language to your site will translate the UI to that language (e.g. the buttons, the nav bars, etc.).

Get language code

In order to translate your site, you will need the code from your language. The following table contains the supported languages algonside its codes:

Languages	Code
English	`en` / none
বাংলা	`bn`
Français	`fr`
Indonesian	`id`
Deutsch	`de`
Español	`es`
简体中文	`zh-cn` / `zh-tw`
हिन्दी	`hi`
Italiano	`it`
日本語	`jp`
한국어	`ko`
русский	`ru`
suomi	`fi`
Tiếng Việt	`vn`
Turkish	`tr`
Arabic (العربية)	`ar`
Português Europeu	`pt-pt`
Català	`ad`
Português Brasileiro	`pt-br`
Dutch	`nl`
Hebrew	`he`

For a complete list of the supported languages, please check the README file from the toha repository.

Adding a new section

Sat, 13 Jan 2024 22:30:50 +0600

If the default sections, templates, and components do not meet your needs, you can easily add new sections, templates, and components to your site. This guide will demonstrate how to add a new section to your site.

Step 1 : Add Layout File

To add a new section to your site, you need to create a layout file in the layouts/partials/sections directory. The file should be named after the section’s name. For example, if you want to add a contact section with a contact form, create a file named contact.html. Use the following template for the contact.html file:

Customizing CSS

Sat, 13 Jan 2024 22:00:50 +0600

This theme allows you to customize the appearance of your site and its components by overriding the default CSS. This guide will demonstrate how to override the theme’s color scheme and customize the CSS of individual components.

This theme uses Sass to generate CSS. If you are not familiar with Sass, you can learn more about it from here.

Override Theme Colors Variables

If you want to change the default color scheme of the theme, you can override the theme color variables. To override the theme color variables, you need to create a file named variables.scss in the assets/styles directory of your site. Then copy the content of the default variables.scss file and put into your custom variables.scss file. Here, only the $theme section from default variables.scss file is shown below:

Migrate from V3 to V4 version

Fri, 05 Jan 2024 02:30:00 +0600

Toha V4 has introduced a lots of breaking changes in terms of how the theme is used and how it is configured. This guide will help you to migrate from v3 to v4 version of the theme. Please, check this release notes for complete changelog.

In this guide, I will walk you through the steps to migrate from version 3 to version 4 of the Toha theme. This guide is based on the migration guide written by Alexandre Neto in this issue. Let’s get started!

Quickstart

Tue, 09 Aug 2022 00:00:00 +0600

Greeting! Thank you for deciding to use this theme. In this guide, I will show you how you can get started with this theme very quickly.

Here, I am going to assume that you want to start a fresh Hugo site using this theme. If you are already using Hugo for your site, then you must know how to use a theme. In that case, please follow this sample repo for further reference.

Enable Dark Theme

Sun, 12 Jun 2022 01:30:50 +0600

To enable the dark mode in Toha v4.0.0, simply set the darkMode.enable field to true under the params.features section in your hugo.yaml file. For example:

params:
 features:
 darkMode:
 enable: true

Congratulations! You are all set. You can now enjoy the dark mode in your site. The dark mode will obey user’s system preference.

Mermaid Support

Mon, 14 Mar 2022 06:15:35 +0600

This theme comes with built in mermaid support powered by mermaid-js. To enable mermaid for a page, you have to put mermaid: true in your page front-matter. For example, this page has the following front-matter:

title: "Mermaid Support"
date: 2022-03-14T06:15:35+06:00
menu:
 sidebar:
 name: Mermaid
 identifier: writing-post-mermaid
 parent: writing-post
 weight: 60
mermaid: true

Then, you can use mermaid short code to add your mermaid content. For example:

{{< mermaid align="center">}}
 # your mermaid content here
{{< /mermaid >}}

The mermaid short code accept the following parameters:

Comments

Mon, 14 Mar 2022 06:00:23 +0600

Comments

This theme has built-in support for comment on the posts. Currently, it support the following comment plugins:

For a complete list of supported comments, please refer the sample hugo.yaml file.

Disqus

Disqus is a popular comment plug-in. After signing up to Disqus you will need to provide your shortname under params.features section of your hugo.yaml file as below:

comment:
 enable: true
 services:
 disqus:
 shortName: toha-example-site

Valine

Valine appears to be a Chinese comments comments plugin. You can enable valine comment plugin by adding valine section under params.features section as shown below:

External Link on Sidebar

Mon, 14 Mar 2022 06:00:23 +0600

Supports Links

Mon, 14 Mar 2022 06:00:23 +0600

This theme supports adding various support/donation links in your site. Currently, supported support links are:

For a complete list of supported support links, please refer the sample hugo.yaml file.

Ko-fi

You can add your Ko-fi floating button in your website. To add the floating button, add the support section under params.features section of your sites hugo.yaml file:

support:
 enable: true
 services:
 kofi:
 user: <your ko-fi user id>
 text: Tip Me
 textColor: '#f9fafc'
 backgroundColor: '#248aaa'

Buy Me a Coffee

You can add your “Buy Me a Coffee” floating button in your website. To add the floating button, add the support section under params.features section of your sites hugo.yaml file:

Customizing the layout

Sat, 07 Aug 2021 06:20:50 +0600

If you customize the layout of an existing component, you will not receive any future updates for that component when the theme is updated. You will need to manually update the component in your repository.

In this tutorial, I will guide you on how to customize the layout of a theme. I have personally gone through the process and will share my insights to make it easier for you.

Prepare Your Site

Mon, 08 Jun 2020 23:00:20 +0600

In this post, we are going to create a hugo site from scratch. Then, we will configure it with Toha theme, make it multilingual, add some example posts. At the end of this post, you should be able to run a fully functional hugo site with Toha theme locally.

If you want a head start, you can just fork hugo-toha/hugo-toha.github.io repo, rename it and update with your own data. This repo has already been configured to deploy in Github Pages and Netlify.

Deploy site in Github Pages

Mon, 08 Jun 2020 22:00:20 +0600

In this post, we are going to deploy the site we have created in previous post in Github Pages. At first, make sure that your repository name is <your username>.github.io. Then, commit any local uncommitted changes and push into Github.

Create `gh-pages` Branch

At first, create a new branch named gh-pages. Github will automatically set respective configurations for Github Pages when it see a branch with this name.

# create the gh-pages branch
$ git checkout -b gh-pages
# push the source branch into Github
$ git push gh-pages gh-pages

Enable Github Action

We are going to automate the deploying process using Github Actions. At first, make sure that Github Action is enabled in your repository. Go to Settings > Actions of your repository and make sure Action permissions is set to Allow all actions. Here, is a screenshot of the respective setting:

Deploy site in Netlify

Mon, 08 Jun 2020 21:00:15 +0600

Netlify offers an excellent and easy process for deploying hugo static site. You can deploy your site in matter of few clicks. Unlike Github Pages, you can name your repository whatever you want. You can also customize the site URL.

In this post, we will show the step-by-step process of deploying a hugo site with netlify.

Add Netlify Configuration

At first, create a netlify.toml file at the root of your repository and add the following configuration there:

Automate Theme Update

Mon, 08 Jun 2020 20:00:15 +0600

To ensure your site benefits from the most recent features and corrections, it’s crucial to keep it updated with the latest theme version. This article will guide you through the process of establishing a GitHub workflow that will automatically update the theme version. This action will perform daily checks for any updates to the theme. If an update is detected, it will generate a PR to update your site to the most recent theme version.

Features

Mon, 08 Jun 2020 08:59:13 +0600

Test Link

This theme has been designed from a personal point of preference. As a developer, I want to organize my portfolio in a way that will reflect my skills best. So, this theme may or may not meet your needs but I will be happy to have your feedback.

This post will give you an overview of the features that this theme incorporates.

Minimalist Design

This theme has been designed to be minimalist and beautiful. The color scheme has been chosen to be simple but yet powerful. The post page has been designed to be as distraction-free as possible. Thanks to Anup Deb for his design guidance.

Shortcodes

Mon, 08 Jun 2020 08:06:25 +0600

This is a sample post intended to test the followings:

Default hero image.
Different shortcodes.

Alert

The following alerts are available in this theme.

Success

Code:

{{< alert type="success" >}}
This is sample alert with `type="success"`.
{{< /alert >}}

Result:

This is sample alert with type="success".

Danger

Code:

{{< alert type="danger" >}}
This is sample alert with `type="danger"`.
{{< /alert >}}

Result:

This is sample alert with type="danger".

Warning

Code:

Configuring Site Parameters

Mon, 08 Jun 2020 06:20:55 +0600

After installing this theme, when you first run your site, it will start with the default parameters. It should look similar to this example site, but it won’t have any sections on the homepage. Don’t worry, you can easily add those sections by providing the necessary data files.

In the upcoming posts, I’ll guide you on how to add those sections and customize your site. But first, let’s start with changing the site parameters. You can modify the background, logo, author information, and enable/disable various features.

Configuring About Section

Mon, 08 Jun 2020 06:20:50 +0600

The purpose of the About section is to provide a brief introduction about yourself on your website. In this post, we will guide you on how to configure the About section. For a complete reference, please check out the sample about.yaml file.

To get started, create an about.yaml file in the data/en/sections directory of your website. Then, follow the instructions below.

Add Section information

section:
 name: About # Title of section (default: "")
 id: about # url id/slug of section *Required*
 enable: true # Boolean to determine if this section is enabled (default: false)
 weight: 1 # Order to display section in (default: alphabetical followed by weight)
 showOnNavbar: true # Boolean to determine if a link should be shown for this section on the navbar
 template: sections/about.html # allows you to point to a specific template.

Template setting

You have the option to customize the partial used for this section by specifying the template property. Simply save the new template in your layout/partials directory.

Configuring Skills Section

Mon, 08 Jun 2020 06:20:45 +0600

The Skills section is designed to showcase your skills and provide insights into your expertise in each skill. In this post, we will guide you on how to configure the Skills section of your site. For a complete reference, please check out the sample skills.yaml file.

To begin, create a skills.yaml file in the data/en/sections directory of your site. Then, follow the instructions below.

Add Section Information

Add the following section metadata to your skills.yaml file:

Configuring Education Section

Mon, 08 Jun 2020 06:20:40 +0600

The Education section is designed to showcase your academic background. In this post, we will guide you on how to configure the Education section of your site. For a complete reference, you can refer to the sample education.yaml file.

To begin, create a new file named education.yaml in the data/en/sections directory of your site. Then, follow the instructions below.

Add Section Information

Add the following section metadata to your education.yaml file:

Configuring Experiences Section

Mon, 08 Jun 2020 06:20:40 +0600

The Experiences section is designed to showcase your career background and highlight the responsibilities you have handled throughout your professional journey. In this post, we will guide you on how to configure the Experiences section of your site. For a complete reference, you can refer to the sample experiences.yaml file.

To begin, create a new file named experiences.yaml in the data/en/sections directory of your site. Then, follow the instructions below.

Add Section Information

Add the following section metadata to your experiences.yaml file:

Configuring Projects Section

Mon, 08 Jun 2020 06:20:35 +0600

The purpose of the Projects section is to effectively showcase your projects. In this post, we will guide you on how to configure the Projects section on your site. For a complete reference, please refer to the sample projects.yaml file.

To begin, create a new file named projects.yaml in the data/en/sections directory of your website. Then, follow the instructions below.

Add Section Information

Add the following section metadata to your projects.yaml file:

Configuring Recent Posts Section

Mon, 08 Jun 2020 06:20:34 +0600

The Recent Posts section is used to showcase the latest posts from your content. To enable this section, create a recent-posts.yaml file in the data/en/sections directory and include the following content:

# section information
section:
 name: Recent Posts # Title of section (default: "")
 id: recent-posts # url id/slug of section *Required*
 enable: true # Boolean to determine if this section is enabled (default: false)
 weight: 6 # Order to display section in (default: alphabetical followed by weight)
 showOnNavbar: true # Boolean to determine if a link should be shown for this section on the navbar
 hideTitle: true # Can optionally hide the title in sections (default: false)
 numShow: 4 # Can optionally increase the number of posts to display (default: 3)
 showMoreButton: false #Can optionally show 'More Posts' button (default: false)

Configuring Achievements Section

Mon, 08 Jun 2020 06:20:30 +0600

The Achievements section is designed to display your accomplishments in a visually appealing gallery format. This guide will walk you through the process of configuring the Achievements section on your website. For a complete reference, you can refer to the sample achievements.yaml file.

To begin, create a new file named achievements.yaml in the data/en/sections directory of your website. Then, follow the instructions below.

Add Section Information

Add the following section metadata to your achievements.yaml file:

Creating Category

Mon, 08 Jun 2020 06:15:55 +0600

First, we need to understand how to create a post then we will be able to create categories.

Post Creation

To create a post in your blog first you need to go to the folder named posts. Here, create a file _index.md(The file name has to be exactly the same as it is mentioned). Then open the file and add below lines:

---
title: Posts
---

now, save and close the file. Now, Suppose, you want to write a post. First, create a file, name it with a markdown extension at the end. For example: we’ve created a file named analytics-and-comments.md and added the below lines of contents:

Creating Sub Category

Mon, 08 Jun 2020 06:15:50 +0600

Complete Post Coming Soon…

Front Matter

Mon, 08 Jun 2020 06:15:45 +0600

Complete Post Coming Soon…

Markdown Syntax Guide

Mon, 08 Jun 2020 06:15:40 +0600

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.

Math Type Settings

Mon, 08 Jun 2020 06:15:35 +0600

Mathematical notation in a Hugo project can be enabled by using third party JavaScript libraries.

Rich Content

Mon, 08 Jun 2020 06:15:30 +0600

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.

Using Emoji

Mon, 08 Jun 2020 06:15:25 +0600

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

Analytics

Mon, 08 Jun 2020 06:00:23 +0600

Analytics

This theme has built in support for various analytic tools. Currently, it supports the following analytics:

For a complete list of supported analytics, please refer the sample hugo.yaml file.

Warning: When adding analytics, you should consider local legislation to see if a privacy banner is required to inform users of the tracking in personal data. In general (not legal advice), privacy-friendly, anonymous methods such as counter.dev and GoatCounter don’t need a banner, since they do not collect personally identifiable data.

Goat Counter

GoatCounter is the most complete, simple and privacy friendly analytics method supported in Toha. Its script tracks the most viewed pages, total number of users, devices, and much more, all while being open source!

Posts on Toha

Configuring Featured Posts Section

How to Contribute?

Ways to Contribute

Code

Testing and reporting issues

Documentation

How to add an unsupported language

Create an i18n file

How to Translate Posts

Creating the post

How to Translate Site Data

Add the language to the site

Get language code

Adding a new section

Step 1 : Add Layout File

Customizing CSS

Override Theme Colors Variables

Migrate from V3 to V4 version

Quickstart

Enable Dark Theme

Mermaid Support

Comments

Comments

Disqus

Valine

External Link on Sidebar

Supports Links

Ko-fi

Buy Me a Coffee

Customizing the layout

Prepare Your Site

Deploy site in Github Pages

Create gh-pages Branch

Enable Github Action

Deploy site in Netlify

Add Netlify Configuration

Automate Theme Update

Features

Minimalist Design

Shortcodes

Alert

Success

Danger

Warning

Configuring Site Parameters

Configuring About Section

Add Section information

Template setting

Configuring Skills Section

Add Section Information

Configuring Education Section

Add Section Information

Configuring Experiences Section

Add Section Information

Configuring Projects Section

Add Section Information

Configuring Recent Posts Section

Configuring Achievements Section

Add Section Information

Creating Category

Post Creation

Creating Sub Category

Complete Post Coming Soon…

Front Matter

Complete Post Coming Soon…

Markdown Syntax Guide

Math Type Settings

Rich Content

Using Emoji

Analytics

Analytics

Goat Counter

Create an `i18n` file

Create `gh-pages` Branch