Giter Club home page Giter Club logo

kaslaanka's Introduction

Kaslaanka

A minimalist theme for Hugo.

Live Demo at: m1cr0xf7.github.io/kaslaanka

this theme is a fork of Hugo-tanka theme.

this theme is a "do it yourself" theme, you probably want to change the css to make it your taste, use custom.css to do it.

tn.png

screenshot.png

Description

  • minimalist theme
  • easily customizable
  • easy to setup
  • does not need any javascript (javascript is optional)
  • works as a blog or/and a personal website
  • gives you a space to be creative

new features

  • remove the bloat (utterances comments, progressivly, highlight.js)
  • scriptless by default.
  • removed bootstrap.
  • changed how the index, single pages and blog posts look.
  • blog list on the home page is limited, if the users want to see more they go to /blog/
  • listing projects on the home page.
  • brief about me on the home page.
  • support unlisted articles.
  • better favicons.
  • better tags
  • add categories
  • add multiple languages support
  • HUGE first letter paragraph (if you want)
  • Brief description under blog post title

Installation

Install hugo using the setup guide.

Create a new Hugo site

hugo new site .

add the theme to your Hugo site

# first initialise your repository with git
git init
# then fetch the theme and put it inside themes/ directory
git submodule add https://github.com/M1cR0xf7/kaslaanka.git themes/kaslaanka

use the theme by adding this line in your config (config.toml) file

theme = 'kaslaanka'

to get your site ready add the following params to your config:

[params]
sitename = "Kaslaanka Theme"
copyrights = "John Doe"
defaultList = "global"
paginationLen = 3
projectsURL = "https://example.com"
brief_about = "<center>Kaslaanka theme demo made with ❤️️</center>"

run this in your terminal to see progress:

hugo serve

it usually serves on http://localhost:1313/. Now you've are half way there.

Let's add some of our awesome projects to the homepage. add the following under [params]

[[params.myprojects]]
name = "Totally Awesome Project"
description = "Machine Learning Magic!!!"
url = "https://example.com"

[[params.myprojects]]
name = "Kaslaanka"
description = "The best hugo theme ever!!!"
url = "https://github.com/M1cR0xf7/kaslaanka"

Let's add some nav links:

[[menu.primary]]
name = "Home"
url = "/"
weight = 1

[[menu.primary]]
name = "About"
url = "/about"
weight = 2

[[menu.primary]]
name = "Subscribe"
url = "/index.xml"
weight = 3

Now you are done installing the theme. Read Hugo's documentation and continue your journey. i will use yaml to write the rest of the README, it's easy to convert between them, just use whatever you like. Check out config.yml annotated with comments.

you should check out exampleSite/. don't copy it fully, there are some workaround used in layouts/blog/ to deploy on github pages, please ignore it.

Customization

custom.css

add your custom css here /static/css/custom.css

/* <span class="first-letter">H</span>ello World! */
.first-letter {
	font-family: "Roboto Serif";
}

custom.js

add your custom javascript here /static/js/custom.js

// be creative
for(;;){alert("HAHAHAHAHAH")}

external scripts

you can add external scripts in /layouts/partials/scripts.html

<script src="..." ... ></script>

meta & link tags

you can add as much <meta> and <link> as you like in /layouts/partials/meta.html

tags

tags:
  - hello
  - ok

this post will be listed at /tags/hello/ and /tags/ok/

categories

categories:
  - travel

this post will be listed at /categories/travel/

config.yml

sitename: "Site Name!"
baseURL: "/"
languageCode: en-us
title: "Kaslaanka Theme"
author: John Doe

enableEmoji: true
hasCJKLanguage: false
# You can change code highlight theme
pygmentsstyle: "tango"
pygmentscodefences: true

# if you want to add html to your markdown
markup:
  goldmark:
    renderer:
      unsafe: true

# Links of the navbar
menu:
  primary:
    - name: Home
      url: /
      weight: 1
    - name: About
      url: /about
      weight: 2
    - name: Subscribe
      url: /index.xml
      weight: 3

# You can add languages!
# do not expect it to work out of the box
# https://gohugo.io/content-management/multilingual/
defaultContentLanguage: en
languages:
  en:
    LanguageName: English
    # contentDir: content/english
  ru:
    LanguageName: русский
    # contentDir: content/russian

params:
  sitename: "Kaslaanka Theme"
  # it will produce: copyrights (c) 2022 joe
  copyrights: John Doe
  # set default homepage list (what section to list pages from)
  # default: global
  # currently available options (global, blog)
  defaultList: global
  # list 3 items of every section
  # you can use a section specific list
  # to list n items of that section.
  # see ./layouts/partials/bloglist.html for example
  paginationLen: 3
  # path to the favicon directory
  # see ./layouts/_defaults/baseof.html line #30 to line #37
  # faviconpath: "/img/favicon"
  # projects will show in the index page
  myprojects:
    - name: "Totally Awesome Project"
      description: "Machine Learning Magic!!!"
      url: https://example.com
    - name: "Kaslaanka"
      description: "The best hugo theme ever!!!"
      url: https://github.com/M1cR0xf7/kaslaanka
  # link to more projects
  # show your github repositories as example
  # or create your own page.
  projectsURL: https://example.com

  # a brief about me
  brief_about: <center>Kaslaanka theme demo made with ❤️️</center>

# and don't forget
theme: kaslaanka

config.toml

sitename = "Site Name!"
baseURL = "/"
languageCode = "en-us"
title = "Kaslaanka Theme"
author = "John Doe"
enableEmoji = true
hasCJKLanguage = false
pygmentsstyle = "tango"
pygmentscodefences = true
defaultContentLanguage = "en"
theme = "kaslaanka"

[markup.goldmark.renderer]
unsafe = true

[[menu.primary]]
name = "Home"
url = "/"
weight = 1

[[menu.primary]]
name = "About"
url = "/about"
weight = 2

[[menu.primary]]
name = "Subscribe"
url = "/index.xml"
weight = 3

[languages.en]
LanguageName = "English"

[languages.ru]
LanguageName = "русский"

[params]
sitename = "Kaslaanka Theme"
copyrights = "John Doe"
defaultList = "global"
paginationLen = 3
projectsURL = "https://example.com"
brief_about = "<center>Kaslaanka theme demo made with ❤️️</center>"

  [[params.myprojects]]
  name = "Totally Awesome Project"
  description = "Machine Learning Magic!!!"
  url = "https://example.com"

  [[params.myprojects]]
  name = "Kaslaanka"
  description = "The best hugo theme ever!!!"
  url = "https://github.com/M1cR0xf7/kaslaanka"

posts

you can make a post unlisted by adding the following

---

unlisted: true

---

add a brief description to a single blog page.

---

brief: "This is my demo brief!"

---

if you want to add an edit counter, see edit in the front matter. you increment it every time you edit the post. where 3 is the number of edits.

---

edits: 3

---

LICENSE

GPL-3.0 LICENSE.

kaslaanka's People

Contributors

m1cr0xf7 avatar martinmodrak avatar maurosch avatar nanxstats avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

kaslaanka's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.