Giter Club home page Giter Club logo

hugo-theme-massively's Introduction

Hugo Theme Massively

e2e tests

Massively theme ported from HTML5 UP for use with the Hugo static site generator.

Demo

https://hugo-theme-massively.netlify.com/

Setup

Configuration

See the demo's configuration as an example:

https://github.com/curtiscde/hugo-theme-massively/blob/master/exampleSite/config-prod.toml

Hugo Internal Templates

The theme currently also supports the following "internal templates" supplied by Hugo

Cover Image

The cover image URL is hard-coded, therefore to replace this add an image to the following location in your Hugo application:

/static/images/bg.jpg

Supported Languages

Custom Front Matter

  • disableComments - If set to true this will disable comments on the post when Disqus is enabled.

Custom <head>

If you wish to add custom CSS overrides, or other elements in the <head>, then this can be done by adding the following to the root of your Hugo app: layouts/partials/htmlhead.custom.html. Any content added to this file will then be injected at the end of the <head>.

Development

Example Site Production Deployment

Production Deployment

$ cd exampleSite
$ hugo --config config-prod.toml

Running Locally

$ npm i
$ npm run hugo-dev

OR

$ cd exampleSite
$ hugo server --themesDir ../..

Original Theme Credits

License

This hugo theme is licensed under the Creative Commons Attribution 3.0 License.

Read More - LICENSE

hugo-theme-massively's People

Contributors

boamaod avatar curtiscde avatar dependabot[bot] avatar erickcastellanos avatar jazzi avatar kaligule avatar muxmuse avatar niicojs avatar pierrepln avatar pmviva avatar rogerselwyn avatar ruifmaxx avatar seshaljain avatar shortword avatar smirl avatar tfabritz avatar vavdb 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

hugo-theme-massively's Issues

mobile version lacks menu button on pages / posts

Possibly a feature request, maybe a bug:

Expected behavior:

  • Menus should show up on pages like it does on the start page

image

Observed behavior:

  • it does not show on pages / posts other than the start page

image

Could try to fiddle with it, but am a bit at a loss where that behavior of the menus is specified. Pointers?

Thx
N

Max pages = 10, hiding old posts

Ideally, a shifting behaviour of visibility of pages available to select in the paginator code would be great. In the interim, a higher page limit and guidance to up the number of posts per page on the README would be a quick win.

Change root url code

Lines like this use / as the root directory, however, this doesn't support sites that are not the root.

Instead of <a href='{{ "/" | relURL }}'> these could go back to the baseURL methodology to correctly fix the location in these circumstances.

Files where this is an issue:

  • layouts/partials/header.html
  • layouts/partials/nav.html

Enhancement: Utilize Hugo's disqus template

In the same vein as issue 37, I noticed that Hugo provides an internal disqus template which, if we aligned with it, would make maintenance life easier in the long run.

However, using this template diverges a bit from the previous behavior of the package. Previously, disqus would only show up in massively if the front matter included a 'disqusid'. This differs from how Hugo handles it internally, as well as other packages I've used for Jekyll and Wordpress, which all show it on every post/blog page unless otherwise turned off. If nothing else I'd push for alignment with Hugo as being the driving factor for this proposed change.

As with my other filed issue, I've created a branch in my fork and will submit a pull request for review. Please let me know if you have any questions or concerns.

Mike

Possible to use a post image from a Page Resource?

First off, thank you for the really nice theme! I'm still trying to wrap my head around Hugo (coming from the python world) and I think I'm slowly getting there...
I recently discovered Page Bundles and really like the idea of organizing my images in the same folder as a post rather than placing them in the static folder. What I don't know how to do is - I'd like to set the image parameter in the YAML front matter to an image from the Page Bundle (i.e. from the post directory). I tried simply giving a path, which didn't work. I also tried renaming the file by using the resources parameter, but to no avail.
Is this possible to do? Do I need to overwrite the way the theme is loading the image from that parameter to make this work?

Any help or pointers are welcome!
Cheers,
Omri

Supported Hugo version

config.toml defines a maximum supported version of Hugo 0.94.2.
What about newer versions?
Are there known issues or newer version simply haven't been tested, yet?

[module]
  [module.hugoVersion]
    min = "0.54.0"
    max = "0.94.2"

config.toml

Paginate: 'pager size' must be a positive integer

