Giter VIP home page Giter VIP logo

hugo-kiera's Introduction

Kiera Theme for Hugo

Kiera is the theme specialized in presenting writing layout like long essay or technical writing.

It was originally developed by b. avianto and now maintained by funkydan2

Main Features

  • 4 image placements with figure support using shortcodes.
  • Excellent code highlight support thanks to Hugo Chroma.
  • Use Font Awesome for icons (Cloudflare CDN)
  • Utilize normalize.css for consistent styling (Cloudflare CDN)
  • Use Google Fonts: Ruda (serif) and Roboto Slab (sans-serif)
  • Disqus comment loaded on demand

Demo

Live demo: https://themes.gohugo.io/theme/hugo-kiera/

Installation

Change into Hugo directory then:

$ cd themes
$ git clone https://github.com/funkydan2/hugo-kiera.git kiera

More detailed instruction at Hugo Docs.

Using git submodule is recommended instead of git clone as per recommendation from Netlify.

$ cd themes
$ git submodule add https://github.com/avianto/hugo-kiera.git kiera

Configuration

For reference look inside folder exampleSite for content example and config.toml.

Important: don't delete or move archetypes folder from root unless it is necessary. Current Hugo priority lookup will look into this folder first before any other archetypes folder and could cause problem.

Recommended optional config.toml:

pygmentsCodeFences = true

disqusShortname = "" #Disqus shortname
googleAnalytics = "" #Google Analytics ID

[author]
    name = ""       #Author name
    github = ""     #Github username
    gitlab = ""     #Gitlab username
    linkedin = ""   #LinkedIn username
    facebook = ""   #Facebook username
    twitter = ""    #Twitter username
    instagram = ""  #Instagram username

[params]
    tagline = "the tagline for this website"

Main Menu

Add regular non-posts related page (eq. About page) to main menu by adding these lines to the page front matter:

TOML:

menu = "main"
meta = "false"

YAML:

menu: "main"
meta: "false"

meta refers to time, categories, tags and reading time which are not necessary for this kind of page.

For posts listing page, add _index.md file inside content\posts folder with these front matter:

TOML:

+++
title = "Posts"
menu = "main"
weight = "10"
+++

Categories & Tags

Both can be used, also can use only one of them or neither.

Images

Kiera supports adding image as img tag with standard Markdown:

![Image Title](link/to/image)

to wrap it with figure use:

{{< figure src="/link/to/image" >}}

The basic placement is 100% width within content and scaled accordingly in smaller screen. Recommended width for image is 600 pixels minimum.

