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:
parent
80cd067683
commit
8984ca9d6a
14
README.md
14
README.md
|
@ -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).
|
||||
|
|
|
@ -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
25
i18n/en.yaml
Normal 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
|
||||
|
|
@ -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>
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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 }
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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">
|
||||
|
|
Loading…
Reference in New Issue
Block a user