Linkita

A clean and elegant blog theme for Zola. Linkita is based on Kita and Hugo-Paper and is multilingual and SEO friendly.

The source code is available on Codeberg and mirrored on GitHub.
Live preview in English, Bulgarian, Esperanto. See demo source code.
Screenshots for light mode, dark mode.
For discussion, join the Matrix chat room.

Features

Kita features

Easy to use and modify
No preset limits
Inject support
Dark mode
Responsive design
Social icons
Taxonomies support
Projects page
Archive page
Table of Content
Admonition shortcode
SEO friendly
Comments using Giscus
Mathematical notations using KaTeX
Diagrams and charts using Mermaid

Linkita features

i18n
Improved SEO
Author profiles
Search (elasticlunr_javascript)
Keyboard shortcuts

Installing

Add this theme as a submodule:

git submodule add https://codeberg.org/salif/linkita.git themes/linkita

Alternatively, clone the repository: git clone https://codeberg.org/salif/linkita.git themes/linkita.

Set linkita as your theme in your config.toml file.

theme = "linkita"

Optionally, you can switch from the linkita branch to the latest release:

cd themes/linkita
npm run switch-to-latest

Updating

git submodule update --merge --remote themes/linkita
# cd themes/linkita
# npm run switch-to-latest

Usage

TOML frontmatter

+++
title = ""
description = ""
# date = 
# updated = 
[taxonomies]
categories = []
tags = []
authors = []
[extra]
# comment = true
# math = true
# mermaid = true
# page_info = []
[extra.cover]
# image = ""
# alt = ""
+++

YAML frontmatter

---
title: ""
description: ""
date: 
# updated: 
taxonomies:
  categories:
  tags:
  authors:
extra:
  comment: false
  math: false
  mermaid: false
  cover:
    image: ""
    alt: ""
---

Open Graph frontmatter options

[extra.open_graph]
# MIME type of the cover image. e.g. `image/jpeg`, `image/gif`, `image/png`
cover_type = ""
# Width of the cover image in pixels
cover_width =
# Height of the cover image in pixels
cover_height =
# When the article is out of date after. e.g. `2024-02-29`
expiration_time =
# Describes the tier status for an article. e.g. `free`, `locked`, or `metered`
content_tier = ""
# Defines the location to target for the article. e.g. `["county:COUNTY"]` or `["city:CITY,COUNTY"]`
locations = []
# A high-level section name. e.g. `Technology`
section = ""
# Tag words associated with this article
tags = [""]
# Indicates whether the article is an opinion piece or not. e.g. `true` or `false`
opinion =
# The URL for the audio
audio = ""
# MIME type of the audio. e.g. `audio/vnd.facebook.bridge`, `audio/mpeg`
audio_type = ""
# The URL for the video
video = ""
# MIME type of the video. e.g. `application/x-shockwave-flash`, `video/mp4`
video_type = ""
# Width of the video in pixels
video_width =
# Height of the video in pixels
video_height =
# Set only if different from canonical page URL
url = ""

Sitemap frontmatter options

[extra.sitemap]
# Set only if different from `page.updated`
updated =
# Valid values are `always`, `hourly`, `daily`, `weekly`, `monthly`, `yearly`, `never`
changefreq =
# Valid values range from 0.0 to 1.0. The default priority of a page is 0.5
priority =

Home page profile

Create content/_index.md file in your blog and set extra.profile to your username:

+++
sort_by = "date"
paginate_by = 5
[extra]
profile = "your_username"
+++

Do it for each language in your blog, for example for French, the file name is content/_index.fr.md.

Profiles for authors

You should add extra.profiles.author_username table in your config.toml file for each author. Replace author_username with author's username.

Authors

Option 1: Using `page.authors`

You don't need to set page.authors in the frontmatter if you are the only author.

Otherwise, set page.authors:

+++
authors = ["author_username", "author2_username"]
+++

Option 2: Using Taxonomies

If you choose this option you should set taxonomies in each post.

Examples:

If the blog is your personal blog:

+++
[taxonomies]
authors = ["your_username"]
+++

If the blog has a team of multiple authors:

+++
[taxonomies]
authors = ["author_username"]
# or:
# authors = ["author_username", "author2_username"]
+++

Archive page

+++
title = "Archive"
template = "archive.html"
[extra]
section = "_index.md"
+++

