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.
This commit is contained in:
lucasradaelli 2020-06-01 11:47:51 -07:00 committed by GitHub
parent 80cd067683
commit 8984ca9d6a
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
9 changed files with 62 additions and 11 deletions

View File

@ -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).

View File

@ -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:

25
i18n/en.yaml Normal file
View File

@ -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

View File

@ -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>

View File

@ -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>

View File

@ -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 }

View File

@ -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">

View File

@ -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>

View File

@ -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">