Code Monkey home page Code Monkey logo

kiss's Introduction

Kiss

Kiss is a stupidly simple blog theme for Hugo. It's a fork of Hemingway theme - read why.

Getting Started

Clone this repository to your hugo theme directory.

mkdir themes
cd themes
git clone https://github.com/ribice/kiss.git

Site Configuration

Take a look in the exampleSite folder.

This directory contains an example config file and the content for the demo. It serves as an example setup for your documentation.

Copy the config.toml in the root directory of your website. Overwrite the existing config file if necessary.

config.toml:

baseurl = "https://example.com"
languageCode = "en"
title = "Hugo Kiss theme"
theme = "kiss"
copyright = "&copy; <a href=\"https://github.com/ribice\">Emir Ribic</a> 2017"
disqusShortname = "shortname"
googleAnalytics = ""
# Number of posts per page
Paginate = 5
enableRobotsTXT = true

[params.rss] # Adding this tag enables RSS feed

includeContent = true # Includes whole content in rss
authorName = "Emir Ribic" # Author full name
authorEmail = "[email protected]" # Author email

[params.assets]
customCSS = ["css/custom.css"]

[params.info]
adsense = "" # Adsense ID (ID only, without ca-pub-)
enableSocial = true # Adds OpenGraph and Twitter cards
homeTitle = "" # Title for home page
poweredby = true # Adds powered by hugo and kiss below Copyright
related = true # Includes related articles at the bottom of the article


[params.opengraph.facebook]
admins = [] # array of Facebook IDs
appID = ""
pageID = ""

[params.opengraph.twitter]
page = "" # Twitter Page username. If not set, params.social.twitter will be used.

[params.social]

twitter = "ribicemir"
github = "ribice"
email = "[email protected]"
linkedin = "ribice"
facebook = "ribice"
instagram = ""
codepen = ""

[params.matomoAnalytics]
siteID = 1
rootURL = "//matomo.example.com/"

[taxonomies]
tag ="tags"

[blackfriday]
hrefTargetBlank = true

To change color of titles, add in static/css/custom.css

.content h1,
.content h2,
.content h3,
.content h4,
.content h5,
.content h6 {
    color: #F52AA3; // Custom Color
}

To align images, add #c for center, #r/l for right/left.

![](/img/1/image.jpg#c)

Add sections

Links can be added to the navbar (bellow the blog name and social links). There are two positions:

  • [params.sections_left] that will add links in the left side (under the blog title)
  • [params.sections_right] that will add links in the right side (under the social links)
[params.sections_left]
"/special-page" = "Special page"
"https://example.com" = "Example"

[params.sections_right]
"http://example.com/special-page" = "Example"

Favicons, Browserconfig, Manifest

It is recommended to put your own favicons

  • apple-touch-icon.png (180x180)
  • favicon-32x32.png (32x32)
  • favicon-16x16.png (16x16)
  • mstile-150x150.png (150x150)
  • android-chrome-192x192.png (192x192)
  • android-chrome-512x512.png (512x512)

into /static. They're easily created via https://realfavicongenerator.net/.

Customize browserconfig.xml and site.webmanifest to set theme-color and background-color for example.

Related Articles

To include related articles in the bottom of the content, set params.info.related to true. By default up to 5 articles will be shown (can be changed by cloning related.html) and only older ones.

To change the behaviour of how related articles are generated, check official docs on Related Content.

Single Page Configuration

tags: ["Android", "Apple", "iPhone"] # Adds tags to the post
image: https://example.com/img/1/image.jpg # Cover used for OpenGraph and Twitter Cards
adsenseTop: true # If adsense property is set (params.info.adsense) include an ad above content
adsenseBottom: true # If adsense property is set (params.info.adsense) include an ad below content
hidden: true # If true, page will not be shown in the list view

Build

hugo server

You can go to localhost:1313 and this theme should be visible.

License

Kiss is licensed under the MIT license. Check the LICENSE file for details.

The following resources are included in the theme:

Author

Emir Ribic

kiss's People

Contributors

ribice avatar tanksuzuki avatar tetov avatar midzer avatar russparsloe avatar polyfloyd avatar olehermanse avatar deberon avatar jcaxmacher avatar mateimicu avatar ppjet6 avatar tun avatar fatroom avatar srsudar avatar sttmt avatar

Watchers

Daniel Hahler avatar  avatar

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.