chore: normalize default favicons and add docs (#213)

This commit is contained in:
Robert Kaussow 2021-09-27 22:47:13 +02:00 committed by GitHub
parent e5896900b4
commit 4bfc17ac9d
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 61 additions and 2 deletions

View file

@ -27,3 +27,5 @@ relref
href href
KaTeX KaTeX
katex katex
Theming
Favicon[s]?

View file

@ -1,3 +1,11 @@
---
title: Theming
---
{{< toc >}}
## Color Scheme
If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site. If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.
All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette. All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
@ -12,4 +20,42 @@ All the necessary CSS customization properties are listed below. If you want to
<!-- spellchecker-enable --> <!-- spellchecker-enable -->
<!-- prettier-ignore-end --> <!-- prettier-ignore-end -->
## Favicons
The Theme is shipped with a set of default Favicons in various formats generated by a [Favicon Generator](https://realfavicongenerator.net/). All files can be found in the `static/favicon` folder of the release tarball. To make the replacement of the default Favicons as simple as possible, the theme loads only a very small subset of the Favicon formats.
<!-- prettier-ignore -->
```tpl
<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
```
### Simple replacement
The minimal steps to load a custom Favicon is to overwrite tree default Favicon files. Therefor place these files into your projects root folder:
- `static/favicon/favicon.svg`
- `static/favicon/favicon-32x32.png`
- `static/favicon/favicon-16x16.png`
### Full replacement
If you want to add more Favicon formats you have to [overwrite](https://gohugo.io/templates/partials/#partial-template-lookup-order) the default partial that is used to load the files. In the next step you have to place the required files in the `static` folder of your project as well.
**Example:**
<!-- prettier-ignore -->
```tpl
<!-- layouts/partials/head/favicons.html -->
<link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
<link rel="apple-touch-icon" sizes="180x180" href="{{ "favicon/apple-touch-icon.png" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">
<link rel="manifest" href="{{ "favicon/site.webmanifest" | relURL }}">
<link rel="mask-icon" href="{{ "favicon/safari-pinned-tab.svg" | relURL }}" color="#2f333e">
<meta name="msapplication-TileColor" content="#2f333e">
<meta name="theme-color" content="#2f333e">
```
Happy customizing! Happy customizing!

View file

@ -50,6 +50,13 @@ gulp.task("sass", function () {
.pipe(gulp.dest(CSS_BUILD)); .pipe(gulp.dest(CSS_BUILD));
}); });
gulp.task("favicon-svg", function () {
return gulp
.src("src/favicon/favicon-master.svg")
.pipe(rename("favicon.svg"))
.pipe(gulp.dest("static/favicon/"));
});
gulp.task("favicon-generate", function (done) { gulp.task("favicon-generate", function (done) {
realFavicon.generateFavicon( realFavicon.generateFavicon(
{ {
@ -309,6 +316,8 @@ gulp.task(
gulp.series("asset-sync-font", "asset-sync-css", "asset-sync-js", "asset-rev") gulp.series("asset-sync-font", "asset-sync-css", "asset-sync-js", "asset-rev")
); );
gulp.task("favicon", gulp.series("favicon-svg", "favicon-generate"));
gulp.task("svg", gulp.series("svg-sprite")); gulp.task("svg", gulp.series("svg-sprite"));
gulp.task( gulp.task(
@ -321,7 +330,7 @@ gulp.task(
devBuild ? "asset-map" : [], devBuild ? "asset-map" : [],
"svg", "svg",
"iconfont", "iconfont",
"favicon-generate", "favicon",
]) ])
); );

View file

@ -1 +1,3 @@
<link rel="icon" href="{{ "favicon/favicon-32x32.png" | relURL }}" type="image/x-icon"> <link rel="icon" type="image/svg+xml" href="{{ "favicon/favicon.svg" | relURL }}">
<link rel="icon" type="image/png" sizes="32x32" href="{{ "favicon/favicon-32x32.png" | relURL }}">
<link rel="icon" type="image/png" sizes="16x16" href="{{ "favicon/favicon-16x16.png" | relURL }}">