Code Monkey home page Code Monkey logo

hugo-theme-bootstrap4-blog's Introduction

Hugo Bootstrap v4 Blog Build Status builds.sr.ht status

A simple but opinionated Hugo theme geared towards blog-style content. Based on the older two-column Bootstrap blog example that was used for several Bootstrap versions, but has now been retired in favor of a "snarky" (their words) new example as of version 4.0.0's final release.

Screenshot

See picturingjordan.com for an example of this theme in use.

Features

  • Responsive design
  • Uses Bootstrap v4's native system font stack to load quickly and look good on all platforms
  • Excellent structured data (JSON-LD), OpenGraph, and Twitter Card metadata support
  • robots.txt linking to XML sitemap (disabled by default, see Hugo docs)
  • Basic support for multi-lingual content (added in Hugo 0.17) and user interface translation (i18n), including RTL languages like Arabic and Farsi
  • Supports Google, Bing, and Yandex site verification via meta tags
  • Supports GDPR-compliant Google Analytics (script is not even loaded until after the user agrees) with configurable consent banner, see exampleSite/config.toml
  • Supports Disqus comments, see Hugo docs
  • Allow addition of custom <head> code in site's layouts/partials/head-custom.html (see #17)
  • Configurable display of summaries of content in list templates.
  • Configurable keywords for every post
  • Supports automatic generation of <img> srcsets for images in page bundles using a new figure shortcode (falls back to default Hugo behavior of looking up images in the static directory)

Usage

Clone the repository to your site's themes directory. Refer to exampleSite/config.toml for recommended configuration values.

Content Suggestions

A few suggestions to help you get a good looking site quickly:

  • Keep blog posts in the content/posts directory, for example: content/posts/my-first-post.md
  • Keep static pages in the content directory, for example: content/about.md
  • Keep media like images in the static directory, for example: static/2016/10/screenshot.png
  • If you want an image to be shown when you share a post on social media, specify at least one image in the post's front matter, for example: images: ["/2016/10/screenshot.png"]
  • Use the <!--more--> tag in posts to control how much of a post is shown on summary pages
  • Disable comments on a post by setting comments = false in its frontmatter
  • Disable social sharing icons site wide (or on individual pages/posts) by setting sharingicons = false
  • If your content is stored in git, add enableGitInfo = true to your site config and Hugo will use git history to set a more accurate modification date in page metadata

See the source code and structure of picturingjordan.com to get more ideas.

Building (For Developers)

This theme uses the Bootstrap framework. A static version of this is already included, but if you want to bump the version, tweak the style, etc, you'll need to rebuild the assets. Make sure you have Node.js >= v14 installed, and then run the following from inside the theme's directory:

$ npm install
$ npm run build

Contributing

There are several ways to help with the development of the theme:

  • Open an issue on GitHub if you have problems or feature requests
  • Alternatively, tackle one of the existing issues on the issue tracker
  • Fork the repository on GitHub, add features on a "feature" branch like update-bootstrap, and then send a pull request with your changes

License

This repository contains SASS and HTML code from the Bootstrap project, which is licensed under the MIT license and CC BY 3.0, and Font Awesome, which uses various licenses.

hugo-theme-bootstrap4-blog's People

Contributors

aerohub avatar alanorth avatar ardianta avatar bep avatar bit33 avatar camilleroux avatar coliff avatar deedlefake avatar dermellor avatar ejsmit avatar fte378 avatar jieiku avatar lpar avatar marcanuy avatar mikelococo avatar nonumeros avatar nzoschke avatar phofman avatar sboots avatar schack avatar tomkao avatar vincevriend avatar xenoterracide avatar yhoiseth avatar zidenis 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

hugo-theme-bootstrap4-blog's Issues

shortcode not rendering

sorry this may be a question not a bug, I tried setting copyright to

copyright = "Copyright © 2008-{{< year >}} Caleb Cushing. This work is licensed under a [Creative Commons Attribution-NonCommercial 4.0 International License](https://creativecommons.org/licenses/by-nc/4.0/)"

