Giter Club home page Giter Club logo

hugo-theme-casper's Introduction

CASPER theme for hugo

Casper is a single-column theme for Hugo. Ported from Casper theme for Ghost

blog demo : http://vjeantet.fr blog source : https://github.com/vjeantet/vjeantet.fr

Hugo Casper Theme screenshot

Features

  • Google Analytics (optional)
  • Disqus ( can disable comments by content)
  • Share buttons on Facebook, Twitter, Google (can disable share by content)
  • Big cover image (optional)
  • Custom cover by content (optional)
  • Tagging
  • Pagination
  • Menu
  • Syntax Highlighting

Theme usage and asumptions

  • All blog posts are in the post folder (content/post)
  • The homepage displays a paginated list of contents from the post Section (other contents may be added to main menu, see bellow)

Installation

Installing this theme

mkdir themes
cd themes
git clone https://github.com/vjeantet/hugo-theme-casper casper

Build your website with this theme

hugo server -t casper

Configuration

config.toml

BaseUrl= "http://example.com/"
LanguageCode= "fr-FR"
Title= "My blog is awesome"
paginate = 5
DisqusShortname = "YOUR_SHORT_NAME_HERE"
Copyright = "All rights reserved - 2015"
canonifyurls = true

[params]
  description = "Welcome to my website"
  metadescription = "Used as 'description' meta tag for both home and index pages. If not set, 'description' will be used instead"
  cover = "images/cover.jpg"
  author = "Valère JEANTET"
  authorlocation = "Paris, France"
  authorwebsite = "http://vjeantet.fr"
  authorbio= "my bio"
  logo = "images/logo.png"
  googleAnalyticsUserID = "UA-79101-12"
  # Optional RSS-Link, if not provided it defaults to the standard index.xml
  RSSLink = "http://feeds.feedburner.com/..."
  githubName = "vjeantet"
  twitterName = "vjeantet"
  # facebookName = ""
  # codepenName = ""
  # linkedinName = ""
  # stackoverflowId = ""
  # keybaseName = ""
  # flickrName = ""
  # instagramName = ""
  # email = ""
  # pinterestName = ""
  # googlePlusName = ""
  # set true if you are not proud of using Hugo (true will hide the footer note "Proudly published with HUGO.....")
  hideHUGOSupport = false
  
  # Setting a value will load highlight.js and enable syntax highlighting using the style selected.
  # See https://github.com/isagalaev/highlight.js/tree/master/src/styles for available styles
  # A preview of above styles can be viewed at https://highlightjs.org/static/demo/
  hjsStyle = "default"

  [params.social]
    twitter = "your_twitter"

Example : config.toml

Overide author information per page

In addition to providing data for a single author as shown in the example above, author can be overided per page. If a author key in page's frontmatter exists it will be used instead of the default one. Overrides per page can be done by adding author* = "value entry in the front matter. For those pages where you want to omit the author block completely, a .Params.noauthor entry is also available.

Example override author per page file:

+++
date = "2014-07-11T10:54:24+02:00"
title = ""
author = "NickName"
authoravatar = "https://cdn4.iconfinder.com/data/icons/gray-user-management/512/rounded-512.png"
authorbio = "IT software and Security Engineer, Open source enthusiast."
authorlocation = "Paris, France"
authorwebsite = "http://vjeantet.fr"
...
+++

Contents here

Menu configuration

On top right of the screen, a "Subscribe" button is displayed with a link to the RSS feed.

When you define a menu in the main config file, Then a menu button is displayed instead of the subscribe button When the use clicks the menu button, a sidebar appears and shows the subscribe button and all items defined in the main config file

ℹ️ If your added a metadata like menu="main" in a content file metadata, it will also be displayed in the main menu

Example of a menu definition in main config file.

[[menu.main]]
  name = "My Blog"
  weight = -120
  identifier = "blog"
  url = "/"

[[menu.main]]
  name = "About me"
  weight = -110
  identifier = "about"
  url = "/about"

Metadata on each content file, example

+++
author = ""
date = "2014-07-11T10:54:24+02:00"
draft = false
title = "dotScale 2014 as a sketch"
slug = "dotscale-2014-as-a-sketch"
tags = ["event","dotScale","sketchnote"]
image = "images/2014/Jul/titledotscale.png"
comments = true     # set false to hide Disqus comments
share = true        # set false to share buttons
menu = ""           # set "main" to add this content to the main menu
+++

Contents here

Contact me