Inject support

You can easily use inject to add new features to your side without modifying the theme itself.

To use inject, you need to add some HTML files to the templates/injects directory.

The available inject points are: head, header_nav, body_start, body_end, page_start, page_end, footer.

Keyboard shortcuts

Action	Shortcut
Home	`Alt`+`!`
Search	`Alt`+`/`
Toggle menu	`Alt`+`+`
Toggle dark mode	`Alt`+`$`
Go to prev page	`Alt`+`,`
Go to next page	`Alt`+`.`
Table of contents	`Alt`+`=`
Skip to footer	`Alt`+`_`
Skip to main	`Alt`+`-`

Configuring

Copy and paste the examples into your config.toml file and comment out the options you don't use instead of setting empty values.

key	type
default_language	string
author	string
title	string
description	string
generate_feeds	boolean
feed_filenames	array of strings
build_search_index	boolean
extra	table

Taxonomies with translated names are tags, categories, and authors.

# The default language
default_language = "en"

# The default author for pages
author = "your_username"

# The site title
title = ""

# The site description
description = ""

# Automatically generated feed 
generate_feeds = true

# The filenames to use for the feeds
feed_filenames = ["atom.xml"] # or ["rss.xml"]

# Enable search
build_search_index = true

[[taxonomies]]
name = "categories"
feed = true
paginate_by = 5

[[taxonomies]]
name = "tags"
feed = true
paginate_by = 5

[[taxonomies]]
name = "authors"
feed = true
paginate_by = 5

Add more languages by replacing fr from the example with the language code.

[languages.fr]
title = "Site title in French"
description = "Site description in French"
generate_feeds = true
feed_filenames = ["atom.xml"] # or ["rss.xml"]

[[languages.fr.taxonomies]]
name = "authors"
feed = true
paginate_by = 5

key	type
extra.math	boolean
extra.mermaid	boolean
extra.comment	boolean
extra.title_separator	string
extra.header_menu_name	string
extra.header_buttons	array of strings
extra.page_info	array of strings
extra.disable_default_favicon	boolean
extra.disable_javascript	boolean

Tables: extra.style, extra.menus, extra.profiles, extra.footer, extra.languages, extra.goatcounter, extra.giscus.

The table below lists valid extra.page_info values. Default value is ["date", "date_updated_on_page", "reading_time", "authors"].

on both	only on page	only on paginator
`date`	`date_on_page`	`date_on_paginator`
`date_updated`	`date_updated_on_page`	`date_updated_on_paginator`
`reading_time`	`reading_time_on_page`	`reading_time_on_paginator`
`word_count`	`word_count_on_page`	`word_count_on_paginator`
`authors`	`authors_on_page`	`authors_on_paginator`
`tags`	`tags_on_page`	`tags_on_paginator`

Default extra.header_buttons value is ["site_title", "theme_button", "search_button", "translations_button"]. You can replace site_title with home_button if you want.

[extra]
# Enable KaTeX math formula support globally
math = false

# Enable Mermaid support globally 
mermaid = false

# Enable comments globally
comment = false

# Title separator
title_separator = " | "

# The top menu. See `extra.menus`
header_menu_name = "menu_name"

# header_buttons = []
# page_info = []
# disable_default_favicon = true
# disable_javascript = false

Style config

key	type	default value
extra.style.bg_color	string	`"#f4f4f5"`
extra.style.bg_dark_color	string	`"#18181b"`
extra.style.header_blur	boolean	false
extra.style.header_color	string	`"#e4e4e7"`
extra.style.header_dark_color	string	`"#27272a"`

[extra.style]
# The custom background color
bg_color = "#f4f4f5"

# The custom background color in dark mode
bg_dark_color = "#18181b"

# Enable header blur
header_blur = false

# The custom header color, only available when `header_blur` is false
header_color = "#e4e4e7"

# The custom header color in dark mode, only available when `header_blur` is false
header_dark_color = "#27272a"

Menus

key	type
extra.menus[menu_name].menu[].url	string
extra.menus[menu_name].menu[].name	string
extra.menus[menu_name].menu[].names	table
extra.menus[menu_name].menu[].names[lang]	string
extra.menus[menu_name].menu[].names_i18n	string

$BASE_URL in .url will be automatically replaced with the language specific base url. You can use names_i18n instead of names[lang], see the static/i18n.json file, set names_i18n to a common_ key.

