diff --git a/assets/css/_colors.scss b/assets/css/_colors.scss index 62b163b..85a3128 100644 --- a/assets/css/_colors.scss +++ b/assets/css/_colors.scss @@ -14,6 +14,8 @@ --menu-item-bg-color: #{$menu-item-bg-color}; --theme-color: #{$theme-color}; + --border-color: #{$border-color}; + --btn-default-bg: #{$btn-default-bg}; --btn-default-color: #{$btn-default-color}; --btn-default-border-color: #{$btn-default-border-color}; @@ -46,6 +48,8 @@ --menu-item-bg-color: #{$menu-item-bg-color-dark}; --theme-color: #{$theme-color-dark}; + --border-color: #{$border-color-dark}; + --btn-default-bg: #{$btn-default-bg-dark}; --btn-default-color: #{$btn-default-color-dark}; --btn-default-border-color: #{$btn-default-border-color-dark}; diff --git a/assets/css/_common/components/post/post-body.scss b/assets/css/_common/components/post/post-body.scss index d084853..c9fbdc3 100644 --- a/assets/css/_common/components/post/post-body.scss +++ b/assets/css/_common/components/post/post-body.scss @@ -86,11 +86,19 @@ visibility: hidden; } + /** Defined speical border properties for top card of post **/ + $speical-border-width: 5px; + $speical-border-radius: 8px; .post-expired-tip { - font-size: 0.825em; + $expired-color: #4A90E2; + + font-size: var(--font-size-small); border: 1px solid #4A90E2; - border-left: 6px solid #4A90E2; + border-radius: $speical-border-radius; + border-left: $speical-border-width solid #4A90E2; + border-top: $speical-border-width solid #4A90E2; + box-shadow: .6rem .5rem 0.3rem var(--body-bg-color); margin: 0 0 0.85em 0; padding: 0.65em 0.15em 0.65em 0.95em; display: none; @@ -108,5 +116,30 @@ } } + .post-summary-wrapper { + $summary-color: #ea6733; + + margin: 0 0 .85em 0; + border-radius: $speical-border-radius; + border: 1px solid $summary-color; + border-right: $speical-border-width solid $summary-color; + border-bottom: $speical-border-width solid $summary-color; + box-shadow: .6rem .5rem 0.3rem var(--body-bg-color); + + .summary-title { + margin: .65em .93em 0 .93em; + color: $summary-color; + font-weight: bold; + } + + .summary-content { + background-color: var(--card-bg-color); + border-radius: $speical-border-radius; + box-shadow: .08rem .06rem 0.03rem var(--body-bg-color); + margin: .85em; + padding: .85em .95em; + } + } + @import 'post-alert'; } diff --git a/assets/css/_variables/base.scss b/assets/css/_variables/base.scss index f41ea0a..ac11f59 100644 --- a/assets/css/_variables/base.scss +++ b/assets/css/_variables/base.scss @@ -13,6 +13,7 @@ $grey-lighter : #ddd; $grey-light : #ccc; $grey : #bbb; $grey-dark : #999; +$grey-cnt : #5c5c5c; $grey-dim : #666; $black-light : #555; $black-dim : #333; @@ -49,7 +50,8 @@ $blockquote-color : $grey-dim; $blockquote-color-dark : $grey; // Global border color. -$border-color : $grey-light; +$border-color : $grey-dark; +$border-color-dark : $grey-lighter; // Background color for $body-bg-color : white; diff --git a/exampleSite/config.yaml b/exampleSite/config.yaml index 9682ff1..ffc19d5 100644 --- a/exampleSite/config.yaml +++ b/exampleSite/config.yaml @@ -498,6 +498,9 @@ params: # 是否开启过期提示 # Expired tip expired: false + # 是否开启摘要显示 + # Enable summary + summary: false # 文章内容中的提示信息设置 # Alert settings in post content diff --git a/exampleSite/content/post/no-header-title.md b/exampleSite/content/post/no-header-title.md index 0aa4629..63b96e3 100644 --- a/exampleSite/content/post/no-header-title.md +++ b/exampleSite/content/post/no-header-title.md @@ -1,6 +1,7 @@ --- title: "没有H1-6标题头和评论的文章" description: "用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭，并关闭评论功能。" +summary: "用于测试在没有H1-6标题头时，文章的目录导航是否会直接关闭，并关闭评论功能，同时也是展现下有关于文章的摘要功能。" keywords: "toc,header" date: 2022-10-06T09:02:26+08:00 diff --git a/i18n/en.yaml b/i18n/en.yaml index 85e3d17..0851315 100644 --- a/i18n/en.yaml +++ b/i18n/en.yaml @@ -75,6 +75,8 @@ PostMeta: title: "Note" info: "🕰️ Hey，This article is an aged wine of over # the information may need updating, please check the best before date before reading." warn: "🚀 Heads up! This article is from # ago and might not keep up with the pace of time. Bring your own time machine for reading, watch out for the time travel!" + summary: + title: Summary PostAlert: info : "Info" diff --git a/i18n/fr.yaml b/i18n/fr.yaml index 673a00b..c23bffe 100644 --- a/i18n/fr.yaml +++ b/i18n/fr.yaml @@ -74,6 +74,8 @@ PostMeta: title: "Astuce bienveillante" info: "🕰️ Hey，This article is an aged wine of over # the information may need updating, please check the best before date before reading." warn: "🚀 Heads up! this article is from # ago and might not keep up with the pace of time. Bring your own time machine for reading, watch out for the time travel!" + summary: + title: Summary PostAlert: info : "Info" diff --git a/i18n/zh-cn.yaml b/i18n/zh-cn.yaml index 440ba74..cdc328c 100644 --- a/i18n/zh-cn.yaml +++ b/i18n/zh-cn.yaml @@ -75,6 +75,8 @@ PostMeta: title: "温馨提醒" info: "🕰️ 嗨，这篇文章已是#前的陈年佳酿，信息可能需要更新，阅读前请检查最佳赏味期限。" warn: "🚀 注意啦！这篇文章来自#以前，可能已跟不上时代的步伐。阅读时请自备时光机，小心穿越哦！" + summary: + title: 总结摘要 PostAlert: info : "信息" diff --git a/i18n/zh-tw.yaml b/i18n/zh-tw.yaml index 62ae52e..7e557dd 100644 --- a/i18n/zh-tw.yaml +++ b/i18n/zh-tw.yaml @@ -75,7 +75,8 @@ PostMeta: title: "温馨提醒" info: "🕰️ 嗨，这篇文章已是#前的陳年佳釀，資訊可能需要更新，閱讀前請檢查最佳賞味期限。" warn: "🚀 請注意啦！這篇文章来自#以前，可能已經跟不上時代的腳步了。閱讀時請自備時光機，小心穿越哦！" - + summary: + title: 總結摘要 PostAlert: info : "信息 " note : "注意" diff --git a/layouts/partials/post/body.html b/layouts/partials/post/body.html index d8a98ea..6804129 100644 --- a/layouts/partials/post/body.html +++ b/layouts/partials/post/body.html @@ -6,6 +6,7 @@ {{ .Summary }} {{ end }} {{ else }} + {{/** Post expired tip message **/}} {{ $expired := default .Site.Params.PostMeta.expired .Params.Expired }} {{ if $expired }}
@@ -16,6 +17,19 @@
{{ end }} + {{/** Post summary **/}} + {{ $summary := default .Site.Params.PostMeta.summary .Params.Summary }} + {{ if $summary }} +
+
+ + {{ T "PostMeta.summary.title" }} +
+
+ {{ default .Summary .Params.Summary }} +
+
+ {{ end }} {{/** Started use the read more content anchor the need Hugo framework min marjo version greater than 0.134.0 **/}} {{ .Summary }}