Merge pull request #173 from XPoet/dev

hexo-theme-keep release v3.4.7
This commit is contained in:
指间的诗意 2022-09-29 17:04:24 +08:00 committed by GitHub
commit f613edc816
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
33 changed files with 872 additions and 630 deletions

View File

@ -1,9 +1,8 @@
<div align="right"> <div align="right">
Language: Language:
English English
<a title="Chinese" href="README_zh-CN.md">简中</a> <a title="Chinese" href="docs/README_zh-CN.md">简中</a>
<a title="Chinese" href="README_zh-TW.md">繁中</a> <a title="Chinese" href="docs/README_zh-TW.md">繁中</a>
</div> </div>
<a href="https://xpoet.cn"><img align="center" alt="Keep" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/keep-logo-slogan.svg"></a> <a href="https://xpoet.cn"><img align="center" alt="Keep" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/keep-logo-slogan.svg"></a>
@ -23,13 +22,15 @@
- **[XPoet's Blog](https://xpoet.cn/)** - **[XPoet's Blog](https://xpoet.cn/)**
- **[Keep demo website](https://keep.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 ## :rocket: Installation
If you're using Hexo 5.0 or later, the simplest way to install is through npm: If you're using Hexo 5.0 or later, the simplest way to install is through npm:
```sh ```sh
# recommend
$ cd hexo-site $ cd hexo-site
$ npm install hexo-theme-keep $ 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: Install the latest version throuth npm:
```sh ```sh
# recommend
$ cd hexo-site $ cd hexo-site
$ npm update hexo-theme-keep $ npm update hexo-theme-keep
``` ```
@ -75,15 +77,6 @@ $ cd themes/keep
$ git pull $ git pull
``` ```
_If you modified theme source code:_
```sh
$ git add .
$ git stash
$ git pull
$ git stash pop
```
## :art: Contributing ## :art: Contributing
We welcome you to join the development of «Keep». Please see [contributing guide](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/). 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.
<a href="https://www.jsdelivr.com"><img height="38" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/jsDelivr-LOGO.png"></a> <a href="https://www.jsdelivr.com"><img height="38" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/jsDelivr-LOGO.png"></a>
> Thanks jsDelivr for providing public CDN service. > Thanks jsDelivr and UNPKG for providing public CDN service.
## :memo: License ## :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

View File

@ -135,15 +135,16 @@ post:
# If true, show Lv1, Lv2, Lv3... # If true, show Lv1, Lv2, Lv3...
# If false, show custom_label_list # If false, show custom_label_list
auto: true auto: true # Option values: true | false
# Label array item can be fill one or more # 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 enable: false # Option values: true | false
style: default # Option values: default | mac style: default # Option values: default | mac
@ -258,4 +259,4 @@ footer:
# Keep version # Keep version
# Please don't modify # Please don't modify
# --------------------------------------------------------------------------------------- # ---------------------------------------------------------------------------------------
version: 3.4.6 version: 3.4.7

View File

@ -1,10 +1,9 @@
<div align="right"> <div align="right">
语言: 语言:
简中 简中
<a title="Chinese" href="README.md">English</a> <a title="English" href="../README.md">English</a>
<a title="Chinese" href="README_zh-TW.md">繁中</a> <a title="Chinese" href="README_zh-TW.md">繁中</a>
</div> </div>
<a href="https://xpoet.cn"><img align="center" alt="Keep" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/keep-logo-slogan.svg"></a> <a href="https://xpoet.cn"><img align="center" alt="Keep" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/keep-logo-slogan.svg"></a>
# hexo-theme-keep # hexo-theme-keep
@ -22,13 +21,15 @@
- **[XPoet's Blog](https://xpoet.cn/)** - **[XPoet's Blog](https://xpoet.cn/)**
- **[keep 演示网站](https://keep.xpoet.cn/)** - **[keep 演示网站](https://keep.xpoet.cn/)**
- **[keep 官方文档](https://keep-docs.xpoet.cn/)**
> 如果你想把自己的博客链接放在在线预览列表里,可以给作者提 PR 。
## :rocket: 安装 ## :rocket: 安装
如果你在使用 Hexo 5.0 或更高版本,最简单的安装方式是通过 npm 如果你在使用 Hexo 5.0 或更高版本,最简单的安装方式是通过 npm
```sh ```sh
# 推荐
$ cd hexo-site $ cd hexo-site
$ npm install hexo-theme-keep $ npm install hexo-theme-keep
``` ```
@ -37,7 +38,7 @@ $ npm install hexo-theme-keep
```sh ```sh
$ cd hexo-site $ 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` 安装完成后,在 Hexo 配置文件中将 `theme` 设置为 `keep`
@ -58,11 +59,12 @@ theme: keep
## :dart: 更新 ## :dart: 更新
«Keep» 不定期发布新版本你可以通过如下命令更新 «Keep»。 «Keep» 不定期发布新版本你可以通过如下命令更新 «Keep»。
通过 npm 安装最新版本: 通过 npm 安装最新版本:
```sh ```sh
# 推荐
$ cd hexo-site $ cd hexo-site
$ npm update hexo-theme-keep $ npm update hexo-theme-keep
``` ```
@ -74,18 +76,9 @@ $ cd themes/keep
$ git pull $ git pull
``` ```
_如果你修改了主题源码_
```sh
$ git add .
$ git stash
$ git pull
$ git stash pop
```
## :art: 贡献 ## :art: 贡献
我们欢迎你加入 «Keep» 的开发,贡献出你的一份力量。请看[Keep 代码贡献指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。 我们欢迎你加入 «Keep» 的开发,贡献出你的一份力量。请看 [Keep 代码贡献指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。
## :clapper: 贡献者 ## :clapper: 贡献者
@ -105,8 +98,8 @@ $ git stash pop
<a href="https://www.jsdelivr.com"><img height="38" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/jsDelivr-LOGO.png"></a> <a href="https://www.jsdelivr.com"><img height="38" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/jsDelivr-LOGO.png"></a>
> jsDelivr 提供了 CDN 服务。 > jsDelivr 和 UNPKG 提供了 CDN 服务。
## :memo: 许可 ## :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

View File

@ -1,7 +1,7 @@
<div align="right"> <div align="right">
語言: 語言:
繁中 繁中
<a title="Chinese" href="README.md">English</a> <a title="English" href="../README.md">English</a>
<a title="Chinese" href="README_zh-CN.md">简中</a> <a title="Chinese" href="README_zh-CN.md">简中</a>
</div> </div>
@ -22,13 +22,15 @@
- **[XPoet's Blog](https://xpoet.cn/)** - **[XPoet's Blog](https://xpoet.cn/)**
- **[keep 預覽網頁](https://keep.xpoet.cn/)** - **[keep 預覽網頁](https://keep.xpoet.cn/)**
- **[keep 官方文檔](https://keep-docs.xpoet.cn/)**
> 如果你想把自己的博客鏈接放在線上預覽列表裏,可以給作者提 PR 。
## :rocket: 安装 ## :rocket: 安装
如果你在使用 Hexo 5.0 或更高版本,最簡單的安裝方式是透過 npm 如果你在使用 Hexo 5.0 或更高版本,最簡單的安裝方式是透過 npm
```sh ```sh
# 推薦
$ cd hexo-site $ cd hexo-site
$ npm install hexo-theme-keep $ npm install hexo-theme-keep
``` ```
@ -37,7 +39,7 @@ $ npm install hexo-theme-keep
```sh ```sh
$ cd hexo-site $ 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` 安裝完成後,在 Hexo 配置文件中將 `theme` 設定為 `keep`
@ -63,6 +65,7 @@ theme: keep
透過 npm 安裝最新版本: 透過 npm 安裝最新版本:
```sh ```sh
# 推薦
$ cd hexo-site $ cd hexo-site
$ npm update hexo-theme-keep $ npm update hexo-theme-keep
``` ```
@ -74,15 +77,6 @@ $ cd themes/keep
$ git pull $ git pull
``` ```
_如果你修改了主題原始碼_
```sh
$ git add .
$ git stash
$ git pull
$ git stash pop
```
## :art: 貢獻 ## :art: 貢獻
我們歡迎你加入 «Keep» 的開發,貢獻出你的一份力量。請看[Keep 原始碼貢獻指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。 我們歡迎你加入 «Keep» 的開發,貢獻出你的一份力量。請看[Keep 原始碼貢獻指南](https://keep.xpoet.cn/2020/11/Keep-代码贡献指南/)。
@ -105,8 +99,8 @@ $ git stash pop
<a href="https://www.jsdelivr.com"><img height="38" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/jsDelivr-LOGO.png"></a> <a href="https://www.jsdelivr.com"><img height="38" src="https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/hexo-theme-keep/jsDelivr-LOGO.png"></a>
> jsDelivr 提供了 CDN 服務。 > jsDelivr 和 UNPKG 提供了 CDN 服務。
## :memo: 許可 ## :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

View File

@ -1,3 +1,6 @@
# ====================================================================
# English
# ====================================================================
search: Search... search: Search...
prev: Prev prev: Prev
next: Next next: Next
@ -30,6 +33,24 @@ read_more: Read more
wordcount: Words wordcount: Words
min2read: Mins min2read: Mins
changelog: Changelog 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: copyright:
author: Post author author: Post author
title: Post title title: Post title

View File

@ -1,3 +1,6 @@
# ====================================================================
# 中文简体
# ====================================================================
search: 搜索... search: 搜索...
prev: 上一页 prev: 上一页
next: 下一页 next: 下一页
@ -30,6 +33,24 @@ read_more: 阅读全文
wordcount: wordcount:
min2read: 分钟 min2read: 分钟
changelog: 更新日志 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: copyright:
title: 本文标题 title: 本文标题
author: 本文作者 author: 本文作者

View File

@ -1,3 +1,6 @@
# ====================================================================
# 中文繁体
# ====================================================================
search: 搜尋... search: 搜尋...
prev: 上一頁 prev: 上一頁
next: 下一頁 next: 下一頁
@ -30,6 +33,24 @@ read_more: 繼續閱讀...
wordcount: 字數 wordcount: 字數
min2read: 分鐘 min2read: 分鐘
changelog: 日誌 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: copyright:
author: 文章作者 author: 文章作者
title: 文章標題 title: 文章標題

View File

@ -24,19 +24,19 @@ if (final_description.length > 2) { final_description.length = 2 }
<div class="s-icon-list"> <div class="s-icon-list">
<% for (const key in theme.social_contact.links) { %> <% for (const key in theme.social_contact.links) { %>
<% if(theme.social_contact.links[key]) { %> <% if(theme.social_contact.links[key]) { %>
<div class="tooltip s-icon-item <%= key %>"
data-content="<%= __(key) %>"
>
<% if(key === 'email') { %> <% if(key === 'email') { %>
<span class="s-icon-item <%= key %>">
<a href="mailto:<%- theme.social_contact.links[key] %>"> <a href="mailto:<%- theme.social_contact.links[key] %>">
<i class="fas fa-envelope"></i> <i class="fas fa-envelope"></i>
</a> </a>
</span>
<% } else { %> <% } else { %>
<span class="s-icon-item <%= key %>">
<a target="_blank" href="<%- theme.social_contact.links[key] %>"> <a target="_blank" href="<%- theme.social_contact.links[key] %>">
<i class="fab fa-<%= key %>"></i> <i class="fab fa-<%= key %>"></i>
</a> </a>
</span>
<% } %> <% } %>
</div>
<% } %> <% } %>
<% } %> <% } %>
</div> </div>

View File

@ -36,7 +36,7 @@ const { site_uv: bsz_site_uv, site_pv: bsz_site_pv, enable: bsz_enable } = theme
<div class="theme-info info-item"> <div class="theme-info info-item">
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %>&nbsp;|&nbsp;<%- __('theme') %> <%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %>&nbsp;|&nbsp;<%- __('theme') %>
&nbsp; &nbsp;
<a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.6</a> <a class="theme-version" target="_blank" href="https://github.com/XPoet/hexo-theme-keep">Keep v3.4.7</a>
</div> </div>
<% if (f_icp) { %> <% if (f_icp) { %>
<div class="icp-info info-item"> <div class="icp-info info-item">

View File

@ -14,7 +14,7 @@
class="search-input" class="search-input"
> >
</div> </div>
<span class="popup-btn-close"> <span class="close-popup-btn">
<i class="fas fa-times"></i> <i class="fas fa-times"></i>
</span> </span>
</div> </div>

View File

@ -6,20 +6,31 @@
'js/dark-light-toggle.js' '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') %> <%- __js('js/local-search.js') %>
<% } %> <% } %>
<% if (theme.code_copy.enable) { %> <% if (t_code_block_tools.enable === true || t_code_copy.enable === true) { %>
<%- __js('js/code-copy.js') %> <%- __js('js/code-block-tools.js') %>
<% } %> <% } %>
<% if (theme.lazyload.enable) { %> <% if (t_lazyload?.enable === true) { %>
<%- __js('js/lazyload.js') %> <%- __js('js/lazyload.js') %>
<% } %> <% } %>
<div class="post-scripts<%= theme.pjax.enable === true ? ' pjax' : '' %>"> <div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
<% if (theme.toc.enable && is_post()) { %> <% if (t_toc?.enable === true && is_post()) { %>
<%- __js([ <%- __js([
'js/left-side-toggle.js', 'js/left-side-toggle.js',
'js/libs/anime.min.js', 'js/libs/anime.min.js',
@ -28,6 +39,6 @@
<% } %> <% } %>
</div> </div>
<% if (theme.pjax.enable === true) { %> <% if (t_pjax?.enable === true) { %>
<%- partial('pjax/pjax') %> <%- partial('pjax/pjax') %>
<% } %> <% } %>

View File

@ -1,6 +1,6 @@
{ {
"name": "hexo-theme-keep", "name": "hexo-theme-keep",
"version": "3.4.6", "version": "3.4.7",
"private": false, "private": false,
"description": "A simple and elegant theme for Hexo.", "description": "A simple and elegant theme for Hexo.",
"scripts": { "scripts": {

View File

@ -37,13 +37,14 @@ hexo.extend.helper.register('export_config', function () {
} }
let theme_config = { let theme_config = {
toc: theme.toc, toc: theme.toc || {},
style: theme.style, style: theme.style || {},
local_search: theme.local_search, local_search: theme.local_search || {},
code_copy: theme.code_copy, code_copy: theme.code_copy || {},
side_tools: theme.side_tools, code_block_tools: theme.code_block_tools || {},
pjax: theme.pjax, side_tools: theme.side_tools || {},
lazyload: theme.lazyload, pjax: theme.pjax || {},
lazyload: theme.lazyload || {},
version: theme.version version: theme.version
} }
@ -52,5 +53,6 @@ hexo.extend.helper.register('export_config', function () {
KEEP.hexo_config = ${JSON.stringify(hexo_config)}; KEEP.hexo_config = ${JSON.stringify(hexo_config)};
KEEP.theme_config = ${JSON.stringify(theme_config)}; KEEP.theme_config = ${JSON.stringify(theme_config)};
KEEP.language_ago = ${JSON.stringify(languageContent['ago'])}; KEEP.language_ago = ${JSON.stringify(languageContent['ago'])};
KEEP.language_code_block = ${JSON.stringify(languageContent['code_block'])};
</script>`; </script>`;
}); });

View File

@ -55,7 +55,7 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
}); });
const getSourceCdnUrl = (tyle, themeConfig, path) => { const getSourceCdnUrl = (tyle, themeConfig, path) => {
const { version = '3.4.6', cdn = {} } = themeConfig const { version = '3.4.7', cdn = {} } = themeConfig
const { provider = 'jsdelivr' } = cdn const { provider = 'jsdelivr' } = cdn
let urlPrefix = '' let urlPrefix = ''

View File

@ -9,25 +9,26 @@
// ==================================== // ====================================
// transition // transition
// ==================================== // ====================================
transition-g(); transition-g()
// ==================================== // ====================================
// scrollbar // scrollbar
// ==================================== // ====================================
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 6px; width 6px
height: 6px; height 6px
transition: all 0.2s ease; transition all 0.2s ease
} }
&::-webkit-scrollbar-thumb { &::-webkit-scrollbar-thumb {
background: var(--scrollbar-color); background var(--scrollbar-color)
border-radius: 1px; border-radius 1px
} }
&::-webkit-scrollbar-track { &::-webkit-scrollbar-track {
background: var(--scroll-bar-bg-color); background var(--scroll-bar-bg-color)
} }
} }
@ -36,32 +37,32 @@
// html, body // html, body
// ====================================================================== // ======================================================================
html, body { html, body {
position: relative; position relative
width: 100%; width 100%
height: 100%; height 100%
margin: 0; margin 0
padding: 0; padding 0
color: var(--default-text-color); color var(--default-text-color)
background: var(--background-color); background var(--background-color)
font-family: $default-font-family; font-family $default-font-family
font-weight: $default-font-weight; font-weight $default-font-weight
font-size: $default-font-size; font-size $default-font-size
line-height: $default-font-line-height; line-height $default-font-line-height
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 8px; width 8px
height: 8px; height 8px
} }
+keep-tablet() { +keep-tablet() {
font-size: $default-font-size * 0.96; font-size $default-font-size * 0.96
line-height: $default-font-line-height * 0.96; line-height $default-font-line-height * 0.96
} }
+keep-mobile() { +keep-mobile() {
font-size: $default-font-size * 0.9; font-size $default-font-size * 0.9
line-height: $default-font-line-height * 0.9; line-height $default-font-line-height * 0.9
} }
} }
@ -71,8 +72,8 @@ html, body {
// selection // selection
// ====================================================================== // ======================================================================
::selection { ::selection {
background: var(--selection-color); background var(--selection-color)
color: #fff; color #fff
} }
@ -80,9 +81,9 @@ html, body {
// ul, ol, li // ul, ol, li
// ====================================================================== // ======================================================================
ul, ol, li { ul, ol, li {
padding: 0; padding 0
margin: 0; margin 0
list-style: none; list-style none
} }
@ -90,19 +91,19 @@ ul, ol, li {
// a // a
// ====================================================================== // ======================================================================
a { a {
text-decoration: none; text-decoration none
color: var(--default-text-color); color var(--default-text-color)
i, span { i, span {
color: var(--default-text-color); color var(--default-text-color)
} }
&:hover, &:active { &:hover, &:active {
text-decoration: none !important; text-decoration none !important
color: var(--primary-color); color var(--primary-color)
i, span { i, span {
color: var(--primary-color); color var(--primary-color)
} }
} }
@ -114,10 +115,10 @@ a {
// ====================================================================== // ======================================================================
img { img {
&[lazyload] { &[lazyload] {
padding: 10px; padding 10px
margin: 20px auto !important; margin 20px auto !important
cursor: not-allowed; cursor not-allowed
pointer-events: none; pointer-events none
} }
} }
@ -126,29 +127,29 @@ img {
// button // button
// ====================================================================== // ======================================================================
button { button {
padding: 0; padding 0
margin: 0; margin 0
border: 0; border 0
outline: none; outline none
cursor: pointer; cursor pointer
background: transparent; background transparent
} }
.btn { .btn {
display: inline-block; display inline-block
position: relative; position relative
text-align: center; text-align center
cursor: pointer; cursor pointer
white-space: nowrap; white-space nowrap
border-radius: 5px; border-radius 5px
padding: 8px 16px; padding 8px 16px
background: var(--background-color); background var(--background-color)
hover-style(true, 1.06, 1.06); hover-style(true, 1.06, 1.06)
&:hover { &:hover {
color: var(--background-color); color var(--background-color)
background: var(--primary-color); background var(--primary-color)
} }
} }
@ -157,9 +158,9 @@ button {
// flex center // flex center
// ====================================================================== // ======================================================================
.flex-center { .flex-center {
display: flex; display flex
justify-content: center; justify-content center
align-items: center; align-items center
} }
@ -167,5 +168,43 @@ button {
// clear float // clear float
// ====================================================================== // ======================================================================
.clear { .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")
}
} }

View File

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

View File

@ -35,44 +35,44 @@ $night-highlight-deletion = #008000
$night-highlight-addition = #800000 $night-highlight-addition = #800000
code-theme(mode) { code-theme(mode) {
--code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground; --code-foreground: mode == 'light' ? $code-foreground : $night-code-foreground
--code-background: mode == 'light' ? $code-background : $night-code-background; --code-background: mode == 'light' ? $code-background : $night-code-background
--highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background; --highlight-background: mode == 'light' ? $highlight-background : $night-highlight-background
--highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground; --highlight-foreground: mode == 'light' ? $highlight-foreground : $night-highlight-foreground
--highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment; --highlight-comment: mode == 'light' ? $highlight-comment : $night-highlight-comment
--highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red; --highlight-red: mode == 'light' ? $highlight-red : $night-highlight-red
--highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange; --highlight-orange: mode == 'light' ? $highlight-orange : $night-highlight-orange
--highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow; --highlight-yellow: mode == 'light' ? $highlight-yellow : $night-highlight-yellow
--highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green; --highlight-green: mode == 'light' ? $highlight-green : $night-highlight-green
--highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua; --highlight-aqua: mode == 'light' ? $highlight-aqua : $night-highlight-aqua
--highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue; --highlight-blue: mode == 'light' ? $highlight-blue : $night-highlight-blue
--highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple; --highlight-purple: mode == 'light' ? $highlight-purple : $night-highlight-purple
--highlight-gutter-color: mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color; --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; --highlight-gutter-bg-color: mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
} }
:root { :root {
code-theme('light'); code-theme('light')
} }
@media (prefers-color-scheme: light) { @media (prefers-color-scheme: light) {
:root { :root {
code-theme('light'); code-theme('light')
} }
} }
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
:root { :root {
code-theme('dark'); code-theme('dark')
} }
} }
.light-mode { .light-mode {
code-theme('light'); code-theme('light')
} }
.dark-mode { .dark-mode {
code-theme('dark'); code-theme('dark')
} }

View File

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

View File

@ -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;
}
}
}

View File

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

View File

@ -75,8 +75,8 @@ $scroll-bar-bg-color = darken($background-color, 10%);
$link-color = darken($default-text-color, 10%); $link-color = darken($default-text-color, 10%);
$copyright-info-color = #CC0033; $copyright-info-color = #CC0033;
$avatar-background-color = #0066CC; $avatar-background-color = #0066CC;
$header-transparent-background-1 = alpha($background-color, 0.58); $header-transparent-background-1 = alpha($background-color, 0.28);
$header-transparent-background-2 = alpha($background-color, 0.38); $header-transparent-background-2 = alpha($background-color, 0.58);
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3); $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-first-text-color = lighten($dark-default-text-color, 30%);
$dark-second-text-color = lighten($dark-default-text-color, 20%); $dark-second-text-color = lighten($dark-default-text-color, 20%);
$dark-third-text-color = darken($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-border-color = lighten($dark-background-color, 20%);
$dark-selection-color = $selection-color; $dark-selection-color = $selection-color;
$dark-shadow-color = rgba(128, 128, 128, 0.2); $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-link-color = lighten($dark-default-text-color, 10%);
$dark-copyright-info-color = darken($copyright-info-color, 20%); $dark-copyright-info-color = darken($copyright-info-color, 20%);
$dark-avatar-background-color = darken($avatar-background-color, 10%); $dark-avatar-background-color = darken($avatar-background-color, 10%);
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.58); $dark-header-transparent-background-1 = alpha($dark-background-color, 0.28);
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.38); $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); $dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee);

View File

@ -1,9 +1,9 @@
.article-meta-info { .article-meta-info {
font-size: 0.8rem; font-size: 0.8rem;
color: var(--third-text-color);
.article-meta-item { .article-meta-item {
margin-right: 10px; margin-right: 10px;
color: var(--third-text-color);
&:last-child { &:last-child {
margin-right: 0; margin-right: 0;

View File

@ -1,72 +1,66 @@
$first-screen-font-size = 2rem; $first-screen-font-size = 2rem
$first-screen-icon-size = 1.6rem; $first-screen-icon-size = 1.6rem
$temp-img = hexo-config('style.first_screen.background_img'); $temp-img = hexo-config('style.first_screen.background_img')
$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'; $first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
$temp-font-color = hexo-config('style.first_screen.font_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-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color)
.first-screen-container { .first-screen-container {
position: relative; position relative
box-sizing: border-box; box-sizing border-box
width: 100%; width 100%
overflow: hidden; overflow hidden
background: url($first-screen-img) center center / cover no-repeat; background url($first-screen-img) center center / cover no-repeat
if (!(hexo-config('style.first_screen.header_transparent') == true)) { if (!(hexo-config('style.first_screen.header_transparent') == true)) {
background-position-y: $header-height; background-position-y $header-height
} }
+keep-tablet() { +keep-tablet() {
background-position-y: $header-height * 0.9; background-position-y $header-height * 0.9
} }
+keep-mobile() { +keep-mobile() {
background-position-y: $header-height * 0.8; background-position-y $header-height * 0.8
} }
.content { .content {
position: relative; position relative
box-sizing: border-box; box-sizing border-box
width: 80%; width 80%
height: 90%; height 90%
padding-top: 5rem; padding-top 2rem
.description { .description {
font-weight: bold; font-weight bold
font-size: $first-screen-font-size; font-size $first-screen-font-size
line-height: 1.8; line-height 1.8
text-align: center; text-align center
color: $first-screen-font-color; color $first-screen-font-color
+keep-tablet() { +keep-tablet() {
font-size: $first-screen-font-size * 0.9; font-size $first-screen-font-size * 0.9
} }
} }
.s-icon-list { .s-icon-list {
position: absolute; position absolute
bottom: 0; box-sizing border-box
font-size: $first-screen-icon-size; bottom 0
text-align: center; font-size $first-screen-icon-size
display flex
+keep-tablet() { +keep-tablet() {
font-size: $first-screen-icon-size * 0.9; font-size $first-screen-icon-size * 0.9
} }
.s-icon-item { .s-icon-item {
margin-right: 20px; margin 0 1rem
cursor: pointer; cursor pointer
line-height: 2;
&:last-child {
margin-right: 0;
} }
}
} }
} }
} }

View File

@ -1,97 +1,93 @@
$icon-size = 1.2rem; $icon-size = 1.2rem
$search-header-height = 3rem
.search-pop-overlay { .search-pop-overlay {
position: fixed; position fixed
display: flex; display flex
height: 100%; height 100%
width: 100%; width 100%
left: 0; left 0
top: 0; top 0
background: rgba(0, 0, 0, 0); background rgba(0, 0, 0, 0)
visibility: hidden; visibility hidden
z-index: $z-index-8; z-index $z-index-8
transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease"); transition-t("visibility, background", "0, 0", "0.3, 0.3", "ease, ease")
&.active { &.active {
visibility: visible; visibility visible
background: rgba(0, 0, 0, 0.35); background rgba(0, 0, 0, 0.35)
.search-popup { .search-popup {
transform: scale(1); transform scale(1)
} }
} }
.search-popup { .search-popup {
background: var(--background-color); background var(--background-color)
border-radius: 5px; border-radius 0.4rem
height: 80%; height 80%
width: 70%; width 70%
margin: auto; margin auto
transform: scale(0); transform scale(0)
z-index: $z-index-6; z-index $z-index-6
transition-t("transform", "0", "0.3", "ease"); transition-t("transform", "0", "0.3", "ease")
+keep-tablet() { +keep-tablet() {
width: 80%; width 80%
} }
+keep-mobile() { +keep-mobile() {
width: 90%; width 90%
} }
.search-header { .search-header {
background: var(--fourth-text-color); background var(--fourth-text-color)
border-top-left-radius: 2px; border-top-left-radius 0.2rem
border-top-right-radius: 2px; border-top-right-radius 0.2rem
display: flex; display flex
padding: 10px; height $search-header-height
align-items center
.search-input-field-pre, .popup-btn-close { padding 0 1rem
font-size: $icon-size;
padding: 0 10px;
display: flex;
align-items: center;
}
.search-input-field-pre { .search-input-field-pre {
cursor: pointer; cursor pointer
color: var(--third-text-color); color var(--default-text-color)
margin-right 0.2rem
} }
.popup-btn-close {
color: var(--default-text-color);
}
.search-input-container { .search-input-container {
flex-grow 1
flex-grow: 1; padding 0.2rem
padding: 2px;
.search-input { .search-input {
background: transparent; background transparent
border: 0; border 0
outline: 0; outline 0
width: 100%; width 100%
font-size: 1.2rem; font-size 1.2rem
color: var(--default-text-color); color var(--default-text-color)
&::-webkit-search-cancel-button { &::-webkit-search-cancel-button {
display: none; display none
}
&::-webkit-input-placeholder {
color var(--third-text-color)
font-size 1rem
}
} }
} }
} .close-popup-btn {
color var(--default-text-color)
font-size $icon-size
.popup-btn-close { cursor pointer
cursor: pointer;
&:hover .fas, far, fab { &:hover .fas, far, fab {
color: var(--first-text-color); color var(--first-text-color)
} }
} }
@ -99,66 +95,68 @@ $icon-size = 1.2rem;
#search-result { #search-result {
display: flex; position relative
height: calc(100% - 55px); box-sizing border-box
overflow: auto; display flex
padding: 5px 25px; height 'calc(100% - %s)' % $search-header-height
overflow auto
padding 0.3rem 1.5rem
.search-result-list { .search-result-list {
width: 100%; width 100%
height: 100%; height 100%
font-size: 1rem; font-size 1rem
li { li {
border-bottom: 1px dashed var(--border-color); box-sizing border-box
padding: 10px 0; border-bottom 0.1rem dashed var(--border-color)
margin: 10px 0; padding 0.8rem 0
box-sizing: border-box; margin 0.8rem 0
&:last-child { &:last-child {
border-bottom: none; border-bottom none
} }
.search-result-title { .search-result-title {
position: relative; position relative
font-weight: bold; font-weight bold
margin-bottom: 10px; margin-bottom 0.8rem
padding-left: 16px; padding-left 1rem
display: flex; display flex
align-items: center; align-items center
&::after { &::after {
content: ''; content ''
position: absolute; position absolute
width: 5px; width 0.4rem
height: 5px; height 0.4rem
border-radius: 50%; border-radius 50%
top: 50%; top 50%
transform: translateY(-50%); transform translateY(-50%)
left: 0; left 0
background: var(--default-text-color); background var(--default-text-color)
} }
} }
.search-result { .search-result {
line-height: 2rem; line-height 2rem
margin: 0; margin 0
padding-left: 16px; padding-left 1rem
word-wrap: break-word; word-wrap break-word
} }
a { a {
&:hover { &:hover {
color: var(--default-text-color); color var(--default-text-color)
} }
} }
.search-keyword { .search-keyword {
border-bottom: 1px dashed var(--primary-color); border-bottom 0.1rem dashed var(--primary-color)
color: var(--primary-color); color var(--primary-color)
font-weight: bold; font-weight bold
} }
} }
@ -166,8 +164,8 @@ $icon-size = 1.2rem;
#no-result { #no-result {
color: var(--third-text-color); color var(--third-text-color)
margin: auto; margin auto
} }
} }

View File

@ -1,8 +1,8 @@
@import "common/basic.styl" @import "common/basic.styl"
@import "common/markdown.styl" @import "common/markdown.styl"
@import "common/codeblock/highlight.styl" @import "common/code-block/highlight.styl"
@import "common/codeblock/copy-code.styl" @import "common/code-block/code-block-tools.styl"
@import "common/codeblock/code-theme.styl" @import "common/code-block/code-theme.styl"
@import "layout/page.styl" @import "layout/page.styl"
@import "layout/_partial/local-search.styl" @import "layout/_partial/local-search.styl"
@import "layout/_partial/toc.styl" @import "layout/_partial/toc.styl"

View File

@ -1,3 +1,5 @@
/* global KEEP */
KEEP.initBack2Top = () => { KEEP.initBack2Top = () => {
KEEP.utils = { KEEP.utils = {

View File

@ -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 = `<span class="tool fold tooltip" data-content="${foldLang}"><i class="fas fa-chevron-down"></i></span>`
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 ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
highlightContainer.insertAdjacentHTML(
'afterbegin',
`<div class="code-tools-box">
${isMac ? foldDom + codeLangDom : '<span>' + foldDom + codeLangDom + '</span>'}
<span class="tool copy tooltip" data-content="${copyLang}"><i class="fas fa-copy"></i></span>
</div>`
);
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)
}
});
});
}

View File

@ -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', '<div class="copy-btn"><i class="fas fa-copy"></i></div>');
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);
});
});
}

View File

@ -1,3 +1,5 @@
/* global KEEP */
KEEP.initHeaderShrink = () => { KEEP.initHeaderShrink = () => {
KEEP.utils.headerShrink = { KEEP.utils.headerShrink = {
headerDom: document.querySelector('.header-wrapper'), headerDom: document.querySelector('.header-wrapper'),

View File

@ -1,3 +1,5 @@
/* global KEEP */
KEEP.initLazyLoad = () => { KEEP.initLazyLoad = () => {
const imgs = document.querySelectorAll('img'); const imgs = document.querySelectorAll('img');
let now = Date.now(); let now = Date.now();

View File

@ -271,7 +271,7 @@ KEEP.initLocalSearch = () => {
searchInputDom.focus(); searchInputDom.focus();
inputEventFunction(); inputEventFunction();
}); });
document.querySelector('.popup-btn-close').addEventListener('click', onPopupClose); document.querySelector('.close-popup-btn').addEventListener('click', onPopupClose);
window.addEventListener('pjax:success', onPopupClose); window.addEventListener('pjax:success', onPopupClose);
window.addEventListener('keyup', event => { window.addEventListener('keyup', event => {
if (event.key === 'Escape') { if (event.key === 'Escape') {

View File

@ -3,7 +3,7 @@
window.addEventListener('DOMContentLoaded', () => { window.addEventListener('DOMContentLoaded', () => {
KEEP.themeInfo = { KEEP.themeInfo = {
theme: `Keep v3.4.6`, theme: `Keep v3.4.7`,
author: 'XPoet', author: 'XPoet',
repository: 'https://github.com/XPoet/hexo-theme-keep' repository: 'https://github.com/XPoet/hexo-theme-keep'
} }
@ -19,7 +19,10 @@ window.addEventListener('DOMContentLoaded', () => {
// print theme base info // print theme base info
KEEP.printThemeInfo = () => { 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 // set styleStatus to localStorage
@ -47,15 +50,18 @@ window.addEventListener('DOMContentLoaded', () => {
KEEP.initModeToggle(); KEEP.initModeToggle();
KEEP.initBack2Top(); KEEP.initBack2Top();
if (KEEP.theme_config.local_search.enable === true) { if (KEEP.theme_config.local_search?.enable === true) {
KEEP.initLocalSearch(); KEEP.initLocalSearch();
} }
if (KEEP.theme_config.code_copy.enable === true) { if (
KEEP.initCodeCopy(); 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(); KEEP.initLazyLoad();
} }
} }

View File

@ -264,8 +264,7 @@ KEEP.initUtils = () => {
}, },
getHowLongAgo(timestamp) { getHowLongAgo(timestamp) {
const l = KEEP.language_ago; const lang = KEEP.language_ago;
const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12); const __Y = Math.floor(timestamp / (60 * 60 * 24 * 30) / 12);
const __M = Math.floor(timestamp / (60 * 60 * 24 * 30)); const __M = Math.floor(timestamp / (60 * 60 * 24 * 30));
const __W = Math.floor(timestamp / (60 * 60 * 24) / 7); const __W = Math.floor(timestamp / (60 * 60 * 24) / 7);
@ -275,25 +274,25 @@ KEEP.initUtils = () => {
const __s = Math.floor(timestamp % 60); const __s = Math.floor(timestamp % 60);
if (__Y > 0) { if (__Y > 0) {
return this.setHowLongAgoLanguage(__Y, l.year); return this.setHowLongAgoLanguage(__Y, lang.year);
} else if (__M > 0) { } else if (__M > 0) {
return this.setHowLongAgoLanguage(__M, l.month); return this.setHowLongAgoLanguage(__M, lang.month);
} else if (__W > 0) { } else if (__W > 0) {
return this.setHowLongAgoLanguage(__W, l.week); return this.setHowLongAgoLanguage(__W, lang.week);
} else if (__d > 0) { } else if (__d > 0) {
return this.setHowLongAgoLanguage(__d, l.day); return this.setHowLongAgoLanguage(__d, lang.day);
} else if (__h > 0) { } else if (__h > 0) {
return this.setHowLongAgoLanguage(__h, l.hour); return this.setHowLongAgoLanguage(__h, lang.hour);
} else if (__m > 0) { } else if (__m > 0) {
return this.setHowLongAgoLanguage(__m, l.minute); return this.setHowLongAgoLanguage(__m, lang.minute);
} else if (__s > 0) { } else if (__s > 0) {
return this.setHowLongAgoLanguage(__s, l.second); return this.setHowLongAgoLanguage(__s, lang.second);
} }
}, },
@ -349,6 +348,24 @@ KEEP.initUtils = () => {
}, 200); }, 200);
}, },
// insert tooltip content dom
insertTooltipContent() {
const init = () => {
document.querySelectorAll('.tooltip').forEach(element => {
const { content } = element.dataset;
if (content) {
element.insertAdjacentHTML(
'afterbegin',
`<span class="tooltip-content">${content}</span>`
);
}
});
}
setTimeout(() => {
init();
}, 1000);
}
} }
// init data // init data
@ -381,4 +398,6 @@ KEEP.initUtils = () => {
// set how long age in home article block // set how long age in home article block
KEEP.utils.setHowLongAgoInHome(); KEEP.utils.setHowLongAgoInHome();
// insert tooltip content dom
KEEP.utils.insertTooltipContent();
} }