Hild sites returns avery time the same error:
Building sites … ERROR 2018/04/12 22:03:45 Error while rendering "home" in "": template: index.html:15:21: executing "index.html" at <.Paginate>: error calling Paginate: 'pager size' must be a positive integer

Massively Demo on Hugo website contains 3rd party tracking

Hello again @curttimson

Same as your other theme this theme's demo also has third party tracking enabled.

     \hugo-theme-massively\exampleSite\config.toml:
        googleanalytics = "UA-113904582-3"
        disqusShortname = "hugo-massively"

To fix this issue please leave the above parameters blank i.e.

     \hugo-theme-massively\exampleSite\config.toml:
        googleanalytics = ""
        disqusShortname = ""

Once you look into this please let me know.

Thank you!

ref: gohugoio/hugoThemes#535

Hide dates & comments on posts

Copied from a post on #25 from @baianomauricio:


I apologize for hijacking this thread with a different question but I thought to be better to use this one and not open a new thread with a simple question.

Is there a better way to remove the dates throughout the site then simply deleting the lines referring to the dates (lines 6-9) on partials/posts/features.html ?

Another question is how to disable comments but there are probably many posts on stack overflow about it. I wonder if there is a [params] markdown to disable dates and comments. Something similar to the attached screenshot.

screen shot 2018-07-04 at 1 02 58 pm

I can't finish this without thanking you for the great template you have put together and contribution to the community.

Change base url to different page

I would like to have a different page (for example, a generic-page) as the home page in the base URL that provides info about the site. Then, I would like to have the posts in another tab in the navbar.

Current behaviour: The posts list appear in the base url.

Activating the 'Active' Class Based On The Current URL (Page2,Page3 Etc)

Hi All!

I have been developing my blog using this theme and have added a fair few amendments to make it work for me. These include:

  • Making the pagination sort ByDate across all pages.

  • Adding jQuery to assign the 'Active' class in the nav bar to whichever page you're on.

This means when you click on an option in the nav bar (or just click 'next' or 'previous') the nav bar will have the correct option highlighted for which page you're on.

It was just this line of jQuery to add in 'jquery.min.js'

$(document).ready(function() {var pathname = window.location.pathname;$('.links > li > a[href="'+pathname+'"]').parent().addClass('active');})

I thought i should add this here as this took me a while to figure out and could save people a lot of time!

Working example > www.billiewillytravel.co.uk

Minify CSS

main.css is currently not minified in production.

Add gulp tasks to minify.

Change palette colours?

I've been very impressed with how well this theme works for my podcast blog dragonsnotincluded.github.io, but I can't figure out how to change the button hover palette colour. I've found references in header.scss to .logo CSS which look like it could maybe be manually edited to change the blue hover colour to, say, red. Is there a better way of changing palette colours, or something undocumented I could put in the config.toml? I'd rather avoid manually editing the generated main.min.css to change # 18bfef

Disable comments on specific posts

Pre v4.0.0 it was possible to hide comments on specific posts by not including a disqusid in the front matter.

Add the ability to hide comments for specific posts using the front matter.

Please update Font Awesome

Hi,

