Skip to content
Kodcu is a Hugo theme that is forked from Mainroad and specialized to readibility of long posts.
HTML CSS JavaScript
Branch: master
Clone or download
furkantokac Kodcu Theme Name
* Theme name is changed to Kodcu.
Latest commit 4642382 Sep 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
archetypes Beta Development Patch 1 Sep 11, 2019
assets/css Beta Development Patch 1 Sep 11, 2019
exampleSite Kodcu Theme Name Sep 11, 2019
i18n Kodcu Theme Name Sep 11, 2019
layouts Beta Development Patch 1 Sep 11, 2019
static Beta Development Patch 1 Sep 11, 2019
LICENSE.md First Commit Sep 1, 2019
README.md Kodcu Theme Name Sep 11, 2019
theme.toml Kodcu Theme Name Sep 11, 2019

README.md

Kodcu

This theme is forked from Mainroad and specialized to readibility of long posts. The source code is clean so you can easily hack it if you want.

Check for real-life example : furkantokac.com

Following of the README is directly taken from Mainroad's README and edited according to changes.

Features:

  • Hugo internal templates (Open Graph, Twitter Cards, Disqus, Google Analytics)
  • 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
  • MathJax

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.

Installation

Before starting, please be sure that you have installed Hugo and created a new site. After that, you ready to install Kodcu.

In your Hugo site themes directory, run:

git clone https://github.com/furkantokac/kodcu

Next, open config.toml in the base of the Hugo site and ensure the theme option is set to kodcu:

theme = "kodcu"

To apply the demo, remove all the folders, files on base directory except /themes folder, copy all the files in /themes/kodcu/exampleSite to base directory.

For more information read the official setup guide of Hugo.

Configuration

Config.toml example

baseurl = "/"
title = "Kodcu"
languageCode = "en-us"
paginate = "10" # Number of posts per page
theme = "kodcu"
disqusShortname = "" # Enable comments by entering your Disqus shortname
googleAnalytics = "" # Enable Google Analytics by entering your tracking id

[Author] # Used in authorbox
  name = "John Doe"
  bio = "John Doe's true identity is unknown. Maybe he is a successful blogger or writer. Nobody knows it."
  avatar = "img/avatar.png"

[Params]
  subtitle = "Just another site" # Subtitle of your site. Used in site header
  description = "John Doe's Personal blog about everything" # Site description. Used in meta description
  header_img = "img/header_img.svg" # Logo displayed in site header
  opengraph = true # Enable OpenGraph if true
  readmore = false # Show "Read more" button in list if true
  authorbox = true # Show authorbox at bottom of pages if true
  toc = true # Enable Table of Contents
  post_navigation = true # Show post navigation at bottom of pages if true
  post_meta = ["date", "categories", "translations"] # Order of post meta information
  #mainSections = ["post", "blog", "news"] # specify section pages to show on home page and the "Recent articles" widget
  #dateformat = "2006-01-02" # change the format of dates
  #mathjax = true # Enable MathJax
  #mathjaxPath = "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.6/MathJax.js" # Specify MathJax path
  #mathjaxConfig = "TeX-AMS-MML_HTMLorMML" # Specify MathJax config
  #highlightColor = "#e22d30" # Override highlight color
  customCSS = ["css/custom.css"] # Include custom CSS files
  customJS = ["js/custom.js"] # Include custom JS files

[Params.sidebar]
  home = "right" # Configure layout for home page
  list = "left"  # Configure layout for list pages
  single = false # Configure layout for single pages
  # Enable widgets in given order
  widgets = ["search", "recent", "categories", "taglist", "social", "languages"]

[Params.widgets]
  recent_num = 5 # Set the number of articles in the "Recent articles" widget
  tags_counter = false # Enable counter for each tag in "Tags" widget (disabled by default)

[Params.widgets.social]
  # Enable parts of social widget
  facebook = "username"
  twitter = "username"
  instagram = "username"
  linkedin = "username"
  telegram = "username"
  github = "username"
  gitlab = "username"
  bitbucket = "username"
  email = "example@example.com"

A good idea is not to copy all these settings without understanding how it works.

For more information about all available standard configuration settings, please read Configure Hugo: All Configuration Settings.

Front Matter example

---
title: "Example article title"
date: "2017-08-21"
description: "Example article description"
thumbnail: "img/placeholder.jpg" # Optional, thumbnail
lead: "Example lead - highlighted near the title"
comments: false # Enable/disable Disqus comments. Default value: true
authorbox: true # Enable authorbox for specific post
toc: true # Optional, enable Table of Contents for specific post
mathjax: true # Optional, enable MathJax for specific post
categories:
  - "Category 1"
  - "Category 2"
tags:
  - "Test"
  - "Another test"
menu: main # Optional, add page to a menu. Options: main, side, footer
---

For more information about front matter variables read Hugo Front Matter from Hugo official documentation.

Sidebar

Kodcu comes with a configurable sidebar that can be on the left, on the right, or disabled. The default layout can be specified in the [Params.sidebar] section of the configuration. The position can be specified for home, list and single pages individually. Use the keys home, list and single with values "left", "right" or false. The layout can be configured per page, by setting the sidebar parameter with one of the same values in the page's front matter.

The sidebar consists of multiple widgets. Widgets can be enabled individually using the widgets key with a list of widget names as value. You can add your own widgets, by placing a template under layouts/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 example configuration above.

Header Image

Kodcu can be customized with image in the site header. You just have to provide a header_img=path/to/your/header_img.svg stanza in your configuration file (see above). Currently, Kodcu includes the image at max-height: 80px. This might change in the future, thus we expect you to provide the logo in a vector format (.svg). (Thanks to Patrik Keller for this feature.)

Menus

Kodcu supports multiple menus. The main menu is fully responsive and displayed right under the site header. The secondary menus side and footer are displayed in a sidebar widget and the page footer. In order to add a page to a menu, add a menu = <menu> parameter to the pages frontmatter. You can also add a page to many menus by providing a list, e.g. menu = [main, side, footer]. Don't forget to enable the sidemenu widget in the widget configuration if you want to use the side menu.

Sidenote: Please keep in mind that Kodcu menus don't support nested items (submenus).

Contributing

Have you found a bug or got an idea for a new feature? Feel free to use the issue tracker to let me know. Or make directly a pull request.

License

This theme is released under the GPLv2 license.

You can’t perform that action at this time.