[[extra.menus.menu_name]]
url = "$BASE_URL/projects/"
# name = "Projects"
[extra.menus.menu_name.names]
en = "Projects"
# fr = "Projects in French"

[[extra.menus.menu_name]]
url = "$BASE_URL/archive/"
# name = "Archive"
[extra.menus.menu_name.names]
en = "Archive"
# fr = "Archive in French"

[[extra.menus.menu_name]]
url = "$BASE_URL/tags/"
# name = "Tags"
[extra.menus.menu_name.names]
en = "Tags"
# fr = "Tags in French"

[[extra.menus.menu_name]]
url = "$BASE_URL/about/"
# name = "About"
[extra.menus.menu_name.names]
en = "About"
# fr = "About in French"

Profiles

key	type
extra.profiles[username].avatar_url	string
extra.profiles[username].avatar_alt	string
extra.profiles[username].avatar_invert	boolean
extra.profiles[username].name	string
extra.profiles[username].bio	string
extra.profiles[username].email	string
extra.profiles[username].url	string
extra.profiles[username].languages	table
extra.profiles[username].social	array of tables
extra.profiles[username].open_graph	table

[extra.profiles.your_username]
# The URL of avatar
avatar_url = "icons/github.svg"

# A description of what is in the avatar
avatar_alt = ""

# Invert avatar color in dark mode
avatar_invert = false

# Profile name for all languages
name = ""

# Profile bio for all languages. Supports Markdown.
bio = ""

# Profile email
# email = ""

# Profile website
# url = ""

Profile translations

key	type
extra.profiles[username].languages[lang].name	string
extra.profiles[username].languages[lang].bio	string
extra.profiles[username].languages[lang].url	string
extra.profiles[username].languages[lang].avatar_alt	string

[extra.profiles.your_username.languages.fr]
# Profile name in French
name = ""

# Profile bio in French
bio = ""

Social icons

key	type
extra.profiles[username].social[].name	string
extra.profiles[username].social[].url	string

