W3.CSS Basic is a website template built with W3.CSS.
Inspiration was taken from
Universal. It is highly
configurable.
Change all colors in the blink of an eye, change default settings or disable
Frontpage elements.
Go to the directory where you have your Hugo site and run:
$ mkdir themes
$ cd themes
$ git clone https://github.com/it-gro/hugo-theme-w3css-basic
For more information read the official setup guide of Hugo.
Configuration
After installing the theme we recommend you to take a look at the
exampleSite
directory. You will find a working Hugo
site
configured with this theme that you can use as a starting point for
your site.
First, let's take a look at the
config.toml. It
will be useful to learn how to customize your site.
Language
Available translations are in the /i18n directory. You can configure
the language modifying the following key.
defaultContentLanguage="en"
Frontpage
Marquee
config.toml
[params.marquee]# enable or disable marquee on frontpageenable=true# marquee text is placed in directory as:file=".marquee.md"
Create a file .marquee.md in each directory where a marquee should be shown
Marquee text scrolls from right to left
Jumbotron
[params.jumbotrons]# used in layouts/partials/front.jumbotrons.carousel.html# enable or disable jumbotrons on frontpage# see some examples in 'exampleSite/data/jumbotron'enable=true
weight:1title:"Welcome to hugo-theme-w3css-basic exampleSite"icon:resImg:description:| * Lorem ipsum dolor sit amet
* Excepteur sint occaecat cupidatat non proident
Photocards
[params.photocards]# used in layouts/partials/front.photocards.html# enable or disable photocards on frontpage# see some examples in 'exampleSite/data/photocards'enable=trueanimate=trueresImgCmd="Resize"resImgCmdOpt="300x"
weight:1title:"Lorem ipsum"animated:"rollIn"resImg:"photocards/pixabay.com/01-photocard.jpg"url:pages/front/photocards/01description:| sed diam nonumy
Features
[params.features]# used in layouts/partials/front.features.html# enable or disable features on frontpage# see some examples in 'exampleSite/data/features'enable=trueanimate=false
weight:1name:"Eleifend"icon:"fas fa-desktop"animated:"slideInLeft"url:pages/front/features/01description:| Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
nonumy eirmod tempor invidunt ut labore
Recent Posts
[params.recentPosts]# used in layouts/partials/footer.htmlfooterNumOfPosts=5enableFooter=true# used in layouts/partials/front.recent_posts.htmlenableFront=truetitle="From our Blog"subtitle='''
Pellentesque habitant morbi tristique senectus et netus et malesuada
fames ac.
'''
Front recent posts
See More
[params.seeMore]# used in layouts/partials/front.see_more.html# enable or disable see_more on frontpageenable=trueicon="far fa-file-code"title="Do You want to see More?"linkUrl="/pages"linkText="consectetuer adipiscing"subtitle='''
Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper
suscipit lobortis nisl ut aliquip ex ea commodo consequat.
'''
Front see more
The background image is defined in /static/css/w3css-basic.css:
[params.testimonials]# used in layouts/partials/front.testimonials.carousel.html# enable or disable testimonials on frontpage# see some examples in 'exampleSite/data/testimonials'enable=truetitle="Testimonials"subtitle='''
Consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut
labore et dolore magna aliquyam erat, sed diam voluptua.
'''
weight:1name:"John Doe"position:"CEO, Takimata"resImg:"testimonials/pixabay.com/person-1.jpg"text:| Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorpersuscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autemvel eum iriure dolor in hendrerit in vulputate velit esse molestieconsequat, vel illum dolore eu feugiat
Clients
[params.clients]# used in layouts/partials/front.clients.carousel.html# enable or disable clients on frontpage# see some examples in 'exampleSite/data/clients'enable=trueresImgCmd="Resize"resImgCmdOpt="100x"imgMaxWidth="100px"imgMaxHeight="100px"title="Our Clients"subtitle='''
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
**molestie consequat**, vel illum dolore.
'''
---title:"Hugo - **highlight** :art:"date:2017-11-24T08:44:12+01:00resImgTeaser:teaserpics/bitbucket.org/pygments-main-logo.pngtags:- Hugocategories:- Web---Hugo comes with reallly fast syntax highlighting from Chroma....<!--more-->In this theme we set...
Date format
Dates are shown for blog articles (not other pages)
Short version in teaser
{{- .Date.Day}}. {{substr (default .Date.Month (i18n .Date.Month)) 0 3}} {{.Date.Year -}}
Long version in article
{{- .Date.Day}}. {{default .Date.Month (i18n .Date.Month)}} {{.Date.Year -}}
# Enable comments by entering your Disqus shortnamedisqusShortname="it-gro-github-io-hugo-theme-w3css-basic-github-io"[params]# disqus (theme)# ############################### used in partials/blog.disqus-button.html # set to true, if you want to show the count of comments# fires an async request to disqus.com/count.jsdisqusButtonShowCount=false
User has to agree to Disqus. You may skip this via
You can configure all colors within the selected monochromatic color theme:
# used in layouts/partials/*.html# used in layouts/blog/*.html# used in layouts/default/*.html# used in layouts/pages/*.html# e.g. {{ default `w3-theme-l3` ($.Site.Param `color404Container`)}} # layouts/partials/header.marquee.htmlcolorHeaderMarquee="w3-theme-l1"## layouts/partials/header.nav.htmlcolorHeaderNav="w3-theme-dark"## layouts/_default/baseof.htmlcolorBaseofCanvas="w3-theme-l4"colorBaseofPanel="w3-theme-l2"## layouts/partials/front.*.htmlcolorFrontClientsCard="w3-theme-l2"colorFrontClientsContainer="w3-theme-l3"colorFrontFeaturesCard="w3-theme-l3"colorFrontFeaturesContainer="w3-theme-l4"colorFrontJumbotronsContainer="w3-theme-l2"colorFrontJumbotronsSection="w3-theme-l4"colorFrontPhotocardsCard="w3-theme-l1"colorFrontPhotocardsCardContainer="w3-theme-l1"colorFrontPhotocardsContainer="w3-theme-l3"colorFrontRecentPostsCard="w3-theme-l4"colorFrontRecentPostsCardButton="w3-theme-l4"colorFrontRecentPostsContainer="w3-theme-l3"colorFrontRecentPostsTitleCard="w3-theme-l2"colorFrontSeeMoreButton="w3-theme-l4"colorFrontSeeMoreContainer="w3-theme-l4"colorFrontSeeMoreText="w3-text-white"colorFrontTestimonialsCarouselCard="w3-theme-l5"colorFrontTestimonialsContainer="w3-theme-l4"colorFrontTestimonialsTitleCard="w3-theme-l2"## layouts/partials/page.nav.cards.htmlcolorPageNavCardsCard="w3-theme-d3"colorPageNavCardsLink="w3-theme-l3"colorPageNavCardsContainer="w3-theme-l3"## layouts/pages/list.html:colorPagesListCard="w3-theme-l3"colorPagesListCell="w3-theme-l4"colorPagesListContainer="w3-theme-l4"## layouts/blog/list.htmlcolorBlogListCard="w3-theme-l3"colorBlogListCell="w3-theme-l4"colorBlogListContainer="w3-theme-l4"## layouts/_default/taxonomy.htmlcolorTaxonomyCard="w3-theme-l3"colorTaxonomyCell="w3-theme-l4"colorTaxonomyContainer="w3-theme-l4"## layouts/partials/main.paginator.bar.htmlcolorPaginatorBar="w3-theme-l1"## layouts/_default/taxonomy.htmlcolorTaxonomyBar="w3-theme-l1"colorTaxonomyPanel="w3-theme-l2"##layouts/_default/terms.html:colorTermsPanel="w3-theme-l2"## layouts/partials/blog.disqus-button.htmlcolorDisqusButton="w3-theme-l3"## layouts/partials/contact.form.htmlcolorContactFormPanel="w3-theme-d3"## layouts/partials/contact.map.htmlcolorContactMapCard="w3-theme-l2"colorContactMapPanel="w3-theme-l2"## layouts/partials/search.google.gcse.htmlcolorSearchGoogleGcseContainer="w3-theme-l3"## layouts/partials/footer.bottom.htmlcolorFooterBottomCell="w3-theme-l3"## layouts/partials/footer.htmlcolorFooterButton="w3-theme-l4"colorFooterContainer="w3-theme-d5"## layouts/404.htmlcolor404Container="w3-theme-l3"## layouts/partials/main.related.htmlcolorRelatedBar="w3-theme-l3"# used in layouts/shortcodes/alert.htmlcolorAlertPrimary="w3-purple"colorAlertSecondary="w3-aqua"colorAlertSuccess="w3-light-green"colorAlertInfo="w3-light-blue"colorAlertWarning="w3-yellow"colorAlertDanger="w3-red"colorAlertDark="w3-dark-grey"colorAlertLight="w3-grey"
Favicons
[params.favicon]# you may want to use https://realfavicongenerator.net to generate your files# used in layouts/partials/head.favicon.html# relURL is applied to path enable=falsepath="/images/favicons"version="a_random_value"maskIcon="#5bbad5"msapplicationTileColor="#da532c"themeColor="#ffffff"
summaryLength was introduced in hugo 0.30
(https://gohugo.io/news/0.30-relnotes/). It's measure is "words".
teaserTruncateSummary is in "characters". The Description (first
priority) or the Summary (second priority) is truncated (without
cutting words):
{{- or .Description .Summary | markdownify | truncate ( or .Site.Params.teaserTruncateSummary 160) | replaceRE "<.?p>" "" | safeHTML }}
# provide translations in i18n/*.yaml[[menu.main]]weight=1name="Home"url="/index.html"pre="fas fa-home"[[menu.main]]weight=2name="Contact"url="/contact"pre="far fa-address-card"
pre is for fontawesome version 5 icons
name is used for lookup in i18n/*.yaml (=> translation)
if no translation is given, the name itself is shown
page.nav.html <button class="w3-button w3-hide-small"><i class="{{ .Pre }}"></i> {{default .Name (i18n .Name)}}</button>
Topbar: right aligned top menu (github, facebook, twitter, ...)
Navbar "Small" with numOfItemsIfSmallDisplay = 2
# right aligned[[menu.topbar]]weight=1name="GitHub"url="https://github.com/it-gro/hugo-theme-w3css-basic"pre="fab fa-github"
on small displays the root menu entries are truncated
{{- substr (default .Name (i18n .Name)) 0 ($.Scratch.Get "smallDispMenuMaxChars") | lower}}
[params.menuConfig]# used in layouts/partials/header.nav.html# if set => change menu entry on small displays to lowercase maxChars smallDispMenuMaxChars=2smallDispMenuCollapse=falsesmallDispMenuCollapseIcon="fas fa-caret-square-down"[params.menuTopBar]# used in layouts/partials/header.nav.html# enable or disable menu.topbar with social icons (right aligned)socialEnable=truenumOfItemsIfSmallDisplay=0numOfItemsIfMediumDisplay=3numOfItemsIfSmallDisplayCollapsed=6# used in layouts/partials/header.nav.html# layouts/partials/header.nav.google.translate.htmlgoogleTranslateEnable=truegoogleTranslateShowOnHome=falsethemeColorSelectorEnable=false
Fonts
[params]# used in layouts/partials/head.html# if fontsUseGoogleApis=true then choose your fonts in [params.googleApiFonts.family.*] (see below)fontsUseGoogleApis=false
Of course this can be done via custom css as well, but here we have all in one
place. Setting the fonts we need from fonts.googleapis.com and applying it to
a bunch of tags. No pre or post processing needed.
[params]# Google Maps API key# get our own: https://developers.google.com/maps/documentation/javascript/adding-a-google-map#key# used in layouts/partials/contact.map.html# if empty => fallback to URL (instead of map)# define environment variable (=> key is not stored in github)envGoogleMapsApiKey="GoogleMapsApiKey"# if environment is not an option => define key here:#googleMapsApiKey = ""#googleMapsZoom = 14googleMapsZoom=3latitude=46.946692longitude=7.444186
Here's how to use the environment variable:
$ exportGoogleMapsApiKey=GEeawyBOuzOPzbFGizHKGReghibngUZTGjlioZM
$ hugo
Contact form with map
Contact form with disabled Javascript
if no latitude or longitude is given, no map is shown
# Enable Google Analytics by entering your tracking codegoogleAnalytics=""[params]# https://developers.google.com/gtagjs/# used in layouts/partials/head.google.gtags.html# you need to enter the Tracking-ID aboveenableGoogleGtag=true
Firefox has a Tracking Protection which
prevents gtag.js tracking by default.
gtag.js is not used if enableGoogleGtag is not set to true or the tracking code is not given (googleAnalytics)
{{- if and $.Site.Params.enableGooglesGtag $.Site.GoogleAnalytics }}
{{- /* <!-- Global site tag (gtag.js) - Google Analytics --> */}}
<script async src="https://www.googletagmanager.com/gtag/js?id={{$.Site.GoogleAnalytics}}"></script>
Footer
# used in layouts/partials/footer.html# uses markdownifyaboutUs='''
....
'''address='''
....
'''# used in layouts/partials/footer.bottom.htmlbottomLeft="Copyright (c) 2018, *lobortis nisl* ut aliquip ex ea commodo consequat"bottomRight='created with [Hugo](https://gohugo.io) '
# Cookie consent
- id: cookieMessage
translation: This website uses cookies to ensure you get the best experience on our website.
- id: cookieDismiss
translation: Got it!
- id: cookieLearn
translation: Learn more
# RSS Feed# Do not build RSS filesdisableRSS=false# maximum number of items in the RSS feedrssLimit=10
Tracing
If you like comments in the html source, this one is for you
# flags used for tracing and html comment output# currently used:# html-comment enable partials html comment output # debug-shortcodes enable all shortcodes debugging output# debug-shortcode-liti enable all shortcode liti debugging output# traceFlags = "html-comment:debug-shortcode-liti"traceFlags="html-comment"
If traceFlags includes the word html-comment some HTML comments will
be included in the html source code.
[params]# used in layouts/partials/head.stylesheets.html# used in layouts/partials/scripts.bottom.html# used in layouts/partials/scripts.top.htmlcustom_css=[]custom_js_top=[]custom_js_bottom=[]
Front Matter
archetypes:
blog.md
pages.md
Pages, Blogs
---title:"{{ replace .TranslationBaseName "-" "" | title }}"date:{{.Date }}toc:falseicon:"fab fa-font-awesome"resImgTeaser:"teaser.png"#resImgCmd:#resImgOpt:description:> I'm an **example** description.
I'll show in teaser instead of (calculated) summary.tags:- "example tag 1"- "example tag 2"categories:- "example cat 1"- "example cat 2"---
---title:"Gallery pixabay.com"date:2018-01-05T20:30:54+01:00resImgTeaser:teaserpics/pixabay.com/paint-2985569_640.jpgicon:"fas fa-images"description:"Pictures from pixabay.com"tags:- Showcasecategories:- This Theme---
01-photocard.jpg
02-photocard.jpg
03-photocard.jpg
04-photocard.jpg
05-photocard.png
06-photocard.jpg
07-photocard.jpg
08-photocard.jpg
09-photocard.jpg
This themes version of {{< heg-gallery .. >}} improves the caption's configuration (filename):
show file extensions - or not
do humanize - or not
the values below are the defaults:
[params.gallery]# used in layouts/shortcodes/heg-gallery.html# showFileExtension = true# humanizeCaption = false
$ cd exampleSite/
$ exportGoogleMapsApiKey=GEeawyBOuzOPzbFGizHKGReghibngUZTGjlioZM
$ hugo server -w --disableFastRender --navigateToChanged --themesDir ../../
Now enter localhost:1313 in the address bar of your browser.
Beeing able to analyse the visitors behavior via the log files on the visited site is one thing.
But giving those informations to any third-party is not what the visitors expect by default.
Why should a third-party (disqus.com) know which blog articles I've read (even without commenting) ?
Why should a third-party (formspree.io) beeing able to read the visitors messages (contact form) ?
If the visitors implicitly agree by clicking on a button ("see
comments on disqus.com" or "send message via formspree.io") then this
is perfecly fine (for me).
This is also why I tried to minimize the external url's and copied all
into the theme (static/vendor/*).
How to minimize visitors exposure to tracking
disable google gtags (analytics)
disable google translate
disable google fonts apis
disable google maps
disable menu.topbar search (google custom search)
disable formspree (but keep your email)
do not show a comment counter on the Disqus Button