Firstly, thanks a lot for the theme. Although it doesn't follow the same strategies of taxonomy and content management as other themes it's a very beautiful theme for portfolio scenarios, such as my acting portfolio web-site (shameless plug, https://teatro.1407.org/ )

image

However there are lot's of missing graphical elements from Font Awesome, as it has evolved a bit, and currently relevant icons such as Mastodon are missing so I had to overload them with a fresh download from the Font Awesome site, and placed them in my local assets path, but it's not pretty or very manageable.

Could you possibly integrate an update in this theme as my current know-how on hugo and themes is still a bit green?

Best regards,
Rui Seabra

Unable to find archetypes directory for theme "hugo-theme-massively"

Issue raised via disqus:

Hi, I have tried your theme (which looks awesome), but the Hugo can´t build the site. Not even when using your exampleSite files. When using the files, it builds the site but just in command console, not actually on site, when not using the files -
when creating new content, this happends:
"ERROR 2018/05/31 19:12:13 Unable to find archetypes directory for theme "hugo-theme-massively" at "C:\Users\Lev\Desktop\Hugo\Sites\lev\themes\hugo-theme-massively\archetypes"

When trying "hugo server", this happends:
Building sites … ERROR 2018/05/31 19:13:11 Error while rendering "home" in "": template: theme/index.html :15:21: executing "theme/index.html" at <.Paginate>: error calling Paginate: 'pager size' must be a posit ive integer
Total in 52 ms
Error: Error building site: logged 1 error(s)

I´m really excited to use your theme, but I´m getting a bit frustrated. :-D (I acknoledge, I´m a beginner with Hugo.)

Thanks for help,
Lukas

Using Hugo Version 0.41

Module "massively" is not compatible with this Hugo version

I followed the Quick start guide for Hugo but when I start the server I get this error:

✗ hugo server -D                  
WARN 2023/02/02 20:46:38 Module "massively" is not compatible with this Hugo version; run "hugo mod graph" for more information.
Start building sites … 
hugo v0.110.0+extended darwin/arm64 BuildDate=unknown
WARN 2023/02/02 20:46:38 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2023/02/02 20:46:38 found no layout file for "HTML" for kind "taxonomy": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.
WARN 2023/02/02 20:46:38 found no layout file for "HTML" for kind "section": You should create a template file which matches Hugo Layouts Lookup Rules for this combination.

                   | EN  
-------------------+-----
  Pages            |  6  
  Paginator pages  |  0  
  Non-page files   |  0  
  Static files     | 18  
  Processed images |  0  
  Aliases          |  1  
  Sitemaps         |  1  
  Cleaned          |  0  

Built in 71 ms
Watching for changes in /Users/D/Documents/V-site/{archetypes,assets,content,data,layouts,static,themes}
Watching for config changes in /Users/D/Documents/V-site/config.toml, /Users/D/Documents/V-site/themes/massively/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop

In the guide I replaced 'ananke' with 'massively' and the github link with https://github.com/curtiscde/hugo-theme-massively.git

as per suggestion in the error, hugo mod graph returns:

(base) ➜  V-site git:(main) ✗ hugo mod graph
WARN 2023/02/02 20:56:15 Module "massively" is not compatible with this Hugo version; run "hugo mod graph" for more information.
project massively
(base) ➜  V-site git:(main) ✗ 

It does run, but not as it should:

Screenshot 2023-02-02 at 21 03 18

What am I doing wrong?

Two titles inside head tag

The htmlhead.html partial outputs two titles in the head tag

<title>{{ if not .IsHome }} {{ .Title }} &middot; {{ end }} {{ .Site.Title }}</title>
<title>{{ .Title }}</title>

A possible fix is to make the partial output the following:

<title>{{ if eq (.Title) (.Site.Title) }}{{ .Site.Title }}{{ else }}{{ .Title }} &middot; {{ .Site.Title }}{{ end }}</title>

Blog Posts Date / 'Rating' Ordering - Pagination

Hi There

First of all, this is an awesome theme! I've now almost created my entire blog on here, i did some tests depolying to netlify and it looks great. Good job!

I've added shortcode html to allow me to put in iframe links for google maps, and also add videos etc into the markdown files. This also all works fine.

The only thing i cannot get right with your theme, is the blog posts ordering (espeically when it comes to pagination)

If i have all the posts on one page (about 30 posts) then i can order them perfectly by using the 'sort by rating'. This way each post can have whatever date it wants, and still be ordered however i choose.

This is excellent, but seems to fall apart when it comes to Pagination. I have the 30 blog posts split between 4 pages. Now the posts are all on page1,2,3,4 they start to not behave the same way when using the 'sort by rating' tactic instead of date.

Has anyone else had this problem / tackled it? any ideas would be very welcome!

Thanks all.

Hardcoded Google Analytics tag, and internal templates

While debugging an issue I found that the Google Analytics (GA) partial includes a hardcoded tag. This seems like it might be something leftover from initial development, or debugging.
hugo-theme-massively/layouts/partials/scripts/googleanalytics.html - Line 3

When investigating a fix for this I found that Hugo provides internal templates for GA. As an added bonus they have updated these recently to maintain GDPR compliance. So, if we can leverage these it is less work for us long term.

(I found this while looking in to issues I was seeing with Disqus which has a similar template available. That said, there will likely be some discussion on handling that, so I'll file another issue for it.)

Mike

Loading animation not playing

First of all, great port of this theme. When I was working with this for my own site, I noticed what looks like a small bug that prevents the intro animation from playing:

It looks like https://github.com/curtistimson/hugo-theme-massively/blob/develop/layouts/index.html#L2 and https://github.com/curtistimson/hugo-theme-massively/blob/develop/layouts/_default/single.html#L2 add the class is-loading to the body. However main.js is looking for the class is-preload
https://github.com/curtistimson/hugo-theme-massively/blob/develop/static/assets/js/main.js#L113-L118

When I changed the body element to be of class is-preload, I'm seeing the animation like I expect.

Help Adding Menu Items

Hello!

Apologies if this is documented somewhere already, but could you let me know if there is something different I should be doing to add items to the menu for this theme? From what I can tell these are generated in nav.html here - https://github.com/curttimson/hugo-theme-massively/blob/master/layouts/partials/nav.html

Normally, to add an item to the top level menu of a Hugo theme I think I would add some config in the config.toml file that let's me set some menus and refer to pages such as /about or another external link.

Is there currently a way to do this? It seems like the menu items will appear for multi-language sites but I'm wondering what the simplest way to just add a new link to a page or external link might be.

Thanks!

FR: Add taxonomy support

  • Enable list viewing per category and tag
  • (Optional and off by default) Showing of tags and categories in summaries
  • (Optional and off by default) Showing of tags and categories in single view

Date Formatting

Hi everybody,

I'd like to have date formatting. Since current dates always include english names for the weekdays this is a way to get around that while at the same time allowing to use specific country formats.

Since it is only a small change with a few lines of code I already submitted a pull request. Hope that was ok.

What's the best way to share changes?

Hello,

Thanks for all the work you did to migrate this theme to Hugo.

I recently used this theme on a personal project and made several improvements to it that I thought other people would benefit from. Those improvements include.

  • Support for Shortcodes including buttons, images, subheaders, boxes, and more.
  • Support for Sections, tags, and other taxonomies
  • Support for Base Templates and Blocks
  • Refactored code and theme logic

My goal was to make this theme look and function a lot more like the original https://html5up.net/ template, while taking advantage of all of the features of Hugo.

My issue now is that I'm unsure how to best share my changes with this project. I've never contributed on GitHub before so I'm pretty sure I went about this the wrong way, because I made all my modifications without generating individual pull requests.

I'm happy to submit a pull request for all my changes but I've generated 20 commits so far and I realize that might be a lot of code to review. Do you have any suggestions on how to proceed?

If you would like to checkout my code you can find it at: https://github.com/dewittn/hugo-theme-massively/tree/theme-refactor

Thanks again for all the work that went into this project.

All the best,
Nelson

Archives and Tags

Maybe it's better to add these two to menu.
It's easier to read articles and find specific one.

Question about theme

Hi Curt, you welcomed feedback and questions but I'm very sorry I couldn't figure out how to contact you. I have a question, and I apologize if this isn't the proper place to bring that up. I'm very new to GitHub, Hugo, etc.

In the screenshot of the Massively Hugo Theme on this page, there are three tabs- "This is Massively", "Generic Page", and "Elements Reference".

I am just starting out working in Hugo (through R blogdown), and cannot for the life of me figure out how to get separate tabs like that. The example Hugo Massively theme has the "contact" tab by default, but then it just refers you to the footer of the homepage. How can I get separate tabs (pages? sections?) for different things?

To add context, I'm creating a food blog just for fun to teach myself this stuff - https://seansfoodblog.netlify.com/ - and I want to have separate tabs for posts by location (i.e. one tab for California, one tab for Florida) and I also want one tab just for the two posts "Why I made This Site" and "My Scoring Metrics".

Please let me know how to separate content by category/tab! Thanks!

P.S. You can email me at [email protected] if you prefer

Auto scaling images

I have some markdown with a image referenced, when displayed on my blog using the theme it shows the actual size of the image which is far larger than the width of the blog design, is there something that can be done to make the image fit within the blog width when viewed at desktop or mobile?

Thanks

Multilingual support

I propose adding multilingual support to the theme, since Hugo provides multilingual mode since a long time ago.

As far as I have seen there are not much strings to translate.

The theme should:

  1. Provide a i18n folder with default translations for English (and possibly Spanish since is my native language)
  2. Use absLangURL and relLangURL functions provided by Hugo
  3. Add links to current page translations if any in the in the navigation bar
  4. Adapt the example site to provide a multilingual configuration for testing

I can make a pull request with the changes if you are OK with it.

Use booleans in Settings

I noticed that in the config featured post displaying is specified using featuredpost = "true".

Personally I think that it should use a boolean instead of a string in such cases.

Is it possible to add a non-blog post page?

I would like to add a page that is an about page but not have it mixed in with the blog post feed and a link to it in the main navigation. Is this possible and I am just missing 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.