diff --git a/README.md b/README.md index 4b50047..2efeb3a 100644 --- a/README.md +++ b/README.md @@ -1,9 +1,8 @@
Language: English - 简中 - 繁中 - + 简中 + 繁中
Keep @@ -23,13 +22,15 @@ - **[XPoet's Blog](https://xpoet.cn/)** - **[Keep demo website](https://keep.xpoet.cn/)** -- **[Keep official document](https://keep-docs.xpoet.cn/)** + +> If you want to put a link to your blog in the online preview list, you can give the author a PR. ## :rocket: Installation If you're using Hexo 5.0 or later, the simplest way to install is through npm: ```sh +# recommend $ cd hexo-site $ npm install hexo-theme-keep ``` @@ -64,6 +65,7 @@ It is not recommended to directly modify any files in the «Keep» theme. Becaus Install the latest version throuth npm: ```sh +# recommend $ cd hexo-site $ npm update hexo-theme-keep ``` @@ -75,15 +77,6 @@ $ cd themes/keep $ git pull ``` -_If you modified theme source code:_ - -```sh -$ git add . -$ git stash -$ git pull -$ git stash pop -``` - ## :art: Contributing We welcome you to join the development of «Keep». Please see [contributing guide](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/). @@ -106,9 +99,9 @@ This project exists thanks to all the people who contribute. -> Thanks jsDelivr for providing public CDN service. +> Thanks jsDelivr and UNPKG for providing public CDN service. ## :memo: License -[MIT](https://github.com/XPoet/picx/blob/master/LICENSE) Copyright © 2020-2021 XPoet +[GPL-3.0](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE) Copyright © 2020-present XPoet diff --git a/_config.yml b/_config.yml index 1375280..03824a5 100644 --- a/_config.yml +++ b/_config.yml @@ -135,15 +135,16 @@ post: # If true, show Lv1, Lv2, Lv3... # If false, show custom_label_list - auto: true + auto: true # Option values: true | false # Label array item can be fill one or more - custom_label_list: ["Trainee", "Engineer", "Architect", "CTO", "BOSS"] + custom_label_list: ["Trainee", "Engineer", "Architect"] # --------------------------------------------------------------------------------------- -# Code copy +# Code block tools +# Support code copy and code block collapse # --------------------------------------------------------------------------------------- -code_copy: +code_block_tools: enable: false # Option values: true | false style: default # Option values: default | mac @@ -258,4 +259,4 @@ footer: # Keep version # Please don't modify # --------------------------------------------------------------------------------------- -version: 3.4.6 +version: 3.4.7 diff --git a/README_zh-CN.md b/docs/README_zh-CN.md similarity index 85% rename from README_zh-CN.md rename to docs/README_zh-CN.md index 880c466..25f6c18 100644 --- a/README_zh-CN.md +++ b/docs/README_zh-CN.md @@ -1,10 +1,9 @@
语言: 简中 - English + English 繁中
- Keep # hexo-theme-keep @@ -22,13 +21,15 @@ - **[XPoet's Blog](https://xpoet.cn/)** - **[keep 演示网站](https://keep.xpoet.cn/)** -- **[keep 官方文档](https://keep-docs.xpoet.cn/)** + +> 如果你想把自己的博客链接放在在线预览列表里，可以给作者提 PR 。 ## :rocket: 安装 如果你在使用 Hexo 5.0 或更高版本，最简单的安装方式是通过 npm： ```sh +# 推荐 $ cd hexo-site $ npm install hexo-theme-keep ``` @@ -37,7 +38,7 @@ $ npm install hexo-theme-keep ```sh $ cd hexo-site -$ git clone https://github.com/XPoet/hexo-theme-keep themes/keep +$ git clone https://github.com/XPoet/hexo-theme-keep --depth=1 themes/keep ``` 安装完成后，在 Hexo 配置文件中将 `theme` 设置为 `keep`。 @@ -58,11 +59,12 @@ theme: keep ## :dart: 更新 -«Keep» 不定期发布新版本。你可以通过如下命令更新 «Keep»。 +«Keep» 不定期发布新版本，你可以通过如下命令更新 «Keep»。 通过 npm 安装最新版本： ```sh +# 推荐 $ cd hexo-site $ npm update hexo-theme-keep ``` @@ -74,18 +76,9 @@ $ cd themes/keep $ git pull ``` -_如果你修改了主题源码：_ - -```sh -$ git add . -$ git stash -$ git pull -$ git stash pop -``` - ## :art: 贡献 -我们欢迎你加入 «Keep» 的开发，贡献出你的一份力量。请看[Keep 代码贡献指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。 +我们欢迎你加入 «Keep» 的开发，贡献出你的一份力量。请看 [Keep 代码贡献指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。 ## :clapper: 贡献者 @@ -105,8 +98,8 @@ $ git stash pop -> jsDelivr 提供了 CDN 服务。 +> jsDelivr 和 UNPKG 提供了 CDN 服务。 ## :memo: 许可 -[MIT](https://github.com/XPoet/picx/blob/master/LICENSE) Copyright © 2020-2021 XPoet +[GPL-3.0](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE) Copyright © 2020-present XPoet diff --git a/README_zh-TW.md b/docs/README_zh-TW.md similarity index 89% rename from README_zh-TW.md rename to docs/README_zh-TW.md index c9fe568..4e4f0e8 100644 --- a/README_zh-TW.md +++ b/docs/README_zh-TW.md @@ -1,7 +1,7 @@
語言: 繁中 - English + English 简中
@@ -22,13 +22,15 @@ - **[XPoet's Blog](https://xpoet.cn/)** - **[keep 預覽網頁](https://keep.xpoet.cn/)** -- **[keep 官方文檔](https://keep-docs.xpoet.cn/)** + +> 如果你想把自己的博客鏈接放在線上預覽列表裏，可以給作者提 PR 。 ## :rocket: 安装 如果你在使用 Hexo 5.0 或更高版本，最簡單的安裝方式是透過 npm： ```sh +# 推薦 $ cd hexo-site $ npm install hexo-theme-keep ``` @@ -37,7 +39,7 @@ $ npm install hexo-theme-keep ```sh $ cd hexo-site -$ git clone https://github.com/XPoet/hexo-theme-keep themes/keep +$ git clone https://github.com/XPoet/hexo-theme-keep --depth=1 themes/keep ``` 安裝完成後，在 Hexo 配置文件中將 `theme` 設定為 `keep`。 @@ -63,6 +65,7 @@ theme: keep 透過 npm 安裝最新版本： ```sh +# 推薦 $ cd hexo-site $ npm update hexo-theme-keep ``` @@ -74,15 +77,6 @@ $ cd themes/keep $ git pull ``` -_如果你修改了主題原始碼：_ - -```sh -$ git add . -$ git stash -$ git pull -$ git stash pop -``` - ## :art: 貢獻 我們歡迎你加入 «Keep» 的開發，貢獻出你的一份力量。請看[Keep 原始碼貢獻指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。 @@ -105,8 +99,8 @@ $ git stash pop -> jsDelivr 提供了 CDN 服務。 +> jsDelivr 和 UNPKG 提供了 CDN 服務。 ## :memo: 許可 -[MIT](https://github.com/XPoet/picx/blob/master/LICENSE) Copyright © 2020-2021 XPoet +[GPL-3.0](https://github.com/XPoet/hexo-theme-keep/blob/master/LICENSE) Copyright © 2020-present XPoet diff --git a/languages/en.yml b/languages/en.yml index cbba291..70c9784 100644 --- a/languages/en.yml +++ b/languages/en.yml @@ -1,3 +1,6 @@ +# ==================================================================== +# English +# ==================================================================== search: Search... prev: Prev next: Next @@ -30,6 +33,24 @@ read_more: Read more wordcount: Words min2read: Mins changelog: Changelog +social_contact: Social contact +github: GitHub +google: Google +apple: Apple +microsoft: Microsoft +weixin: WeChat +qq: QQ +alipay: Alipay +weibo: Weibo +zhihu: Zhihu +twitter: Twitter +facebook: Facebook +email: Email +code_block: + copy: Copy code + copied: Copied + fold: Fold code block + folded: Folded copyright: author: Post author title: Post title diff --git a/languages/zh-CN.yml b/languages/zh-CN.yml index 30118d8..2c8d536 100644 --- a/languages/zh-CN.yml +++ b/languages/zh-CN.yml @@ -1,3 +1,6 @@ +# ==================================================================== +# 中文简体 +# ==================================================================== search: 搜索... prev: 上一页 next: 下一页 @@ -30,6 +33,24 @@ read_more: 阅读全文 wordcount: 字 min2read: 分钟 changelog: 更新日志 +social_contact: 社交 +github: GitHub +google: 谷歌 +apple: 苹果 +microsoft: 微软 +weixin: 微信 +qq: QQ +alipay: 支付宝 +weibo: 微博 +zhihu: 知乎 +twitter: 推特 +facebook: Facebook +email: Email +code_block: + copy: 复制代码 + copied: 已复制 + fold: 折叠代码块 + folded: 已折叠 copyright: title: 本文标题 author: 本文作者 diff --git a/languages/zh-TW.yml b/languages/zh-TW.yml index c59ea20..797c373 100644 --- a/languages/zh-TW.yml +++ b/languages/zh-TW.yml @@ -1,3 +1,6 @@ +# ==================================================================== +# 中文繁体 +# ==================================================================== search: 搜尋... prev: 上一頁 next: 下一頁 @@ -30,6 +33,24 @@ read_more: 繼續閱讀... wordcount: 字數 min2read: 分鐘 changelog: 日誌 +social_contact: 社交 +github: GitHub +google: 谷歌 +apple: 蘋果 +microsoft: 微軟 +weixin: 微信 +qq: QQ +alipay: 支付寶 +weibo: 微博 +zhihu: 知乎 +twitter: Twitter +facebook: Facebook +email: Email +code_block: + copy: 復製代碼 + copied: 已復製 + fold: 折疊代碼塊 + folded: 已折疊 copyright: author: 文章作者 title: 文章標題 diff --git a/layout/_partial/first-screen.ejs b/layout/_partial/first-screen.ejs index 05d3759..0881b90 100644 --- a/layout/_partial/first-screen.ejs +++ b/layout/_partial/first-screen.ejs @@ -24,19 +24,19 @@ if (final_description.length > 2) { final_description.length = 2 }
<% for (const key in theme.social_contact.links) { %> <% if(theme.social_contact.links[key]) { %> - <% if(key === 'email') { %> - +
+ <% if(key === 'email') { %> - - <% } else { %> - + <% } else { %> - - <% } %> + <% } %> +
<% } %> <% } %>
diff --git a/layout/_partial/footer.ejs b/layout/_partial/footer.ejs index 0c4ac9a..5fe912a 100644 --- a/layout/_partial/footer.ejs +++ b/layout/_partial/footer.ejs @@ -36,7 +36,7 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
<%- __('powered_by', 'Hexo') %> | <%- __('theme') %>   - Keep v3.4.6 + Keep v3.4.7
<% if (f_icp) { %>
diff --git a/layout/_partial/local-search.ejs b/layout/_partial/local-search.ejs index 3c9d57d..a808b59 100644 --- a/layout/_partial/local-search.ejs +++ b/layout/_partial/local-search.ejs @@ -14,7 +14,7 @@ class="search-input" >
- + diff --git a/layout/_partial/scripts.ejs b/layout/_partial/scripts.ejs index 1c71a8f..c07da5e 100644 --- a/layout/_partial/scripts.ejs +++ b/layout/_partial/scripts.ejs @@ -6,20 +6,31 @@ 'js/dark-light-toggle.js' ]) %> -<% if (theme.local_search.enable) { %> +<% +const { + local_search: t_local_search, + code_copy: t_code_copy, + code_block_tools: t_code_block_tools, + lazyload: t_lazyload, + toc: t_toc, + pjax: t_pjax +} = theme +%> + +<% if (t_local_search?.enable === true) { %> <%- __js('js/local-search.js') %> <% } %> -<% if (theme.code_copy.enable) { %> - <%- __js('js/code-copy.js') %> +<% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %> + <%- __js('js/code-block-tools.js') %> <% } %> -<% if (theme.lazyload.enable) { %> +<% if (t_lazyload?.enable === true) { %> <%- __js('js/lazyload.js') %> <% } %> -
- <% if (theme.toc.enable && is_post()) { %> +
+ <% if (t_toc?.enable === true && is_post()) { %> <%- __js([ 'js/left-side-toggle.js', 'js/libs/anime.min.js', @@ -28,6 +39,6 @@ <% } %>
-<% if (theme.pjax.enable === true) { %> +<% if (t_pjax?.enable === true) { %> <%- partial('pjax/pjax') %> <% } %> diff --git a/package.json b/package.json index 49226a4..93868e9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "hexo-theme-keep", - "version": "3.4.6", + "version": "3.4.7", "private": false, "description": "A simple and elegant theme for Hexo.", "scripts": { diff --git a/scripts/helpers/export-config.js b/scripts/helpers/export-config.js index a728df5..c911a43 100644 --- a/scripts/helpers/export-config.js +++ b/scripts/helpers/export-config.js @@ -37,13 +37,14 @@ hexo.extend.helper.register('export_config', function () { } let theme_config = { - toc: theme.toc, - style: theme.style, - local_search: theme.local_search, - code_copy: theme.code_copy, - side_tools: theme.side_tools, - pjax: theme.pjax, - lazyload: theme.lazyload, + toc: theme.toc || {}, + style: theme.style || {}, + local_search: theme.local_search || {}, + code_copy: theme.code_copy || {}, + code_block_tools: theme.code_block_tools || {}, + side_tools: theme.side_tools || {}, + pjax: theme.pjax || {}, + lazyload: theme.lazyload || {}, version: theme.version } @@ -52,5 +53,6 @@ hexo.extend.helper.register('export_config', function () { KEEP.hexo_config = ${JSON.stringify(hexo_config)}; KEEP.theme_config = ${JSON.stringify(theme_config)}; KEEP.language_ago = ${JSON.stringify(languageContent['ago'])}; + KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])}; `; }); diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js index 51cedee..fab40da 100644 --- a/scripts/helpers/helper.js +++ b/scripts/helpers/helper.js @@ -55,7 +55,7 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) { }); const getSourceCdnUrl = (tyle, themeConfig, path) => { - const { version = '3.4.6', cdn = {} } = themeConfig + const { version = '3.4.7', cdn = {} } = themeConfig const { provider = 'jsdelivr' } = cdn let urlPrefix = '' diff --git a/source/css/common/basic.styl b/source/css/common/basic.styl index b619a28..14af953 100644 --- a/source/css/common/basic.styl +++ b/source/css/common/basic.styl @@ -9,25 +9,26 @@ // ==================================== // transition // ==================================== - transition-g(); + transition-g() // ==================================== // scrollbar // ==================================== + &::-webkit-scrollbar { - width: 6px; - height: 6px; - transition: all 0.2s ease; + width 6px + height 6px + transition all 0.2s ease } &::-webkit-scrollbar-thumb { - background: var(--scrollbar-color); - border-radius: 1px; + background var(--scrollbar-color) + border-radius 1px } &::-webkit-scrollbar-track { - background: var(--scroll-bar-bg-color); + background var(--scroll-bar-bg-color) } } @@ -36,32 +37,32 @@ // html, body // ====================================================================== html, body { - position: relative; - width: 100%; - height: 100%; - margin: 0; - padding: 0; - color: var(--default-text-color); - background: var(--background-color); - font-family: $default-font-family; - font-weight: $default-font-weight; - font-size: $default-font-size; - line-height: $default-font-line-height; + position relative + width 100% + height 100% + margin 0 + padding 0 + color var(--default-text-color) + background var(--background-color) + font-family $default-font-family + font-weight $default-font-weight + font-size $default-font-size + line-height $default-font-line-height &::-webkit-scrollbar { - width: 8px; - height: 8px; + width 8px + height 8px } +keep-tablet() { - font-size: $default-font-size * 0.96; - line-height: $default-font-line-height * 0.96; + font-size $default-font-size * 0.96 + line-height $default-font-line-height * 0.96 } +keep-mobile() { - font-size: $default-font-size * 0.9; - line-height: $default-font-line-height * 0.9; + font-size $default-font-size * 0.9 + line-height $default-font-line-height * 0.9 } } @@ -71,8 +72,8 @@ html, body { // selection // ====================================================================== ::selection { - background: var(--selection-color); - color: #fff; + background var(--selection-color) + color #fff } @@ -80,9 +81,9 @@ html, body { // ul, ol, li // ====================================================================== ul, ol, li { - padding: 0; - margin: 0; - list-style: none; + padding 0 + margin 0 + list-style none } @@ -90,19 +91,19 @@ ul, ol, li { // a // ====================================================================== a { - text-decoration: none; - color: var(--default-text-color); + text-decoration none + color var(--default-text-color) i, span { - color: var(--default-text-color); + color var(--default-text-color) } &:hover, &:active { - text-decoration: none !important; - color: var(--primary-color); + text-decoration none !important + color var(--primary-color) i, span { - color: var(--primary-color); + color var(--primary-color) } } @@ -114,10 +115,10 @@ a { // ====================================================================== img { &[lazyload] { - padding: 10px; - margin: 20px auto !important; - cursor: not-allowed; - pointer-events: none; + padding 10px + margin 20px auto !important + cursor not-allowed + pointer-events none } } @@ -126,29 +127,29 @@ img { // button // ====================================================================== button { - padding: 0; - margin: 0; - border: 0; - outline: none; - cursor: pointer; - background: transparent; + padding 0 + margin 0 + border 0 + outline none + cursor pointer + background transparent } .btn { - display: inline-block; - position: relative; - text-align: center; - cursor: pointer; - white-space: nowrap; - border-radius: 5px; - padding: 8px 16px; - background: var(--background-color); + display inline-block + position relative + text-align center + cursor pointer + white-space nowrap + border-radius 5px + padding 8px 16px + background var(--background-color) - hover-style(true, 1.06, 1.06); + hover-style(true, 1.06, 1.06) &:hover { - color: var(--background-color); - background: var(--primary-color); + color var(--background-color) + background var(--primary-color) } } @@ -157,9 +158,9 @@ button { // flex center // ====================================================================== .flex-center { - display: flex; - justify-content: center; - align-items: center; + display flex + justify-content center + align-items center } @@ -167,5 +168,43 @@ button { // clear float // ====================================================================== .clear { - clear: both; + &::after { + content '' + display block + clear both + visibility hidden + overflow hidden + height 0 + } +} + + +// ====================================================================== +// tooltip +// ====================================================================== +.tooltip { + position relative + box-sizing border-box + + &:hover { + .tooltip-content { + display inline-block + } + } + + .tooltip-content { + position absolute + top -140% + left 50% + transform translateX(-50%) + font-size 0.8rem + padding 0.2rem 0.6rem + background var(--first-text-color) + color var(--fourth-text-color) + border-radius 0.3rem + display none + z-index $z-index-9 + white-space nowrap + transition-t("display", "0", "0.2", "ease") + } } diff --git a/source/css/common/code-block/code-block-tools.styl b/source/css/common/code-block/code-block-tools.styl new file mode 100644 index 0000000..187af26 --- /dev/null +++ b/source/css/common/code-block/code-block-tools.styl @@ -0,0 +1,134 @@ +disable-user-select() { + -moz-user-select none + -ms-user-select none + -webkit-user-select none + user-select none +} + +.highlight-container { + position relative + box-sizing border-box + margin 1.4rem 0 + + .code-tools-box { + box-sizing border-box + width 100% + background var(--fourth-text-color) + border-top-left-radius 0.3rem + border-top-right-radius 0.3rem + display flex + justify-content space-between + align-items center + padding 0.3rem 0.6rem 0.3rem 0.4rem + + &.folded { + border-bottom-left-radius 0.3rem + border-bottom-right-radius 0.3rem + } + + .code-lang { + margin-left 0.2rem + font-size 0.9rem + font-weight 600 + font-family "Source Code Pro", consolas, Menlo + color var(--default-text-color) + justify-content flex-start + } + + .tool { + disable-user-select() + cursor pointer + + i { + color var(--second-text-color) + font-size 0.8rem + } + } + + + .fold { + font-weight bold + padding 0 0.4rem 0 0.2rem + } + + } + + + figure.highlight { + margin 0 + + &.folded { + height 0 + } + } + + + if (hexo-config('code_block_tools.style') == 'mac' || hexo-config('code_copy.style') == 'mac') { + margin 1.4rem 0 1.8rem 0 + box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, .4) + + &:hover { + .code-tools-box .copy { + opacity 1 + } + } + + .code-tools-box { + justify-content flex-end + background #21252b + padding 0.4rem 0.6rem 0.7rem 0.4rem + + &::before { + position absolute + content '' + width 0.8rem + height 0.8rem + left 0.8rem + background #fc625d + border-radius 50% + box-shadow 1.4rem 0 #fdbc40, 2.8rem 0 #35cd4b + } + + &.folded { + border-bottom-left-radius 0 + border-bottom-right-radius 0 + + .copy { + display none + } + } + + .code-lang { + order 1 + color #bbb + } + + .fold { + order 2 + padding 0 0.1rem 0 0.6rem + i { + color #ccc + } + } + + + .copy { + position absolute + bottom 0.3rem + right 0.5rem + padding 0 0.1rem + font-weight bold + opacity 0 + transition-t("opacity", "0", "0.2", "ease-in-out") + + i { + font-size 1rem + } + + } + + } + + } + +} diff --git a/source/css/common/codeblock/code-theme.styl b/source/css/common/code-block/code-theme.styl similarity index 84% rename from source/css/common/codeblock/code-theme.styl rename to source/css/common/code-block/code-theme.styl index dc02ffc..20c3715 100644 --- a/source/css/common/codeblock/code-theme.styl +++ b/source/css/common/code-block/code-theme.styl @@ -35,44 +35,44 @@ $night-highlight-deletion = #008000 $night-highlight-addition = #800000 code-theme(mode) { - --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground; - --code-background: mode == 'light' ? $code-background : $night-code-background; - --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background; - --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground; - --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment; - --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red; - --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange; - --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow; - --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green; - --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua; - --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue; - --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple; - --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color; - --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color; + --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground + --code-background: mode == 'light' ? $code-background : $night-code-background + --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background + --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground + --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment + --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red + --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange + --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow + --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green + --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua + --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue + --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple + --highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color + --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color } :root { - code-theme('light'); + code-theme('light') } @media (prefers-color-scheme: light) { :root { - code-theme('light'); + code-theme('light') } } @media (prefers-color-scheme: dark) { :root { - code-theme('dark'); + code-theme('dark') } } .light-mode { - code-theme('light'); + code-theme('light') } .dark-mode { - code-theme('dark'); + code-theme('dark') } diff --git a/source/css/common/code-block/highlight.styl b/source/css/common/code-block/highlight.styl new file mode 100644 index 0000000..19c09e3 --- /dev/null +++ b/source/css/common/code-block/highlight.styl @@ -0,0 +1,204 @@ +@require "code-theme.styl" + +$code-block { + overflow auto + margin 20px 0 + padding 0 + font-size 0.96rem + line-height 1.5rem + color var(--highlight-foreground) + background var(--highlight-background) +} + + +pre, code { + font-family "Source Code Pro", consolas, Menlo +} + +code { + padding 5px + word-wrap break-word + border-radius 2px + font-size 0.96rem + color var(--code-foreground) + background var(--code-background) +} + +pre { + @extend $code-block + padding 10px + + code { + padding 0 + color var(--highlight-foreground) + background none + text-shadow none + } +} + +.highlight { + @extend $code-block + border-radius 1px + + pre { + border none + margin 0 + padding 10px 0 + } + + + table { + margin 0 + width auto + border none + border-spacing unset + } + + + td { + border none + padding 0 + } + + figcaption { + font-size 1rem + color var(--highlight-foreground) + line-height 1rem + margin-bottom 1rem + + a { + float right + color var(--highlight-foreground) + + &:hover { + border-bottom-color var(--highlight-foreground) + } + } + } + + .gutter pre { + padding-left 10px + padding-right 10px + color var(--highlight-gutter-color) + text-align center + background-color var(--highlight-gutter-bg-color) + } + + .code pre { + width 100% + padding-left 10px + padding-right 10px + background-color var(--highlight-background) + } + + .line { + height 20px + color var(--default-text-color) + + .attr { + color var(--default-text-color) + } + + .string { + color var(--default-text-color) + } + + } +} + + +.gutter { + -webkit-user-select none + -moz-user-select none + -ms-user-select none + user-select none +} + +.gist table { + width auto + + td { + border none + } +} + +// For diff highlight +pre .deletion { + background var(--highlight-deletion) +} + +pre .addition { + background var(--highlight-addition) +} + +pre .meta { + color var(--highlight-purple) +} + +pre { + + .comment { + color var(--highlight-comment) + } + + .variable + .attribute + .tag + .regexp + .ruby .constant + .xml .tag .title + .xml .pi + .xml .doctype + .html .doctype + .css .id + .css .class + .css .pseudo { + color var(--highlight-red) + } + + .number + .preprocessor + .built_in + .literal + .params + .constant + .command { + color var(--highlight-orange) + } + + .ruby .class .title + .css .rules .attribute + .string + .value + .inheritance + .header + .ruby .symbol + .xml .cdata + .special + .number + .formula { + color var(--highlight-green) + } + + .title + .css .hexcolor { + color var(--highlight-aqua) + } + + .function + .python .decorator + .python .title + .ruby .function .title + .ruby .title .keyword + .perl .sub + .javascript .title + .coffeescript .title { + color var(--highlight-blue) + } + + .keyword + .javascript .function { + color var(--highlight-purple) + } + +} diff --git a/source/css/common/codeblock/copy-code.styl b/source/css/common/codeblock/copy-code.styl deleted file mode 100644 index 89fb9dc..0000000 --- a/source/css/common/codeblock/copy-code.styl +++ /dev/null @@ -1,66 +0,0 @@ -disable-user-select() { - -moz-user-select: none; - -ms-user-select: none; - -webkit-user-select: none; - user-select: none; -} - -.highlight-container { - position: relative; -} - -.highlight-container:hover .copy-btn, .highlight-container .copy-btn:focus { - opacity: 1; -} - -.copy-btn { - cursor: pointer; - display: inline-block; - font-weight: bold; - line-height: 1.8; - opacity: 0; - outline: 0; - padding: 2px 6px; - position: absolute; - vertical-align: middle; - white-space: nowrap; - font-size: 1rem; - color: var(--default-text-color); - disable-user-select(); - transition-t("opacity", "0", "0.2", "ease-in-out"); - - - if (hexo-config('code_copy.style') == 'mac') { - color: white; - right: 2px; - top: 2px; - } else { - background: var(--background-color); - border: 0; - right: 0; - top: 0; - } -} - - -if (hexo-config('code_copy.style') == 'mac') { - .highlight-container { - background: #21252b; - border-radius: 5px; - box-shadow: 0 10px 30px 0 rgba(0, 0, 0, .4); - padding-top: 20px; - margin-top: 10px; - - &::before { - background: #fc625d; - border-radius: 50%; - box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b; - content: ' '; - height: 12px; - left: 12px; - margin-top: -10px; - position: absolute; - width: 12px; - } - } -} diff --git a/source/css/common/codeblock/highlight.styl b/source/css/common/codeblock/highlight.styl deleted file mode 100644 index 2517bca..0000000 --- a/source/css/common/codeblock/highlight.styl +++ /dev/null @@ -1,204 +0,0 @@ -@require "code-theme.styl" - -$code-block { - overflow: auto; - margin: 20px 0; - padding: 0; - font-size 0.96rem; - line-height: 1.5rem; - color: var(--highlight-foreground); - background: var(--highlight-background); -} - - -pre, code { - font-family: "Source Code Pro", consolas, Menlo; -} - -code { - padding: 5px; - word-wrap: break-word; - border-radius: 2px; - font-size: 0.96rem; - color: var(--code-foreground); - background: var(--code-background); -} - -pre { - @extend $code-block; - padding: 10px; - - code { - padding: 0; - color: var(--highlight-foreground); - background: none; - text-shadow: none; - } -} - -.highlight { - @extend $code-block; - border-radius: 1px; - - pre { - border: none; - margin: 0; - padding: 10px 0; - } - - - table { - margin: 0; - width: auto; - border: none; - border-spacing: unset; - } - - - td { - border: none; - padding: 0; - } - - figcaption { - font-size: 1rem; - color: var(--highlight-foreground); - line-height: 1rem; - margin-bottom: 1rem; - - a { - float: right; - color: var(--highlight-foreground); - - &:hover { - border-bottom-color: var(--highlight-foreground); - } - } - } - - .gutter pre { - padding-left: 10px; - padding-right: 10px; - color: var(--highlight-gutter-color); - text-align: center; - background-color: var(--highlight-gutter-bg-color); - } - - .code pre { - width: 100%; - padding-left: 10px; - padding-right: 10px; - background-color: var(--highlight-background); - } - - .line { - height: 20px; - color: var(--default-text-color); - - .attr { - color: var(--default-text-color); - } - - .string { - color: var(--default-text-color); - } - - } -} - - -.gutter { - -webkit-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -.gist table { - width: auto; - - td { - border: none; - } -} - -// For diff highlight -pre .deletion { - background: var(--highlight-deletion); -} - -pre .addition { - background: var(--highlight-addition); -} - -pre .meta { - color: var(--highlight-purple); -} - -pre { - - .comment { - color: var(--highlight-comment); - } - - .variable - .attribute - .tag - .regexp - .ruby .constant - .xml .tag .title - .xml .pi - .xml .doctype - .html .doctype - .css .id - .css .class - .css .pseudo { - color: var(--highlight-red); - } - - .number - .preprocessor - .built_in - .literal - .params - .constant - .command { - color: var(--highlight-orange); - } - - .ruby .class .title - .css .rules .attribute - .string - .value - .inheritance - .header - .ruby .symbol - .xml .cdata - .special - .number - .formula { - color: var(--highlight-green); - } - - .title - .css .hexcolor { - color: var(--highlight-aqua); - } - - .function - .python .decorator - .python .title - .ruby .function .title - .ruby .title .keyword - .perl .sub - .javascript .title - .coffeescript .title { - color: var(--highlight-blue); - } - - .keyword - .javascript .function { - color: var(--highlight-purple); - } - -} diff --git a/source/css/common/variables.styl b/source/css/common/variables.styl index 0bd31d9..d78dee1 100644 --- a/source/css/common/variables.styl +++ b/source/css/common/variables.styl @@ -75,8 +75,8 @@ $scroll-bar-bg-color = darken($background-color, 10%); $link-color = darken($default-text-color, 10%); $copyright-info-color = #CC0033; $avatar-background-color = #0066CC; -$header-transparent-background-1 = alpha($background-color, 0.58); -$header-transparent-background-2 = alpha($background-color, 0.38); +$header-transparent-background-1 = alpha($background-color, 0.28); +$header-transparent-background-2 = alpha($background-color, 0.58); $pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3); @@ -90,7 +90,7 @@ $dark-default-text-color = #bebec6; $dark-first-text-color = lighten($dark-default-text-color, 30%); $dark-second-text-color = lighten($dark-default-text-color, 20%); $dark-third-text-color = darken($dark-default-text-color, 20%); -$dark-fourth-text-color = darken($dark-default-text-color, 80%); +$dark-fourth-text-color = darken($dark-default-text-color, 75%); $dark-border-color = lighten($dark-background-color, 20%); $dark-selection-color = $selection-color; $dark-shadow-color = rgba(128, 128, 128, 0.2); @@ -100,8 +100,8 @@ $dark-scroll-bar-bg-color = lighten($dark-background-color, 20%); $dark-link-color = lighten($dark-default-text-color, 10%); $dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-avatar-background-color = darken($avatar-background-color, 10%); -$dark-header-transparent-background-1 = alpha($dark-background-color, 0.58); -$dark-header-transparent-background-2 = alpha($dark-background-color, 0.38); +$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28); +$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58); $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee); diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl index 9f7735c..dabd49d 100644 --- a/source/css/layout/_partial/article-meta-info.styl +++ b/source/css/layout/_partial/article-meta-info.styl @@ -1,9 +1,9 @@ .article-meta-info { font-size: 0.8rem; - color: var(--third-text-color); .article-meta-item { margin-right: 10px; + color: var(--third-text-color); &:last-child { margin-right: 0; diff --git a/source/css/layout/_partial/first-screen.styl b/source/css/layout/_partial/first-screen.styl index 8254645..dc4a2fb 100644 --- a/source/css/layout/_partial/first-screen.styl +++ b/source/css/layout/_partial/first-screen.styl @@ -1,72 +1,66 @@ -$first-screen-font-size = 2rem; -$first-screen-icon-size = 1.6rem; +$first-screen-font-size = 2rem +$first-screen-icon-size = 1.6rem -$temp-img = hexo-config('style.first_screen.background_img'); -$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'; +$temp-img = hexo-config('style.first_screen.background_img') +$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg' -$temp-font-color = hexo-config('style.first_screen.font_color'); -$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color); +$temp-font-color = hexo-config('style.first_screen.font_color') +$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color) .first-screen-container { - position: relative; - box-sizing: border-box; - width: 100%; - overflow: hidden; - background: url($first-screen-img) center center / cover no-repeat; + position relative + box-sizing border-box + width 100% + overflow hidden + background url($first-screen-img) center center / cover no-repeat if (!(hexo-config('style.first_screen.header_transparent') == true)) { - background-position-y: $header-height; + background-position-y $header-height } +keep-tablet() { - background-position-y: $header-height * 0.9; + background-position-y $header-height * 0.9 } +keep-mobile() { - background-position-y: $header-height * 0.8; + background-position-y $header-height * 0.8 } .content { - position: relative; - box-sizing: border-box; - width: 80%; - height: 90%; - padding-top: 5rem; + position relative + box-sizing border-box + width 80% + height 90% + padding-top 2rem .description { - font-weight: bold; - font-size: $first-screen-font-size; - line-height: 1.8; - text-align: center; - color: $first-screen-font-color; + font-weight bold + font-size $first-screen-font-size + line-height 1.8 + text-align center + color $first-screen-font-color +keep-tablet() { - font-size: $first-screen-font-size * 0.9; + font-size $first-screen-font-size * 0.9 } } .s-icon-list { - position: absolute; - bottom: 0; - font-size: $first-screen-icon-size; - text-align: center; + position absolute + box-sizing border-box + bottom 0 + font-size $first-screen-icon-size + display flex +keep-tablet() { - font-size: $first-screen-icon-size * 0.9; + font-size $first-screen-icon-size * 0.9 } .s-icon-item { - margin-right: 20px; - cursor: pointer; - line-height: 2; - - &:last-child { - margin-right: 0; - } - + margin 0 1rem + cursor pointer } - } } } diff --git a/source/css/layout/_partial/local-search.styl b/source/css/layout/_partial/local-search.styl index 439c49a..fc5871c 100644 --- a/source/css/layout/_partial/local-search.styl +++ b/source/css/layout/_partial/local-search.styl @@ -1,97 +1,93 @@ -$icon-size = 1.2rem; +$icon-size = 1.2rem +$search-header-height = 3rem .search-pop-overlay { - position: fixed; - display: flex; - height: 100%; - width: 100%; - left: 0; - top: 0; - background: rgba(0, 0, 0, 0); - visibility: hidden; - z-index: $z-index-8; - transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease"); + position fixed + display flex + height 100% + width 100% + left 0 + top 0 + background rgba(0, 0, 0, 0) + visibility hidden + z-index $z-index-8 + transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease") &.active { - visibility: visible; - background: rgba(0, 0, 0, 0.35); + visibility visible + background rgba(0, 0, 0, 0.35) .search-popup { - transform: scale(1); + transform scale(1) } } .search-popup { - background: var(--background-color); - border-radius: 5px; - height: 80%; - width: 70%; - margin: auto; - transform: scale(0); - z-index: $z-index-6; - transition-t("transform", "0", "0.3", "ease"); + background var(--background-color) + border-radius 0.4rem + height 80% + width 70% + margin auto + transform scale(0) + z-index $z-index-6 + transition-t("transform", "0", "0.3", "ease") +keep-tablet() { - width: 80%; + width 80% } +keep-mobile() { - width: 90%; + width 90% } .search-header { - background: var(--fourth-text-color); - border-top-left-radius: 2px; - border-top-right-radius: 2px; - display: flex; - padding: 10px; - - .search-input-field-pre, .popup-btn-close { - font-size: $icon-size; - padding: 0 10px; - display: flex; - align-items: center; - } + background var(--fourth-text-color) + border-top-left-radius 0.2rem + border-top-right-radius 0.2rem + display flex + height $search-header-height + align-items center + padding 0 1rem .search-input-field-pre { - cursor: pointer; - color: var(--third-text-color); + cursor pointer + color var(--default-text-color) + margin-right 0.2rem } - .popup-btn-close { - color: var(--default-text-color); - } - - .search-input-container { - - flex-grow: 1; - padding: 2px; + flex-grow 1 + padding 0.2rem .search-input { - background: transparent; - border: 0; - outline: 0; - width: 100%; - font-size: 1.2rem; - color: var(--default-text-color); + background transparent + border 0 + outline 0 + width 100% + font-size 1.2rem + color var(--default-text-color) &::-webkit-search-cancel-button { - display: none; + display none + } + + &::-webkit-input-placeholder { + color var(--third-text-color) + font-size 1rem } } - - } - .popup-btn-close { - cursor: pointer; + .close-popup-btn { + color var(--default-text-color) + font-size $icon-size + cursor pointer &:hover .fas, far, fab { - color: var(--first-text-color); + color var(--first-text-color) } } @@ -99,66 +95,68 @@ $icon-size = 1.2rem; #search-result { - display: flex; - height: calc(100% - 55px); - overflow: auto; - padding: 5px 25px; + position relative + box-sizing border-box + display flex + height 'calc(100% - %s)' % $search-header-height + overflow auto + padding 0.3rem 1.5rem .search-result-list { - width: 100%; - height: 100%; - font-size: 1rem; + width 100% + height 100% + font-size 1rem li { - border-bottom: 1px dashed var(--border-color); - padding: 10px 0; - margin: 10px 0; - box-sizing: border-box; + box-sizing border-box + border-bottom 0.1rem dashed var(--border-color) + padding 0.8rem 0 + margin 0.8rem 0 &:last-child { - border-bottom: none; + border-bottom none } .search-result-title { - position: relative; - font-weight: bold; - margin-bottom: 10px; - padding-left: 16px; - display: flex; - align-items: center; + position relative + font-weight bold + margin-bottom 0.8rem + padding-left 1rem + display flex + align-items center &::after { - content: ''; - position: absolute; - width: 5px; - height: 5px; - border-radius: 50%; - top: 50%; - transform: translateY(-50%); - left: 0; - background: var(--default-text-color); + content '' + position absolute + width 0.4rem + height 0.4rem + border-radius 50% + top 50% + transform translateY(-50%) + left 0 + background var(--default-text-color) } } .search-result { - line-height: 2rem; - margin: 0; - padding-left: 16px; - word-wrap: break-word; + line-height 2rem + margin 0 + padding-left 1rem + word-wrap break-word } a { &:hover { - color: var(--default-text-color); + color var(--default-text-color) } } .search-keyword { - border-bottom: 1px dashed var(--primary-color); - color: var(--primary-color); - font-weight: bold; + border-bottom 0.1rem dashed var(--primary-color) + color var(--primary-color) + font-weight bold } } @@ -166,8 +164,8 @@ $icon-size = 1.2rem; #no-result { - color: var(--third-text-color); - margin: auto; + color var(--third-text-color) + margin auto } } diff --git a/source/css/style.styl b/source/css/style.styl index dea0030..2f56545 100644 --- a/source/css/style.styl +++ b/source/css/style.styl @@ -1,8 +1,8 @@ @import "common/basic.styl" @import "common/markdown.styl" -@import "common/codeblock/highlight.styl" -@import "common/codeblock/copy-code.styl" -@import "common/codeblock/code-theme.styl" +@import "common/code-block/highlight.styl" +@import "common/code-block/code-block-tools.styl" +@import "common/code-block/code-theme.styl" @import "layout/page.styl" @import "layout/_partial/local-search.styl" @import "layout/_partial/toc.styl" diff --git a/source/js/back2top.js b/source/js/back2top.js index d21b222..0a71a6f 100644 --- a/source/js/back2top.js +++ b/source/js/back2top.js @@ -1,3 +1,5 @@ +/* global KEEP */ + KEEP.initBack2Top = () => { KEEP.utils = { diff --git a/source/js/code-block-tools.js b/source/js/code-block-tools.js new file mode 100644 index 0000000..e397066 --- /dev/null +++ b/source/js/code-block-tools.js @@ -0,0 +1,101 @@ +/* global KEEP */ + +KEEP.initCodeBlockTools = () => { + HTMLElement.prototype.wrap = function (wrapper) { + this.parentNode.insertBefore(wrapper, this); + this.parentNode.removeChild(this); + wrapper.appendChild(this); + }; + + const { style: codeCopyStyle } = KEEP.theme_config?.code_copy; + const { style: codeBlockStyle } = KEEP.theme_config?.code_block_tools; + const isMac = (codeBlockStyle || codeCopyStyle || 'default') === 'mac'; + const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'; + const { copy: copyLang, copied: copiedLang, fold: foldLang, folded: foldedLang } = KEEP.language_code_block; + const foldDom = `` + + document.querySelectorAll('figure.highlight').forEach(element => { + let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''; + if (codeLang === 'PLAINTEXT') { codeLang = '' } + const highlightContainer = document.createElement('div'); + highlightContainer.classList.add('highlight-container'); + element.wrap(highlightContainer); + + + const codeLangDom = `${codeLang ? '' + codeLang + '' : ''}` + + highlightContainer.insertAdjacentHTML( + 'afterbegin', + `
+ ${isMac ? foldDom + codeLangDom : '' + foldDom + codeLangDom + ''} + +
` + ); + const codeToolsBox = element.parentNode.querySelector('.code-tools-box'); + const copyDom = codeToolsBox.querySelector('.copy'); + const targetFoldDom = codeToolsBox.querySelector('.fold'); + + copyDom.addEventListener('click', event => { + const target = event.currentTarget; + const code = [...element.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); + const tta = document.createElement('textarea'); + tta.style.top = window.scrollY + 'px'; + tta.style.position = 'absolute'; + tta.style.opacity = '0'; + tta.readOnly = true; + tta.value = code; + document.body.append(tta); + const selection = document.getSelection(); + const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; + tta.select(); + tta.setSelectionRange(0, code.length); + tta.readOnly = false; + const result = document.execCommand('copy'); + + const copyIconDom = target.querySelector('i'); + const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); + + if (result) { + copyIconDom.className = 'fas fa-check'; + copyTooltipDom && (copyTooltipDom.innerHTML = copiedLang); + } else { + copyIconDom.className = 'fas fa-times'; + } + + tta.blur(); + target.blur(); + if (selected) { + selection.removeAllRanges(); + selection.addRange(selected); + } + document.body.removeChild(tta); + }); + + copyDom.addEventListener('mouseleave', event => { + setTimeout(() => { + event.target.querySelector('i').className = 'fas fa-copy'; + const copyTooltipDom = codeToolsBox.querySelector('.copy .tooltip-content'); + copyTooltipDom && (copyTooltipDom.innerHTML = copyLang); + }, 500); + }); + + let isFold = false + targetFoldDom.addEventListener('click', event => { + const target = event.currentTarget; + const icon = target.querySelector('i'); + const foldTooltipDom = codeToolsBox.querySelector('.fold .tooltip-content'); + isFold = !isFold; + if (isFold) { + icon.className = foldedIconClassName; + element.classList.add('folded'); + codeToolsBox.classList.add('folded'); + foldTooltipDom && (foldTooltipDom.innerHTML = foldedLang) + } else { + icon.className = 'fas fa-chevron-down'; + element.classList.remove('folded'); + codeToolsBox.classList.remove('folded'); + foldTooltipDom && (foldTooltipDom.innerHTML = foldLang) + } + }); + }); +} diff --git a/source/js/code-copy.js b/source/js/code-copy.js deleted file mode 100644 index 9f528b4..0000000 --- a/source/js/code-copy.js +++ /dev/null @@ -1,46 +0,0 @@ -KEEP.initCodeCopy = () => { - - HTMLElement.prototype.wrap = function (wrapper) { - this.parentNode.insertBefore(wrapper, this); - this.parentNode.removeChild(this); - wrapper.appendChild(this); - }; - - document.querySelectorAll('figure.highlight').forEach(element => { - const box = document.createElement('div'); - element.wrap(box); - box.classList.add('highlight-container'); - box.insertAdjacentHTML('beforeend', '
'); - const button = element.parentNode.querySelector('.copy-btn'); - button.addEventListener('click', event => { - const target = event.currentTarget; - const code = [...target.parentNode.querySelectorAll('.code .line')].map(line => line.innerText).join('\n'); - const ta = document.createElement('textarea'); - ta.style.top = window.scrollY + 'px'; // Prevent page scrolling - ta.style.position = 'absolute'; - ta.style.opacity = '0'; - ta.readOnly = true; - ta.value = code; - document.body.append(ta); - const selection = document.getSelection(); - const selected = selection.rangeCount > 0 ? selection.getRangeAt(0) : false; - ta.select(); - ta.setSelectionRange(0, code.length); - ta.readOnly = false; - const result = document.execCommand('copy'); - target.querySelector('i').className = result ? 'fas fa-check' : 'fas fa-times'; - ta.blur(); // For iOS - target.blur(); - if (selected) { - selection.removeAllRanges(); - selection.addRange(selected); - } - document.body.removeChild(ta); - }); - button.addEventListener('mouseleave', event => { - setTimeout(() => { - event.target.querySelector('i').className = 'fas fa-copy'; - }, 300); - }); - }); -} diff --git a/source/js/header-shrink.js b/source/js/header-shrink.js index 2c6dad3..a4c9c45 100644 --- a/source/js/header-shrink.js +++ b/source/js/header-shrink.js @@ -1,3 +1,5 @@ +/* global KEEP */ + KEEP.initHeaderShrink = () => { KEEP.utils.headerShrink = { headerDom: document.querySelector('.header-wrapper'), diff --git a/source/js/lazyload.js b/source/js/lazyload.js index f46400d..e75b95b 100644 --- a/source/js/lazyload.js +++ b/source/js/lazyload.js @@ -1,3 +1,5 @@ +/* global KEEP */ + KEEP.initLazyLoad = () => { const imgs = document.querySelectorAll('img'); let now = Date.now(); diff --git a/source/js/local-search.js b/source/js/local-search.js index 41589d2..620174e 100644 --- a/source/js/local-search.js +++ b/source/js/local-search.js @@ -271,7 +271,7 @@ KEEP.initLocalSearch = () => { searchInputDom.focus(); inputEventFunction(); }); - document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose); + document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose); window.addEventListener('pjax:success', onPopupClose); window.addEventListener('keyup', event => { if (event.key === 'Escape') { diff --git a/source/js/main.js b/source/js/main.js index 9e67e3b..4f25c41 100644 --- a/source/js/main.js +++ b/source/js/main.js @@ -3,7 +3,7 @@ window.addEventListener('DOMContentLoaded', () => { KEEP.themeInfo = { - theme: `Keep v3.4.6`, + theme: `Keep v3.4.7`, author: 'XPoet', repository: 'https://github.com/XPoet/hexo-theme-keep' } @@ -19,7 +19,10 @@ window.addEventListener('DOMContentLoaded', () => { // print theme base info KEEP.printThemeInfo = () => { - console.log(`\n %c ${KEEP.themeInfo.theme} %c ${KEEP.themeInfo.repository} \n`, `color: #fadfa3; background: #333; padding: 6px 0;`, `border: 1px dashed #fadfa3; padding: 5px 0;`); + console.log( + `\n %c ${KEEP.themeInfo.theme} %c ${KEEP.themeInfo.repository} \n`, + `color: #fadfa3; background: #333; padding: 6px 0;`, `padding: 6px 0;` + ); } // set styleStatus to localStorage @@ -47,15 +50,18 @@ window.addEventListener('DOMContentLoaded', () => { KEEP.initModeToggle(); KEEP.initBack2Top(); - if (KEEP.theme_config.local_search.enable === true) { + if (KEEP.theme_config.local_search?.enable === true) { KEEP.initLocalSearch(); } - if (KEEP.theme_config.code_copy.enable === true) { - KEEP.initCodeCopy(); + if ( + KEEP.theme_config.code_block_tools?.enable === true + || KEEP.theme_config.code_copy?.enable === true + ) { + KEEP.initCodeBlockTools(); } - if (KEEP.theme_config.lazyload.enable === true) { + if (KEEP.theme_config.lazyload?.enable === true) { KEEP.initLazyLoad(); } } diff --git a/source/js/utils.js b/source/js/utils.js index 79c0821..3aec326 100644 --- a/source/js/utils.js +++ b/source/js/utils.js @@ -264,8 +264,7 @@ KEEP.initUtils = () => { }, getHowLongAgo(timestamp) { - const l = KEEP.language_ago; - + const lang = KEEP.language_ago; const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12); const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)); const __W = Math.floor(timestamp / (60 * 60 * 24) / 7); @@ -275,25 +274,25 @@ KEEP.initUtils = () => { const __s = Math.floor(timestamp % 60); if (__Y > 0) { - return this.setHowLongAgoLanguage(__Y, l.year); + return this.setHowLongAgoLanguage(__Y, lang.year); } else if (__M > 0) { - return this.setHowLongAgoLanguage(__M, l.month); + return this.setHowLongAgoLanguage(__M, lang.month); } else if (__W > 0) { - return this.setHowLongAgoLanguage(__W, l.week); + return this.setHowLongAgoLanguage(__W, lang.week); } else if (__d > 0) { - return this.setHowLongAgoLanguage(__d, l.day); + return this.setHowLongAgoLanguage(__d, lang.day); } else if (__h > 0) { - return this.setHowLongAgoLanguage(__h, l.hour); + return this.setHowLongAgoLanguage(__h, lang.hour); } else if (__m > 0) { - return this.setHowLongAgoLanguage(__m, l.minute); + return this.setHowLongAgoLanguage(__m, lang.minute); } else if (__s > 0) { - return this.setHowLongAgoLanguage(__s, l.second); + return this.setHowLongAgoLanguage(__s, lang.second); } }, @@ -349,6 +348,24 @@ KEEP.initUtils = () => { }, 200); }, + + // insert tooltip content dom + insertTooltipContent() { + const init = () => { + document.querySelectorAll('.tooltip').forEach(element => { + const { content } = element.dataset; + if (content) { + element.insertAdjacentHTML( + 'afterbegin', + `${content}` + ); + } + }); + } + setTimeout(() => { + init(); + }, 1000); + } } // init data @@ -381,4 +398,6 @@ KEEP.initUtils = () => { // set how long age in home article block KEEP.utils.setHowLongAgoInHome(); + // insert tooltip content dom + KEEP.utils.insertTooltipContent(); }