Kiera supports different placement by adding:

  • For img, use ![Image Title](link/to/image#placement)
  • For figure, use {{< figure src="/link/to/image" class="placement" >}}

There are 4 configured placements

  • #full or class="full" for full width.
  • #mid or class="mid" for middle:
  • #float or class="float" for float left:
  • #float-right or class="float-right" for float right:

Code Hightlight

Using fenced code with Chroma support.

Font Awesome icons

For usage, refer to Font Awesome.

Disqus On Demand

Disqus comments are loaded on demand, by clicking View Comments button.

Support and Pull Requests

Please use GitHub issues to file bugs. If you can help fixing bugs, optimize the theme or adding features, please do pull requests, I really love to see what others can come up with.

TO DO

  • /layout/_default/terms.html needs some works, it functions now, barely.
  • Adding some user-oriented behavior using JavaScripts.
  • Lazyload images.
  • i18n support

hugo-kiera's People

Contributors

avianto avatar funkydan2 avatar kpym avatar sijad avatar

Stargazers

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

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar

hugo-kiera's Issues

Features request

  • load comments automatically when browser scroll down to the post bottom.
  • allow to disable comment in some pages via page's parameter.

Thanks the awesome theme 👍 , I am using it to dress my blog.

out of memory

I tried to deploy on openbsd 6.6 and received an out of memory error.

Make js optional

Hi,

Awesome theme, thank you very much. I'm migrating my blog post to Hugo and going to use this theme. My current blog is here: arslan.io

I saw this:

Adding some user-oriented behavior using JavaScripts.

Just wanted to add if you can make this optional. This theme is super fast, and would prefer if you don't bloat it going forward. Just an opinion. Thanks!

archive this repo

Hello,

I'd to know if could archiving this repo as isn't being maintained. When I started using this theme I got confused thinking this was in active development as it ranked first on google while looking for hugo-kiera.

Also, as you can notice there are some confused users sending PRs to this repo.

Regards,

Is this project still maintained

Hi @avianto,

Just wondering if this project is still being maintained. There are a number of outstanding PR's which haven't been either merged or declined and also issues which are unanswered.

The Hugo Themes team is in the process of updating their guidelines for accepting and keeping themes in the showcase. If you're not wanting to continue maintaining this theme, I'm happy to submit my forked version, which has been updated to work with version 0.55.0 and later.

Google Analytics Support

I had to add the following to the header.html partial:

{{ template "_internal/google_analytics_async.html" . }}

Once I did that everything worked. Looks like it was just left out from the base template?

Tags Page

The tag page is being created ok. But I don't see any way to access it other than entering the URL of it by hand: <base_url>/tags. This causes the /tags/index.html page to show.

Is there a way to put this on the main menu?

Thanks in advance!

How to display (post)-images in main page (list)?

Hi,
Your theme is fantastic for beginners like me. Thanks a lot!
I have insert images in my articles (not thumbnails!) . Every works fine. But on the index page, where a the list of posts, the images does not appears. Can you tell me what I have to change that the images appears in the main list as in the article? Thank you for the help.

Ex.
Actually:
Header


#1 Post Good Morning (title)
Wish you a good day!
xxxxx xxxx
xxxxxxxxxxxxx
xxxxxxxxxxxxxx(text)

#2 Post Good Night
Carpe noctem
xxxxx
xxxxxx
xxxxxx (text)


And what I want:
#1 Post Good Morning (title)
Wish you a good day!
xxxxx xxxx
image
xxxxxxxxxxxxxx(text)

#2 Post Good Night
Carpe noctem
xxxxx
image
xxxxxx (text)

How to solve 'Expected name at 2:1' error ?

[
{{ range $index, $page := .Site.Pages }}
{{- if ne $page.Type "json" -}}
{{- if and $index (gt $index 0) -}},{{- end }}
{
"uri": "{{ $page.Permalink }}",
"title": "{{ htmlEscape $page.Title}}",
"tags": [{{ range $tindex, $tag := $page.Params.tags }}{{ if $tindex }}, {{ end }}"{{ $tag| htmlEscape }}"{{ end }}],
"description": "{{ htmlEscape .Description}}",
"content": {{$page.Plain | jsonify}}
}
{{- end -}}
{{- end -}}
]


Error is at line 2

Error when deploying theme through Netlify

I get thrown this error when I try to connect my repository to Netlify:

ERROR: 2018/01/22 02:45:31 general.go:212: Error while rendering taxonomy terms for category: template: /opt/build/repo/themes/hugo-kiera/layouts/_default/baseof.html:9:7: executing "main" at <.Content>: can't evaluate field Content in type *hugolib.Node

Can the Hugo-Kiera theme not be built with Netlify?

[Question] Pagination in tags

Hi! I'm trying to migrate my blog to this theme (simple and beautiful, BTW!) and there is a behaviour I don't understand, and I don't find in the documentation.

In the "/tags" url I can see all the tags in a single page, but at the bottom, the pagination is displayed (see screenshot). Is this a bug or just a feature I don't understand? Any hint will be very appreciated! :D

Thanks!

pagination

Use of Your Template

Hey there,

I wanted to make you aware of a site that I put together with your BEAUTIFULLY AWESOME template. :) I saw it and knew I had to use it for my blog. Here it is, if interested:

https://blog.superdotnet.run/

Thank you for your efforts here. Very well done!
-Michael

Update font

I need some font that not supported in this fontawesome version, so how do I upgrade it?

Brilliant design of different figure styles!

I just want to say that I'm very impressed by the cleverness of img[src*="full"] in CSS for <img src="...#full">. I also love the elegance of the CSS rules for full width images:

.full-image, figure.full img, img[src*="full"] {
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}

I have been looking for something like this for long (but never done any serious research about it), and I'm excited to learn these tricks. Thanks a lot!

(Not really an issue -- just a praise, so feel free to close it 😀 )

Consider using .Site.RegularPages

{{ range $index, $page := first 10 (where .Data.Pages "Section" "in" .Site.Params.mainSections) }}

Ref. your home page template. I think what most people expect is that you list only "regular pages" on the home page, so I would consider replacing .Data.Pages with .Site.RegularPages in that particular template.

List of issues (Kiera version) so far

  1. Tags link work as normal when accessed from homepage. However, it breaks when accessed from anywhere else. Same goes for categories.
  2. Posts created from ‘Create Post’ addin in Rstudio is saved in a different folder (“Post” folder instead of “Posts” folder). The ‘Posts’ link on the homepage directs you to the “Posts” folder, meaning every post you created from the ‘Create Post’ function cannot be viewed normally unless accessed through ‘Tags’ or ‘Categories’.

Granted, I am only a newbie programmer who only experimented with this template for 6 hours, the issues might already have solutions to it.

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.