A simple blog theme focused on writing powered by Bulma and Zola.
You need static site generator (SSG) Zola installed in your machine to use this theme follow their guide on getting started.
Follow zola's guide on installing a theme.
Make sure to add theme = "DeepThought" to your config.toml
Check zola version (only 0.23.0+) Just to double-check to make sure you have the right version. It is not supported to use this theme with a version under 0.23.0.
Version 0.23 of Zola changed its template engine (Tera 2) and removed shortcodes, so sites using an earlier version of this theme need a few changes when they move to Zola 0.23+.
config.toml
| Before | Now |
|---|---|
generate_feed = true | generate_feeds = true |
feed_filename = "rss.xml" | feed_filenames = ["rss.xml"] |
highlight_code, highlight_theme, extra_syntaxes in [markdown] | theme = "..." in [markdown.highlighting] (theme names changed, e.g. one-dark is now one-dark-pro) |
languages = {code = "fr"}] | [languages.fr] tables (see [Multilingual Navbar |
Content: the theme's shortcodes are now components, written with the same tags as HTML:
| Before | Now |
|---|---|
{%/* mermaid() */%}…{%/* end */%} | {%/* <mermaid> */%}…{%/* </mermaid> */%} |
{%/* chart() */%}…{%/* end */%} | {%/* <chart> */%}…{%/* </chart> */%} |
{%/* galleria() */%}…{%/* end */%} | {%/* <galleria> */%}…{%/* </galleria> */%} |
{%/* mapbox(zoom=6) */%}…{%/* end */%} | {%/* <mapbox zoom={6}> */%}…{%/* </mapbox> */%} |
{%/* katex(block=true) */%}…{%/* end */%} | {%/* <katex block={true}> */%}…{%/* </katex> */%} |
{{/* katex(body="…") */}} | {%/* <katex> */%}…{%/* </katex> */%} |
{{/* youtube(id="…") */}} | {{/* <youtube id="…" /> */}} |
{{/* vimeo(id="…") */}} | {{/* <vimeo id="…" /> */}} |
Any other Tera syntax in your Markdown must be wrapped in {%/* raw */%}…{%/* endraw */%}, for example when showing the snippets above in a code block.
Templates: if you override DeepThought templates, macros no longer exist. Call the theme's components instead, for example {{/*<dt.render_tags tags={page.taxonomies.tags} />*/}} in place of {{/* macros::render_tags(tags=page.taxonomies.tags) */}}, and replace your own macros with components. Tera 2 also errors on undefined variables, so use a?.b or a or b where a value may be missing.
See the Zola 0.23 changelog and the Tera 2 migration guide for everything else.
Go into your sites directory and type zola serve. You should see your new site at localhost:1111.
NOTE: you must provide the theme options variables in config.toml to serve a functioning site
Zola already has great documentation for deploying to Netlify or Github Pages. I won't bore you with a regurgitated explanation.
Following options are available with the DeepThought theme
# Enable external libraries
[extra]
katex.enabled = true
katex.auto_render = true
chart.enabled = true
mermaid.enabled = true
galleria.enabled = true
navbar_items = [
{ code = "en", nav_items = [
{ url = "$BASE_URL/", name = "Home" },
{ url = "$BASE_URL/posts", name = "Posts" },
{ url = "$BASE_URL/docs", name = "Docs" },
{ url = "$BASE_URL/tags", name = "Tags" },
{ url = "$BASE_URL/categories", name = "Categories" },
]},
]
# Add links to favicon, you can use https://realfavicongenerator.net/ to generate favicon for your site
[extra.favicon]
favicon_16x16 = "/icons/favicon-16x16.png"
favicon_32x32 = "/icons/favicon-32x32.png"
apple_touch_icon = "/icons/apple-touch-icon.png"
safari_pinned_tab = "/icons/safari-pinned-tab.svg"
webmanifest = "/icons/site.webmanifest"
# Author details
[extra.author]
name = "DeepThought"
avatar = "/images/avatar.png"
# Social links
[extra.social]
email = "<email_id>"
facebook = "<facebook_username>"
github = "<github_username>"
gitlab = "<gitlab_username>"
keybase = "<keybase_username>"
linkedin = "<linkedin_username>"
stackoverflow = "<stackoverflow_userid>"
twitter = "<twitter_username>"
instagram = "<instagram_username>"
behance = "<behance_username>"
google_scholar = "<googlescholar_userid>"
orcid = "<orcid_userid>"
mastodon_username = "<mastadon_username>"
mastodon_server = "<mastodon_server>" (if not set, defaults to mastodon.social)
# To add google analytics
[extra.analytics]
google = "<your_gtag>"
# To add disqus comments
[extra.commenting]
disqus = "<your_disqus_shortname>"
# To enable mapbox maps
[extra.mapbox]
enabled = true
access_token = "<your_access_token>"If you want to have a multilingual navbar on your blog, you must add each new language as a languages table in the config.toml file.
NOTE: Don't add your default language here. Set build_search_index = true on each language so search also works on its pages.
[languages.fr]
build_search_index = true
[languages.es]
build_search_index = trueAnd then create and array of nav item for each language:
NOTE: Include your default language in this array
navbar_items = [
{ code = "en", nav_items = [
{ url = "$BASE_URL/", name = "Home" },
{ url = "$BASE_URL/posts", name = "Posts" },
{ url = "$BASE_URL/docs", name = "Docs" },
{ url = "$BASE_URL/tags", name = "Tags" },
{ url = "$BASE_URL/categories", name = "Categories" },
]},
{ code = "fr", nav_items = [
{ url = "$BASE_URL/", name = "Connexion" },
]},
{ code = "es", nav_items = [
{ url = "$BASE_URL/", name = "Publicationes" },
{ url = "$BASE_URL/", name = "Registrar" },
]}
]en:
fr:
es:
This theme contains math formula support using KaTeX,
which can be enabled by setting katex.enabled = true in the extra section
of config.toml.
After enabling this extension, the katex component can be used in documents:
{%/* <katex> */%}\KaTeX{%/* </katex> */%} to typeset a math formula inlined into a text,
similar to $...$ in LaTeX{%/* <katex block={true}> */%}\KaTeX{%/* </katex> */%} to typeset a block of math formulas,
similar to $$...$$ in LaTeXOptionally, \\( \KaTeX \\) / $ \KaTeX $ inline and \\[ \KaTeX \\] / $$ \KaTeX $$
block-style automatic rendering is also supported, if enabled in the config
by setting katex.auto_render = true.
Zola use Elasticlunr.js to add full-text search feature.
To use languages other than en (English), you need to add some javascript files. See the Zola's issue #1349.
By placing the templates/base.htmlon your project and using the other_lang_search_js block, you can load the required additional javascript files in the right timing.
e.g. templates/base.html
{%/* extends "DeepThought/templates/base.html" */%} {%/* block other_lang_search_js */%}
<script src="{{/* get_url(path='js/lunr.stemmer.support.js') */}}"></script>
<script src="{{/* get_url(path='js/tinyseg.js') */}}"></script>
<script src="{{/* get_url(path='js/lunr.' ~ lang ~ '.js') */}}"></script>
<script src="{{/* get_url(path='js/search.js') */}}"></script>
{%/* endblock */%}More detailed explanations are aound in elasticlunr's documents.
Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.
Distributed under the MIT License. See LICENSE for more information.
Ratan Kulshreshtha - @RatanShreshtha - ratan.shreshtha[at]gmail.com
Project Link: https://github.com/RatanShreshtha/DeepThought
Use this section to mention useful resources and libraries that you have used in your projects.