Hugo Theme - SK3 (Skeleton 3)
MIT License
Full feature Hugo theme build on top of hugo-theme-sk2 with Google AdSense (UA/GA4) support.
Theme | GitHub | Hugo | Demo | Description |
---|---|---|---|---|
SK1 | hugo-theme-sk1 | SK1 | sk1.jsiu.dev | Fully functional basic Hugo theme with no css, no javascript. |
SK2 | hugo-theme-sk2 | SK2 | sk2.jsiu.dev | Fully functional basic Hugo theme with minimum css. |
SK3 | hugo-theme-sk3 | SK3 | sk3.jsiu.dev | Full feature Hugo theme with Google AdSense support. |
John Siu Blog: JohnSiu.com
SK3 demo site: sk3.jsiu.dev with content from hugoBasicExample
When upgrading from v1.x.x to v2.x.x, config file need to be updated as there are lot of name changes.
In site directory:
Using clone
git clone https://github.com/J-Siu/hugo-theme-sk3 themes/sk3
Using submodule
git submodule add https://github.com/J-Siu/hugo-theme-sk3 themes/sk3
Update submodule
git submodule update --recursive --remote
git clone https://github.com/J-Siu/hugo-theme-sk3 sk3
cd sk3
# Pull example site.
git submodule update --recursive --init
cd exampleSite
hugo server -D --bind :: \
--disableFastRender \
--theme sk3 \
--themesDir ../../ \
--config config.toml,../config.demo.toml \
--verbose
Headline in markdown should start at level 3 (###), as site title is H1 and page title is H2.
[Params]
Field | Type | Default Value | Description |
---|---|---|---|
customCss | text array | [] | See Custom CSS |
customJs | text array | [] | See Custom Javascript |
description | text | "" | Open Graph / Twitter Card description |
enableExternalSvg | bool | false |
true will load social icon using Font Awesome external css. |
enableInfoBox | bool | false | Enable page info box style |
enableListLastModify | bool | false | Use last modify date in list page. |
enableOpenGraph | bool | false | Enable Open Graph |
enableOpenToc | bool | true | Control if table of content(Toc) is open By default |
enableTwitterCard | bool | false | Enable Twitter Card |
enableUserCanonical | bool | false | Add rel="canonical" meta link with absolute URL to each page. Only use this if site require user-declared canonical meta. This is not related to Hugo Canonicalization nor canonifyurls . |
favicon | text | "" | See Favicon |
images | text array | [] | Open Graph / Twitter Card image |
mainSections | text | n/a | Hugo default to section with most entries when For generating homepage list. |
pagewidth | text(px) | "1200px" | Page width will automatically set to 100% on small screen(<993px). |
startdate | text | "" | eg. "2012-12-02". Year is extracted and generate copyright line "2012-(current year)". Site copyright override this behavior. |
subtitle | text | "" | If defined, sub-title appear after site title in smaller font. |
title | text | "" | Open Graph / Twitter Card title |
[Params.sociallink] Show social network buttons if IDs are provided.
Field | Type | Default Value |
---|---|---|
text | "" | |
flickr | text | "" |
text | "" | |
text | "" | |
text | "" | |
text | "" | |
rss | bool | false |
tumblr | text | "" |
text | "" | |
vimeo | text | "" |
youtubechannel | text | "" |
youtubeuser | text | "" |
[Params.socialshare] Control if share buttons appear at the bottom of page.
Field|Type|Default Value ---|---|---|--- facebook|bool|false instagram|bool|false linkedin|bool|false pinterest|bool|false reddit|bool|false telegram|bool|false twitter|bool|false vk|bool|false
[Params.color] Control theme color. Default is a dark theme.
Field | Type | Default Value | Light Theme** |
---|---|---|---|
bg | text | "#181a1b" | "white" |
border | text | "white" | ""black" |
link | text | "#3d84ff" | "#3d84ff" |
text | text | "white" | "black" |
[Params.card] Control list page layout.
Field | Type | Default Value | Description |
---|---|---|---|
date | bool | true | Show data for each item in list |
summary | bool | true | Show summary for each item in list |
width | text(%) | "32%" | Control list page column width on desktop(>992px). 32% for 3 columns. 24% for 4 columns, etc. Single column use 100%. |
If you add custom css files like following:
./
archetypes/
content/
public/
resources/
static/
css/
abc.css
def.css
themes/
config.toml
The final path of your css files will be /css/abc.css
and /css/def.css
:
[Params]
customCss = ["/css/abc.css", "/css/def.css"]
If you add custom javascript like following:
./
archetypes/
content/
public/
resources/
static/
js/
abc.js
def.js
themes/
config.toml
The final path of your javascript files will be /js/abc.js
and /js/def.js
:
[Params]
customJs = ["/js/abc.js", "/js/def.js"]
Path of favicon of the published site.
If favicon logo.svg
is put inside static
like following:
./
archetypes/
content/
public/
resources/
static/
logo.svg
themes/
config.toml
The final path will be /logo.svg
:
[Params]
favicon = "/logo.svg"
SK themes come with default favicon. To disable it:
# At Hugo site root
touch static/favicon.ico
[Params.google]
Field | Type | Default Value | Description |
---|---|---|---|
AdsenseId | text | "" | AdSense ID/Tag. |
enablePageLevelAd | bool | false | Enable/Disable page level ads. |
enableUA | bool | false | Set this to 'true' if using Google Analytics UA. |
[Params.paypal] Enable Paypal donation button along side share buttons.
Field | Type | Default Value | Description |
---|---|---|---|
amount | text | "0" | Default amount. |
businessId | text | "" | Paypal business Id. Button will only show if this is set. |
currency | text | "" | Currency code, eg. "CAD", "USD". |
enableRecurring | bool | false | Show recurring check-box. |
Information can be obtain by going through Paypal Donate Button. You need your own Paypal account to go through the button creation process.
Disable Disqus
Disable Prev/Next
Disable Related
Disable Table of Content
To disable the above, in front matter:
comment = false
prevnext = false
related = false
toc = false
config.sample.toml
located in theme dir.
baseURL = "https://"
theme = "sk3"
title = ""
DefaultContentLanguage = "en"
enableGitInfo = true
enableInlineShortcodes = true
languageCode = "en"
paginate = 15
relativeURLs = true
#disqusShortname = ""
#googleAnalytics = ""
[Params]
customCss = ["/css/abc.css", "/css/def.css"]
customJs = ["/js/abc.js", "/js/def.js"]
enableExternalSvg = false
enableInfoBox = true
enableListLastModify = false
enableOpenToc = false
enableUserCanonical = false
favicon = "/favicon.ico"
mainSections = "post"
pagewidth = "1200px"
startdate = "2012-12-02"
subtitle = "A Hugo Theme"
# Fill in following if using Open Graph / Twitter Card
description = "A Hugo Theme"
enableOpenGraph = true
enableTwitterCard = true
title = "SK3"
[Params.paypal]
amount = ""
businessId = ""
currency = ""
enableRecurring = true
[Params.google]
AdsenseId = ""
enablePageLevelAd = false
enableUA = false
[Params.card]
date = true
summary = true
width = "32%"
[Params.color]
bg = "#181a1b"
border = "white"
link = "#3d84ff"
text = "white"
[Params.sociallink]
facebook = ""
flickr = ""
github = ""
instagram = ""
linkedin = ""
pinterest = ""
reddit = ""
rss = true
stack-exchange = ""
stack-overflow = ""
tumblr = ""
twitter = ""
vimeo = ""
youtubechannel = ""
youtubeuser = ""
[Params.socialshare]
facebook = true
instagram = true
linkedin = true
pinterest = true
reddit = true
telegram = true
twitter = true
vk = true
[markup]
[markup.tableOfContents]
endLevel = 6
startLevel = 1
Social buttons provided by Font Awesome Brands(free).
fa-svg-extract.sh
is used to extract icon from Font Awesome sprites/brands.svg and sprites/solid.svg.
./fa-svg-extract.sh brands.svg > sk3-fa.svg
./fa-svg-extract.sh solid.svg >> sk3-fa.svg
enableListLastModify
googleAnalyticsUA
The MIT License (MIT)
Copyright (c) 2022 John, Sing Dao, Siu
Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.