but that didn't render https://bitbucket.org/xenoterracide/blog/src/da2beecd30782e7da8970ac5999efc5e1169d0e0/layouts/shortcodes/year.html?at=master&fileviewer=file-view-default

this a template bug? am I doing something wrong?

Add site search

Hugo 0.20 allows custom output formats such as JSON which can be fed to client-side search engines like Lunr.js to implement a search facility. See the hugo-theme-docdock theme for an example.

Better favicon support

Right now, with zero other configuration, you can put a favicon.ico in your site's static directory and basically any browser will find it. There are better, more modern ways to do favicons now, though, for example:

  • support for high res icons
  • support for specific device features like iOS, Android, and Windows

Generating the code/images for this is easy enough (see realfavicongenerator.net) but it would be nice to have a configuration flag for controlling the addition of this code.

To play devil's advocate, though, it might be better to just advocate adding this site-specific code to head-custom.html (see #17). Keeping the theme and its configuration simple is a plus.

Code in list view is unformatted

image
not the greatest looking thing, but looks fine in post
image

I'm thinking that there may be a couple of options here.

  1. hide code entirely on the front page
  2. set fixed width/height so seeing it all would require scrolling

I recall seeing something about default truncating of characters on a the front page, so that might be part of the problem. I don't really need all of the code to display... but it'd be nice for it to be <pre><code>... if it does.

prefetch of web fonts

Hi Alan,

on GTmetrix.com I saw that loading the webfont (font-awesome) delays displaying the page significantly (shown there in the waterfall view). It was loaded after the css file was interpreted and took some time of course.

I tried to include the following in the head section of my page:

Of course this leaves out the other font encodings but I think including them all is overkill.

The result showed no change for the Firefox rendering engine but the Chrome engine (desktop and mobile) started to download the font in parallel to the images. So the load time was reduced. For slow connections the result may be different.
It also introduced a warning about "doubled" content: the woff file once without parameter and once with the version number appended as parameter.

What do you think about font-preloading? Do you have experiences regarding this?

Regards, Frank

Add support for tags/categories

