From cf4134df17f7b971889287d122bc522778002bee Mon Sep 17 00:00:00 2001 From: Robert Kaussow Date: Thu, 23 Sep 2021 14:31:19 +0200 Subject: [PATCH] chore: normalize default favicons and add docs (#96) --- .dictionary | 2 + exampleSite/content/posts/features/theming.md | 53 +++++++++++++++++++ .../content/posts/usage/getting-started.md | 1 + gulpfile.js | 11 +++- layouts/partials/head/favicons.html | 2 +- 5 files changed, 67 insertions(+), 2 deletions(-) create mode 100644 exampleSite/content/posts/features/theming.md diff --git a/.dictionary b/.dictionary index 9669330..00a6adf 100644 --- a/.dictionary +++ b/.dictionary @@ -31,3 +31,5 @@ prebuilt (S|s)ubdirector(ies|y) (M|m)inify whitespace +Theming +Favicon[s]? diff --git a/exampleSite/content/posts/features/theming.md b/exampleSite/content/posts/features/theming.md new file mode 100644 index 0000000..edbdc18 --- /dev/null +++ b/exampleSite/content/posts/features/theming.md @@ -0,0 +1,53 @@ +--- +title: Theming +date: 2021-05-23T20:00:00+01:00 +authors: + - john-doe +tags: + - Documentation + - Features +--- + +Personalize the look of your site. + + + +{{< toc >}} + +## 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. + + +```tpl + + + +``` + +### 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:** + + +```tpl + + + + + + + + + +``` diff --git a/exampleSite/content/posts/usage/getting-started.md b/exampleSite/content/posts/usage/getting-started.md index 450d186..6943fa4 100644 --- a/exampleSite/content/posts/usage/getting-started.md +++ b/exampleSite/content/posts/usage/getting-started.md @@ -250,6 +250,7 @@ There are a lot more things to discover. To get the most out of the Theme we hav - [Menus](/posts/usage/menus/) - **Features** - [Icon Sets](/posts/features/icon-sets/) + - [Theming](/posts/features/theming/) - [Authors](/posts/features/authors/) - [Sticky Posts](/posts/features/sticky/) - [Shortcodes](/posts/advanced/shortcodes/) diff --git a/gulpfile.js b/gulpfile.js index 9e2e0ac..a4d6f69 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -49,6 +49,13 @@ gulp.task("sass", function () { .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) { realFavicon.generateFavicon( { @@ -272,6 +279,8 @@ gulp.task("clean", function () { gulp.task("asset", gulp.series("asset-sync", "asset-rev")); +gulp.task("favicon", gulp.series("favicon-svg", "favicon-generate")); + gulp.task("svg", gulp.series("svg-sprite", devBuild ? "svg-sprite-list" : [])); gulp.task( @@ -284,7 +293,7 @@ gulp.task( devBuild ? "asset-map" : [], "svg", "iconfont", - "favicon-generate", + "favicon", ]) ); diff --git a/layouts/partials/head/favicons.html b/layouts/partials/head/favicons.html index b67a1b4..1ac070b 100644 --- a/layouts/partials/head/favicons.html +++ b/layouts/partials/head/favicons.html @@ -1,3 +1,3 @@ - +