🪲 open an issue in github

🐦 https://twitter.com/vjeantet

hugo-theme-casper's People

Contributors

aldarone avatar bep avatar bguiz avatar bkbooth avatar bkono avatar caffeineflo avatar chothia avatar derektamsen avatar florian-zeidler avatar fonglh avatar gtoptsid avatar gvangool avatar hholi avatar icenan2 avatar indragunawan avatar james-bowman avatar joelbeckham avatar jramnani avatar jukper avatar kfei avatar maiki avatar miketheman avatar negimic avatar nicolaiarocci avatar seppestas avatar surfacescan avatar tarpdalton avatar uzyexe avatar vjeantet avatar zenithar 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  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

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

hugo-theme-casper's Issues

Class icon-hugo

hey @vjeantet ,
In my pull request i realized that in the screen.css the class icon-hugo has this content:

    content:"\f216";

but "\f216" is the codepen's icon. Is it correct ?

Show categories in main menu

I am using this theme and I've found useful show the categories into the main menu, at least in my specific case. I am wondering if a pull request with this feature is interesting.

Great theme! Congratulations!

Pagination by month, not by count of articles?

I have ported in a number of articles from an old, old weblog and now I have 80+ pages of pagination. Needless to say this isn't an ideal setup.

One thing I've done in previous blogs is have some kind of pagination by month or year. Is it possible in Casper to do this?

Static pages?

Hi @vjeantet

Thanks a lot for porting this theme from Ghost to Hugo. I am a great fan of static pages, Go and the default Casper theme from Ghost, so it's a great combo.

I have made some tests to migrate my page but I stumbled into some issues. First of is the problem that I don't know how to create normal static pages that are not shown as normal posts? Is that possible? I tried to just generate a post directly inside the "content" folder but the CSS is wrong and the text is not centered.

It would be great to be able to create static pages that are not posts, like "about", etc.

Thanks a lot and keep up the good work! 👍

Regards,
Benjamin

css class file names are not matching

Hey,

for content, you are getting the class name as <article class = {{.Type}}>. But it get the class name as 'posts' but css has class name as .post. So the posts are not formatted properly. I hardcoded for now, but something you can look into. I can PR if I get some time to look into it.

Thanks a lot for this theme.

cover image on post's and page's

Not really an issue more of a question. But I'm having a hard time figuring out how to display the 'cover' image that is on main page on the individual post's and page's.

The cover displays on 'tag' pages, and I want to display the cover image like it is on the tag pages (kind of shortened with the 'tag' overlaying the shortened image) on the post/page page's with the post/page title overlaying the image.

Thanks for your input and thanks for the theme.

Can't hide share buttons on "About me" page

Despite setting noauthor = true share = false share buttons are still there, and things look somewhat broken. Here is the screenshot:

screen shot 2016-09-05 at 14 49 56

Did I config something wrong in parameters for about.md, even though I think thing is pretty straightforward .

footer partial does not render html entites

The footer partial does not support rendering HTML Entities. When the site config file contains the following:

Copyright = "&copy; Example, Inc."

The rendered result contains the literal "© Example, inc." text.

The rendered output for the footer partial should contain "© Example, inc.".

Fails when no author match in /data

As in the Hugo themes demo:

ERROR: 2016/04/08 22:36:36 template.go:131: template: theme/partials/li.html:10:21: executing "theme/partials/li.html" at <index .Site.Data.aut...>: error calling index: value is nil; should be of type string in theme/partials/li.html
ERROR: 2016/04/08 22:36:36 template.go:131: template: theme/partials/li.html:10:21: executing "theme/partials/li.html" at <index .Site.Data.aut...>: error calling index: value is nil; should be of type string in theme/partials/li.html
ERROR: 2016/04/08 22:36:36 template.go:131: template: theme/partials/li.html:10:21: executing "theme/partials/li.html" at <index .Site.Data.aut...>: error calling index: value is nil; should be of type string in theme/partials/li.html
ERROR: 2016/04/08 22:36:36 template.go:131: template: theme/partials/li.html:10:21: executing "theme/partials/li.html" at <index .Site.Data.aut...>: error calling index: value is nil; should be of type string in theme/partials/li.html
ERROR: 2016/04/08 22:36:36 template.go:131: template: theme/partials/li.html:10:21: executing "theme/partials/li.html" at <index .Site.Data.aut...>: error calling index: value is nil; should be of type string in theme/partials/li.html

confusing error in pagination, perhaps from inadequate setup

