Giter Club home page Giter Club logo

hugomdl's Introduction

HugoMDL

HugoMDL is a multipage responsibe blog/portfolio theme for Hugo. The theme is based on the Material Design Lite sample blog layout.

At present it suits my needs, but feel free to help improve this theme by forking a copy and submitting a pull request.

HugoMDL Homepage Screenshot

HugoMDL Projects Screenshot

 HugoMDL Post Screenshot

Installation

Inside the folder of your Hugo site run:

$ mkdir themes
$ cd themes
$ git clone https://github.com/jchatkinson/HugoMDL

For more information read the official setup guide of Hugo.

(Note for myself) To develop on c9, add the hugo binary to the workspace, then add it to the path using export PATH=$PATH:/home/ubuntu/workspace/hugo To serve the site from c9, cd to site root and use hugo server --bind="0.0.0.0" --port=8080 --watch --disableLiveReload

Configure the Theme

There are a few different places you need to configure. First, check exampleSite/config.toml for an example site configuration file. Here, you can set site-wide options like background, author name, and contact info.

You can also use this file to configure your site's menu system. The stanzas in this file correspond to the top level items in the site navigation menus. You may rename, remove, or add any entries as you see fit.

If you use the suggested entry names listed in the example configuration file, your site's pages will inherit this theme's formatting. The following subsections detail these specialized styles.

About page

Look at the exampleSite\about.md file for an example 'About' page.

Posts

Posts use the following front-matter:

---
title: "First Post"
description: "first post with Hugo website engine"
date: "2015-08-18"
categories:
    - "post"
tags:
    - "meta"
    - "test"
cardthumbimage: "/images/default.jpg" #optional: default solid color if unset
cardheaderimage: "/images/default.jpg" #optional: default solid color if unset
cardbackground: "#263238" #optional: card background color; only shows when no image specified
#cardtitlecolor: "#fafafa" #optional: can be changed to make text visible over card image
"author":
    name: "Firstname Lastname"
    description: "Writer of stuff"
    website: "http://example.com/"
    email: "[email protected]"
    twitter: "https://twitter.com/"
    github: "https://github.com/"
    image: "/images/avatar-64x64.png"
---

cardthumbimage is used as the card media on the front page. If unset, a solid color will be displayed. cardheaderimage is used as the card media on the post page. If unset, a solid color will be displayed. cardbackground is used as the solid color if no image is specified. If unset, the default theme color is displayed. cardtitlecolor is used to modify the default white title color (for instance, if you have a light colored background) author parameters are used to populate the card and post with author's data

Projects

Projects have similar frontmatter to posts.

---
title: "My Project Title"
description: "Description of the sample project" #optional
cardthumbimage: "/images/default.jpg" #optional: default solid color if unset
cardheaderimage: "/images/default.jpg" #optional: default solid color if unset
cardbackground: "#263238" #optional: card background color; only shows when no image specified
#cardtitlecolor: "#fafafa" #optional: can be changed to make text visible over card image
repo: "http://github.com/" #optional: no icon appears if unset
web: "http://github.com/" #optional: no icon appears if unset
date: "2015-08-18"
categories:
    - "project"
tags:
    - "meta"
    - "project"
"author": # used to fill out the project page
    name: "Firstname Lastname"
    description: "Writer of stuff"
    website: "http://example.com/"
    email: "[email protected]"
    twitter: "https://twitter.com/"
    github: "https://github.com/"
    image: "/images/avatar-64x64.png"

---

License

This theme is released under the Apache License 2.0. It uses content from Google's material design lite project, also released under Apache License 2.0.

hugomdl's People

Contributors

bep avatar dmashuda avatar jchatkinson avatar reynoldsbd3 avatar tygerbytes 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

Watchers

 avatar  avatar  avatar

hugomdl's Issues

Background image as multiple tiles or partly seen

First, thanks for the nice theme, I'm in the process of customizing it for my own homepage.

I noticed that the background image does not cover the webpage correctly. The website either shows a part of the image (if the image is hires) or there are multiple copies of the background image tiled together (when image is lower res than screen).

I tracked it back to the commit 5b87410 in static/css/styles.css.

