commit
f613edc816
23
README.md
23
README.md
|
@ -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
|
||||||
|
|
||||||
|
|
11
_config.yml
11
_config.yml
|
@ -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
|
||||||
|
|
|
@ -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
|
|
@ -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
|
|
@ -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
|
||||||
|
|
|
@ -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: 本文作者
|
||||||
|
|
|
@ -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: 文章標題
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>') %> | <%- __('theme') %>
|
<%- __('powered_by', '<a target="_blank" href="https://hexo.io">Hexo</a>') %> | <%- __('theme') %>
|
||||||
|
|
||||||
<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">
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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') %>
|
||||||
<% } %>
|
<% } %>
|
||||||
|
|
|
@ -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": {
|
||||||
|
|
|
@ -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>`;
|
||||||
});
|
});
|
||||||
|
|
|
@ -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 = ''
|
||||||
|
|
|
@ -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")
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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')
|
||||||
}
|
}
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
|
@ -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);
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
|
|
@ -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);
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
|
||||||
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
|
/* global KEEP */
|
||||||
|
|
||||||
KEEP.initBack2Top = () => {
|
KEEP.initBack2Top = () => {
|
||||||
|
|
||||||
KEEP.utils = {
|
KEEP.utils = {
|
||||||
|
|
|
@ -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)
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
|
@ -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);
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
|
@ -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'),
|
||||||
|
|
|
@ -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();
|
||||||
|
|
|
@ -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') {
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -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();
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue