diff --git a/languages/en.yml b/languages/en.yml index c02fd7e0..405595a9 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -54,10 +54,12 @@ copy_copyright: author: Original article author link: Original article link copyright: - author: Post author - title: Post title - link: Post link + author: Author + title: Title + link: Link create_time: Create time + published: Published + license: License license_title: Copyright notice license_content: "All articles in this blog are licensed under %s unless stating additionally." article-aging: "It has been %s days since the last update of this article. Some contents may be outdated. Please pay attention to screening." diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 25a5824a..4a4aa718 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -54,10 +54,12 @@ copy_copyright: author: 原文作者 link: 原文链接 copyright: - title: 本文标题 - author: 本文作者 - link: 本文链接 + title: 标题 + author: 作者 + link: 链接 create_time: 创建时间 + published: 发布于 + license: 许可 license_title: 版权声明 license_content: "本博客所有文章除特别声明外，均采用 %s 许可协议。转载请注明出处！" article-aging: "本文距离上次更新已过去 %s 天，部分内容可能已经过时，请注意甄别。" diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index fa46888a..2996a8a0 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -54,10 +54,12 @@ copy_copyright: author: 原文作者 link: 原文鏈接 copyright: - author: 文章作者 - title: 文章標題 - link: 永久連結 + author: 作者 + title: 標題 + link: 連結 create_time: 撰寫時間 + published: 發布于 + license: 許可 license_title: 版權宣告 license_content: "這個網站所有文章均使用 %s 授權" article-aging: "本文距離上次更新已過去 %s 天，部分內容可能已經過時，請註意甄別。" diff --git a/layout/_partial/article-copyright-info.ejs b/layout/_partial/article-copyright-info.ejs index ea7134ea..6016d7c7 100644 --- a/layout/_partial/article-copyright-info.ejs +++ b/layout/_partial/article-copyright-info.ejs @@ -1,24 +1,48 @@ -<% -const colon = config.language === 'en' ? ': ' : '：' -%> -
- +
+
+
+
+ <%= page.title %> +
+ +
+ <%= page.path %> +
+
+ +
+
+
+ <%- __('copyright.author') %> +
+
<%= theme?.base_info?.author || config.author %>
+
+ +
+
+ <%- __('copyright.published') %> +
+
<%= date(page.date, 'YYYY-MM-DD HH:mm') %>
+
+ + +
+
+ <%- __('copyright.license') %> +
+
+ + + + + + +
+
+
+ + +
diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index 49717235..2ae71f29 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -204,6 +204,7 @@ img { box-sizing border-box } + // ====================================================================== // text ellipsis // ====================================================================== @@ -252,7 +253,7 @@ img { position absolute top -0.4rem left 50% - z-index $z-index-9 + z-index $z-index-10 display none box-sizing border-box padding 0.2rem 0.6rem diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index cde290eb..e4379533 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -106,7 +106,7 @@ $scrollbar-color = lighten($text-color-3, 10%) $scrollbar-background-color = darken($background-color-1, 10%) $toc-scrollbar-color = alpha($text-color-3, 0.1) -$copyright-info-color = #cc0033 +$copyright-icon-bg-color = alpha($text-color-3, 0.12) $avatar-background-color = $primary-color-dark-1 @@ -153,7 +153,7 @@ $dark-scrollbar-color = darken($dark-background-color-1, 10%) $dark-scrollbar-background-color = lighten($dark-background-color-1, 20%) $dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1) -$dark-copyright-info-color = darken($copyright-info-color, 20%) +$dark-copyright-icon-bg-color = alpha($dark-text-color-3, 0.12) $dark-avatar-background-color = darken($avatar-background-color, 20%) @@ -219,8 +219,8 @@ root-color(mode) { --scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color --toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color - // copyright info left side color - --copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color + // copyright icon background color + --copyright-icon-bg-color mode == 'light' ? $copyright-icon-bg-color : $dark-copyright-icon-bg-color // avatar background color --avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color diff --git a/source/css/layout/_partial/article-copyright-info.styl b/source/css/layout/_partial/article-copyright-info.styl index 9c1e9b58..a3cea8be 100644 --- a/source/css/layout/_partial/article-copyright-info.styl +++ b/source/css/layout/_partial/article-copyright-info.styl @@ -1,21 +1,7 @@ .article-copyright-info-container { - position relative - box-sizing border-box width 100% - padding 0.8rem 0.8rem 0.8rem 1.3rem - font-size 1rem background var(--background-color-2) - - &::after { - position absolute - top 0 - left 0 - width 0.5rem - height 100% - background var(--copyright-info-color) - content '' - } - + border-radius calc(var(--box-border-radius) / 2) &:hover { .copy-copyright-info { @@ -25,40 +11,54 @@ .copyright-info-content { - position relative - box-sizing border-box - overflow-x auto + width 100% + padding 1.2rem + overflow hidden + font-size 1rem - &::-webkit-scrollbar { - width 0.3rem - height 0.3rem - transition all 0.2s ease - } - &::-webkit-scrollbar-thumb { - background var(--text-color-4) - } + .copyright-info-top { + width 100% + + .post-title { + width 100% + color var(--text-color-3) + font-size 1.1rem + } - &::-webkit-scrollbar-track { - background transparent + .post-link { + width 100% + margin-top 0.2rem + color var(--text-color-4) + } } - li { - margin-bottom 0.4rem - color var(--text-color-3) - white-space nowrap - .type - .content { - color var(--text-color-3) - } + .copyright-info-bottom { + display flex + justify-content flex-start + margin-top 1rem + + .bottom-item { + margin-right 1.2rem - .license { - font-weight bold + .type { + color var(--text-color-4) + } + + .content { + margin-top 0.2rem + color var(--text-color-3) + } } - &:last-child { - margin-bottom 0 + + .post-license { + .content { + i { + font-size 1.1rem + } + } } } } @@ -66,8 +66,8 @@ .copy-copyright-info { position absolute - top 0.4rem - right 0.4rem + top 0.6rem + right 0.6rem box-sizing border-box padding 0.3rem visibility hidden @@ -78,4 +78,13 @@ color var(--text-color-3) } } + + .copyright-bg { + position absolute + top 50% + right 2rem + color var(--copyright-icon-bg-color) + font-size 14rem + transform translateY(-50%) + } } diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl index e574aa3b..169676d1 100644 --- a/source/css/layout/article-content.styl +++ b/source/css/layout/article-content.styl @@ -39,7 +39,6 @@ $spacer-padding = 2rem order 0 width 100% height 100% - overflow hidden keep-container(1, 0, 2rem) @@ -63,6 +62,8 @@ $spacer-padding = 2rem padding-right $spacer-padding overflow hidden background-color var(--background-color-2) + border-top-left-radius var(--box-border-radius) + border-top-right-radius var(--box-border-radius) +keep-tablet() { diff --git a/source/js/post-helper.js b/source/js/post-helper.js index 65c05bd9..e6fd60af 100644 --- a/source/js/post-helper.js +++ b/source/js/post-helper.js @@ -146,9 +146,7 @@ function initToggleShowToc() { // set post link initSetPostLink() { - const postLinkContentDom = document.querySelector( - '.copyright-info-content .post-link .content' - ) + const postLinkContentDom = document.querySelector('.copyright-info-content .post-link') postLinkContentDom && (postLinkContentDom.innerHTML = decodeURI(window.location.href)) }, @@ -176,7 +174,7 @@ function initToggleShowToc() { copyDom.addEventListener('click', () => { if (!isCopied) { const author = cicDom.querySelector('.post-author .content').innerHTML - const link = cicDom.querySelector('.post-link .content').innerHTML + const link = cicDom.querySelector('.post-link').innerHTML const tgtTxt = `${ccLang.author}${colon}${author}\n${ccLang.link}${colon}${link}` navigator.clipboard.writeText(tgtTxt).then(() => { setCopyDomContent('fa-copy', 'fa-check', ccLang.copied, true)