When I change back the comment:
body::before { /*background-image: url('{{ .Site.Params.background }}');*/

to
body::before { background-image: url("/images/background.jpg");

it works again, but of course at the cost of being able to have an arbitrary name for the background image (i.e. the background param in config.toml has no effect). I don't have an elegant solution to fix this, but maybe you do.

Issues with mdlPrimary & mdlSecondary

Hi guys, i was having some issues trying to change the default Grey - Orange MDL palette set.

So, making some adjustments i was able to fix this.

First, changing config.toml:

  mdlPrimary = "red" 
  mdlAccent = "indigo"

and in header.html

<!-- Allow user to choose MDL theme -->
    {{- if .Site.Params.mdlPrimary }}
        {{- $.Scratch.Set "mdlPrimary" .Site.Params.mdlPrimary }}
    {{- else }}
        {{- $.Scratch.Set "mdlPrimary" "grey" }}
    {{- end }}
    {{- if .Site.Params.mdlAccent }}
        {{- $.Scratch.Set "mdlAccent" .Site.Params.mdlAccent }}
    {{- else }}
        {{- $.Scratch.Set "mdlAccent" "orange" }}
    {{- end -}}

I'm not really sure if this is a problem with the version of hugo im using (v0.19 windows x64) or if is another issue, but anyway, changing this i was able to made the palette changes.

Images and nav links throw 404 in theme demo

Hello @jchatkinson

I am one of the maintainers of Hugo Themes and I noticed that currently images and nav links throw 404 errors in the theme's demo.

Your theme demo is published in a subdirectory of the Hugo website.
You need to remove the first forward slash / from all URLs because it points to the host root and Hugo will not be able to generate the correct URL for these assets.

See more at the README of the Hugo themes repo.

For example in exampleSite/config.toml you need to make the following changes:

[params]
  author = "Firstname Lastname"
  avatar = "images/avatar.png"
  background = "images/background.jpg"
  description = "A place to publish my incomprehensible ramblings" #meta description
  image = "images/avatar-192x210.png" #for frontpage profile card
  mdlPrimary = "grey"
  mdlSecondary = "orange"
  website = "example.com"
  email = "[email protected]"
  twitter = "https://twitter.com/firstname_lastname"
  github = "https://github.com/firstname_lastname/"
  linkedin = "https://linkedin.com/in/firstname_lastname/"
  facebook = "https://facebook.com/firstname_lastname/"
  copyrightyear = "2015"
  frontpageposts = 6 #number of post cards to display on frontpage

# Fully customizable header menu
[[menu.main]]
  name = "Home"
  url = "/"
  weight = -200
[[menu.main]]
  name = "Articles"
  url = "post/"
  weight = -180
[[menu.main]]
  name = "Projects"
  url = "project/"
  weight = -160
[[menu.main]]
  name = "About"
  url = "about/"
weight = "-140"

Once you look into the above please let me know.

Thanks.

cc: @digitalcraftsman

Errors on site without expected parameters set

Hello!

$subj, when trying to run this theme against my blog source I get following:

Building sites … ERROR 2018/03/20 16:00:28 Error while rendering "home" in "": template: theme/index.html:4:20: executing "theme/index.html" at <partial "postsnippet...>: error calling partial: template: theme/partials/postsnippets.html:1:30: executing "theme/partials/postsnippets.html" at <first .Site.Params.f...>: error calling first: both limit and seq must be provided

The reason is likely some absent .Site. parameter but you can't tell it from error message, I guess input parameters handling could be improved.
Main page doesn't render, however, single post pages are rendered. hugo version:

Hugo Static Site Generator v0.37 linux/amd64 BuildDate: 2018-02-27T09:15:25Z

"Posts"-block with latest version of hugo

Since we upgraded to the latest version of hugo (0.55.4) we get a "Posts"-block (linking to the posts overview) inside our posts. In earlier version that appeared at the end only when there was set a higher number of frontpageposts than actual posts.

problem with backgrounds when relativeURLs is needed

Hi Jeremy,

I'm struggling to figure out how I can put the generated site (using theme HugoMDL) in a subdirectory. In several places in the template code, you use something like style="background-image: url('{{ .Site.Params.background }}');"

I've tried to explain it in the discuss forum: https://discuss.gohugo.io/t/need-help-understanding-url-conversions/4294/13
Basically when I place the site under a baseurl of http://example.com/subdir/ Some links are broken, which should not happen when relativeURLs is set to true in the config.toml.

Do you have any idea if this can be fixed in the theme?

Cheers

Simon

Enhancement Request: Add support for Disqus

I would like to use your theme for a blog but need support for Disqus on the post template. Please consider adding. Hugo indicates it ships with this support built in, but I couldn't figure out how to add 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.