From ee7c7549b5f0ccf4392b4c1637a280855e725091 Mon Sep 17 00:00:00 2001 From: Dillon Date: Mon, 19 Aug 2019 01:36:52 +0800 Subject: [PATCH] feat: new index and style update --- archetypes/default.md | 8 +- assets/css/_custom.scss | 2 +- assets/css/_page/_home.scss | 3 +- assets/css/_page/_home_post.scss | 65 -- assets/css/_page/_index.scss | 22 + assets/css/_page/_post.scss | 702 +++++++++--------- assets/css/_page/_posts.scss | 128 ++++ assets/css/_page/_terms.scss | 109 ++- assets/css/_partial/_pagination.scss | 4 +- assets/css/style.scss | 6 +- assets/js/main.js | 84 ++- i18n/en.toml | 6 + i18n/zh.toml | 6 + layouts/_default/baseof.html | 7 +- layouts/_default/section.html | 34 +- layouts/_default/summary.html | 55 ++ layouts/index.html | 21 +- layouts/partials/footer.html | 2 +- layouts/partials/head.html | 13 +- layouts/partials/header.html | 3 +- layouts/partials/paginator.html | 2 +- layouts/partials/post/footer.html | 35 + .../post/{share-links.html => share.html} | 14 +- layouts/partials/{js.html => scripts.html} | 14 +- layouts/posts/single.html | 78 +- layouts/posts/summary.html | 46 -- layouts/shortcodes/countdown.html | 33 +- layouts/taxonomy/list.html | 2 +- layouts/taxonomy/terms.html | 4 +- 29 files changed, 801 insertions(+), 707 deletions(-) delete mode 100644 assets/css/_page/_home_post.scss create mode 100644 assets/css/_page/_index.scss create mode 100644 assets/css/_page/_posts.scss create mode 100644 layouts/_default/summary.html create mode 100644 layouts/partials/post/footer.html rename layouts/partials/post/{share-links.html => share.html} (96%) rename layouts/partials/{js.html => scripts.html} (89%) delete mode 100644 layouts/posts/summary.html diff --git a/archetypes/default.md b/archetypes/default.md index 1149abea..c6b1abf5 100644 --- a/archetypes/default.md +++ b/archetypes/default.md @@ -4,13 +4,19 @@ date: {{ .Date }} lastmod: {{ .Date }} draft: true description: "" +show_in_homepage: true +show_description: false + tags: [] categories: [] featured_image: "" +featured_image_preview: "" comment: true toc: false autoCollapseToc: true math: false ---- \ No newline at end of file +--- + + \ No newline at end of file diff --git a/assets/css/_custom.scss b/assets/css/_custom.scss index 28ea62cc..b9dd5c07 100644 --- a/assets/css/_custom.scss +++ b/assets/css/_custom.scss @@ -8,4 +8,4 @@ text-align:center; font-size: 30px; line-height: 50px; -} +} \ No newline at end of file diff --git a/assets/css/_page/_home.scss b/assets/css/_page/_home.scss index d2e9a409..378480bd 100644 --- a/assets/css/_page/_home.scss +++ b/assets/css/_page/_home.scss @@ -1,5 +1,4 @@ /** Home **/ - .intro { transform: translateY(25vh); text-align: center; @@ -55,4 +54,4 @@ h2.description { i { font-size: 1.4em; } -} +} \ No newline at end of file diff --git a/assets/css/_page/_home_post.scss b/assets/css/_page/_home_post.scss deleted file mode 100644 index 1e5243a9..00000000 --- a/assets/css/_page/_home_post.scss +++ /dev/null @@ -1,65 +0,0 @@ -.post-warp { - .intro { - transform: translateY(0); - margin: 2em 0 5em 0; - - .avatar { - img { - width: 96px; - } - } - } - - .post { - margin-bottom: 4em; - border-bottom: 1px dashed #ddd; - - .post-content { - padding-top: .5em; - } - - .post-footer { - display: flex; - justify-content: space-between; - align-items: center; - - .post-meta { - a { - color: rgba(85, 85, 85, 0.52941) !important; - - .dark-theme & { - color: $global-font-secondary-color-dark !important; - } - - &:hover { - color: $global-font-secondary-color !important; - - .dark-theme & { - color: $global-font-secondary-color-dark !important; - } - } - } - } - - .post-tags { - span { - a { - color: rgba(85, 85, 85, 0.52941) !important; - - .dark-theme & { - color: $global-font-secondary-color-dark !important; - } - - &:hover { - color: $global-font-secondary-color !important; - - .dark-theme & { - color: $global-font-secondary-color-dark !important; - } - } - } - } - } - } - } -} diff --git a/assets/css/_page/_index.scss b/assets/css/_page/_index.scss new file mode 100644 index 00000000..ddbeff00 --- /dev/null +++ b/assets/css/_page/_index.scss @@ -0,0 +1,22 @@ +@import "_home"; + +.post-warp { + position: relative; + width: 100%; + max-width: 780px; + margin: 0 auto; + padding-top: 2rem; + + @import "_post"; + @import "_posts"; +} + +.archive { + .post-title { + text-align: right; + padding-bottom: 2em; + } + + @import "_terms"; + @import "_tags"; +} \ No newline at end of file diff --git a/assets/css/_page/_post.scss b/assets/css/_page/_post.scss index c0947ad3..c278c2b8 100644 --- a/assets/css/_page/_post.scss +++ b/assets/css/_page/_post.scss @@ -1,372 +1,370 @@ /** Post **/ +.post-header { + .post-title { + margin: 0 !important; + font-size: 2em; + line-height: 1.5em; + } +} -.post-warp { - position: relative; - width: 100%; - max-width: 780px; - margin: 0 auto; - padding-top: 2rem; +.post-meta { + font-size: 14px; + color: rgba(85, 85, 85, 0.52941) !important; - .post-header { - .post-title { - margin: 0 !important; - font-size: 2em; - line-height: 1.5em; - } + span { + display: inline-block; } - .post-meta { - font-size: 14px; - color: rgba(85, 85, 85, 0.52941) !important; + .dark-theme & { + color: $global-font-secondary-color-dark !important; + } - span { - display: inline-block; - } + a { + color: $post-link-color; .dark-theme & { - color: $global-font-secondary-color-dark !important; + color: $post-link-color-dark; } - a { - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - - &:hover { - color: $post-link-hover-color; - - .dark-theme & { - color: $post-link-hover-color-dark; - } - } - } - } - - .post-toc { - position: absolute; - width: 200px; - max-width: 240px; - margin-left: 800px; - padding: 10px; - border-left: 1px solid $global-border-color; - word-wrap: break-word; - box-sizing: border-box; - top: 120px; - - .post-toc-title { - font-weight: 400; - text-transform: uppercase; - } - - .post-toc-content { - &.always-active ul { - display: block; - } - - >nav>ul { - margin: 10px 0; - } - - ul { - padding-left: 10px; - list-style: none; - - ul { - padding-left: 20px; - display: none; - } - - .has-active > ul { - display: block; - } - } - - .toc-link.active { - color: $global-link-hover-color; - } - } - } - - .post-content { - h2, - h3, - h4, - h5, - h6 { - padding-top: .8em; - padding-bottom: .3em; - } - - h2::before { - content: "#"; - margin-right: 5px; - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - h3::before { - content: "|"; - margin-right: 5px; - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - a { - color: $post-link-color; - - .dark-theme & { - color: $post-link-color-dark; - } - } - - a:hover { + &:hover { color: $post-link-hover-color; - .dark-theme &:hover { + .dark-theme & { color: $post-link-hover-color-dark; - font-weight: bold; } } + } + + .author { + font-size: 1.2em; + } +} + +.post-toc { + position: absolute; + width: 200px; + max-width: 240px; + margin-left: 800px; + padding: 10px; + border-left: 1px solid $global-border-color; + word-wrap: break-word; + box-sizing: border-box; + top: 120px; + + .post-toc-title { + font-weight: 400; + text-transform: uppercase; + } + + .post-toc-content { + &.always-active ul { + display: block; + } + + >nav>ul { + margin: 10px 0; + } ul { - padding-left: 2em; - } + padding-left: 10px; + list-style: none; - .table-wrapper { - overflow-x: auto; - - > table { - width: 100%; - max-width: 100%; - margin: 10px 0; - border-spacing: 0; - box-shadow: 2px 2px 3px rgba(0,0,0,.125); - background: $table-background-color; - - .dark-theme & { - background: $table-background-color-dark; - } - - thead { - background: $table-thead-color; - - .dark-theme & { - background-color: $table-thead-color-dark; - } - } - - th, td { - padding: 5px 15px; - border: 1px double $global-border-color; - - .dark-theme & { - border: 1px double $global-border-color-dark; - } - } + ul { + padding-left: 20px; + display: none; } - } - figure { - text-align: center; - } - - .image-caption:not(:empty) { - min-width: 20%; - max-width: 80%; - display: inline-block; - padding: 10px; - margin: 0 auto; - border-bottom: 1px solid #d9d9d9; - font-size: 14px; - color: #969696; - line-height: 1.7; - } - - img { - display: block; - max-width: 80%; - height: auto; - margin: 0 auto; - overflow: hidden; - } - - .featured_image { - width: 100% !important; - max-width: 100% !important; - height: auto !important; - margin: 0 !important; - } - - blockquote { - font-size: 1rem; - display: block; - border-width: 1px 0; - border-style: solid; - border-color: $global-border-color; - padding: 1.5em 1.2em 0.5em 1.2em; - margin: 0 0 2em 0; - position: relative; - - &:before { - content: '\201C'; - position: absolute; - top: 0em; - left: 50%; - transform: translate(-50%, -50%); - width: 3rem; - height: 2rem; - font: 6em/1.08em 'PT Sans', sans-serif; - color: $post-link-color; - text-align: center; - - .dark-theme & { - color: $post-link-color-dark; - } - } - &:after { - content: "#blockquote" attr(cite); + .has-active > ul { display: block; - text-align: right; - font-size: 0.875em; - color: $post-link-color; + } + } + + .toc-link.active { + color: $global-link-hover-color; + } + } +} + +.featured_image { + display: block; + max-width: 100%; + height: auto; + margin: 0 auto; + overflow: hidden; +} + +.post-content { + h2, + h3, + h4, + h5, + h6 { + padding-top: .8em; + padding-bottom: .3em; + } + + h2::before { + content: "#"; + margin-right: 5px; + color: $post-link-color; + + .dark-theme & { + color: $post-link-color-dark; + } + } + + h3::before { + content: "|"; + margin-right: 5px; + color: $post-link-color; + + .dark-theme & { + color: $post-link-color-dark; + } + } + + a { + color: $post-link-color; + + .dark-theme & { + color: $post-link-color-dark; + } + } + + a:hover { + color: $post-link-hover-color; + + .dark-theme &:hover { + color: $post-link-hover-color-dark; + font-weight: bold; + } + } + + ul { + padding-left: 2em; + } + + .table-wrapper { + overflow-x: auto; + + > table { + width: 100%; + max-width: 100%; + margin: 10px 0; + border-spacing: 0; + box-shadow: 2px 2px 3px rgba(0,0,0,.125); + background: $table-background-color; + + .dark-theme & { + background: $table-background-color-dark; + } + + thead { + background: $table-thead-color; .dark-theme & { - color: $post-link-color-dark; + background-color: $table-thead-color-dark; } } - .dark-theme & { - border-color: $global-border-color-dark; + th, td { + padding: 5px 15px; + border: 1px double $global-border-color; + + .dark-theme & { + border: 1px double $global-border-color-dark; + } } } + } - @import "../_partial/_post/code"; - @import "../_partial/_post/admonition"; + figure { + text-align: center; + } - .mermaid { - @import "../_mermaid/neutral/index"; + .image-caption:not(:empty) { + min-width: 20%; + max-width: 80%; + display: inline-block; + padding: 10px; + margin: 0 auto; + border-bottom: 1px solid #d9d9d9; + font-size: 14px; + color: #969696; + line-height: 1.7; + } - .dark-theme & { - @import "../_mermaid/dark/index"; - } - } + img { + display: block; + max-width: 100%; + height: auto; + margin: 0 auto; + overflow: hidden; + } - .echarts { - margin: 3% auto; + blockquote { + font-size: 1rem; + display: block; + border-width: 1px 0; + border-style: solid; + border-color: $global-border-color; + padding: 1.5em 1.2em 0.5em 1.2em; + margin: 0 0 2em 0; + position: relative; + + &:before { + content: '\201C'; + position: absolute; + top: 0em; + left: 50%; + transform: translate(-50%, -50%); + width: 3rem; + height: 2rem; + font: 6em/1.08em 'PT Sans', sans-serif; + color: $post-link-color; text-align: center; + + .dark-theme & { + color: $post-link-color-dark; + } + } + &:after { + content: "#blockquote" attr(cite); + display: block; + text-align: right; + font-size: 0.875em; + color: $post-link-color; + + .dark-theme & { + color: $post-link-color-dark; + } } - .bilibili { - position: relative; + .dark-theme & { + border-color: $global-border-color-dark; + } + } + + @import "../_partial/_post/code"; + @import "../_partial/_post/admonition"; + + .mermaid { + @import "../_mermaid/neutral/index"; + + .dark-theme & { + @import "../_mermaid/dark/index"; + } + } + + .echarts { + margin: 3% auto; + text-align: center; + } + + .bilibili { + position: relative; + width: 100%; + height: 0; + padding-bottom: 75%; + margin: 3% auto; + + iframe { + position: absolute; width: 100%; - height: 0; - padding-bottom: 75%; - margin: 3% auto; - - iframe { - position: absolute; - width: 100%; - height: 100%; - left: 0; - top: 0; - } - } - - hr { - margin: 1rem 0; - position: relative; - border-top: 1px dashed $global-border-color; - border-bottom: none; - - .dark-theme & { - border-top: 1px dashed $global-border-color-dark; - } - } - - kbd { - display: inline-block; - padding: .25em; - background-color: $global-background-color; - border: 1px solid $global-border-color; - border-bottom-color: $global-border-color; - border-radius: 3px; - -webkit-box-shadow: inset 0 -1px 0 $global-border-color; - box-shadow: inset 0 -1px 0 $global-border-color; - font-size: .8em; - line-height: 1.25; - font-family: $code-font-family; - color: $code-color; - - .dark-theme & { - background-color: $global-background-color-dark; - border: 1px solid $global-border-color-dark; - border-bottom-color: $global-border-color-dark; - -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark; - box-shadow: inset 0 -1px 0 $global-border-color-dark; - color: $code-color-dark; - } - } - - .typeit { - .code { - padding: 6px; - font-size: 14px; - font-family: Consolas, Monaco, Menlo, Consolas, monospace; - font-weight: bold; - word-break: break-all; - - .k { - color: #D371E3; - } - - .kt { - color: #D371E3; - } - - .kc { - color: #D371E3; - } - - .o { - color: #D371E3; - } - - .nf { - color: #F16473; - } - - .na { - color: #41B1F5; - } - - .s { - color: #8BC56F; - } - - .n { - color: #DB975C; - } - - .c1 { - color: #7E848F; - } - } + height: 100%; + left: 0; + top: 0; } } - p { - font-size: 1em; - margin: .5em 0 .5em 0; + hr { + margin: 1rem 0; + position: relative; + border-top: 1px dashed $global-border-color; + border-bottom: none; + + .dark-theme & { + border-top: 1px dashed $global-border-color-dark; + } } + kbd { + display: inline-block; + padding: .25em; + background-color: $global-background-color; + border: 1px solid $global-border-color; + border-bottom-color: $global-border-color; + border-radius: 3px; + -webkit-box-shadow: inset 0 -1px 0 $global-border-color; + box-shadow: inset 0 -1px 0 $global-border-color; + font-size: .8em; + line-height: 1.25; + font-family: $code-font-family; + color: $code-color; + + .dark-theme & { + background-color: $global-background-color-dark; + border: 1px solid $global-border-color-dark; + border-bottom-color: $global-border-color-dark; + -webkit-box-shadow: inset 0 -1px 0 $global-border-color-dark; + box-shadow: inset 0 -1px 0 $global-border-color-dark; + color: $code-color-dark; + } + } + + .typeit { + .code { + padding: 6px; + font-size: 14px; + font-family: Consolas, Monaco, Menlo, Consolas, monospace; + font-weight: bold; + word-break: break-all; + + .k { + color: #D371E3; + } + + .kt { + color: #D371E3; + } + + .kc { + color: #D371E3; + } + + .o { + color: #D371E3; + } + + .nf { + color: #F16473; + } + + .na { + color: #41B1F5; + } + + .s { + color: #8BC56F; + } + + .n { + color: #DB975C; + } + + .c1 { + color: #7E848F; + } + } + } +} + +p { + font-size: 1em; + margin: .5em 0 .5em 0; +} + +.post-footer { .post-info { margin-top: 3rem; border-bottom: 1px solid $global-border-color; @@ -419,28 +417,28 @@ transform: translateX(4px); } } - - .post-comment { - padding: 3em 0; - } - - .align-left { - text-align: left; - } - - .align-center { - text-align: center; - } - - .align-right { - text-align: right; - } - - .float-left { - float: left; - } - - .float-right { - float: right; - } } + +.post-comment { + padding: 3em 0; +} + +.align-left { + text-align: left; +} + +.align-center { + text-align: center; +} + +.align-right { + text-align: right; +} + +.float-left { + float: left; +} + +.float-right { + float: right; +} \ No newline at end of file diff --git a/assets/css/_page/_posts.scss b/assets/css/_page/_posts.scss new file mode 100644 index 00000000..77f1cfce --- /dev/null +++ b/assets/css/_page/_posts.scss @@ -0,0 +1,128 @@ +.intro { + transform: translateY(0); + padding: 2em 0 2em 0; + + .avatar { + img { + width: 96px; + } + } +} + +.post { + padding-top: 0.8em; + padding-bottom: 0.8em; + color: $global-font-color; + border-top: 1px dashed $global-border-color; + border-bottom: 1px dashed $global-border-color; + + .dark-theme & { + color: $global-font-color-dark; + border-bottom: 1px dashed $global-border-color-dark; + } + + .featured_image_preview { + width: 100%; + padding: 30% 0 0; + position: relative; + margin-bottom: 1em; + + img { + position: absolute; + width: 100%; height: 100%; + left: 0; top: 0; + object-fit: cover; + } + } + + .post-list-title { + font-size: 1.6em; + } + + .post-meta { + font-size: 14px !important; + a { + color: $global-font-secondary-color !important; + + .dark-theme & { + color: $global-font-secondary-color-dark !important; + } + + &:hover { + color: $global-link-hover-color !important; + + .dark-theme & { + color: $global-link-hover-color-dark !important; + } + } + } + } + + .post-content { + padding-top: .2em; + font-size: 0.9em; + width: 100%; + max-height: 100px; + overflow: hidden; + + h2, + h3, + h4, + h5, + h6 { + font-size: 1em; + line-height: 1em; + padding-top: .3em; + padding-bottom: .3em; + } + + p { + margin: 0; + padding-top: .3em; + padding-bottom: .3em; + } + } + + .post-footer { + display: flex; + justify-content: space-between; + align-items: center; + font-size: 14px !important; + + a { + color: $post-link-color !important; + + .dark-theme & { + color: $post-link-color-dark !important; + } + + &:hover { + color: $post-link-hover-color !important; + + .dark-theme & { + color: $post-link-hover-color-dark !important; + } + } + } + + .post-tags { + padding: 0; + + a { + color: $global-link-color !important; + + .dark-theme & { + color: $global-link-color-dark !important; + } + + &:hover { + color: $global-link-hover-color !important; + + .dark-theme & { + color: $global-link-hover-color-dark !important; + } + } + } + } + } +} \ No newline at end of file diff --git a/assets/css/_page/_terms.scss b/assets/css/_page/_terms.scss index 16bba2ac..3b48671a 100644 --- a/assets/css/_page/_terms.scss +++ b/assets/css/_page/_terms.scss @@ -1,76 +1,73 @@ -.post-warp { +.archive-item { + margin-left: 2rem; +} - .archive-item { - margin-left: 2rem; - } +.categories-card { + margin: 0 auto; + margin-top: 3em; + display: flex; + align-items: center; + justify-content: space-between; + flex-direction: row; + flex-wrap: wrap; + padding: 0 2.5em; + line-height: 1.6em; - .categories-card { - margin: 0 auto; - margin-top: 3em; + .card-item { + font-size: 14px; + text-align: left; + width: 45%; display: flex; - align-items: center; - justify-content: space-between; - flex-direction: row; - flex-wrap: wrap; - padding: 0 2.5em; - line-height: 1.6em; + align-items: flex-start; + margin-top: 2em; + min-height: 16em; + padding: 0 2%; + position: relative; - .card-item { - font-size: 14px; - text-align: left; - width: 45%; - display: flex; - align-items: flex-start; - margin-top: 2em; - min-height: 16em; - padding: 0 2%; - position: relative; - - .categories { - overflow: hidden; - } + .categories { + overflow: hidden; } } +} - .archive-item-link { - display: inline-block; +.archive-item-link { + display: inline-block; + text-decoration: none; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + max-width: 95%; + + &:hover { + color: $global-link-hover-color; + background-color: transparent; + } + + .dark-theme & { + color: $global-link-color-dark; text-decoration: none; - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - max-width: 95%; + transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; &:hover { - color: $global-link-hover-color; - background-color: transparent; - } - - .dark-theme & { - color: $global-link-color-dark; + color: $global-link-hover-color-dark; text-decoration: none; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; - - &:hover { - color: $global-link-hover-color-dark; - text-decoration: none; - transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, opacity 0.2s ease; - } } } +} - .archive-item-date { - float: right; - text-align: right; - color: $global-font-secondary-color; +.archive-item-date { + float: right; + text-align: right; + color: $global-font-secondary-color; - .dark-theme & { - color: $global-font-secondary-color-dark; - } + .dark-theme & { + color: $global-font-secondary-color-dark; } +} - .more-post { - text-align: right; - } +.more-post { + text-align: right; } .categories { @@ -82,4 +79,4 @@ float: right; padding-right: 1em; } -} +} \ No newline at end of file diff --git a/assets/css/_partial/_pagination.scss b/assets/css/_partial/_pagination.scss index d1453d24..ae3d34c8 100644 --- a/assets/css/_partial/_pagination.scss +++ b/assets/css/_partial/_pagination.scss @@ -7,11 +7,11 @@ list-style: none; white-space: nowrap; width: 100%; - padding-top: 2em; + padding-top: 1em; a { -webkit-font-smoothing: antialiased; - font-size: 12px; + font-size: 0.8em; color: #bfbfbf; letter-spacing: 0.1em; font-weight: 700; diff --git a/assets/css/style.scss b/assets/css/style.scss index 101b628f..8b89ae7c 100644 --- a/assets/css/style.scss +++ b/assets/css/style.scss @@ -5,11 +5,7 @@ @import "_core/base"; @import "_core/layout"; -@import "_page/home"; -@import "_page/home_post"; -@import "_page/post"; -@import "_page/tags"; -@import "_page/terms"; +@import "_page/index"; @import "_partial/navbar"; @import "_partial/footer"; diff --git a/assets/js/main.js b/assets/js/main.js index 4cb10291..16397529 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -56,56 +56,64 @@ jQuery(function($) { _Blog._initToc = function() { const SPACING = 20; const $toc = $('.post-toc'); + const $footer = $('.post-footer'); if ($toc.length) { - const startTop = $toc.css("top"); - const minScrollTop = $toc.offset().top - SPACING; - - const tocState = { - start: { - 'position': 'absolute', - 'top': startTop, - }, - process: { - 'position': 'fixed', - 'top': SPACING, - }, - }; + const minTop = $toc.position().top; + const mainTop = $('main').position().top; + const minScrollTop = minTop + mainTop - SPACING; $(window).scroll(function() { - const scrollTop = $(window).scrollTop(); + const scrollTop = $(window).scrollTop(); + const maxTop = $footer.position().top - $toc.height(); + const maxScrollTop = maxTop + mainTop - SPACING; - if (scrollTop < minScrollTop) { - $toc.css(tocState.start); - } else { - $toc.css(tocState.process); - } + const tocState = { + start: { + 'position': 'absolute', + 'top': minTop, + }, + process: { + 'position': 'fixed', + 'top': SPACING, + }, + end: { + 'position': 'absolute', + 'top': maxTop, + } + }; + + if (scrollTop < minScrollTop) { + $toc.css(tocState.start); + } else if (scrollTop > maxScrollTop) { + $toc.css(tocState.end); + } else { + $toc.css(tocState.process); + } }); } - const HEADERFIX = 30; + const HEADERFIX = 60; const $toclink = $('.toc-link'); const $headerlink = $('.headerlink'); const $tocLinkLis = $('.post-toc-content li'); - const headerlinkTop = $.map($headerlink, function(link) { - return $(link).offset().top; - }); - - const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) { - return offset - HEADERFIX; - }); - - const searchActiveTocIndex = function(array, target) { - for (let i = 0; i < array.length - 1; i++) { - if (target > array[i] && target <= array[i + 1]) return i; - } - if (target > array[array.length - 1]) return array.length - 1; - return 0; - }; - const activeIndex = function() { const scrollTop = $(window).scrollTop(); + const headerlinkTop = $.map($headerlink, function(link) { + return $(link).offset().top; + }); + const headerLinksOffsetForSearch = $.map(headerlinkTop, function(offset) { + return offset - HEADERFIX; + }); + const searchActiveTocIndex = function(array, target) { + for (let i = 0; i < array.length - 1; i++) { + if (target > array[i] && target <= array[i + 1]) return i; + } + if (target > array[array.length - 1]) return array.length - 1; + return 0; + }; + const activeTocIndex = searchActiveTocIndex(headerLinksOffsetForSearch, scrollTop); $($toclink).removeClass('active'); @@ -182,7 +190,7 @@ jQuery(function($) { _Blog.countdown = function() { if (window.countdownMap) { Object.keys(countdownMap).forEach(function(id) { - $(id).countdown(countdownMap[id], {elapse: true}) + $(`#${id}`).countdown(countdownMap[id], {elapse: true}) .on('update.countdown', function(event) { var $this = $(this).html(event.strftime('' + '%D 天
' @@ -226,9 +234,9 @@ jQuery(function($) { _Blog.changeTitle(); _Blog.chroma(); _Blog.responsiveTable(); - _Blog.toc(); _Blog.echarts(isDark); _Blog.countdown(); _Blog.typeit(); + _Blog.toc(); }); }); diff --git a/i18n/en.toml b/i18n/en.toml index 38bbc8ec..3c4db8fc 100644 --- a/i18n/en.toml +++ b/i18n/en.toml @@ -37,6 +37,9 @@ other = "Theme - " [toc] other = "Table of Contents" +[publish] +other = "published on" + [included] other = "included in" @@ -63,6 +66,9 @@ other = "Back" [home] other = "Home" + +[readmore] +other = "Read More......" # === posts/single.html === # === 404.html === diff --git a/i18n/zh.toml b/i18n/zh.toml index 69da9e62..d3c9b7f6 100644 --- a/i18n/zh.toml +++ b/i18n/zh.toml @@ -37,6 +37,9 @@ other = "主题 - " [toc] other = "目录" +[publish] +other = "发布于" + [included] other = "收录于" @@ -63,6 +66,9 @@ other = "返回" [home] other = "主页" + +[readmore] +other = "阅读全文......" # === posts/single.html === # === 404.html === diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index bdc7387e..bdbdc617 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -5,9 +5,6 @@ {{ block "title" . }}{{ .Site.Title }}{{ end }} {{ partial "head.html" . }} - {{ $style := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify}} - -
@@ -18,7 +15,7 @@
{{ partial "footer.html" . }} + {{ partial "scripts.html" . }} - {{ partial "js.html" . }} - + \ No newline at end of file diff --git a/layouts/_default/section.html b/layouts/_default/section.html index 39438fa5..2e58ec59 100644 --- a/layouts/_default/section.html +++ b/layouts/_default/section.html @@ -1,22 +1,22 @@ -{{ define "title" }}{{ T "posts" }} - {{ .Site.Title }}{{ end }} +{{ define "title" }}{{ T "posts" }} - {{ .Site.Title }}{{ end -}} -{{ define "content" }} - {{ $data := .Data }} +{{ define "content" -}} + {{ $data := .Data -}}
-

+

{{ printf "- %s -" (T "posts") }}

- {{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }} -

{{ .Key }}

- - {{ range .Pages }} -
- {{ .Title }} - - {{ .Date.Format (.Site.Params.dateFormatToUse | default "01-02") }} - -
- {{ end }} {{ end }} - {{ partial "paginator.html" . }} + {{- range (.Paginate (.Pages.GroupByDate "2006")).PageGroups -}} +

{{ .Key }}

+ {{- range .Pages -}} +
+ {{ .Title }} + + {{- .Date.Format (.Site.Params.dateFormatToUse | default "01-02") -}} + +
+ {{- end -}} + {{- end -}} + {{- partial "paginator.html" . -}}
-{{end }} +{{- end }} \ No newline at end of file diff --git a/layouts/_default/summary.html b/layouts/_default/summary.html new file mode 100644 index 00000000..01a2970e --- /dev/null +++ b/layouts/_default/summary.html @@ -0,0 +1,55 @@ +
+ {{ $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} + {{ $author := .Site.Author.name }} + {{ if isset .Params "author" }} + {{ $author = .Site.Author.name }} + {{ end }} + + + {{ with .Params.featured_image }} + {{ $image := $.Params.featured_image_preview | default . }} +
+ featured image +
+ {{ end }} + +
+

+ {{ .Title }} +

+
+
+ + {{ T "publish" }}   + {{ with .Params.categories -}} + + {{ T "included" }} + {{ range . }} + {{- $name := . -}} + {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}} +  {{ $name }}  + {{ end -}} + {{ end }} + + {{- end }} +
+
+ {{ if .Params.show_description }} +

{{ . }}

+ {{ else }} + {{ .Summary }} + {{ end }} +
+
+ {{ T "readmore" }} + {{ with .Params.tags }} +
+ {{ range . }} + +   {{ . }} + + {{ end }} +
+ {{ end }} +
+
\ No newline at end of file diff --git a/layouts/index.html b/layouts/index.html index b0e92fd1..992ef280 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -1,15 +1,16 @@ -{{ define "content" }} - {{ if eq .Site.Params.home_mode "post" }} +{{ define "content" -}} + {{ if eq .Site.Params.home_mode "post" -}}
- {{ partial "home/profile.html" . }} + {{- partial "home/profile.html" . -}} - {{ range (.Paginate (where .Pages "Type" "posts")).Pages }} - {{ .Render "summary" }} - {{ end }} + {{- $paginator := .Paginate (where (where .Data.Pages "Type" "posts") ".Params.show_in_homepage" "!=" false) }} + {{ range $paginator.Pages -}} + {{ .Render "summary" -}} + {{ end -}} {{ partial "paginator.html" . }}
- {{ else }} - {{ partial "home/profile.html" . }} - {{ end }} -{{ end }} + {{- else -}} + {{ partial "home/profile.html" . -}} + {{ end -}} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html index fed78112..ec237f9b 100644 --- a/layouts/partials/footer.html +++ b/layouts/partials/footer.html @@ -18,4 +18,4 @@  | {{ . | safeHTML }} {{- end -}} - + \ No newline at end of file diff --git a/layouts/partials/head.html b/layouts/partials/head.html index 0e6f7fac..7e93a66a 100644 --- a/layouts/partials/head.html +++ b/layouts/partials/head.html @@ -30,12 +30,15 @@ - -{{ with .OutputFormats.Get "RSS" }} +{{- with .OutputFormats.Get "RSS" -}} -{{ end }} +{{- end -}} -{{ template "_internal/twitter_cards.html" . }} +{{- template "_internal/twitter_cards.html" . -}} -{{ partial "seo_schema.html" . }} +{{- partial "seo_schema.html" . -}} + +{{- $style := resources.Get "css/style.scss" | resources.ToCSS | resources.Minify -}} + + \ No newline at end of file diff --git a/layouts/partials/header.html b/layouts/partials/header.html index 2451b0df..93a53fa7 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -13,7 +13,6 @@ - + \ No newline at end of file diff --git a/layouts/partials/paginator.html b/layouts/partials/paginator.html index 6ad5f303..6b8a6057 100644 --- a/layouts/partials/paginator.html +++ b/layouts/partials/paginator.html @@ -28,4 +28,4 @@ {{ end }} {{ end }} -{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/post/footer.html b/layouts/partials/post/footer.html new file mode 100644 index 00000000..981fa6f5 --- /dev/null +++ b/layouts/partials/post/footer.html @@ -0,0 +1,35 @@ +{{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") -}} +
+
+
{{ printf (T "lastMod") $modify_date }}
+
+ {{ if and ( .Param "socialShare" ) (gt (len (.Param "share")) 0) }} + {{ partial "post/share.html" . }} + {{ end }} +
+
+ +
+
+ {{ with .Params.tags }} + {{ range . }} + +  {{.}}  + + {{ end }} + {{ end }} +
+
+ {{ T "back" }} | {{ T "home" }} +
+
+ +
+ {{ if .PrevInSection }} + + {{ end }} + {{ if .NextInSection }} + + {{ end }} +
+
\ No newline at end of file diff --git a/layouts/partials/post/share-links.html b/layouts/partials/post/share.html similarity index 96% rename from layouts/partials/post/share-links.html rename to layouts/partials/post/share.html index 092807de..7320f8fe 100644 --- a/layouts/partials/post/share-links.html +++ b/layouts/partials/post/share.html @@ -1,62 +1,52 @@ -{{ if or .Params.socialShare (and .Site.Params.socialShare (ne .Params.socialShare false)) }} - +{{ if or (eq .Params.share.enable false) (eq .Site.Params.share.enable false) | not }} {{ if or .Params.Share.Twitter (and .Site.Params.Share.Twitter (ne .Params.Share.Twitter false)) }} {{ end }} - {{ if or .Params.Share.Facebook (and .Site.Params.Share.Facebook (ne .Params.Share.Facebook false)) }} {{ end }} - {{ if or .Params.Share.Reddit (and .Site.Params.Share.Reddit (ne .Params.Share.Reddit false)) }} {{ end }} - {{ if or .Params.Share.Linkedin (and .Site.Params.Share.Linkedin (ne .Params.Share.Linkedin false)) }} {{ end }} - {{ if or .Params.Share.Pinterest (and .Site.Params.Share.Pinterest (ne .Params.Share.Pinterest false)) }} {{ end }} - {{ if or .Params.Share.YCombinator (and .Site.Params.Share.YCombinator (ne .Params.Share.YCombinator false)) }} {{ end }} - {{ if or .Params.Share.Mix (and .Site.Params.Share.Mix (ne .Params.Share.Mix false)) }} {{ end }} - {{ if or .Params.Share.Tumblr (and .Site.Params.Share.Tumblr (ne .Params.Share.Tumblr false)) }} {{ end }} - {{ if or .Params.Share.VK (and .Site.Params.Share.VK (ne .Params.Share.VK false)) }} {{ end }} - {{ if or .Params.Share.Weibo (and .Site.Params.Share.Weibo (ne .Params.Share.Weibo false)) }} {{ end }} -{{ end }} +{{ end }} \ No newline at end of file diff --git a/layouts/partials/js.html b/layouts/partials/scripts.html similarity index 89% rename from layouts/partials/js.html rename to layouts/partials/scripts.html index 6a7522b9..a258eee3 100644 --- a/layouts/partials/js.html +++ b/layouts/partials/scripts.html @@ -1,6 +1,3 @@ -{{ $scripts := resources.Get "/js/main.js" | slice }} -{{ $dynamicToTop := resources.Get "/js/dynamicToTop.js" }} - {{ $jquery := ` @@ -41,10 +38,9 @@ ` }} {{ $jquery | safeHTML }} +{{ $lazysizes | safeHTML }} {{ if .IsPage }} - {{ $lazysizes | safeHTML }} - {{ if .Scratch.Get "diagram" }} {{ $diagram | safeHTML }} {{ end }} @@ -71,11 +67,6 @@ {{ $countdown | safeHTML }} {{ end }} - - {{ $scripts = $scripts | append $dynamicToTop }} - {{ $scripts = $scripts | resources.Concat "/js/vendor_post.js" | resources.Minify }} -{{ else }} - {{ $scripts = $scripts | resources.Concat "/js/vendor_main.js" | resources.Minify}} {{ end }} {{ $typeitMap := .Scratch.Get "typeitMap" }} @@ -88,6 +79,7 @@ {{ end }} +{{ $scripts := slice (resources.Get "/js/main.js") (resources.Get "/js/dynamicToTop.js") | resources.Concat "/js/vendor.js" | resources.Minify }} -{{ template "_internal/google_analytics_async.html" . }} +{{ template "_internal/google_analytics_async.html" . }} \ No newline at end of file diff --git a/layouts/posts/single.html b/layouts/posts/single.html index f6608831..7f9fdaeb 100644 --- a/layouts/posts/single.html +++ b/layouts/posts/single.html @@ -2,7 +2,6 @@ {{ define "content" }} {{ $publish_date := .PublishDate.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} - {{ $modify_date := .Lastmod.Format (.Site.Params.dateFormatToUse | default "2006-01-02") }} {{ $author := .Site.Author.name }} {{ if isset .Params "author" }} {{ $author = .Site.Author.name }} @@ -15,20 +14,19 @@
- - {{ T "included" }} + {{ with .Params.categories -}} + {{ T "included" }} {{ range . }} {{- $name := . -}} {{- with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) -}} -  {{ $name }} +  {{ $name }}  {{ end -}} {{ end }} {{- end }}
-
    {{ T "wordCount" .WordCount }}  @@ -45,66 +43,36 @@

{{ T "toc" }}

{{- $globalAutoCollapseToc := .Site.Params.autoCollapseToc | default true }} -
- {{.TableOfContents}} +
+ {{ .TableOfContents }}
{{- end }} + {{ with .Params.featured_image }} + featured image + {{ end }} +
- - {{ with .Params.featured_image }} - featured image - {{ end }} - - - {{ $reAltIn := `([^` }} - {{ $reAltOut := "
$2
$2
" }} - {{ $altContent := .Content | replaceRE $reAltIn $reAltOut | safeHTML }} - {{ $reAltTitleIn := `([^` }} - {{ $reAltTitleOut := "
$2
$2
" }} - {{ $finalContent := $altContent | replaceRE $reAltTitleIn $reAltTitleOut | safeHTML }} - {{ $finalContent }} + {{ $content := .Content }} + {{ $REin := `([^` }} + {{ $REout := "
$2
$2
" }} + {{ $content = replaceRE $REin $REout $content }} + {{ $REin = `([^` }} + {{ $REout = "
$2
$2
" }} + {{ $content = replaceRE $REin $REout $content }} + {{ $REin = `:\(([\w- ]+?)\):` }} + {{ $REout = `` }} + {{ $content = replaceRE $REin $REout $content }} + {{ $content | safeHTML }}
-
-
-
{{ printf (T "lastMod") $modify_date }}
-
- {{ if and ( $.Param "socialShare" ) (gt (len ($.Param "share")) 0) }} - {{ partial "post/share-links.html" . }} - {{ end }} -
-
-
-
- {{ with .Params.tags }} - {{ range . }} - -  {{.}}  - - {{ end }} - {{ end }} -
-
- {{ T "back" }} | {{ T "home" }} -
-
- -
- {{ if .PrevInSection }} - - {{ end }} - {{ if .NextInSection }} - - {{ end }} -
-
+ {{ partial "post/footer.html" . }}
- {{ if ( .Params.showComments | default true ) }} + {{ if ( .Params.comment | default true ) }} {{ partial "comments.html" . }} {{ end }}
-{{- end }} +{{- end }} \ No newline at end of file diff --git a/layouts/posts/summary.html b/layouts/posts/summary.html deleted file mode 100644 index 038da9f0..00000000 --- a/layouts/posts/summary.html +++ /dev/null @@ -1,46 +0,0 @@ -
-
-

- {{ .Title }} -

-
-
- - {{ with .Params.featured_image }} -

- {{ end }} - - {{ .Summary }} -
-
-
- - - - in - {{ with .Params.categories }} - - - {{ range . }} - {{ $name := . }} - {{ with $.Site.GetPage "taxonomy" (printf "categories/%s" $name) | default ($.Site.GetPage "taxonomy" (printf "categories/%s" ($name | urlize))) }} - {{ $name }} - {{ end }} - {{ end }} - - {{ end }} -
- - {{ with .Params.tags }} -
- {{ range . }} - - #{{ . }} - - {{ end }} -
- {{ end }} -
-
diff --git a/layouts/shortcodes/countdown.html b/layouts/shortcodes/countdown.html index 47b34b52..f37381ff 100644 --- a/layouts/shortcodes/countdown.html +++ b/layouts/shortcodes/countdown.html @@ -1,17 +1,16 @@ -{{ if .Get "id" }} - {{ $id := .Get "id" }} - {{ with .Get "class" }} -
- {{ else }} -
- {{ end }} - {{ $id = printf "#%s" $id }} - {{ with .Get "date" }} - {{ $date := . }} - {{ with $.Page.Scratch.Get "countdownMap" }} - {{ $.Page.Scratch.Set "countdownMap" (dict $id $date | merge .) }} - {{ else }} - {{ $.Page.Scratch.Set "countdownMap" (dict $id $date) }} - {{ end }} - {{ end }} -{{ end }} +{{ if .Get "id" -}} + {{ $id := .Get "id" -}} + {{ if .Get "date" -}} + {{ $date := .Get "date" -}} + {{ with .Page.Scratch.Get "countdownMap" -}} + {{ .Page.Scratch.Set "countdownMap" (dict $id $date | merge .) -}} + {{ else -}} + {{ .Page.Scratch.Set "countdownMap" (dict $id $date) -}} + {{ end -}} + {{ with .Get "class" -}} +
+ {{- else -}} +
+ {{- end -}} + {{ end -}} +{{ end }} \ No newline at end of file diff --git a/layouts/taxonomy/list.html b/layouts/taxonomy/list.html index 6449d40a..a36bdd8c 100644 --- a/layouts/taxonomy/list.html +++ b/layouts/taxonomy/list.html @@ -9,7 +9,7 @@ {{ $taxonomyName = (T "category") }} {{ end }}
-

+

{{- printf "%s - %s" $taxonomyName .Title -}}

{{ range (.Paginate (.Pages.GroupByDate "2006")).PageGroups }} diff --git a/layouts/taxonomy/terms.html b/layouts/taxonomy/terms.html index 682f2d1a..9cc67d8b 100644 --- a/layouts/taxonomy/terms.html +++ b/layouts/taxonomy/terms.html @@ -13,8 +13,8 @@ {{ $length := len $terms }} {{ $type := .Type }} -
-

+
+

{{- printf "- %s -" $taxonomysName -}}