diff options
author | lucasradaelli <64749873+lucasradaelli@users.noreply.github.com> | 2020-06-01 21:47:51 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2020-06-01 21:47:51 +0300 |
commit | 8984ca9d6aafa730ad1688ba07ec9fce4add1b91 (patch) | |
tree | 0a889d98be098b7d43a89da0291ea63d17f32594 | |
parent | 80cd067683bf69c42f6e02995585462dd9e19d95 (diff) |
Custom css and localization support (#28)
* Adds i18n support for theme
* Adds a way for sites to have custom css.
This change adds a param to the theme (called customCss), which allows sites to
provide extra css under static/, so that they don't need to copy the theme's css
whole file.
If no custom css is in the params, this change is NOP.
-rw-r--r-- | README.md | 14 | ||||
-rw-r--r-- | exampleSite/config.yaml | 8 | ||||
-rw-r--r-- | i18n/en.yaml | 25 | ||||
-rw-r--r-- | layouts/partials/disqus.html | 6 | ||||
-rw-r--r-- | layouts/partials/footer.html | 2 | ||||
-rw-r--r-- | layouts/partials/head.html | 4 | ||||
-rw-r--r-- | layouts/partials/nav.html | 4 | ||||
-rw-r--r-- | layouts/partials/toc.html | 2 | ||||
-rw-r--r-- | layouts/post/single.html | 8 |
9 files changed, 62 insertions, 11 deletions
@@ -17,6 +17,8 @@ An accessibility-friendly Hugo theme, ported from the [original Cupper](https:// - [Shortcodes](#shortcodes) - [Syntax highlighting](#syntax-highlighting) - [Disable toc for a blog post](#disable-toc-for-a-blog-post) +- [Localization](#localization) +- [Custom css](#custom-css) - [Getting help](#getting-help) - [Credits](#credits) @@ -84,6 +86,18 @@ toc: false --- ``` +## Localization + +The strings in the templates of this theme can be localized. Make a copy of <THEME_BASE_FOLDER>/i18n/en.yaml to <YOUR_SITE_FOLDER>/i18n/<YOUR_SITE_LANGUAGE>.yaml, and translate one by one, changing the 'translation' field. + +[Here is a tutorial that goes more in depth about this.](https://regisphilibert.com/blog/2018/08/hugo-multilingual-part-2-i18n-string-localization/) + +## Custom css + +Instead of coppying the theme's css file to your own installation and modifiying this large file, you can provide a list of css files that will be loaded after the theme's one. This ennables you to override individual style while getting theme updates when they come. + +Please see the params section of the example site config.yaml for more details. + ## Getting help If you run into an issue that isn't answered by this documentation or the [`exampleSite`](https://github.com/zwbetz-gh/cupper-hugo-theme/tree/master/exampleSite), then visit the [Hugo forum](https://discourse.gohugo.io/). The folks there are helpful and friendly. **Before** asking your question, be sure to read the [requesting help guidelines](https://discourse.gohugo.io/t/requesting-help/9132). diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 52153a2..ae46486 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -24,6 +24,14 @@ params: dateFormat: Jan 2, 2006 codePenUser: someUser katex: true + # A list of custom css files can be provided, which must be placed inside + # 'static/'. + # This is useful to override just specific css classes, instead of copying + # the entire theme's css file to your own site. + # Usage: + # customCss: + # - css/foo.css # relative path starting from static/ + #- css/bar.css menu: nav: diff --git a/i18n/en.yaml b/i18n/en.yaml new file mode 100644 index 0000000..65534af --- /dev/null +++ b/i18n/en.yaml @@ -0,0 +1,25 @@ +- id: skip_to_content + translation: skip to content +- id: nav_main_navigation + translation: Main navigation +- id: nav_button_menu + translation: Menu +- id: discuss_show_comments_button + translation: Show comments +- id: discuss_comments_disabled + translation: Disqus comments are disabled. +- id: discuss_js_disabled + translation: Enable JavaScript to view Disqus comments. +- id: dark_theme + translation: "dark theme:" +- id: table_of_contents + translation: Table of contents +- id: publish_date + translation: "Publish date:" +- id: last_updated + translation: "Last updated:" +- id: tags + translation: "Tags:" +- id: aria_label_tags + translation: tags + diff --git a/layouts/partials/disqus.html b/layouts/partials/disqus.html index 47e0661..ccf0340 100644 --- a/layouts/partials/disqus.html +++ b/layouts/partials/disqus.html @@ -1,11 +1,11 @@ <div id="disqus-container"> {{ with .Site.DisqusShortname }} - <button id="disqus-button" onclick="showComments()">Show comments</button> + <button id="disqus-button" onclick="showComments()">{{ T "discuss_show_comments_button" }}</button> <div id="disqus-comments"> {{ $isDummyName := eq . "yourdiscussshortname" }} {{ $isServer := $.Site.IsServer }} {{ if or $isDummyName $isServer }} - <p><em>Disqus comments are disabled.</em></p> + <p><em>{{ T "discuss_comments_disabled" }}</em></p> <script type="application/javascript"> function showComments() { {{ partial "disqus-js-common.js" . | safeJS }} @@ -21,7 +21,7 @@ } </script> {{ end }} - <noscript>Enable JavaScript to view Disqus comments.</noscript> + <noscript>{{ T "discuss_js_disabled" }}</noscript> </div> {{ end }} </div> diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index 9d24b2a..9334920 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -1,7 +1,7 @@ <footer role="contentinfo"> <div> <label for="themer"> - dark theme: <input type="checkbox" id="themer" class="vh"> + {{ T "dark_theme" }} <input type="checkbox" id="themer" class="vh"> <span aria-hidden="true"></span> </label> </div> diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 37d4eb6..2f20857 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -26,6 +26,10 @@ {{ $styles := $templateStyles | resources.ExecuteAsTemplate "css/styles.css" . }} <link rel="stylesheet" type="text/css" href="{{ $styles.Permalink }}"> + {{ range .Site.Params.customCss -}} + <link rel="stylesheet" href="{{ . | absURL }}"> + {{- end }} + <style id="inverter" media="none"> .intro-and-nav, .main-and-footer { filter: invert(100%) } * { background-color: inherit } diff --git a/layouts/partials/nav.html b/layouts/partials/nav.html index 1abadca..ca80808 100644 --- a/layouts/partials/nav.html +++ b/layouts/partials/nav.html @@ -1,10 +1,10 @@ <nav id="patterns-nav" class="patterns" role="navigation"> - <h2 class="vh">Main navigation</h2> + <h2 class="vh">{{ T "nav_main_navigation" }}</h2> <button id="menu-button" aria-expanded="false"> <svg viewBox="0 0 50 50" aria-hidden="true" focusable="false"> <use xlink:href="#menu"></use> </svg> - Menu + {{ T "nav_button_menu" }} </button> {{ $current := . }} <ul id="patterns-list"> diff --git a/layouts/partials/toc.html b/layouts/partials/toc.html index 86ee3b6..55a2ccb 100644 --- a/layouts/partials/toc.html +++ b/layouts/partials/toc.html @@ -1,7 +1,7 @@ {{ $headings := findRE "<h2.*?>(.|\n])+?</h2>" .Content }} {{ if ge (len $headings) 2 }} <nav class="toc" aria-labelledby="toc-heading"> - <h2 id="toc-heading">Table of contents</h2> + <h2 id="toc-heading">{{ T "table_of_contents" }}</h2> <ol> {{ range $headings }} <li> diff --git a/layouts/post/single.html b/layouts/post/single.html index 72b4c22..6ef8e4e 100644 --- a/layouts/post/single.html +++ b/layouts/post/single.html @@ -10,19 +10,19 @@ <div class="date"> {{ $dateFormat := $.Site.Params.dateFormat | default "Jan 2, 2006" }} {{ $publishDate := .PublishDate }} - <strong aria-hidden="true">Publish date: </strong>{{ $publishDate.Format $dateFormat }} + <strong aria-hidden="true">{{ T "publish_date" }} </strong>{{ $publishDate.Format $dateFormat }} {{ with .Lastmod }} {{ if gt . $publishDate }} <br> - <strong aria-hidden="true">Last updated: </strong>{{ .Format $dateFormat }} + <strong aria-hidden="true">{{ T "last_updated" }} </strong>{{ .Format $dateFormat }} {{ end }} {{ end }} </div> {{ with .Params.tags }} <div class="tags"> - <strong aria-hidden="true">Tags: </strong> - <ul aria-label="tags"> + <strong aria-hidden="true">{{ T "tags" }} </strong> + <ul aria-label="{{ T "aria_label_tags" }}"> {{ range . }} <li> <svg class="tag-icon" aria-hidden="true" viewBox="0 0 177.16535 177.16535" focusable="false"> |