I just installed Hugo and I just installed Casper and I'm sort of bumbling around trying to find a theme to my liking, especially one that does pagination.

In setting up Casper I ran across this error in the log files. There are pagination pages created, but most of them have no content. (The first one works.)

Mostly trying to figure out what I did and how to fix....thanks for any help.

ERROR: 2015/07/14 Expecting to find a template in either the theme/layouts or /layouts in one of the following relative locations [post/post.html _default/post.html theme/post/post.html theme/_default/post.html]
ERROR: 2015/07/14 Unable to render [post/post.html _default/post.html theme/post/post.html theme/_default/post.html]

'if isset .Site.Params "paginatedSections"' in 'home-content' doesn't work.

Hi,
Although I've set 'paginatedSections' parameter in config.toml to have content from two different sections on the index page but it seems the check to see if 'paginatedSections' is set or not doesn't work and the 'else' get's executed which falls back to rendering contents in 'post' section only.
Here's how I've set the paginatedSections:

[params]
  paginatedSections="post test"
  description = ""
  cover = "images/cover.

I've tried to fix it myself but had no luck in doing so. Just trying to figure out what's wrong, I tried to see if if isset .Site.Params "paginatedSections" is really working, changing 'paginatedSections' to some other variable like 'description' works as intended.
I couldn't figure out why other variables can be checked if they're set or not, but not 'paginatedSections'.
Any help would be appreciated.