The name should be the file name of static/icons/*.svg or the icon name of simpleicons.org. The url supports $BASE_URL.

[[extra.profiles.your_username.social]]
name = "github"
url = "https://github.com/username"

[[extra.profiles.your_username.social]]
name = "bluesky"
url = "https://bsky.app/profile/username"

[[extra.profiles.your_username.social]]
name = "rss"
url = "$BASE_URL/atom.xml"

Open Graph

key	type
extra.profiles[username].open_graph.image	string
extra.profiles[username].open_graph.image_alt	string
extra.profiles[username].open_graph.first_name	string
extra.profiles[username].open_graph.last_name	string
extra.profiles[username].open_graph.username	string
extra.profiles[username].open_graph.gender	string
extra.profiles[username].open_graph.fb_app_id	string
extra.profiles[username].open_graph.fb_admins	array of strings
extra.profiles[username].open_graph.fediverse_creator	table
extra.profiles[username].open_graph.fediverse_creator.handle	string
extra.profiles[username].open_graph.fediverse_creator.domain	string
extra.profiles[username].open_graph.fediverse_creator.url	string
extra.profiles[username].open_graph.languages[lang]	table

See the Open Graph protocol.

[extra.profiles.your_username.open_graph]
# The URL of social image
image = ""

# A description of what is in the social image
image_alt = ""

first_name = "Your first name"
last_name = "Your last name"
username = "Your username"
gender = "female" # or "male"

# Set if you have a Fediverse account. Example for @[email protected]:
[extra.profiles.your_username.open_graph.fediverse_creator]
# Your Fediverse handle
# handle = "user"
# Your Fediverse instance
# domain = "mastodon.social"
# Your Fediverse account URL
# url = ""

# [extra.profiles.your_username.open_graph.languages.fr]
# A description in French of what is in the social image
# image_alt = ""

fb_app_id and fb_admins are only allowed in the config.author's profile. In addition, image and image_alt of the profile will be used as a fallback open graph image for all pages.

[extra.profiles.your_username.open_graph]
fb_app_id = "Your fb app ID"
fb_admins = ["YOUR_USER_ID"]
# image = ""
# image_alt = ""

The page footer

key	type
extra.footer.since	number
extra.footer.copyright	string
extra.footer.license_url	string
extra.footer.privacy_policy_url	string
extra.footer.terms_of_service_url	string
extra.footer.search_page_url	string

Currently privacy_policy_url, terms_of_service_url, and search_page_url are not shown.

$BASE_URL is supported in the _url options.

Option copyright supports Markdown and:

$BASE_URL
$YEAR (uses since)
$LICENSE_URL (uses license_url)

[extra.footer]
# Replace with the correct year
since = 2024
# Replace with the url of the license you want
license_url = "https://creativecommons.org/licenses/by-sa/4.0/deed"
# Replace `Your Name` with your name and `CC BY-SA 4.0` with the name of the license you want
copyright = "&copy; $YEAR Your Name &vert; [CC BY-SA 4.0]($LICENSE_URL)"
# privacy_policy_url = "$BASE_URL/privacy-policy/"
# terms_of_service_url = "$BASE_URL/terms-of-service/"
# search_page_url = "$BASE_URL/search/"

Locale and Date format

key	type	default value
extra.languages[lang].locale	string
extra.languages[lang].date_format	string	`%F`
extra.languages[lang].date_format_archive	string	`%m-%d`
extra.languages[lang].header_menu_name	string
extra.languages[lang].header_buttons	array of strings
extra.languages[lang].art_x_lang	string

For date format, see chrono docs.

[extra.languages.en]
locale = "en_US"
date_format = "%x"
date_format_archive = "%m-%d"

[extra.languages.fr]
locale = "fr_FR"
date_format = "%x"
date_format_archive = "%m-%d"

Web analytics

key	type
extra.goatcounter.endpoint	string
extra.goatcounter.src	string

Set only if you use GoatCounter.

[extra.goatcounter]
endpoint = "https://MYCODE.goatcounter.com/count"
src = "//gc.zgo.at/count.js"

Comments

key	type	default value
extra.giscus.repo	string
extra.giscus.repo_id	string
extra.giscus.category	string
extra.giscus.category_id	string
extra.giscus.mapping	string	`pathname`
extra.giscus.strict	number	`1`
extra.giscus.reactions_enabled	number	`0`
extra.giscus.emit_metadata	number	`0`
extra.giscus.input_position	string	`top`
extra.giscus.theme	string	`light`
extra.giscus.lang	string	`en`
extra.giscus.loading	string	`lazy`

See giscus.app. Only available when extra.comment in the frontmatter or extra.comment in the config is set to true.

[extra.giscus]
repo = ""
repo_id = ""
category = ""
category_id = ""
mapping = "pathname"
strict = 1
reactions_enabled = 0
emit_metadata = 0
input_position = "top"
theme = "light"
lang = "en"
loading = "lazy"

License

See the MIT License file.

Contributing

Pull requests are welcome on Codeberg and Github. Open bug reports and feature requests on Codeberg.

Blogs using this theme

Zola Themes Collection
salif.eu: Personal website

If you use Linkita, feel free to create a pull request to add your site to this list.

See also Google results and Bing results.

Name		Name	Last commit message	Last commit date
Latest commit History 115 Commits
static		static
templates		templates
.editorconfig		.editorconfig
.gitignore		.gitignore
.prettierignore		.prettierignore
.prettierrc.js		.prettierrc.js
LICENSE		LICENSE
README.md		README.md
justfile		justfile
package.json		package.json
pnpm-lock.yaml		pnpm-lock.yaml
screenshot.dark.png		screenshot.dark.png
screenshot.png		screenshot.png
tailwind.config.js		tailwind.config.js
theme.toml		theme.toml

License

salif/linkita

Folders and files

Latest commit

History

Repository files navigation

Linkita

Features

Kita features

Linkita features

Installing

Updating

Usage

TOML frontmatter

YAML frontmatter

Open Graph frontmatter options

Sitemap frontmatter options

Home page profile

Profiles for authors

Authors

Option 1: Using page.authors

Option 2: Using Taxonomies

Archive page

Inject support

Keyboard shortcuts

Configuring

Style config

Menus

Profiles

Profile translations

Social icons

Open Graph

The page footer

Locale and Date format

Web analytics

Comments

License

Contributing

Blogs using this theme

About

Topics

Resources

License

Stars

Watchers

Forks

Releases

Packages 0

Languages

Option 1: Using `page.authors`

Packages