Right now I add tags/categories to frontmatter but I don't use them. I'm not sure if I want to support both tags AND categories (I'm more partial to tags).

blogs(n) greater than num_recent_posts

Great theme - but I have one problem.

It seems to me that if you have more blog posts than num_recent_posts there is no way to access older posts other than by categories. Most themes provide a sidebar listing of years so you can drill down.

Am I missing something / are you planning anything like this. Thanks again for the template..

Disable comments on certain sections

It would be useful to disable Disqus comments on certain sections, like disabling comment on "pages" so people cannot comment on an "About Me" page.

Bootstrap missing

I am getting the following error.

Reading your instructions, bootstrap was included? Did I do something wrong?

Error: Unable to find theme Directory: E:\hugo\output\themes\hugo-theme-bootstrap4-blog

Responsive Navigation

If I'm not mistaken, it looks like there's no responsive nav on mobile devices? Should be fairly straight forward to implement with navbar given it uses Bootstrap I would think? Thanks.

Support for a custom navbar

I would like the ability to have more control over the contents of the navbar. The default behaviour is to link all pages that are not posts, but I have too many static pages, and only want a small subset of them in my navbar.

The default behaviour should be backward compatible, but with a params option that can be uncommented/enabled to display a custom hugo menu instead. This will allow me to add menu = "navbar" to only the specific pages that I want in the navbar.

I would be happy to create a pull request if you think this is a sensible change.

Rassie

Option to display full post content in list template

It's nice to have the option to let visitors read content right from the homepage without having to click through a summary. This proposal introduces the optional "truncate" site parameter.

If the truncate parameter is not present or is set to true, posts in the list template are rendered as they have always been, with the "summary" content view.
If the truncate paramter is explicitly set to false, posts in the list template are rendered via a newly introduced "content" content view that displays the full post .Content and does not append a "read more" link.

Local CSS not working due to "integrity" value.

If I remove from from baseof.html the following part of the CSS link, then the page will render properly.

integrity="{{ .Site.Data.sri.style}}"

However with the integrity variable the page won't render with style.

I wonder if anyone had an idea about making integrity work please?

Include fa-rss again

Hi Alan,

I want to "misuse" the "about" sidebar section to display a link to my RSS feed.
I remember that you stripped down font-awesome to the needed symbols.

Can you pleas eadd the rss icons again? That would be fa-rss and fa-rss-square.

Many thanks!

Update theme for Hugo 0.18 conventions

Hugo 0.18 was just released and makes some improvements and standardizations to pages. For example, from the release notes:

Every Page now has a Kind property. Since everything is a Page now, the Kind is used to differentiate different kinds of pages. Possible values are page, home, section, taxonomy, and taxonomyTerm.

We need to just check that we're doing things the best way, and generally update conventions we're using to the latest ones.

Footnotes appear to be broken

Clicking on the "return" footnote reference for a footnote does not redirect to the part of the post where the footnote is referenced but instead back to the index page.

I was using a custom <!--more--> tag when the behavior was observed.

pygments syntax highlighting and layout

I just added a code block to a post like so:

{{< highlight csharp "linenos=true,style=monokai" >}}

 var assy = Assembly.LoadFile("C:\\SomePath\Plugin.Authentication.dll");
 mvcBuilder.AddApplicationPart(assy);

 var assy = Assembly.LoadFile("C:\\SomePath\Plugin.Markdown.dll");
 mvcBuilder.AddApplicationPart(assy);

{{< / highlight >}}

I notice that when I shrink the page size, the code block overlaps with the sidebar:

image

Has anyone come accross this / can anyone suggest any workaround for this?

Font Awesome Icons Can't Load Cross-Domain

I've got a site set up behind a reverse proxy that forwards it requests to both deedlefake.com and www.deedlefake.com, as is the convention. In the Hugo config, I've configured https://deedlefake.com as the base URL. For some reason, although the rest of the font seems to load fine, the icons for categories and tags don't load if viewing the site through www.deedlefake.com.

This may be a configuration issue on my end, but, since I haven't been able to figure out a way to fix it, I'm filing this in case it isn't.

I suppose the other option would just be to have the www subdomain redirect, rather than attempting to show both, but I'd like to be able to if I can.

SHA-256 integrity

  (index):1 Failed to find a valid digest in the 'integrity' attribute for resource 'http://127.0.0.1:1313/css/style.css' with computed SHA-256 integrity 'iWT4FzIzYOMkVgL1RalyTDsQUI3SpoUB85EViSrNwco='. The resource has been blocked.

hmm... maybe a windows build issue? I've only noticed this on localhost, not when it builds in docker and serves from s3...

Disable sharing for a single item

Hi,

I have two pages which are "public" in a sense but are excluded by robots.txt.
I would like to be able to turn the sharing icons off for these too - the same way as
the comments can be turned off (sharing = false).

Regards, Frank

Menu navbar

The theme is very good.
When the "menu navbar" is made up of more than three links and view the mobile, it is a two or three lines, it does not look good. It is possible to make "menu navbar" icon, options config.toml?

Add author page

When you click an author's name in a post summary or full page article you should go to a page of that author's posts.

Menus

Hi,

Are all pages in /content put into the main menu?

I have not set the menu front matter, but it is putting it in the main menu anyway.

Way to modify the font size

Hi Alan,
Most conspicuously, I have an application of you to start Hugo with such a nice theme.

In my native language, font size is relatively bigger than that of English. I would like to shrink all of the font size by touching CSS file or so, if possible.

Can you provide from where I should start?
Please regard me with warm heart that I am a beginner in making a static blog.

Regards,
Kee-Hoon

schema.org changes seem to overwrite .Site.Params

I just noticed that my blog frank.tegtmeyer.net doesn't contain code for the cookie consent anymore.
Also settings like google-site-verification are lost.

The other blog (photoblog.tegtmeyer.net is still fine but is 37 commits behind your latest commit because I didn't update it yet.

Some tests showed that the .Site.Params map doesn't contain all the values from thew config file - only "author", "description" and "social" (an empty map).
The Params section is completely lost leading to skipping all things dependent on .Site.Param values.

So there is something weird going on.

Regards, Frank

Disqus didn't show up..

After:

  1. Setting this as my theme,
  2. Setting disqusShortName in my sites config.yaml file
  3. Setting comments: true in my yaml front matter

Disqus was still not visible against my post.

I looked at the single.html template which looks like this:


{{ if and (.Site.DisqusShortname) (ne .Params.comments false) }}
{{ partial "disqus.html" . }}
{{ end }}

I changed that to this and it now works:


<!--Disqus-->
  {{if .Params.comments}}
  <div class="container content">
    {{ template "_internal/disqus.html" . }}
  </div>
  {{end}}

Wondering why that was necessary!

Improve Schema.org metadata

We use Hugo's builtin metadata template to insert tags that help sites like Twitter and Facebook understand content better, but some of the metadata needs to be rooted in a proper Schema.org scope to be valid—you can see this by testing this theme with the Google Structured Data or W3C validator tools.

Google's Structured Data tool detects zero metadata!

screen shot 2017-01-12 at 14 54 04-fs8

W3C's validator doesn't like the metadata we're using because it isn't scoped.

screen shot 2017-01-12 at 15 02 25-fs8

AMP?

Not really an issue but more a question.

Would it be hard to make this theme AMP compliant?
I just glanced over the ampproject website and it doesn't look so hard to do.
Images could be a problem and also the generated content itself but else?

What do you think?

Regards, Frank Tegtmeyer

some image not show on static site

i am new to hugo and this theme. every thing work fine when i run local server with this command
$ hugo serve --buildDrafts
screen shot 2017-01-11 at 8 20 16 pm

but when i build static site with
$ hugo --buildDrafts
static site in public folder, some images(folder icon and social share image) not show. How can i fix this
screen shot 2017-01-11 at 8 23 01 pm

thanks,

Homepage

How do I edit content on the homepage?

Something assumes local images

With the current commit (81a7431) I get the following error:

ERROR 2017/03/20 18:14:44 Error while rendering "page post/2017/03/photoshoot-inga.md": template: /Users/fte/Sites/photoblog.tegtmeyer.net/themes/hugo-theme-bootstrap4-blog/layouts/_default/baseof.html:14:13: executing "schema-dot-org" at <imageConfig (printf ...>: error calling imageConfig: open /Users/fte/Sites/photoblog.tegtmeyer.net/static/https:/frank.tegtmeyer.tk/img/2017/03/Frank_Tegtmeyer__Portrait_2017_9Xan-730.jpg: no such file or directory

My images are remote (I use Cloudflare for them).

Regards, Frank

Make sidebar optional

It would be nice to have the sidebar be optional, so users could opt for a single-column site. Right now we can simple not print the sidebar — for example, if a certain config option is present — but the main content doesn't fill the remaining space.

I'm not a Bootstrap expert so I'd need help with this.

Support right-to-left languages like Arabic

It would be amazing if the theme supported right-to-left (RTL) languages like Arabic. I think I could use something like bi-app-sass or css-flip but have zero experience with RTL CSS.

A quick, dirty hack with some gibberish + Google Translated Arabic text looks slightly promising (some block elements are flipped to the other side):

screen shot 2016-11-20 at 11 28 29-fs8

Sorry for the horrible Arabic. :)

Allow optional addition of social links to sidebar

It would be pretty compatible with blog conventions to have your Twitter, Google+, Facebook, etc links on the sidebar. It should be optional and ideally use the existing config options where possible (like params.social.twitter, which is already used by Twitter cards).

This could perhaps be enumerated like a menu, or like the social sharing links, and we could show Font Awesome icons for each link.

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.