Here's the code that causes the problem.

        {{ if isset .Site.Params "paginatedSections" }}
            {{ $.Scratch.Set "paginatedSections" .Site.Params.paginatedSections }}
        {{ else }}
            Here we are ! <!-- Just to check if 'else' gets executed -->.
            {{ $.Scratch.Set "paginatedSections" "post" }}
        {{ end }}```

icon font not found

here's my blog http://john-qin.github.io/

I test it in dev, everything works. after I uploaded it to github, the arrow and subscribe icon are not showing. It only shows a tiny square. seems like the icon font is not found. how do I fix it?

GMaps

Is there a way to embed a Google Map in a post? Could anyone share some advices on how to do this?

Displaying author for multiple author

I have a problem with displaying author info in the post index when using multiple author.

I have correctly placed yaml file to configure an author as per README.

But the current code for displaying the author did not work.

I replaced the highlighted code with the following, and now the author is displaying correctly.

{{$author := or (index .Site.Data.authors .Params.author) .Site.Params.author }}

The issue is that $author is .Site.Params.author even when the multiple author is configured.

I have confirmed that the innermost conditional is being reached. But still, $author defined on line 10 is not being overwritten.

Any ideas?

Add og:image to header file

Currently when posts, pages and the home page are shared to social media, the image pulled as the featured image is the first image found on the page. This image should be the cover image/featured image for the post.

Fix: Add the following lines to layouts/partials/header.html

{{if .Params.image }}
   <meta property="og:image" content="{{ .Site.BaseURL }}{{.Params.image}}"/>
{{else}}
    {{if .Site.Params.cover}}
        <meta property="og:image" content="{{ .Site.BaseURL }}{{.Site.Params.cover}}"/>
    {{end}}
{{end}}

Genericons case mismatch

First uppercase on file sysem
All lowercase in screen.css

Fails to load on file servers that care about this stuff.

Subscribe doesn't work with no menu

There is a CSS-class that triggers a menu on the subscribe-button.

Maybe it's best to have a "menu conditional" also on the Javascript snippet that registers the onclick handler?

Posts in the root directory

My current ghost blog has urls at the root. Like www.mysite.com/post-slug. But this theme assumes that all the posts are under /post/post-slug. I want the same url structure as per my current blog structure.

How can I achieve this with this theme? Which files needs modifications? Can someone provide some guidance.

Thank you so much.

Embedding stackoverflow

Hi,
I am new to Hugo and HTML generally. I was wondering how I could embed the stackoverflow logo among the social logos on the cover page?

Hugo > 0.32.4 Layouts Issue

I'm not sure if its only my environment/site, but building it with hugo >= 0.33 results in the home page not rendering correctly. I haven't had a change to look into it more, but I thought I would raise the issue for people upgrading their hugo versions.

I'll add more info as I test things out. Right now hugo 0.32.4 works fine.

The layout logic changed, so that is probably part of the issue.

Disable more options

Hi

Great template thanks.

Is there a way to disable more options for instance bio. In my about page I don't want author, bio etc.

Twitter card should include cover image when present

PR #96 introduced a bug where the site build would throw errors when a cover image was specified.

The cause of the bug was that I had misunderstood what the with expression does in Hugo templates. I thought it was a simple null check, but it also changes the current context (the dot .), as well.

My apologies for the error. A PR is coming shortly that fixes this issue.

Codepen Link

What do you think to add codepen link in the social area ?

Twitter card

The theme doesn't have the twitter card meta tag.

Happy to make a PR if others need it.

How to limit the width of image

Now sure how, but I assume there's config that can be applied, sometimes the image layout is out of control and frontpage looks bad.

Thanks.

Limit text preview

Does anyone know of a way to limit the amount of text that is shown in the preview?

I don't know much about web development, so there might be a simple work around.

Thanks!

Build Error

I copy the entire config and Metadata in the readme, but hugo build error, the msg is as blow.

ERROR: 2017/05/14 11:03:43 template.go:131: 
template: theme/partials/semantic.html:39:31: 
executing "theme/partials/semantic.html" at <.Site.Language.Lang>: 
can't evaluate field Language in type *hugolib.SiteInfo in theme/partials/semantic.html

I check the error place, the code seems that I miss the param in the config. I try something param still not work.

  "alternateName": {{ .Site.Language.Lang }}

Finally I delete this line, then build error disapear.

Twitter card partial template throws error when cover image is not set

If you don't set Params.cover in your config file, then the twitter_card.html partial will throw errors during site build.

The theme lists cover images as optional, so we should test for the cover image setting before applying it within the template.

Here is an example of the build error:

Started building sites ...
ERROR 2017/10/15 10:40:53 Error while rendering "home": template: theme/index.html:1:3: executing "theme/index.html" at <partial "header.html...>: error calling partial: template: theme/partials/header.html:8:7: executing "theme/partials/header.html" at <partial "twitter_car...>: error calling partial: template: theme/partials/twitter_card.html:11:64: executing "theme/partials/twitter_card.html" at <relURL>: wrong number of args for relURL: want 1 got 0

PostCSS / Sass assets?

Is there a version of this theme which has the postcss / sass version of the files.

Its a great theme but i'd like to make changes to it and recompile it again for my liking. Would be useful to know if there is a PostCSS / Sass version of the assets to work from.

Thanks

Build error

Hi, I'm new to go and don't really understand this error message. Is it related to the Casper theme or the Hugo framework?

$ hugo --theme=casper
Started building sites ...
ERROR: 2017/02/19 11:12:48 general.go:236: theme/partials/semantic.html is an incomplete or empty template
Built site for language en:
0 draft content
0 future content
0 expired content
2 regular pages created
2 other pages created
0 non-page files copied
2 paginator pages created
0 tags created
0 categories created
total in 167 ms

Thanks.

simplify authors management

authors management in Site, Page and Data is too complex, will symplify it to Site and allow override per Page

Publishing date on mobile

In mobile (tested with Android) the publishing date doesn't appear. Is it the expected behaviour?

BaseUrl does not allow subdirectory

When using baseurl = "http://example.com/blog" or baseurl = "http://example.com/blog/", the links in the HTML are like this: http://example.com/blogcss/screen.css.
Please allow subdirectories. Merci!

Issue with syntax (code) highlighting in markdown

I found a weird issue when using Golang and https://highlightjs.org/ syntax highlighting.
If I specify

```go
...

then code highlighting will not use the design as specified in hjsStyle = "<style>". Basically it will look like:

func test(i int) string {
   fmt.Println("test only")
}

If I do not hint "go" for highlighting, then the formatting style will basically work (and look like other code blocks) but does not cover 100% Go syntax.

Can you reproduce this behaviour?
Thank you.

Unexpected cover image behavior

I have difficulties managing the cover image and could use some guidance.

When I specify an image in cover, under [params] in the config.toml, I don't get the same result as on the demo site (http://vjeantet.fr/). On the demo site, the image is shown "full" screen while on my test site, the picture is shown as all width of the screen but about 25% of the hight. I tried with the same picture as on the demo site (cover_polenord).

I have no clue how to get the cover effect of the demo.

Jmm

What is customHeaderPartial in the header.html ?

I see a line at the end of the section in the header.html file.

{{ if .Site.Params.customHeaderPartial }}
    {{ partial .Site.Params.customHeaderPartial . }}
{{ end }}

There isn't anything documented about this. Can someone provide some detail on this?

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.