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) }}