From 6e4765e10c0fe2bc631db59533eabe6915a102ed Mon Sep 17 00:00:00 2001 From: zzossig Date: Fri, 24 Jul 2020 13:15:31 +0900 Subject: [PATCH] [new feature] type writer in home header --- README.ko.md | 4 +- README.md | 62 +++++++++++++++---- data/lib.toml | 3 + exampleSite/config/_default/params.toml | 2 +- exampleSite/content/en/_index.md | 19 ++++++ exampleSite/content/ko/_index.md | 19 ++++++ .../partials/header/header-typewriter.html | 41 ++++++++++++ layouts/partials/header/site-header.html | 2 + 8 files changed, 138 insertions(+), 14 deletions(-) create mode 100644 layouts/partials/header/header-typewriter.html diff --git a/README.ko.md b/README.ko.md index f6d00e6..cbe5238 100644 --- a/README.ko.md +++ b/README.ko.md @@ -255,7 +255,7 @@ hideSingleContentsWhenJSDisabled = false minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud # header -homeHeaderType = "text" # text, img, slide +homeHeaderType = "text" # text, img, slide, typewriter # menu showMobileMenuTerms = ["tags", "categories", "series"] @@ -800,7 +800,7 @@ root/assets/scss/custom.scss 홈페이지에서 헤더 부분에 4가지 종류의 헤더를 입힐 수 있습니다. 슬라이더, 이미지, 텍스트, 그리고 아무것도 입력 안하시면 빈공간이 됩니다. -1. config/_default/params.toml 설정파일에 homeHeaderType 값을 변경해주세요. 가능한 값은 slide, img, text입니다. +1. config/_default/params.toml 설정파일에 homeHeaderType 값을 변경해주세요. 가능한 값은 slide, img, text, typewriter입니다. 2. root/content/_index.md에 _index.md 파일을 만들어주세요 그리고 아래 내용을 복붙해주세요. diff --git a/README.md b/README.md index 2d3318f..c1637d3 100644 --- a/README.md +++ b/README.md @@ -3,16 +3,37 @@ English | [한국어](https://github.com/zzossig/hugo-theme-zzo/blob/master/README.ko.md) -🔥🔥🔥 -after update the zzo theme, delete the outputs.page variable in `config.toml`. -```diff -[outputs] - page = ["HTML", "SearchIndex"] -``` -I changed the place to make search index -🔥🔥🔥 +2020-07-24 new feature - [type writer in home header] -Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(always), and many features. +I added new home header option. Now, we have 5 options - empty, text, image, slider and typewriter +Follow the below steps to apply it + +0. Update the theme first. +1. Edit `homeHeaderType` param to `typewriter` in params.toml file. +2. Insert below code to your header md file. +```yaml +header: + - type: typewriter + methods: + - typeString: Hello world! + - pauseFor: 2500 + - deleteAll: true + - typeString: Strings can be removed + - pauseFor: 2500 + - deleteChars: 7 + - typeString: altered! + - pauseFor: 2500 + options: + loop: true + autoStart: false + height: 190 + paddingX: 50 + align: center + fontSize: 44 + fontColor: yellow + ... +``` +3. Refer this site https://safi.me.uk/typewriterjs/ and edit the params. ## Documentation @@ -246,7 +267,7 @@ hideSingleContentsWhenJSDisabled = false minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud # header -homeHeaderType = "text" # text, img, slide +homeHeaderType = "text" # text, img, slide, typewriter # menu showMobileMenuTerms = ["tags", "categories", "series"] @@ -781,7 +802,7 @@ Make sure that !important is necessary. After you changed this param, restart hu ### custom header -You may want to change home page header. There are 4 options which is slider, image, text, empty. +You may want to change home page header. There are 5 options which is slider, image, text, typewriter, empty. 1. Set param at config/_default/params.toml(homeHeaderType) @@ -790,6 +811,25 @@ You may want to change home page header. There are 4 options which is slider, im ```yaml --- header: +- type: typewriter + methods: + - typeString: Hello world! + - pauseFor: 2500 + - deleteAll: true + - typeString: Strings can be removed + - pauseFor: 2500 + - deleteChars: 7 + - typeString: altered! + - pauseFor: 2500 + options: + loop: true + autoStart: false + height: 190 + paddingX: 50 + align: center + fontSize: 44 + fontColor: yellow + - type: text height: 200 paddingX: 50 diff --git a/data/lib.toml b/data/lib.toml index f31f134..72dca85 100644 --- a/data/lib.toml +++ b/data/lib.toml @@ -58,6 +58,9 @@ sri = "sha256-Ogqs510LFnekr9o7OLdpelaaAmNss9egQRTyzCqV2NQ=" url = "https://cdn.jsdelivr.net/npm/viz.js@2.1.2/full.render.js" +[js.typewriter] + sri = "sha256-dsvC/UolMujQ/UQ7lVeJ7Q/FV3BSzWO0rc8iz1rqHQo=" + url = "https://cdn.jsdelivr.net/npm/typewriter-effect@2.13.1/dist/core.js" diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml index 8c205f3..b16a7d6 100644 --- a/exampleSite/config/_default/params.toml +++ b/exampleSite/config/_default/params.toml @@ -20,7 +20,7 @@ enablePinnedPosts = true minItemsToShowInTagCloud = 1 # Minimum items to show in tag cloud # header -homeHeaderType = "text" # text, img, slide +homeHeaderType = "text" # text, img, slide, typewriter # menu showMobileMenuTerms = ["tags", "categories", "series"] diff --git a/exampleSite/content/en/_index.md b/exampleSite/content/en/_index.md index 62ee180..2faff64 100644 --- a/exampleSite/content/en/_index.md +++ b/exampleSite/content/en/_index.md @@ -1,5 +1,24 @@ --- header: + - type: typewriter + methods: + - typeString: Hello world! + - pauseFor: 2500 + - deleteAll: true + - typeString: Strings can be removed + - pauseFor: 2500 + - deleteChars: 7 + - typeString: altered! + - pauseFor: 2500 + options: + loop: true + autoStart: false + height: 190 + paddingX: 50 + align: center + fontSize: 44 + fontColor: yellow + - type: text height: 200 paddingX: 50 diff --git a/exampleSite/content/ko/_index.md b/exampleSite/content/ko/_index.md index 62ee180..2faff64 100644 --- a/exampleSite/content/ko/_index.md +++ b/exampleSite/content/ko/_index.md @@ -1,5 +1,24 @@ --- header: + - type: typewriter + methods: + - typeString: Hello world! + - pauseFor: 2500 + - deleteAll: true + - typeString: Strings can be removed + - pauseFor: 2500 + - deleteChars: 7 + - typeString: altered! + - pauseFor: 2500 + options: + loop: true + autoStart: false + height: 190 + paddingX: 50 + align: center + fontSize: 44 + fontColor: yellow + - type: text height: 200 paddingX: 50 diff --git a/layouts/partials/header/header-typewriter.html b/layouts/partials/header/header-typewriter.html new file mode 100644 index 0000000..ad0cebc --- /dev/null +++ b/layouts/partials/header/header-typewriter.html @@ -0,0 +1,41 @@ + + +{{ if $.Params.header }} + {{ range $.Params.header }} + {{ if eq .type "typewriter" }} +
+
+
+ + + {{ end }} + {{ end }} +{{ end }} diff --git a/layouts/partials/header/site-header.html b/layouts/partials/header/site-header.html index 9ca125c..67f352e 100644 --- a/layouts/partials/header/site-header.html +++ b/layouts/partials/header/site-header.html @@ -6,6 +6,8 @@ {{ partial "header/header-img" . }} {{ else if and ($.Param "homeHeaderType") (eq ($.Param "homeHeaderType") "text") }} {{ partial "header/header-text" . }} + {{ else if and ($.Param "homeHeaderType") (eq ($.Param "homeHeaderType") "typewriter") }} + {{ partial "header/header-typewriter" . }} {{ else }} {{ partial "header/custom-header" . }} {{ end }}