Posts

Configuring Featured Posts Section

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

Tuesday, February 6, 2024 | 1 minute Read

How to Contribute?

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:

Friday, January 19, 2024 | 3 minutes Read

How to add an unsupported language

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.

Monday, January 15, 2024 | 2 minutes Read

How to Translate Posts

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.

Monday, January 15, 2024 | 1 minute Read

How to Translate Site Data

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.

Monday, January 15, 2024 | 2 minutes Read

Adding a new section

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:

Saturday, January 13, 2024 | 2 minutes Read

Customizing CSS

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:

Saturday, January 13, 2024 | 2 minutes Read

Migrate from V3 to V4 version

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!

Friday, January 5, 2024 | 4 minutes Read

Quickstart

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.

Tuesday, August 9, 2022 | 4 minutes Read

Enable Dark Theme

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.

Sunday, June 12, 2022 | 1 minute Read

Mermaid Support

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:

Monday, March 14, 2022 | 3 minutes Read

Comments

Comments This theme has built-in support for comment on the posts. Currently, it support the following comment plugins: Disqus Valine Utterances Giscus 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:

Monday, March 14, 2022 | 2 minutes Read