From 231964080b26b3b3cab91b2c6144a784d3bef99d Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Sun, 14 Jun 2020 00:06:35 +0800 Subject: In-post APlayer now support multiple files --- README.md | 14 ++++++++++---- README_CN.md | 14 ++++++++++---- assets/scss/_fuji-theme/_dark-diff.scss | 21 +++++++++++++++++++++ gulpfile.js | 4 ++++ layouts/_default/single.html | 2 +- layouts/partials/head.html | 2 +- layouts/partials/scripts-end.html | 21 +++++++++++++-------- package.json | 7 +++++-- static/assets/css/fuji.min.css | 2 +- static/assets/css/fuji.min.css.map | 1 - static/assets/js/fuji.min.js.map | 1 - 11 files changed, 66 insertions(+), 23 deletions(-) delete mode 100644 static/assets/css/fuji.min.css.map delete mode 100644 static/assets/js/fuji.min.js.map diff --git a/README.md b/README.md index d8f4428..e28ed3c 100644 --- a/README.md +++ b/README.md @@ -98,10 +98,16 @@ showToc = false In-post APlayer supported, you can set these variables in post's front matter: ```toml -playerName = "..." # Audio title or name -playerArtist = "..." # Audio artist -playerURL = "..." # Audio URL, support aac, mp3, wav and ogg -playerCover = "..." # Audio cover +[[player]] + playerName = "..." # Audio title or name + playerArtist = "..." # Audio artist + playerURL = "..." # Audio URL, support aac, mp3, wav and ogg + playerCover = "..." # Audio cover +[[player]] + playerName = "..." + playerArtist = "..." + playerURL = "..." + playerCover = "..." ``` ### 📷 Image zoom and lazyload settings diff --git a/README_CN.md b/README_CN.md index 6f2ed65..17fe0c0 100644 --- a/README_CN.md +++ b/README_CN.md @@ -88,10 +88,16 @@ showToc = false 支持给文章单独添加 APlayer,在 front matter 里加上这些: ```toml -playerName = "..." # 标题 -playerArtist = "..." # 作者 -playerURL = "..." # URL -playerCover = "..." # 封面 +[[player]] + playerName = "..." # 标题 + playerArtist = "..." # 作者 + playerURL = "..." # URL + playerCover = "..." # 封面 +[[player]] + playerName = "..." + playerArtist = "..." + playerURL = "..." + playerCover = "..." ``` ### 📷 图片放大的设置和 lazyload diff --git a/assets/scss/_fuji-theme/_dark-diff.scss b/assets/scss/_fuji-theme/_dark-diff.scss index 55f596f..d5821a8 100644 --- a/assets/scss/_fuji-theme/_dark-diff.scss +++ b/assets/scss/_fuji-theme/_dark-diff.scss @@ -33,3 +33,24 @@ table { .aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path { fill: var(--color-focus) !important; } + +.aplayer .aplayer-list ol li { + border-top: 1px solid var(--color-bg) !important; +} + +.aplayer.aplayer-withlist .aplayer-info { + border-bottom: 1px solid var(--color-bg) !important; +} + +.aplayer .aplayer-list ol li.aplayer-list-light { + background-color: var(--color-codebg) !important; +} + +.aplayer .aplayer-list ol li:hover { + background-color: var(--color-codebg) !important; +} + +.aplayer .aplayer-list ol li .aplayer-list-author, +.aplayer .aplayer-list ol li .aplayer-list-index { + color: var(--color-font) !important; +} diff --git a/gulpfile.js b/gulpfile.js index 7caec20..a0df114 100644 --- a/gulpfile.js +++ b/gulpfile.js @@ -1,4 +1,5 @@ var pipeline = require('readable-stream').pipeline; +var del = require('del'); var gulp = require('gulp'); var sourcemaps = require('gulp-sourcemaps'); var babel = require('gulp-babel'); @@ -58,6 +59,9 @@ function css() { } exports.build = gulp.parallel(js, css); +exports.clean = function () { + return del(['static/assets/css/fuji.min.css.map', 'static/assets/js/fuji.min.js.map']); +}; exports.devJs = function () { return gulp.watch('assets/js/fuji.js', { delay: 500 }, devJs); }; diff --git a/layouts/_default/single.html b/layouts/_default/single.html index db5e2f5..413cacc 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -7,7 +7,7 @@
- {{ with .Params.playerURL }} + {{ with .Params.player }} {{ end }} diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 0603c4d..6470262 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -41,7 +41,7 @@ {{ end }} -{{ if .Params.playerURL }} +{{ if .Params.player }} {{ end }} {{ if .Site.Params.useDisqusJS }} diff --git a/layouts/partials/scripts-end.html b/layouts/partials/scripts-end.html index 862e0e2..2e1de5f 100644 --- a/layouts/partials/scripts-end.html +++ b/layouts/partials/scripts-end.html @@ -7,20 +7,25 @@ -{{ with .Params.playerURL }} +{{ with .Params.player }} - {{ with .Params.player }} diff --git a/layouts/shortcodes/img-lazy.html b/layouts/shortcodes/img-lazy.html index fef9bd3..e57b8fb 100644 --- a/layouts/shortcodes/img-lazy.html +++ b/layouts/shortcodes/img-lazy.html @@ -1,10 +1,22 @@ -{{ if len .Params | eq 2 }} -
+
+
+
+
+
+
+
+
+
+
+
+
s)\r\n > code {\r\n padding: 0;\r\n margin: 0;\r\n // stylelint-disable-next-line primer/typography\r\n font-size: 100%;\r\n word-break: normal;\r\n white-space: pre;\r\n background: transparent;\r\n border: 0;\r\n }\r\n }\r\n\r\n .highlight {\r\n margin-bottom: $spacer-3;\r\n\r\n pre {\r\n margin-bottom: 0;\r\n word-break: normal;\r\n }\r\n }\r\n\r\n .highlight pre,\r\n pre {\r\n padding: $spacer-3;\r\n overflow: auto;\r\n // stylelint-disable-next-line primer/typography\r\n font-size: 85%;\r\n // stylelint-disable-next-line primer/typography\r\n line-height: 1.45;\r\n background-color: $bg-gray;\r\n border-radius: $border-radius;\r\n }\r\n\r\n pre code,\r\n pre tt {\r\n display: inline;\r\n max-width: auto;\r\n padding: 0;\r\n margin: 0;\r\n overflow: visible;\r\n line-height: inherit;\r\n word-wrap: normal;\r\n background-color: transparent;\r\n border: 0;\r\n }\r\n}\r\n","// stylelint-disable selector-max-type\r\n.markdown-body .csv-data {\r\n td,\r\n th {\r\n // stylelint-disable-next-line primer/spacing\r\n padding: 5px;\r\n overflow: hidden;\r\n font-size: $font-size-small;\r\n line-height: $lh-condensed-ultra;\r\n text-align: left;\r\n white-space: nowrap;\r\n }\r\n\r\n .blob-num {\r\n // stylelint-disable-next-line primer/spacing\r\n padding: 10px $spacer-2 9px;\r\n text-align: right;\r\n background: $bg-white;\r\n border: 0;\r\n }\r\n\r\n tr { border-top: 0; }\r\n\r\n th {\r\n font-weight: $font-weight-bold;\r\n background: $bg-gray;\r\n border-top: 0;\r\n }\r\n}\r\n","// Layout\r\n// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, comment-empty-line-before\r\n\r\n// Loop through the breakpoint values\r\n@each $breakpoint, $variant in $responsive-variants {\r\n @include breakpoint($breakpoint) {\r\n @each $position in $responsive-positions {\r\n .position#{$variant}-#{$position} {\r\n position: $position !important;\r\n }\r\n }\r\n }\r\n}\r\n\r\n/* Set top 0 */\r\n.top-0 { top: 0 !important; }\r\n/* Set right 0 */\r\n.right-0 { right: 0 !important; }\r\n/* Set bottom 0 */\r\n.bottom-0 { bottom: 0 !important; }\r\n/* Set left 0 */\r\n.left-0 { left: 0 !important; }\r\n\r\n/* Vertical align middle */\r\n.v-align-middle { vertical-align: middle !important; }\r\n/* Vertical align top */\r\n.v-align-top { vertical-align: top !important; }\r\n/* Vertical align bottom */\r\n.v-align-bottom { vertical-align: bottom !important; }\r\n/* Vertical align to the top of the text */\r\n.v-align-text-top { vertical-align: text-top !important; }\r\n/* Vertical align to the bottom of the text */\r\n.v-align-text-bottom { vertical-align: text-bottom !important; }\r\n/* Vertical align to the parent's baseline */\r\n.v-align-baseline { vertical-align: baseline !important; }\r\n\r\n// Overflow utilities\r\n@each $overflow in (visible, hidden, auto, scroll) {\r\n .overflow-#{$overflow} { overflow: $overflow !important; }\r\n .overflow-x-#{$overflow} { overflow-x: $overflow !important; }\r\n .overflow-y-#{$overflow} { overflow-y: $overflow !important; }\r\n}\r\n\r\n// Clear floats\r\n/* Clear floats around the element */\r\n.clearfix {\r\n @include clearfix;\r\n}\r\n\r\n// Floats\r\n@each $breakpoint, $variant in $responsive-variants {\r\n @include breakpoint($breakpoint) {\r\n /* Float to the left */\r\n .float#{$variant}-left { float: left !important; }\r\n /* Float to the right */\r\n .float#{$variant}-right { float: right !important; }\r\n /* No float */\r\n .float#{$variant}-none { float: none !important; }\r\n }\r\n}\r\n\r\n// Width and height utilities, helpful in combination\r\n// with display-table utilities and images\r\n/* Max width 100% */\r\n.width-fit { max-width: 100% !important; }\r\n/* Set the width to 100% */\r\n.width-full { width: 100% !important; }\r\n/* Max height 100% */\r\n.height-fit { max-height: 100% !important; }\r\n/* Set the height to 100% */\r\n.height-full { height: 100% !important; }\r\n\r\n/* Remove min-width from element */\r\n.min-width-0 { min-width: 0 !important; }\r\n\r\n@each $breakpoint, $variant in $responsive-variants {\r\n @include breakpoint($breakpoint) {\r\n\r\n // Auto varients\r\n .width#{$variant}-auto { width: auto !important; }\r\n\r\n /* Set the direction to rtl */\r\n .direction#{$variant}-rtl { direction: rtl !important; }\r\n /* Set the direction to ltr */\r\n .direction#{$variant}-ltr { direction: ltr !important; }\r\n }\r\n}\r\n","header {\r\n .header {\r\n padding: 1.75rem 1.5rem 2rem 1.5rem;\r\n }\r\n\r\n .title-main {\r\n font-size: 2.5rem;\r\n font-family: $title-font;\r\n font-weight: 700;\r\n white-space: nowrap;\r\n }\r\n\r\n .title-sub {\r\n margin: 0 0.1rem;\r\n display: block;\r\n white-space: nowrap;\r\n\r\n &::-webkit-scrollbar {\r\n display: none; // WebKit\r\n }\r\n\r\n scrollbar-width: none; // Firefox\r\n -ms-overflow-style: none; // Microsoft\r\n }\r\n}\r\n",".content {\r\n padding: 1.5rem 1.5rem 0 1.5rem; // same as sidebar\r\n}\r\n\r\n.post {\r\n // paddings between posts\r\n &:not(:first-child) {\r\n padding: 1.5rem 0;\r\n }\r\n\r\n &:first-child {\r\n padding: 0 0 1.5rem 0;\r\n }\r\n}\r\n\r\n.post-title {\r\n font-size: $font-size-1;\r\n}\r\n\r\n.post-meta {\r\n display: flex;\r\n align-items: center;\r\n margin: 0.5rem 0.1rem 1rem 0.1rem; // little space\r\n flex-wrap: wrap;\r\n\r\n span {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n span:not(:last-child) {\r\n padding-right: 1.5rem;\r\n }\r\n}\r\n\r\n.post-summary {\r\n margin: 0 0.1rem; // little space\r\n\r\n p:last-child {\r\n margin-bottom: 0; // remove margin-bottom of last para in summary\r\n }\r\n\r\n h1,\r\n h2,\r\n h3,\r\n h4,\r\n h5,\r\n h6 {\r\n display: none; // hide h1-h6 in post summary\r\n }\r\n}\r\n\r\n.post-meta-archive {\r\n display: flex;\r\n align-items: center;\r\n margin: 0.5rem 0.1rem 0 0.1rem; // little space\r\n flex-wrap: wrap;\r\n\r\n span {\r\n display: flex;\r\n align-items: center;\r\n }\r\n\r\n span:not(:last-child) {\r\n padding-right: 1.5rem;\r\n }\r\n}\r\n\r\n.pagination {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n font-size: 1.25rem;\r\n line-height: 1.25rem;\r\n padding: 1.25rem 0;\r\n\r\n div {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n width: 2rem;\r\n height: 2rem;\r\n\r\n a {\r\n display: flex;\r\n align-items: center;\r\n }\r\n }\r\n}\r\n\r\n.page-info {\r\n padding: 0 0.1rem 1.5rem 0.1rem;\r\n}\r\n\r\n// single page part\r\narticle {\r\n padding-bottom: 1.5rem;\r\n\r\n .post-content {\r\n margin: 1.25rem 0.1rem 0 0.1rem;\r\n }\r\n}\r\n\r\n.license {\r\n margin-bottom: 1.5rem;\r\n}\r\n\r\n.post-loading {\r\n margin: 0 0 1.5rem 0;\r\n padding-top: 1.5rem;\r\n text-align: center;\r\n\r\n i {\r\n font-size: 1.25rem;\r\n }\r\n\r\n p {\r\n margin: 0.5rem 0 0 0;\r\n }\r\n}\r\n\r\n.markdown-body {\r\n h1 {\r\n font-size: $font-size-1;\r\n margin-top: 1.5rem;\r\n }\r\n\r\n h2 {\r\n font-size: $font-size-2;\r\n margin-top: 1.375rem;\r\n }\r\n\r\n h3 {\r\n font-size: $font-size-3;\r\n margin-top: 1.25rem;\r\n }\r\n\r\n h4 {\r\n margin-top: 1.25rem;\r\n }\r\n\r\n ul {\r\n list-style-type: circle;\r\n }\r\n\r\n img {\r\n max-width: 98%;\r\n margin: 0 0.25rem 0.5rem 0.25rem;\r\n }\r\n}\r\n\r\n.post-comment {\r\n span.post-comment-notloaded {\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n }\r\n}\r\n\r\n#disqus_thread {\r\n padding: 1.25rem 0;\r\n}\r\n\r\n// search page part\r\n\r\n#search-result .post:first-child {\r\n padding: 1.5rem 0;\r\n}\r\n\r\n.search-result-info {\r\n padding: 1rem 0.1rem;\r\n}\r\n\r\n.search-input {\r\n display: flex;\r\n height: 2.5rem;\r\n align-items: center;\r\n padding-left: 0.5rem;\r\n width: 100%;\r\n\r\n input {\r\n width: 100%;\r\n min-width: 0;\r\n flex: 1 1 auto;\r\n height: 2rem;\r\n }\r\n\r\n button {\r\n flex: 0 1 auto;\r\n padding: 0 0.75rem;\r\n word-break: keep-all;\r\n height: 2.5rem;\r\n }\r\n}\r\n",".sidebar {\r\n padding: 1.5rem 1.5rem 1.5rem 0; // no left padding on big screen\r\n}\r\n\r\n.sidebar-item {\r\n &:not(:last-child) {\r\n margin-bottom: 1rem; // space betreen sidebar items\r\n }\r\n\r\n h3 {\r\n margin-bottom: 0.25rem; // space betreen head3 & lists\r\n }\r\n\r\n ul {\r\n list-style-type: none;\r\n margin: 0 0.1rem; // little space\r\n }\r\n\r\n & > div,\r\n & > nav {\r\n margin: 0 0.1rem; // little space\r\n }\r\n\r\n & > img {\r\n margin: 0.5rem 0.25rem 0 0.25rem;\r\n width: 100%;\r\n border-radius: 2px;\r\n }\r\n}\r\n\r\n@media screen and (max-width: $width-md) {\r\n .sidebar {\r\n padding: 1.5rem;\r\n display: flex;\r\n flex-direction: row;\r\n flex-wrap: wrap;\r\n justify-content: space-around;\r\n }\r\n\r\n .sidebar-item {\r\n width: 40%; // max 2 modules per line\r\n\r\n // space only at first 2 modules\r\n .sidebar-pages,\r\n .sidebar-tags {\r\n margin-bottom: 1rem;\r\n }\r\n\r\n .sidebar-links,\r\n .sidebar-bgm {\r\n margin-bottom: 0;\r\n }\r\n\r\n & > img {\r\n margin: 0.5rem 0.25rem 0 0.25rem;\r\n width: 75%;\r\n border-radius: 0.25rem;\r\n }\r\n }\r\n}\r\n\r\n// single page part\r\n.sidebar-toc {\r\n ul ul {\r\n font-size: 0.875rem;\r\n padding-left: 0.5rem;\r\n margin-bottom: 0.25rem;\r\n }\r\n}\r\n","footer {\r\n .footer {\r\n padding: 2rem 1.5rem;\r\n text-align: center;\r\n\r\n i {\r\n font-size: 0.875rem;\r\n }\r\n }\r\n}\r\n",".btn {\r\n position: fixed;\r\n right: 1.5rem;\r\n bottom: 1.5rem;\r\n width: 2.5rem;\r\n height: 5rem;\r\n display: flex;\r\n justify-content: space-between;\r\n flex-direction: column;\r\n\r\n div {\r\n flex: 0 1 auto;\r\n width: 2.5rem;\r\n height: 2.5rem;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n cursor: pointer;\r\n\r\n &:first-child {\r\n border-radius: 0.25rem 0.25rem 0 0;\r\n font-size: 1.25rem;\r\n }\r\n\r\n &:last-child {\r\n border-radius: 0 0 0.25rem 0.25rem;\r\n font-size: 1.5rem;\r\n }\r\n }\r\n}\r\n\r\n#post-aplayer {\r\n margin: 0 0.125rem 1.25rem 0.125rem;\r\n font-family: inherit;\r\n}\r\n","@mixin light {\r\n --color-mode: 'light';\r\n --color-primary: #{$light-color-primary};\r\n --color-secondary: #{$light-color-secondary};\r\n --color-focus: #{$light-color-focus};\r\n --color-mute: #{$light-color-mute};\r\n --color-font: #{$light-color-font};\r\n --color-divider: #{$light-color-divider};\r\n --color-bg: #{$light-color-bg};\r\n --color-codebg: #{$light-color-codebg};\r\n}\r\n\r\n@mixin dark {\r\n --color-mode: 'dark';\r\n --color-primary: #{$dark-color-primary};\r\n --color-secondary: #{$dark-color-secondary};\r\n --color-focus: #{$dark-color-focus};\r\n --color-mute: #{$dark-color-mute};\r\n --color-font: #{$dark-color-font};\r\n --color-divider: #{$dark-color-divider};\r\n --color-bg: #{$dark-color-bg};\r\n --color-codebg: #{$dark-color-codebg};\r\n}\r\n\r\nbody[data-theme='auto'] {\r\n @include light();\r\n\r\n @media (prefers-color-scheme: dark) {\r\n @include dark();\r\n @import '_dark-diff'; // things different from light\r\n }\r\n}\r\n\r\nbody[data-theme='light'] {\r\n @include light();\r\n}\r\n\r\nbody[data-theme='dark'] {\r\n @include dark();\r\n @import '_dark-diff'; // things different from light\r\n}\r\n\r\n@mixin link-1 {\r\n a {\r\n color: var(--color-primary);\r\n }\r\n\r\n a:hover {\r\n color: var(--color-secondary);\r\n }\r\n}\r\n\r\n@mixin link-2 {\r\n a {\r\n color: var(--color-secondary);\r\n }\r\n\r\n a:hover {\r\n color: var(--color-focus);\r\n }\r\n}\r\n\r\n$divider: 2px solid var(--color-divider);\r\n","img {\r\n filter: brightness(60%);\r\n}\r\n\r\ntable {\r\n th,\r\n td {\r\n border-color: var(--color-font);\r\n }\r\n\r\n tr {\r\n background-color: var(--color-bg);\r\n border-color: var(--color-font);\r\n\r\n &:nth-child(2n) {\r\n background-color: var(--color-divider);\r\n }\r\n }\r\n}\r\n\r\n#post-aplayer {\r\n background-color: var(--color-divider);\r\n}\r\n\r\n.aplayer .aplayer-info .aplayer-music .aplayer-author {\r\n color: var(--color-font) !important;\r\n}\r\n\r\n.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon path {\r\n fill: var(--color-font) !important;\r\n}\r\n\r\n.aplayer .aplayer-info .aplayer-controller .aplayer-time .aplayer-icon:hover path {\r\n fill: var(--color-focus) !important;\r\n}\r\n\r\n.aplayer .aplayer-list ol li {\r\n border-top: 1px solid var(--color-bg) !important;\r\n}\r\n\r\n.aplayer.aplayer-withlist .aplayer-info {\r\n border-bottom: 1px solid var(--color-bg) !important;\r\n}\r\n\r\n.aplayer .aplayer-list ol li.aplayer-list-light {\r\n background-color: var(--color-codebg) !important;\r\n}\r\n\r\n.aplayer .aplayer-list ol li:hover {\r\n background-color: var(--color-codebg) !important;\r\n}\r\n\r\n.aplayer .aplayer-list ol li .aplayer-list-author,\r\n.aplayer .aplayer-list ol li .aplayer-list-index {\r\n color: var(--color-font) !important;\r\n}\r\n","::selection,\r\n::-moz-selection {\r\n color: var(--color-bg);\r\n background-color: var(--color-primary);\r\n}\r\n\r\nbody {\r\n background-color: var(--color-bg);\r\n color: var(--color-font);\r\n\r\n @include link-1();\r\n}\r\n\r\n.post-summary,\r\n.post-meta {\r\n @include link-2();\r\n}\r\n\r\n.pag-current a,\r\n.pag-current a:hover {\r\n color: var(--color-focus);\r\n}\r\n\r\n.title-sub,\r\n.post-meta {\r\n color: var(--color-mute);\r\n}\r\n\r\nheader,\r\n.page-info {\r\n border-bottom: $divider;\r\n}\r\n\r\n.post + .post,\r\n.pagination,\r\nfooter {\r\n border-top: $divider;\r\n}\r\n\r\n.post-meta-archive {\r\n @include link-2();\r\n\r\n color: var(--color-mute);\r\n}\r\n\r\n@media screen and (max-width: $width-md) {\r\n .sidebar {\r\n border-top: $divider;\r\n }\r\n}\r\n\r\n// single page part\r\n.post-content {\r\n @include link-2();\r\n}\r\n\r\n.markdown-body {\r\n h1,\r\n h2,\r\n h3,\r\n h4,\r\n h5,\r\n h6 {\r\n color: var(--color-primary);\r\n }\r\n\r\n strong,\r\n em {\r\n color: var(--color-secondary);\r\n }\r\n\r\n h1,\r\n h2 {\r\n border-bottom: $divider;\r\n }\r\n\r\n blockquote {\r\n color: var(--color-mute);\r\n }\r\n\r\n img {\r\n border-radius: 2px;\r\n background-color: inherit; // fix white pixels under border-radius\r\n }\r\n\r\n hr {\r\n height: 2px;\r\n }\r\n\r\n pre,\r\n code {\r\n background-color: var(--color-codebg);\r\n }\r\n}\r\n\r\n.post-loading {\r\n border-top: $divider;\r\n}\r\n\r\n.post-comment {\r\n border-top: $divider;\r\n\r\n span.post-comment-notloaded {\r\n padding: 1.5rem 0;\r\n color: var(--color-secondary);\r\n cursor: pointer;\r\n\r\n &:hover {\r\n color: var(--color-focus);\r\n }\r\n }\r\n}\r\n\r\n// components\r\n.btn {\r\n div {\r\n background-color: var(--color-divider);\r\n\r\n color: var(--color-primary);\r\n }\r\n\r\n div:hover {\r\n background-color: var(--color-primary);\r\n color: var(--color-divider);\r\n }\r\n\r\n div + div {\r\n border-top: 2px solid var(--color-bg);\r\n }\r\n}\r\n\r\n// prism.js theme [solarized-light]\r\n\r\ncode[class*='language-'],\r\npre[class*='language-'] {\r\n -moz-tab-size: 4;\r\n -o-tab-size: 4;\r\n tab-size: 4;\r\n}\r\n\r\n.token.comment,\r\n.token.prolog,\r\n.token.doctype,\r\n.token.cdata {\r\n color: #93a1a1; /* base1 */\r\n}\r\n\r\n.token.punctuation {\r\n color: #586e75; /* base01 */\r\n}\r\n\r\n.token.namespace {\r\n opacity: 0.7;\r\n}\r\n\r\n.token.property,\r\n.token.tag,\r\n.token.boolean,\r\n.token.number,\r\n.token.constant,\r\n.token.symbol,\r\n.token.deleted {\r\n color: #268bd2; /* blue */\r\n}\r\n\r\n.token.selector,\r\n.token.attr-name,\r\n.token.string,\r\n.token.char,\r\n.token.builtin,\r\n.token.url,\r\n.token.inserted {\r\n color: #2aa198; /* cyan */\r\n}\r\n\r\n.token.entity {\r\n color: #657b83; /* base00 */\r\n background: #eee8d5; /* base2 */\r\n}\r\n\r\n.token.atrule,\r\n.token.attr-value,\r\n.token.keyword {\r\n color: #859900; /* green */\r\n}\r\n\r\n.token.function,\r\n.token.class-name {\r\n color: #b58900; /* yellow */\r\n}\r\n\r\n.token.regex,\r\n.token.important,\r\n.token.variable {\r\n color: #cb4b16; /* orange */\r\n}\r\n\r\n.token.important,\r\n.token.bold {\r\n font-weight: 600;\r\n}\r\n.token.italic {\r\n font-style: italic;\r\n}\r\n\r\n// fix conflicts of primer css & prism.js style\r\npre,\r\ncode {\r\n .rule {\r\n margin: 0;\r\n border-bottom: none;\r\n overflow: inherit;\r\n\r\n &::before,\r\n &::after {\r\n display: inherit;\r\n clear: inherit;\r\n }\r\n }\r\n}\r\n\r\n// disqus js styles\r\n\r\n#dsqjs {\r\n a {\r\n text-decoration: none !important;\r\n color: var(--color-secondary) !important;\r\n }\r\n\r\n a:hover {\r\n color: var(--color-focus) !important;\r\n }\r\n\r\n .dsqjs-bullet::after {\r\n color: var(--color-mute) !important;\r\n font-weight: 600 !important;\r\n }\r\n\r\n .dsqjs-no-comment {\r\n color: var(--color-font) !important;\r\n }\r\n\r\n .dsqjs-nav-tab {\r\n color: var(--color-mute) !important;\r\n }\r\n\r\n .dsqjs-tab-active {\r\n color: var(--color-font) !important;\r\n\r\n & > span:after {\r\n background-color: var(--color-secondary) !important;\r\n }\r\n }\r\n\r\n .dsqjs-post-list {\r\n .dsqjs-post-avatar {\r\n background: var(--color-bg) !important;\r\n }\r\n\r\n .dsqjs-post-header {\r\n .dsqjs-post-author {\r\n color: var(--color-mute) !important;\r\n font-weight: 600;\r\n }\r\n\r\n .dsqjs-admin-badge {\r\n color: var(--color-font) !important;\r\n background: var(--color-codebg) !important;\r\n }\r\n\r\n .dsqjs-meta {\r\n color: var(--color-mute) !important;\r\n }\r\n }\r\n }\r\n\r\n .dsqjs-post-body {\r\n color: var(--color-font) !important;\r\n\r\n code,\r\n pre {\r\n background: var(--color-codebg) !important;\r\n }\r\n\r\n blockquote {\r\n color: var(--color-codebg) !important;\r\n border-left: 0.25em solid var(--color-divider) !important;\r\n }\r\n }\r\n\r\n .dsqjs-load-more {\r\n background: var(--color-mute) !important;\r\n color: var(--color-bg) !important;\r\n }\r\n\r\n footer {\r\n border-top: 2px solid var(--color-divider) !important;\r\n font-weight: 600 !important;\r\n color: var(--color-mute) !important;\r\n }\r\n\r\n .dsqjs-order-radio:checked + .dsqjs-order-label {\r\n color: var(--color-font) !important;\r\n background-color: var(--color-divider) !important;\r\n }\r\n\r\n .dsqjs-order-label {\r\n background-color: var(--color-bg) !important;\r\n }\r\n\r\n p.dsqjs-has-more a.dsqjs-has-more-btn {\r\n color: var(--color-mute) !important;\r\n }\r\n}\r\n\r\n.search-result-info {\r\n border-bottom: $divider;\r\n}\r\n\r\n.search-input {\r\n border-top: 2px solid;\r\n border-left: 2px solid;\r\n border-bottom: 2px solid;\r\n border-right: none;\r\n border-radius: 0.25rem;\r\n border-color: var(--color-divider);\r\n background-color: var(--color-bg);\r\n\r\n &:hover,\r\n &:focus-within {\r\n color: var(--color-primary);\r\n border-color: var(--color-primary);\r\n }\r\n\r\n input {\r\n outline: none;\r\n border: none;\r\n color: inherit;\r\n background-color: inherit;\r\n }\r\n\r\n button {\r\n outline: none;\r\n border-top: 2px solid;\r\n border-left: none;\r\n border-right: 2px solid;\r\n border-bottom: 2px solid;\r\n border-radius: 0 0.25rem 0.25rem 0;\r\n border-color: inherit;\r\n color: inherit;\r\n background-color: inherit;\r\n\r\n &:hover {\r\n color: var(--color-secondary);\r\n }\r\n }\r\n}\r\n"]} \ No newline at end of file -- cgit v1.2.3 From f88c7b78f224bf746b831001ec8cef01693a4b3c Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Tue, 16 Jun 2020 16:09:04 +0800 Subject: Search page i18n --- assets/js/fuji.js | 14 ++++++++------ assets/scss/_fuji-style/_content.scss | 7 ++++++- i18n/en.toml | 9 +++++++++ i18n/ja.toml | 9 +++++++++ i18n/nl.toml | 9 +++++++++ i18n/zh-hans.toml | 9 +++++++++ i18n/zh-hant.toml | 9 +++++++++ layouts/_default/search.html | 8 ++++---- static/assets/css/fuji.min.css | 5 ++++- static/assets/css/fuji.min.css.map | 2 +- static/assets/js/fuji.min.js | 17 +++++++++-------- static/assets/js/fuji.min.js.map | 2 +- 12 files changed, 78 insertions(+), 22 deletions(-) diff --git a/assets/js/fuji.js b/assets/js/fuji.js index bf9eabc..14d63bc 100644 --- a/assets/js/fuji.js +++ b/assets/js/fuji.js @@ -105,7 +105,7 @@ function searchAll(key, index, counter) { ], }); let result = fuse.search(key); - console.log(result); + // console.log(result); if (result.length > 0) { document.getElementById('search-result').innerHTML = template('search-result-template', result); return [new Date().getTime() - counter, result.length]; @@ -124,16 +124,19 @@ if (urlParams.has('s')) { let xhr = new XMLHttpRequest(); xhr.open('GET', '/index.json', true); xhr.responseType = 'json'; - xhr.onerror = (e) => { + xhr.onerror = () => { infoElements[2].removeAttribute('style'); }; - xhr.onload = () => { + xhr.ontimeout = () => { + infoElements[2].removeAttribute('style'); + }; + xhr.onreadystatechange = () => { if (xhr.readyState === 4) { if (xhr.status === 200) { // use index json to search - console.log(xhr.response); + // console.log(xhr.response); counter = searchAll(key, xhr.response, counter); - console.log(counter); + // console.log(counter); if (counter === 'notFound') { infoElements[1].removeAttribute('style'); } else { @@ -142,7 +145,6 @@ if (urlParams.has('s')) { infoElements[0].removeAttribute('style'); } } else { - console.error(`Failed to get index.json, ${xhr.status} ${xhr.statusText}`); infoElements[2].removeAttribute('style'); } } diff --git a/assets/scss/_fuji-style/_content.scss b/assets/scss/_fuji-style/_content.scss index 10003ef..2cfd184 100644 --- a/assets/scss/_fuji-style/_content.scss +++ b/assets/scss/_fuji-style/_content.scss @@ -187,8 +187,13 @@ article { button { flex: 0 1 auto; - padding: 0 0.75rem; + padding: 0 0.5rem; word-break: keep-all; height: 2.5rem; + + ion-icon { + height: 100%; + font-size: 1.6rem; + } } } diff --git a/i18n/en.toml b/i18n/en.toml index f260aa9..84cbd94 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -42,3 +42,12 @@ [tagsCurrentTag] other = "Posts with the tag {{ .Title }}: " + +[searchSuccess] + other = "[NUM] results ([TIME] ms)" + +[searchNotFound] + other = "Results not found" + +[searchFailed] + other = "Failed to load index file" diff --git a/i18n/ja.toml b/i18n/ja.toml index b9d5133..5e1d863 100644 --- a/i18n/ja.toml +++ b/i18n/ja.toml @@ -42,3 +42,12 @@ [tagsCurrentTag] other = "タグ {{ .Title }} を持つ記事:" + +[searchSuccess] + other = "[NUM] 件 ([TIME] ミリ秒)" + +[searchNotFound] + other = "検索できませんでした" + +[searchFailed] + other = "インデックスを取得できません" diff --git a/i18n/nl.toml b/i18n/nl.toml index 6593ac6..ff8cacf 100644 --- a/i18n/nl.toml +++ b/i18n/nl.toml @@ -42,3 +42,12 @@ [tagsCurrentTag] other = "Alle posts met de tag {{ .Title }}: " + +[searchSuccess] + other = "[NUM] results ([TIME] ms) [Translation Help Needed]" + +[searchNotFound] + other = "Results not found [Translation Help Needed]" + +[searchFailed] + other = "Failed to load index file [Translation Help Needed]" diff --git a/i18n/zh-hans.toml b/i18n/zh-hans.toml index f4eec4e..37387a0 100644 --- a/i18n/zh-hans.toml +++ b/i18n/zh-hans.toml @@ -42,3 +42,12 @@ [tagsCurrentTag] other = "拥有标签 {{ .Title }} 的文章:" + +[searchSuccess] + other = "找到 [NUM] 条结果 (用时 [TIME] 毫秒)" + +[searchNotFound] + other = "未找到结果" + +[searchFailed] + other = "无法获取索引" diff --git a/i18n/zh-hant.toml b/i18n/zh-hant.toml index d6ba777..f629617 100644 --- a/i18n/zh-hant.toml +++ b/i18n/zh-hant.toml @@ -42,3 +42,12 @@ [tagsCurrentTag] other = "擁有標籤 {{ .Title }} 的文章:" + +[searchSuccess] + other = "[NUM] 項結果 (搜尋時間 [TIME] 毫秒)" + +[searchNotFound] + other = "未找到結果" + +[searchFailed] + other = "無法獲取索引" diff --git a/layouts/_default/search.html b/layouts/_default/search.html index c37d6b9..8948e45 100644 --- a/layouts/_default/search.html +++ b/layouts/_default/search.html @@ -5,14 +5,14 @@- +- - - + + + {{ if eq .Section "search" }} - - + {{ else if eq .Section "archives" }} {{ else }} -- cgit v1.2.3 From 5c68750e0cd265464aa55b1f1d89e54f7e71ccc0 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 18 Jun 2020 14:17:51 +0800 Subject: Optimize toc & license settings logic --- README.md | 25 +++++++++++++++---------- README_CN.md | 25 +++++++++++++++---------- layouts/_default/single.html | 2 +- layouts/partials/sidebar.html | 8 +++++--- 4 files changed, 36 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index a7e8a05..e943603 100644 --- a/README.md +++ b/README.md @@ -18,7 +18,7 @@ Now supported i18n langs: en, zh-hans, zh-hant, ja, nl. Check the i18n folder to - [🆕 Update the theme](#-update-the-theme) - [⚙️ Configuration](#%EF%B8%8F-configuration) - [🎨 Favicon](#-favicon) - - [❌ In-post license, comments und toc](#-in-post-license-comments-und-toc) + - [❌ License, toc und comments](#-license-toc-und-comments) - [🎵 APlayer](#-aplayer) - [📷 Image zoom and lazyload settings](#-image-zoom-and-lazyload-settings) - [⚓ Markdown render hook](#-markdown-render-hook) @@ -30,7 +30,7 @@ Now supported i18n langs: en, zh-hans, zh-hant, ja, nl. Check the i18n folder to ## 💻 Live demos -[**Live Demo by Vercel (en)**](https://hugo-theme-fuji-demo.now.sh/) | [My Blog by Coding (zh-Hans)](https://blog.amzrk2.cc/) +[**Live Demo (en)**](https://hugo-theme-fuji-demo.now.sh/) | [My Blog (zh-Hans)](https://blog.amzrk2.cc/)  @@ -76,21 +76,26 @@ Create `[SITEROOT]/layouts/partials/favicon.html` to cover theme's favicon. You can generate your favicons in [realfavicongenerator.net](https://realfavicongenerator.net/). -### ❌ In-post license, comments und toc +### ❌ License, toc und comments -You can set variables below in post's front matter to disable them: +Globally in `config.toml`: ```toml -noLicense = true # Do not show license in this post -noComments = true # Do not show comments in this post -noToc = true # Do not show toc in this post +showLicense = true # Enable or disable license for all post +showToc = true # Enable or disable ToC for all post +``` + +Or in posts' front matter: + +```toml +showLicense = true # Enable or disable license for this specific post +showToc = true # Enable or disable ToC for this specific post ``` -Or you can disable these globally, set these below to false or comment it in your `config.toml`: +To disable comment area for specific post, add this in front matter: ```toml -showLicense = false -showToc = false +noComments = true # Do not show comments in this post ``` ### 🎵 APlayer diff --git a/README_CN.md b/README_CN.md index 17fe0c0..75d1c86 100644 --- a/README_CN.md +++ b/README_CN.md @@ -18,7 +18,7 @@ - [🆕 更新主题](#-更新主题) - [⚙️ 自定义设置](#%EF%B8%8F-自定义设置) - [🎨 站点图标](#-站点图标) - - [❌ 关闭 License、评论区和目录](#-关闭-license评论区和目录) + - [❌ License、目录和评论区](#-license目录和评论区) - [🎵 文章音乐](#-文章音乐) - [📷 图片放大的设置和 lazyload](#-图片放大的设置和-lazyload) - [⚓ Markdown 钩子](#-markdown-钩子) @@ -30,7 +30,7 @@ ## 💻 在线 Demo -[**在线 Demo - Vercel (英文)**](https://hugo-theme-fuji-demo.now.sh/) | [我的博客 - Coding (中文)](https://blog.amzrk2.cc/) +[**在线 Demo (英文)**](https://hugo-theme-fuji-demo.now.sh/) | [我的博客 (中文)](https://blog.amzrk2.cc/)  @@ -66,21 +66,26 @@ $ git submodule update --remote --merge 可以在 [realfavicongenerator.net](https://realfavicongenerator.net/) 快速创建自己的图标。 -### ❌ 关闭 License、评论区和目录 +### ❌ License、目录和评论区 -在 front matter 里加上这些: +在全局的 `config.toml` 里设置: ```toml -noLicense = true # 憋显示 License -noComments = true # 憋显示评论区 -noToc = true # 憋显示目录 +showLicense = true # 对所有文章开关 License 显示 +showToc = true # 对所有文章开关目录显示 ``` -你也可以全局关闭这些内容的显示,在 `config.toml` 把下面这些设置为 false 或注释掉: +在特定文章的 front matter 里设置: ```toml -showLicense = false -showToc = false +showLicense = true # 对这篇文章开关 License 显示 +showToc = true # 对这篇文章开关目录显示 +``` + +除此之外你也可以关闭特定文章的评论: + +```toml +noComments = true # 对这篇文章关闭评论 ``` ### 🎵 文章音乐 diff --git a/layouts/_default/single.html b/layouts/_default/single.html index 413cacc..26a8213 100644 --- a/layouts/_default/single.html +++ b/layouts/_default/single.html @@ -16,7 +16,7 @@ -{{ if and (.Site.Params.showLicense) (ne .Params.noLicense true) }} +{{ if and (or .Site.Params.showLicense .Params.showLicense) (ne .Params.showLicense false) }}{{ i18n "postCopyrightFront" }} - {{ if and (in .Site.Params.mainSections .Type) (and (.Site.Params.showToc) (ne .Params.noToc true)) }} + {{ if in .Site.Params.mainSections .Type }} + {{ if and (or .Site.Params.showToc .Params.showToc) (ne .Params.showToc false) }} {{ end }} + {{ end }} {{ end }} -{{ if .Site.Params.disqusJSApi }} +{{ if and (.Site.Params.disqusJSApi) (ne .Params.showComments false) }} {{ partial "comment-disqusjs.html" . }} -{{ else if .Site.Params.disqusShortname }} +{{ else if and (.Site.Params.disqusShortname) (ne .Params.showComments false) }} {{ partial "comment-disqus.html" . }} -{{ else if .Site.Params.utterancesRepo }} +{{ else if and (.Site.Params.utterancesRepo) (ne .Params.showComments false) }} {{ partial "comment-utterances.html" . }} {{ else }}{{ end }} {{ end }} \ No newline at end of file -- cgit v1.2.3 From a6b879af7e996485b326d0ee1d841a19560651db Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 18 Jun 2020 14:39:14 +0800 Subject: Change stable bot setting --- .github/stale.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.github/stale.yml b/.github/stale.yml index c21b773..fbc7b42 100644 --- a/.github/stale.yml +++ b/.github/stale.yml @@ -1,5 +1,5 @@ # Number of days of inactivity before an issue becomes stale -daysUntilStale: 30 +daysUntilStale: 14 # Number of days of inactivity before a stale issue is closed daysUntilClose: 5 # Issues with these labels will never be considered stale -- cgit v1.2.3 From edbbfabae66d75217a95e3e0a054548502ebf2d9 Mon Sep 17 00:00:00 2001 From: amzrk2 Date: Thu, 18 Jun 2020 17:20:50 +0800 Subject: Update metadata --- README.md | 6 ++++-- README_CN.md | 4 +++- exampleSite/config.toml | 1 + theme.toml | 2 +- 4 files changed, 9 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index caa0c99..ff7f153 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Fuji is a minimal Hugo theme with full dark mode support and GitHub Primer markd [English](https://github.com/amzrk2/hugo-theme-fuji#readme) | [简体中文](https://github.com/amzrk2/hugo-theme-fuji/blob/master/README_CN.md) -After the release of v2, **there may be major changes in the image lazyload shortcode** to make it easier to use.If you want to change the color scheme, please check [🔧 Advanced configuration](#-advanced-configuration). +After the release of v2, **there may be major changes in the image lazyload shortcode** to make it easier to use. If you want to change the color scheme, please check [🔧 Advanced configuration](#-advanced-configuration). Now supported i18n langs: en, zh-hans, zh-hant, ja, nl. Check the i18n folder to add more languages. @@ -233,9 +233,11 @@ The theme is released under the ```Apache License 2.0```, for more information r - [Primer CSS - MIT](https://github.com/primer/css/blob/master/LICENSE) - [APlayer - MIT](https://github.com/MoePlayer/APlayer/blob/master/LICENSE) - [lazysizes - MIT](https://github.com/aFarkas/lazysizes/blob/gh-pages/LICENSE) -- [medium-zoom - MIT](https://github.com/francoischalifour/medium-zoom/blob/master/LICENSE) - [DisqusJS - MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE) - [ionicons - MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) +- [Fuse.js - Apache-2.0](https://github.com/krisk/Fuse/blob/master/LICENSE) +- [cloudflare-workers-async-google-analytics - MIT](https://github.com/SukkaW/cloudflare-workers-async-google-analytics/blob/master/LICENSE) +- [art-template - MIT](https://github.com/aui/art-template/blob/master/LICENSE) > © 2020 DSRKafuU(amzrk2) [Twitter @amzrk2](https://twitter.com/amzrk2) [GitHub @amzrk2](https://github.com/amzrk2) diff --git a/README_CN.md b/README_CN.md index f3e082c..fbf34c5 100644 --- a/README_CN.md +++ b/README_CN.md @@ -223,9 +223,11 @@ The theme is released under the ```Apache License 2.0```, for more information r - [Primer CSS - MIT](https://github.com/primer/css/blob/master/LICENSE) - [APlayer - MIT](https://github.com/MoePlayer/APlayer/blob/master/LICENSE) - [lazysizes - MIT](https://github.com/aFarkas/lazysizes/blob/gh-pages/LICENSE) -- [medium-zoom - MIT](https://github.com/francoischalifour/medium-zoom/blob/master/LICENSE) - [DisqusJS - MIT](https://github.com/SukkaW/DisqusJS/blob/master/LICENSE) - [ionicons - MIT](https://github.com/ionic-team/ionicons/blob/master/LICENSE) +- [Fuse.js - Apache-2.0](https://github.com/krisk/Fuse/blob/master/LICENSE) +- [cloudflare-workers-async-google-analytics - MIT](https://github.com/SukkaW/cloudflare-workers-async-google-analytics/blob/master/LICENSE) +- [art-template - MIT](https://github.com/aui/art-template/blob/master/LICENSE) > © 2020 DSRKafuU(amzrk2) [Twitter @amzrk2](https://twitter.com/amzrk2) [GitHub @amzrk2](https://github.com/amzrk2) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 52ffea8..3d03c3b 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -39,6 +39,7 @@ paginate = 10 # Word counter and read time indicator in post metadata showWordCounter = true showReadTime = false + # License at the end of each post showLicense = true showToc = true diff --git a/theme.toml b/theme.toml index 31265d0..5382938 100644 --- a/theme.toml +++ b/theme.toml @@ -4,7 +4,7 @@ name = "Fuji" license = "Apache-2.0" licenselink = "https://github.com/amzrk2/hugo-theme-fuji/blob/master/LICENSE" -description = "A minimal Hugo theme with customizable theme color." +description = "A minimal Hugo theme with nice theme color." homepage = "https://github.com/amzrk2/hugo-theme-fuji/" tags = ["blog", "minimal", "responsive", "dark mode"] features = ["blog", "minimal", "responsive", "dark mode"] -- cgit v1.2.3