Merge pull request #178 from XPoet/dev

release v3.5.0
This commit is contained in:
指间的诗意 2022-10-21 11:19:41 +08:00 committed by GitHub
commit 1cdf45f578
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
61 changed files with 1530 additions and 1471 deletions

2
.github/FUNDING.yml vendored
View File

@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
liberapay: # Replace with a single Liberapay username
issuehunt: # Replace with a single IssueHunt username
otechie: # Replace with a single Otechie username
custom: ['https://cdn.jsdelivr.net/gh/XPoet/image-hosting@master/FE-Cheerleaders/play-tour.png']
custom: ['https://cdn.staticaly.com/gh/XPoet/image-hosting@master/FE-Cheerleaders/play-tour.png']

19
.github/workflows/npm-publish.yml vendored Normal file
View File

@ -0,0 +1,19 @@
name: npm publish
on:
pull_request:
branches:
- master
jobs:
publish-npm:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v2
- uses: actions/setup-node@v1
with:
node-version: 16
registry-url: https://registry.npmjs.org/
- run: npm publish
env:
NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_TOKEN}}

View File

@ -2,3 +2,5 @@ node_modules
/.github/FUNDING.yml
package-lock.json
yarn.lock
.vscode/*
.idea/*

View File

@ -1,5 +1,5 @@
## ======================================================================================
## Keep v3.4.9
## Keep v3.5.0
## Repository: https://github.com/XPoet/hexo-theme-keep
## Document: https://keep-docs.xpoet.cn
## ======================================================================================
@ -42,12 +42,6 @@ style:
# e.g. font_family: STKaiti, STSong, STHeiti
font_family:
# Left side TOC width (you don't usually have to change it)
left_side_width: 260px
# Content area max width (you don't usually have to change it)
content_max_width: 920px
# Mouse hover style settings
hover:
# Shadow effect when the mouse hover. Option values: true | false
@ -159,12 +153,14 @@ post:
custom_label_list: ["Trainee", "Engineer", "Architect"]
# ---------------------------------------------------------------------------------------
# Code block tools
# Code block
# Support code copy and code block collapse
# ---------------------------------------------------------------------------------------
code_block_tools:
enable: false # Option values: true | false
style: default # Option values: default | mac
code_block:
tools: # Include "code copy", "code block collapse" and "code language"
enable: false # Option values: true | false
style: default # Option values: default | mac
highlight_theme: default # Option values: default | obsidian
# ---------------------------------------------------------------------------------------
# Table of Contents in the Sidebar
@ -217,6 +213,7 @@ comment:
# Valine
# See: https://github.com/xCss/Valine
# https://valine.js.org
valine:
appid: # Your leancloud application appid
appkey: # Your leancloud application appkey
@ -224,6 +221,7 @@ comment:
# Gitalk
# See: https://github.com/gitalk/gitalk
# https://gitalk.github.io
gitalk:
github_id: # GitHub repo owner
github_admins: # GitHub Admins (in Array type), optional.
@ -233,10 +231,19 @@ comment:
# Twikoo
# See: https://github.com/imaegoo/twikoo
# https://twikoo.js.org
twikoo:
env_id: # Tencent Cloud environment id
region: # Environment region. If select Guangzhou, fill in "ap-guangzhou".
version: 1.6.7 # Twikoo version, default use v1.6.7, you can custom fill
version: 1.6.7 # Twikoo version, default use v1.6.7
# Waline
# See: https://github.com/walinejs/waline
# https://waline.js.org/guide/get-started.html
waline:
server_url: # Server URL
reaction: # Article reactions
version: 2 # Waline version, default use v2
# ---------------------------------------------------------------------------------------
# RSS

View File

@ -1,19 +1,27 @@
<%
const {
enable: t_comment_enable,
use: t_comment_use
} = theme?.comment
%>
<div class="comments-container">
<div id="comment-anchor"></div>
<div id="comments-anchor"></div>
<div class="comment-area-title">
<i class="fas fa-comments"></i>&nbsp;<%- __('comments') %>
</div>
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
<% if (theme.comment.use === 'valine') { %>
<% if (t_comment_enable === true && t_comment_use) { %>
<% if (t_comment_use === 'valine') { %>
<%- partial('valine') %>
<% } else if (theme.comment.use === 'gitalk') { %>
<% } else if (t_comment_use === 'gitalk') { %>
<%- partial('gitalk') %>
<% } else if (theme.comment.use === 'twikoo') { %>
<% } else if (t_comment_use === 'twikoo') { %>
<%- partial('twikoo') %>
<% } else if (t_comment_use === 'waline') { %>
<%- partial('waline') %>
<% } %>
<% } %>
</div>

View File

@ -1,49 +1,66 @@
<% const { client_id, client_secret, repository, github_id, github_admins } = theme.comment.gitalk %>
<%
const { enable: pjax_enable } = theme?.pjax
const {
client_id,
client_secret,
repository,
github_id,
github_admins
} = theme.comment?.gitalk
let cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
let cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
cdn_css = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.css'
cdn_js = '//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js'
break
<% if(
theme.comment.use === 'gitalk'
&& client_id
&& client_secret
&& github_id
&& repository
) { %>
<div id="gitalk-container"></div>
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
src="//cdn.jsdelivr.net/npm/gitalk/dist/gitalk.min.js"></script>
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
case 'unpkg':
cdn_css = '//unpkg.com/gitalk/dist/gitalk.css'
cdn_js = '//unpkg.com/gitalk/dist/gitalk.min.js'
break
}
}
%>
<% if(client_id && client_secret && github_id && repository) { %>
<div class="gitalk-comment-container">
<div id="gitalk-container"></div>
<link rel="stylesheet" href="<%= cdn_css %>">
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadGitalk() {
let __gitalk__pathname = decodeURI(location.pathname);
const __gitalk__pathnameLength = __gitalk__pathname.length;
const __gitalk__pathnameMaxLength = 50;
if (__gitalk__pathnameLength > __gitalk__pathnameMaxLength) {
__gitalk__pathname = __gitalk__pathname.substring(0, __gitalk__pathnameMaxLength - 3) + '...';
}
function loadGitalk() {
let __gitalk__pathname = decodeURI(location.pathname);
const __gitalk__pathnameLength = __gitalk__pathname.length;
const __gitalk__pathnameMaxLength = 50;
if (__gitalk__pathnameLength > __gitalk__pathnameMaxLength) {
__gitalk__pathname = __gitalk__pathname.substring(0, __gitalk__pathnameMaxLength - 3) + '...';
}
try {
Gitalk && new Gitalk({
clientID: '<%= client_id %>',
clientSecret: '<%= client_secret %>',
repo: '<%= repository %>',
owner: '<%= github_id %>',
admin: '<%= github_admins || [github_id] %>',
id: __gitalk__pathname,
language: '<%= config.language %>'
}).render('gitalk-container');
} catch (e) {
window.Gitalk = null;
}
}
try {
Gitalk && new Gitalk({
clientID: '<%= client_id %>',
clientSecret: '<%= client_secret %>',
repo: '<%= repository %>',
owner: '<%= github_id %>',
admin: '<%= github_admins || [github_id] %>',
id: __gitalk__pathname,
language: '<%= config.language %>'
}).render('gitalk-container');
} catch (e) {
window.Gitalk = null;
}
}
if ('<%= theme.pjax.enable %>') {
const loadGitalkTimeout = setTimeout(() => {
loadGitalk();
clearTimeout(loadGitalkTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadGitalk);
}
</script>
if ('<%= pjax_enable %>' === 'true') {
const loadGitalkTimeout = setTimeout(() => {
loadGitalk();
clearTimeout(loadGitalkTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadGitalk);
}
</script>
</div>
<% } %>

View File

@ -1,35 +1,47 @@
<%
const { enable: pjax_enable } = theme.pjax
const { enable: pjax_enable } = theme?.pjax
let {
env_id: tk_env_id, region: tk_region, version: tk_version
} = theme.comment.twikoo
env_id: tk_env_id,
region: tk_region,
version: tk_version
} = theme.comment?.twikoo
if (!tk_version) { tk_version = '1.6.7' }
const twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
let twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
twikoo_cdn_url = `//cdn.jsdelivr.net/npm/twikoo@${tk_version}/dist/twikoo.all.min.js`
break
case 'unpkg':
twikoo_cdn_url = `//unpkg.com/twikoo@${tk_version}/dist/twikoo.all.min.js`
break
}
}
%>
<% if(theme.comment.use === 'twikoo' && tk_env_id) { %>
<% if(tk_env_id) { %>
<div class="twikoo-container">
<script <%= pjax_enable === true ? 'data-pjax' : '' %>
src="<%= twikoo_cdn_url %>"
></script>
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= twikoo_cdn_url %>"></script>
<div id="twikoo-comment"></div>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadTwikoo() {
twikoo.init({
el: '#twikoo-comment',
envId: '<%= tk_env_id %>',
region: '<%= tk_region %>',
lang: '<%= config.language %>' || 'zh-CN'
});
}
function loadTwikoo() {
twikoo.init({
el: '#twikoo-comment',
envId: '<%= tk_env_id %>',
region: '<%= tk_region %>',
lang: '<%= config.language %>' || 'zh-CN'
});
}
if ('<%= pjax_enable === true %>') {
const loadTwikooTimeout = setTimeout(() => {
loadTwikoo();
clearTimeout(loadTwikooTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadTwikoo);
}
if ('<%= pjax_enable %>' === 'true') {
const loadTwikooTimeout = setTimeout(() => {
loadTwikoo();
clearTimeout(loadTwikooTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadTwikoo);
}
</script>
</div>
<% } %>

View File

@ -1,66 +1,82 @@
<% if(
theme.comment.use === 'valine'
&& theme.comment.valine.appid
&& theme.comment.valine.appkey
) { %>
<%
const { enable: pjax_enable } = theme?.pjax
const {
appid,
appkey,
placeholder
} = theme.comment?.valine
let cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
cdn_url = '//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js'
break
case 'unpkg':
cdn_url = '//unpkg.com/valine@latest/dist/Valine.min.js'
break
}
}
%>
<% if(appid && appkey) { %>
<div class="valine-container">
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>
src="//cdn.jsdelivr.net/npm/valine@latest/dist/Valine.min.js"></script>
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_url %>"></script>
<div id="vcomments"></div>
<script <%= theme.pjax.enable === true ? 'data-pjax' : '' %>>
function loadValine() {
new Valine({
el: '#vcomments',
appId: '<%= theme.comment.valine.appid %>',
appKey: '<%= theme.comment.valine.appkey %>',
meta: ['nick', 'mail', 'link'],
avatar: 'wavatar',
enableQQ: true,
placeholder: '<%= theme.comment.valine.placeholder %>',
lang: '<%= config.language %>'.toLowerCase()
});
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadValine() {
new Valine({
el: '#vcomments',
appId: '<%= appid %>',
appKey: '<%= appkey %>',
meta: ['nick', 'mail', 'link'],
avatar: 'wavatar',
enableQQ: true,
placeholder: '<%= placeholder %>',
lang: '<%= config.language %>'.toLowerCase()
});
function getAuthor(language) {
switch (language) {
case 'en':
return 'Author';
case 'zh-CN':
return '博主';
default:
return 'Master';
function getAuthor(language) {
switch (language) {
case 'en':
return 'Author';
case 'zh-CN':
return '博主';
default:
return 'Master';
}
}
// Add "Author" identify
const getValineDomTimer = setInterval(() => {
const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
if (vcards.length > 0) {
let author = '<%= theme.base_info.author || config.author %>';
if (author) {
for (let vcard of vcards) {
const vnick_dom = vcard.querySelector('.vhead .vnick');
const vnick = vnick_dom.innerHTML;
if (vnick === author) {
vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
}
}
}
clearInterval(getValineDomTimer);
} else {
clearInterval(getValineDomTimer);
}
}, 2000);
}
// Add "Author" identify
const getValineDomTimer = setInterval(() => {
const vcards = document.querySelectorAll('#vcomments .vcards .vcard');
if (vcards.length > 0) {
let author = '<%= theme.base_info.author || config.author %>';
if (author) {
for (let vcard of vcards) {
const vnick_dom = vcard.querySelector('.vhead .vnick');
const vnick = vnick_dom.innerHTML;
if (vnick === author) {
vnick_dom.innerHTML = `${vnick} <span class="author">${getAuthor(KEEP.hexo_config.language)}</span>`
}
}
}
clearInterval(getValineDomTimer);
} else {
clearInterval(getValineDomTimer);
}
}, 2000);
}
if ('<%= theme.pjax.enable %>') {
const loadValineTimeout = setTimeout(() => {
loadValine();
clearTimeout(loadValineTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadValine);
}
if ('<%= pjax_enable %>' === 'true') {
const loadValineTimeout = setTimeout(() => {
loadValine();
clearTimeout(loadValineTimeout);
}, 1000);
} else {
window.addEventListener('DOMContentLoaded', loadValine);
}
</script>
</div>
<% } %>

View File

@ -0,0 +1,55 @@
<%
const { enable: pjax_enable } = theme?.pjax
let {
server_url: waline_env_server_url,
version: waline_version,
reaction: waline_reaction
} = theme.comment?.waline
if (!waline_version) { waline_version = '2' }
let cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
let cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
let cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
const { enable: t_cdn_enable, provider: t_cdn_provider } = theme?.cdn
if (t_cdn_enable === true) {
switch (t_cdn_provider) {
case 'jsdelivr':
cdn_css = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.css`
cdn_css_meta = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline-meta.css`
cdn_js = `//cdn.jsdelivr.net/npm/@waline/client@v${waline_version}/dist/waline.js`
break
case 'unpkg':
cdn_css = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.css`
cdn_css_meta = `//unpkg.com/@waline/client@v${waline_version}/dist/waline-meta.css`
cdn_js = `//unpkg.com/@waline/client@v${waline_version}/dist/waline.js`
break
}
}
%>
<% if(waline_env_server_url) { %>
<div class="waline-comment-container">
<link rel="stylesheet" href="<%= cdn_css %>"/>
<link rel="stylesheet" href="<%= cdn_css_meta %>"/>
<script <%= pjax_enable === true ? 'data-pjax' : '' %> src="<%= cdn_js %>"></script>
<div id="waline-comment"></div>
<script <%= pjax_enable === true ? 'data-pjax' : '' %>>
function loadWaline() {
Waline.init({
el: '#waline-comment',
serverURL: '<%= waline_env_server_url %>',
lang: '<%= config.language %>' || 'zh-CN',
comment: '.post-comments-count',
reaction: '<%= waline_reaction %>' === 'true'
})
}
if ('<%= pjax_enable %>' === 'true') {
setTimeout(() => {
loadWaline()
}, 1000)
} else {
window.addEventListener('DOMContentLoaded', loadWaline)
}
</script>
</div>
<% } %>

View File

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

View File

@ -4,7 +4,7 @@ const { logo: s_logo, first_screen: s_first_screen } = theme.style
const { enable: s_fs_enable, header_transparent: s_fs_header_transparent } = s_first_screen
const { title: config_title } = config
%>
<header class="header-wrapper<%= is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
<header class="header-wrapper<%= s_fs_enable === true && is_home() && s_fs_header_transparent ? ' transparent-1' : '' %>">
<div class="header-content<%- (s_fs_enable === true && is_home() && !page.prev) ? ' has-first-screen' : '' %>">
<div class="left">

View File

@ -39,5 +39,5 @@ const target_date = post.date !== post.updated ? post.updated : post.date
<% } %>
</div>
<a href="<%- url_for(post.path) %>"><%- __('read_more') %>&nbsp;<i class="fas fa-angle-right"></i></a>
<a class="read-more" href="<%- url_for(post.path) %>"><%- __('read_more') %>&nbsp;<i class="fas fa-angle-right"></i></a>
</div>

View File

@ -11,7 +11,7 @@
<% if (isLoadFriendsLink) { %>
<%- partial('_partial/friends-link') %>
<% } %>
<div class="page-template-content markdown-body">
<div class="page-template-content keep-markdown-body">
<% if (isLoadFriendsLink || page.content) { %>
<%- page.content %>
<% } else { %>

View File

@ -2,15 +2,16 @@
<ul class="tools-list">
<!-- TOC aside toggle -->
<% if (theme.toc.enable) { %>
<li class="tools-item page-aside-toggle">
<i class="fas fa-outdent"></i>
<li class="tools-item flex-center toggle-show-toc">
<i class="fas fa-list"></i>
</li>
<% } %>
<!-- go comment -->
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
<li class="go-comment">
<li class="tools-item flex-center go-to-comments">
<i class="fas fa-comment"></i>
<span class="post-comments-count"></span>
</li>
<% } %>
</ul>

View File

@ -10,7 +10,7 @@
const {
local_search: t_local_search,
code_copy: t_code_copy,
code_block_tools: t_code_block_tools,
code_block: t_code_block,
lazyload: t_lazyload,
toc: t_toc,
pjax: t_pjax
@ -21,8 +21,8 @@ const {
<%- __js('js/local-search.js') %>
<% } %>
<% if (t_code_block_tools?.enable === true || t_code_copy?.enable === true) { %>
<%- __js('js/code-block-tools.js') %>
<% if (t_code_copy?.enable === true || t_code_block?.enable === true || t_code_block?.tools?.enable === true) { %>
<%- __js('js/code-block.js') %>
<% } %>
<% if (t_lazyload?.enable === true) { %>
@ -32,9 +32,9 @@ const {
<div class="post-scripts<%= theme.pjax?.enable === true ? ' pjax' : '' %>">
<% if (t_toc?.enable === true && is_post()) { %>
<%- __js([
'js/left-side-toggle.js',
'js/libs/anime.min.js',
'js/toc.js'
'js/post-helper.js',
'js/toc.js',
'js/libs/anime.min.js'
]) %>
<% } %>
</div>

View File

@ -8,10 +8,6 @@
<i class="fas fa-search-minus"></i>
</li>
<li class="tools-item tool-expand-width flex-center">
<i class="fas fa-up-right-and-down-left-from-center"></i>
</li>
<li class="tools-item tool-dark-light-toggle flex-center">
<i class="fas fa-moon"></i>
</li>

View File

@ -4,7 +4,7 @@
page.content,
{
class: 'nav',
list_number: theme.toc.number
list_number: theme.toc.number || false
}
) %>
</div>

View File

@ -1,95 +1,103 @@
<div class="fade-in-down-animation">
<div class="article-content-container">
<div class="post-page-container">
<div class="article-content-container">
<div class="article-title">
<span class="title-hover-animation"><%= page.title %></span>
</div>
<div class="article-title">
<span class="title-hover-animation"><%= page.title %></span>
</div>
<% if (theme.base_info.author || config.author) { %>
<div class="article-header">
<div class="avatar">
<%- image_tag(theme.style.avatar) %>
</div>
<div class="info">
<div class="author">
<span class="name"><%= theme.base_info.author || config.author %></span>
<% if (theme.hasOwnProperty('post') && theme.post.author_label.enable === true) { %>
<span class="author-label"><%- getAuthorLabel(site.posts.length, theme.post.author_label.auto, theme.post.author_label.custom_label_list) %></span>
<% } %>
<% if (theme.base_info.author || config.author) { %>
<div class="article-header">
<div class="avatar">
<%- image_tag(theme.style.avatar) %>
</div>
<div class="info">
<div class="author">
<span class="name"><%= theme.base_info.author || config.author %></span>
<% if (theme.hasOwnProperty('post') && theme.post.author_label.enable === true) { %>
<span class="author-label"><%- getAuthorLabel(site.posts.length, theme.post.author_label.auto, theme.post.author_label.custom_label_list) %></span>
<% } %>
</div>
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div>
</div>
</div>
<% } else { %>
<div class="article-header-meta-info">
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div>
</div>
<% } %>
<div class="article-content keep-markdown-body">
<%- page.content %>
</div>
<% } else { %>
<div class="article-header-meta-info">
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
<% if (theme.copyright_info.enable) { %>
<div class="post-copyright-info">
<%- partial('_partial/article-copyright-info') %>
</div>
</div>
<% } %>
<% } %>
<div class="article-content markdown-body">
<%- page.content %>
</div>
<% if (page.tags.length) { %>
<ul class="post-tags-box">
<% page.tags.forEach((tag) => { %>
<li class="tag-item">
<a href="<%- url_for(tag.path) %>">#<%= tag.name %></a>&nbsp;
</li>
<% }); %>
</ul>
<% } %>
<% if (theme.copyright_info.enable) { %>
<div class="post-copyright-info">
<%- partial('_partial/article-copyright-info') %>
</div>
<% } %>
<% if (page.tags.length) { %>
<ul class="post-tags-box">
<% page.tags.forEach((tag) => { %>
<li class="tag-item">
<a href="<%- url_for(tag.path) %>">#<%= tag.name %></a>&nbsp;
</li>
<% }); %>
</ul>
<% } %>
<% if (page.prev || page.next) { %>
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev"
rel="prev"
href="<%= url_for(page.prev.path) %>"
>
<% if (page.prev || page.next) { %>
<div class="article-nav">
<% if (page.prev) { %>
<div class="article-prev">
<a class="prev"
rel="prev"
href="<%= url_for(page.prev.path) %>"
>
<span class="left arrow-icon flex-center">
<i class="fas fa-chevron-left"></i>
</span>
<span class="title flex-center">
<span class="title flex-center">
<span class="post-nav-title-item"><%= page.prev.title %></span>
<span class="post-nav-item"><%= __('prev_posts') %></span>
</span>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next"
rel="next"
href="<%= url_for(page.next.path) %>"
>
</a>
</div>
<% } %>
<% if (page.next) { %>
<div class="article-next">
<a class="next"
rel="next"
href="<%= url_for(page.next.path) %>"
>
<span class="title flex-center">
<span class="post-nav-title-item"><%= page.next.title %></span>
<span class="post-nav-item"><%= __('next_posts') %></span>
</span>
<span class="right arrow-icon flex-center">
<span class="right arrow-icon flex-center">
<i class="fas fa-chevron-right"></i>
</span>
</a>
</div>
<% } %>
</div>
<% } %>
</a>
</div>
<% } %>
</div>
<% } %>
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
<div class="comment-container">
<%- partial('_partial/comment/comment') %>
<% if (theme.comment.enable === true && theme.comment.hasOwnProperty(theme.comment.use)) { %>
<div class="comment-container">
<%- partial('_partial/comment/comment') %>
</div>
<% } %>
</div>
<% if (is_post() && theme.toc.enable === true && page.toc !== false) { %>
<div class="toc-content-container">
<%- partial('_partial/toc') %>
</div>
<% } %>
</div>

View File

@ -13,7 +13,7 @@
</a>
</h3>
<div class="home-article-content markdown-body">
<div class="home-article-content keep-markdown-body">
<% if (post.excerpt) { %>
<%- post.excerpt %>
<% } else { %>

View File

@ -1,11 +1,11 @@
<%- partial('_partial/progress-bar') %>
<main class="page-container">
<% if (theme.style.first_screen.enable === true && is_home() && !page.prev) { %>
<% if (theme.style.first_screen?.enable === true && is_home() && !page.prev) { %>
<%- partial('_partial/first-screen') %>
<% } %>
<div class="page-main-content<%= is_home() ? ' home' : '' %>">
<div class="page-main-content<%= is_home() ? ' is-home' : '' %>">
<div class="page-main-content-top">
<%- partial('_partial/header') %>
@ -59,15 +59,9 @@
<%- partial('_partial/side-tools') %>
</div>
<% if (is_post() && theme.toc.enable === true && page.toc !== false) { %>
<aside class="page-aside">
<%- partial('_partial/toc') %>
</aside>
<% } %>
<%- partial('_partial/image-viewer') %>
<% if (theme.local_search.enable) { %>
<% if (theme.local_search?.enable) { %>
<%- partial('_partial/local-search') %>
<% } %>

View File

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

View File

@ -40,7 +40,7 @@ hexo.extend.helper.register('export_config', function () {
style: theme.style || {},
local_search: theme.local_search || {},
code_copy: theme.code_copy || {},
code_block_tools: theme.code_block_tools || {},
code_block: theme.code_block || {},
side_tools: theme.side_tools || {},
pjax: theme.pjax || {},
lazyload: theme.lazyload || {},

View File

@ -55,7 +55,8 @@ hexo.extend.helper.register('getPostUrl', function (rootUrl, path) {
const getSourceCdnUrl = (tyle, themeConfig, path) => {
const version = require('../../package.json').version
const { provider = 'jsdelivr' } = themeConfig?.cdn
const cdn = themeConfig?.cdn || {}
const { provider = 'jsdelivr' } = cdn
let urlPrefix = ''
switch (provider.toLocaleLowerCase()) {

View File

@ -26,10 +26,10 @@ transition-t(property, delay, duration, function) {
for f in convert(function) {
$temp-function += ("," + f)
}
transition-delay convert($temp-delay)
transition-timing-function convert($temp-function)
transition-duration convert($temp-duration)
transition-property convert($temp-property)
}
@ -86,7 +86,7 @@ transition-t(property, delay, duration, function) {
.title-hover-animation {
position relative
display inline-block
color var(--second-text-color)
color var(--text-color-2)
line-height 1.3
vertical-align top
border-bottom none
@ -97,7 +97,7 @@ transition-t(property, delay, duration, function) {
left 0
width 100%
height 2px
background-color var(--second-text-color)
background-color var(--text-color-2)
transform scaleX(0)
visibility hidden
content ""

View File

@ -28,7 +28,7 @@
}
&::-webkit-scrollbar-track {
background var(--scroll-bar-bg-color)
background var(--scrollbar-background-color)
}
}
@ -43,18 +43,33 @@ body {
height 100%
margin 0
padding 0
color var(--default-text-color)
color var(--text-color-3)
font-weight $default-font-weight
font-size $default-font-size
font-family $default-font-family
line-height $default-font-line-height
background var(--background-color)
letter-spacing 0.2px
background var(--background-color-1)
&::-webkit-scrollbar {
width 0.6rem
height 0.6rem
}
+keep-tablet() {
&::-webkit-scrollbar {
width 0.5rem
height 0.5rem
}
}
+keep-mobile() {
&::-webkit-scrollbar {
width 0.4rem
height 0.4rem
}
}
+keep-tablet() {
font-size $default-font-size * 0.96
line-height $default-font-line-height * 0.96
@ -93,12 +108,12 @@ li {
// a
// ======================================================================
a {
color var(--default-text-color)
color var(--text-color-3)
text-decoration none
i
span {
color var(--default-text-color)
color var(--text-color-3)
}
&:hover
@ -134,7 +149,7 @@ img {
display block
width 100%
height 100%
background var(--background-color)
background var(--background-color-1)
content ''
transition-t("background", "0", "0.2", "ease")
}
@ -149,7 +164,7 @@ img {
width 2rem
height 2rem
margin auto
border 2px solid var(--fourth-text-color)
border 2px solid var(--text-color-6)
border-top-color var(--selection-color)
border-left-color var(--selection-color)
border-radius 50%
@ -179,14 +194,14 @@ button {
padding 0.4rem 1rem
white-space nowrap
text-align center
background var(--background-color)
background var(--background-color-1)
border-radius 5px
cursor pointer
hover-style(true, 1.06, 1.06)
&:hover {
color var(--background-color)
color var(--background-color-1)
background var(--primary-color)
}
}
@ -244,10 +259,10 @@ button {
display none
box-sizing border-box
padding 0.2rem 0.6rem
color var(--fourth-text-color)
color var(--text-color-6)
font-size 0.8rem
white-space nowrap
background var(--first-text-color)
background var(--text-color-1)
border-radius 0.3rem
transform translateX(-50%) translateY(-100%)
transition-t("display", "0", "0.2", "ease")
@ -276,8 +291,8 @@ button {
justify-content center
box-sizing border-box
min-height 6rem
background var(--fourth-text-color)
border 0.2rem solid var(--default-text-color)
background var(--text-color-6)
border 0.2rem solid var(--text-color-3)
border-radius 0.3rem
transform translateX(-50%) translateY(-100%)
transition-t("display", "0", "0.2", "ease")

View File

@ -3,6 +3,76 @@
box-sizing border-box
margin 1.4rem 0
&.mac {
margin 1.4rem 0 1.8rem 0
box-shadow 0 0.8rem 2rem 0 rgba(0, 0, 0, 0.4)
&:hover {
.code-tools-box .copy {
opacity 1
}
}
.code-tools-box {
justify-content flex-end
padding 0.4rem 0.6rem 0.7rem 0.4rem
background #21252b
&::before {
position absolute
left 0.8rem
width 0.76rem
height 0.76rem
background #fc625d
border-radius 50%
box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
content ''
}
&.folded {
border-bottom-right-radius 0
border-bottom-left-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
top 3rem
right 0.5rem
padding 0 0.1rem
opacity 0
transition-t("opacity", "0", "0.2", "ease-in-out")
i {
font-size 1rem
}
}
}
}
.code-tools-box {
display flex
align-items center
@ -10,30 +80,32 @@
box-sizing border-box
width 100%
padding 0.3rem 0.4rem
background var(--fourth-text-color)
color var(--toolbar-foreground)
background var(--toolbar-background)
border-top-left-radius 0.3rem
border-top-right-radius 0.3rem
&.folded {
border-bottom-right-radius 0.3rem
border-bottom-left-radius 0.3rem
}
.code-lang {
justify-content flex-start
margin-left 0.2rem
color var(--default-text-color)
font-weight 600
font-size 0.9rem
font-family "Source Code Pro", consolas, Menlo
}
.tool {
disable-user-select()
cursor pointer
i {
color var(--second-text-color)
font-size 0.8rem
}
}
@ -52,69 +124,4 @@
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, 0.4)
&:hover {
.code-tools-box .copy {
opacity 1
}
}
.code-tools-box {
justify-content flex-end
padding 0.4rem 0.6rem 0.7rem 0.4rem
background #21252b
&::before {
position absolute
left 0.8rem
width 0.76rem
height 0.76rem
background #fc625d
border-radius 50%
box-shadow 1.3rem 0 #fdbc40, 2.6rem 0 #35cd4b
content ''
}
&.folded {
border-bottom-right-radius 0
border-bottom-left-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
right 0.5rem
bottom 0.3rem
padding 0 0.1rem
opacity 0
transition-t("opacity", "0", "0.2", "ease-in-out")
i {
font-size 1rem
}
}
}
}
}

View File

@ -1,54 +1,101 @@
@import "../variables.styl"
$code-foreground = lighten($default-text-color, 2%)
$code-background = darken($background-color, 5%)
$highlight-foreground = lighten($default-text-color, 2%)
$highlight-background = darken($background-color, 2%)
$highlight-gutter-color = lighten($default-text-color, 5%)
$highlight-gutter-bg-color = darken($background-color, 5%)
$highlight-comment = #8e908c
$highlight-red = #c82829
$highlight-orange = #f5871f
$highlight-yellow = #eab700
$highlight-green = #718c00
$highlight-aqua = #3e999f
$highlight-blue = #4271ae
$highlight-purple = #8959a8
$highlight-deletion = #fdd
$highlight-addition = #dfd
// A single line block of code
$code-foreground = lighten($text-color-3, 2%)
$code-background = darken($background-color-1, 5%)
$dark-code-foreground = lighten($dark-text-color-3, 2%)
$dark-code-background = darken($dark-background-color-1, 10%)
if (hexo-config('code_block.highlight_theme') == 'obsidian') {
$toolbar-foreground = #b5b5b5
$toolbar-background = #3a3f40
$highlight-foreground = #faf5d6
$highlight-background = #273036
$highlight-gutter-color = #7a979a
$highlight-gutter-bg-color = #273130
$highlight-comment = #76888e
$highlight-red = #ee5758
$highlight-orange = #ec7600
$highlight-yellow = #ffcd22
$highlight-green = #93c763
$highlight-aqua = #458383
$highlight-blue = #6e95bd
$highlight-purple = #b18bb7
$highlight-deletion = #ff9999
$highlight-addition = #ccff99
$dark-toolbar-foreground = darken($toolbar-foreground, 2%)
$dark-toolbar-background = darken($toolbar-background, 2%)
$dark-highlight-foreground = darken($highlight-foreground, 10%)
$dark-highlight-background = darken($highlight-background, 2%)
$dark-highlight-gutter-color = lighten($highlight-gutter-color, 1%)
$dark-highlight-gutter-bg-color = darken($highlight-gutter-bg-color, 2%)
$dark-highlight-comment = $highlight-comment
$dark-highlight-red = darken($highlight-red, 2%)
$dark-highlight-orange = darken($highlight-orange, 2%)
$dark-highlight-yellow = darken($highlight-yellow, 2%)
$dark-highlight-green = darken($highlight-green, 2%)
$dark-highlight-aqua = darken($highlight-aqua, 2%)
$dark-highlight-blue = darken($highlight-blue, 2%)
$dark-highlight-purple = darken($highlight-purple, 2%)
$dark-highlight-deletion = darken($highlight-deletion, 2%)
$dark-highlight-addition = darken($highlight-addition, 2%)
}
else {
$toolbar-foreground = $text-color-3
$toolbar-background = $background-color-3
$highlight-foreground = lighten($text-color-3, 2%)
$highlight-background = darken($background-color-1, 2%)
$highlight-gutter-color = lighten($text-color-3, 5%)
$highlight-gutter-bg-color = darken($background-color-1, 5%)
$highlight-comment = #8e908c
$highlight-red = #c82829
$highlight-orange = #f5871f
$highlight-yellow = #eab700
$highlight-green = #718c00
$highlight-aqua = #3e999f
$highlight-blue = #4271ae
$highlight-purple = #8959a8
$highlight-deletion = #fdd
$highlight-addition = #dfd
$dark-toolbar-foreground = $dark-text-color-3
$dark-toolbar-background = $dark-background-color-3
$dark-highlight-foreground = lighten($dark-text-color-3, 2%)
$dark-highlight-background = darken($dark-background-color-1, 8%)
$dark-highlight-gutter-color = lighten($dark-text-color-3, 5%)
$dark-highlight-gutter-bg-color = darken($dark-background-color-1, 10%)
$dark-highlight-comment = #969896
$dark-highlight-red = #cc6666
$dark-highlight-orange = #de935f
$dark-highlight-yellow = #f0c674
$dark-highlight-green = #b5bd68
$dark-highlight-aqua = #8abeb7
$dark-highlight-blue = #81a2be
$dark-highlight-purple = #b294bb
$dark-highlight-deletion = #008000
$dark-highlight-addition = #800000
}
$night-code-foreground = lighten($dark-default-text-color, 2%)
$night-code-background = darken($dark-background-color, 10%)
$night-highlight-foreground = lighten($dark-default-text-color, 2%)
$night-highlight-background = darken($dark-background-color, 8%)
$night-highlight-gutter-color = lighten($dark-default-text-color, 5%)
$night-highlight-gutter-bg-color = darken($dark-background-color, 10%)
$night-highlight-comment = #969896
$night-highlight-red = #cc6666
$night-highlight-orange = #de935f
$night-highlight-yellow = #f0c674
$night-highlight-green = #b5bd68
$night-highlight-aqua = #8abeb7
$night-highlight-blue = #81a2be
$night-highlight-purple = #b294bb
$night-highlight-deletion = #008000
$night-highlight-addition = #800000
code-theme(mode) {
--code-foreground mode == 'light' ? $code-foreground : $night-code-foreground
--code-background mode == 'light' ? $code-background : $night-code-background
--highlight-background mode == 'light' ? $highlight-background : $night-highlight-background
--highlight-foreground mode == 'light' ? $highlight-foreground : $night-highlight-foreground
--highlight-comment mode == 'light' ? $highlight-comment : $night-highlight-comment
--highlight-red mode == 'light' ? $highlight-red : $night-highlight-red
--highlight-orange mode == 'light' ? $highlight-orange : $night-highlight-orange
--highlight-yellow mode == 'light' ? $highlight-yellow : $night-highlight-yellow
--highlight-green mode == 'light' ? $highlight-green : $night-highlight-green
--highlight-aqua mode == 'light' ? $highlight-aqua : $night-highlight-aqua
--highlight-blue mode == 'light' ? $highlight-blue : $night-highlight-blue
--highlight-purple mode == 'light' ? $highlight-purple : $night-highlight-purple
--highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $night-highlight-gutter-color
--highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $night-highlight-gutter-bg-color
--toolbar-foreground mode == 'light' ? $toolbar-foreground : $dark-toolbar-foreground
--toolbar-background mode == 'light' ? $toolbar-background : $dark-toolbar-background
--code-foreground mode == 'light' ? $code-foreground : $dark-code-foreground
--code-background mode == 'light' ? $code-background : $dark-code-background
--highlight-background mode == 'light' ? $highlight-background : $dark-highlight-background
--highlight-foreground mode == 'light' ? $highlight-foreground : $dark-highlight-foreground
--highlight-comment mode == 'light' ? $highlight-comment : $dark-highlight-comment
--highlight-red mode == 'light' ? $highlight-red : $dark-highlight-red
--highlight-orange mode == 'light' ? $highlight-orange : $dark-highlight-orange
--highlight-yellow mode == 'light' ? $highlight-yellow : $dark-highlight-yellow
--highlight-green mode == 'light' ? $highlight-green : $dark-highlight-green
--highlight-aqua mode == 'light' ? $highlight-aqua : $dark-highlight-aqua
--highlight-blue mode == 'light' ? $highlight-blue : $dark-highlight-blue
--highlight-purple mode == 'light' ? $highlight-purple : $dark-highlight-purple
--highlight-gutter-color mode == 'light' ? $highlight-gutter-color : $dark-highlight-gutter-color
--highlight-gutter-bg-color mode == 'light' ? $highlight-gutter-bg-color : $dark-highlight-gutter-bg-color
}

View File

@ -8,7 +8,7 @@ $code-block {
font-size 0.96rem
line-height 1.5rem
background var(--highlight-background)
-webkit-text-size-adjust none
not-text-size-adjust()
}
@ -40,7 +40,8 @@ pre {
.highlight {
@extend $code-block
border-radius 0.1rem
border-bottom-right-radius 0.1rem
border-bottom-left-radius 0.1rem
pre {
margin 0
@ -95,24 +96,27 @@ pre {
.line {
height 1.5rem
color var(--default-text-color)
color var(--highlight-foreground)
.attr {
color var(--default-text-color)
color var(--highlight-foreground)
}
.string {
color var(--default-text-color)
color var(--highlight-foreground)
}
}
}
.gutter {
-webkit-user-select none
-moz-user-select none
-ms-user-select none
user-select none
disable-user-select()
color var(--highlight-gutter-color)
background var(--highlight-gutter-bg-color)
.line {
color var(--highlight-gutter-color)
}
}
.gist table {
@ -123,7 +127,6 @@ pre {
}
}
// For diff highlight
pre .deletion {
background var(--highlight-deletion)
}
@ -157,6 +160,10 @@ pre {
color var(--highlight-red)
}
.property {
color var(--highlight-blue)
}
.number
.preprocessor
.built_in

View File

@ -1,4 +1,4 @@
$keep-container-border-radius = 5px
$keep-container-border-radius = 0.4rem
hover-style(isTransform, scaleX, scaleY) {
box-shadow 2px 2px 5px var(--shadow-color)
@ -22,7 +22,7 @@ hover-style(isTransform, scaleX, scaleY) {
keep-container(isTransform, scaleX, scaleY, padding, marginBottomValue) {
box-sizing border-box
padding padding
background var(--background-color)
background var(--content-background-color)
border-radius $keep-container-border-radius
if (marginBottomValue != 0) {
@ -58,3 +58,12 @@ disable-user-select() {
-webkit-user-select none
user-select none
}
not-text-size-adjust() {
-ms-text-size-adjust none
-moz-text-size-adjust none
-webkit-text-size-adjust none
}

View File

@ -1,4 +1,4 @@
.markdown-body {
.keep-markdown-body {
font-size 1rem
blockquote {
@ -11,14 +11,14 @@
box-sizing border-box
margin 1.4rem 0
color var(--default-text-color)
background var(--second-background-color)
border-left 0.4rem solid var(--default-text-color)
color var(--text-color-3)
background var(--background-color-2)
border-left 0.4rem solid var(--text-color-4)
}
p {
color var(--default-text-color)
color var(--text-color-3)
line-height 2
}
@ -29,7 +29,7 @@
padding-bottom 0.2rem
text-decoration none
overflow-wrap break-word
border-bottom 0.1rem solid var(--third-text-color)
border-bottom 0.1rem solid var(--text-color-4)
outline 0
cursor pointer
@ -38,7 +38,7 @@
.fab {
position relative
margin 0 0.2rem 0 0.4rem
color var(--third-text-color)
color var(--text-color-4)
font-size 0.88rem
}
@ -54,12 +54,12 @@
strong {
color var(--default-text-color)
color var(--text-color-3)
}
em {
color var(--default-text-color)
color var(--text-color-3)
}
@ -115,7 +115,7 @@
li {
color var(--default-text-color)
color var(--text-color-3)
}
@ -125,7 +125,7 @@
h4
h5
h6 {
color var(--second-text-color)
color var(--text-color-2)
line-height 1.5
+keep-tablet() {
@ -209,6 +209,10 @@
opacity 0
}
&[lazyload] {
margin 0.8rem auto 0.2rem
}
if (hexo-config('post.img_align') == 'center' || hexo-config('style.article_img_align') == 'center') {
margin 0.8rem auto 0.2rem
}
@ -246,12 +250,12 @@
}
tr {
background-color var(--background-color)
border 0.1rem solid var(--fourth-text-color)
background-color var(--background-color-1)
border 0.1rem solid var(--text-color-6)
}
tr:nth-child(2n) {
background-color var(--second-background-color)
background-color var(--background-color-2)
}
}
}

View File

@ -14,16 +14,19 @@ $main-content-width-tablet = 86% // main content
$main-content-width-mobile = 90% // main content width (mobile)
$post-tool-button-width = 38px // post tool button width
$component-spacing-value = 38px // component-spacing-value (PC)
$content-max-width = 928px // main content max width
// main content max width
$temp-content-max-width = hexo-config('style.content_max_width')
$content-max-width = $temp-content-max-width ? convert($temp-content-max-width) : 1000px
// main content max width of has TOC
$has-toc-content-max-width = $content-max-width * 1.2
// main content max width of has first screen
$has-fs-content-max-width = $content-max-width * 1.2
// ==============================================================================================
// media query
// ==============================================================================================
$media-max-width = 780px // media query max width (tablet)
$media-max-width = 800px // media query max width (tablet)
$media-max-width-mobile = 500px // media query max width (mobile)
keep-tablet() {
@ -60,53 +63,89 @@ $z-index-10 = 1010
$temp-color = hexo-config('style.primary_color')
$primary-color = $temp-color ? convert($temp-color) : #0066cc
// light
$primary-color-light-1 = lighten($primary-color, 10%)
$primary-color-light-2 = lighten($primary-color, 20%)
// dark
$primary-color-dark-1 = darken($primary-color, 10%)
$primary-color-dark-2 = darken($primary-color, 20%)
// ==============================================================================================
// theme light mode color set
// ==============================================================================================
$background-color = #fff
$second-background-color = darken($background-color, 3%)
$default-text-color = #50505c
$first-text-color = darken($default-text-color, 10%)
$second-text-color = darken($default-text-color, 5%)
$third-text-color = lighten($default-text-color, 30%)
$fourth-text-color = lighten($default-text-color, 90%)
$border-color = darken($background-color, 30%)
$background-color-1 = #fff
$background-color-2= darken($background-color-1, 3%)
$background-color-3= darken($background-color-1, 6%)
$content-background-color = #fff
$text-color-3 = #50505c
$text-color-1 = darken($text-color-3, 10%)
$text-color-2 = darken($text-color-3, 5%)
$text-color-4 = lighten($text-color-3, 30%)
$text-color-5 = lighten($text-color-3, 60%)
$text-color-6 = lighten($text-color-3, 90%)
$toc-text-color = lighten($text-color-3, 20%)
$badge-color = darken($background-color-1, 6%)
$badge-background-color = lighten($text-color-3, 40%)
$border-color = darken($background-color-1, 30%)
$selection-color = lighten($primary-color, 10%)
$shadow-color = rgba(0, 0, 0, 0.2)
$shadow-hover-color = rgba(0, 0, 0, 0.28)
$scrollbar-color = lighten($default-text-color, 6%)
$scroll-bar-bg-color = darken($background-color, 10%)
$link-color = darken($default-text-color, 10%)
$shadow-hover-color = rgba(0, 0, 0, 0.3)
$scrollbar-color = lighten($text-color-3, 10%)
$scrollbar-background-color = darken($background-color-1, 10%)
$toc-scrollbar-color = alpha($text-color-3, 0.1)
$copyright-info-color = #cc0033
$avatar-background-color = #0066cc
$header-transparent-background-1 = alpha($background-color, 0.28)
$header-transparent-background-2 = alpha($background-color, 0.58)
$avatar-background-color = $primary-color-dark-1
$header-transparent-background-1 = alpha($background-color-1, 0.28)
$header-transparent-background-2 = alpha($background-color-1, 0.58)
$pjax-progress-bar-color = linear-gradient(45deg, #f10006, #ef5b00, #e59c01, #19ca05, #00cab5, #0264c8, #c303c3)
// ==============================================================================================
// theme dark mode color set
// ==============================================================================================
$dark-primary-color = $primary-color
$dark-background-color = #383940
$dark-second-background-color = darken($dark-background-color, 10%)
$dark-default-text-color = #bebec6
$dark-first-text-color = lighten($dark-default-text-color, 30%)
$dark-second-text-color = lighten($dark-default-text-color, 20%)
$dark-third-text-color = darken($dark-default-text-color, 20%)
$dark-fourth-text-color = darken($dark-default-text-color, 75%)
$dark-border-color = lighten($dark-background-color, 20%)
$dark-selection-color = $selection-color
$dark-background-color-1 = #383940
$dark-background-color-2= lighten($dark-background-color-1, 3%)
$dark-background-color-3= lighten($dark-background-color-1, 6%)
$dark-content-background-color = darken($dark-background-color-1, 2%)
$dark-text-color-3 = #bebec6
$dark-text-color-1 = lighten($dark-text-color-3, 10%)
$dark-text-color-2 = lighten($dark-text-color-3, 5%)
$dark-text-color-4 = darken($dark-text-color-3, 20%)
$dark-text-color-5 = darken($dark-text-color-3, 50%)
$dark-text-color-6 = darken($dark-text-color-3, 70%)
$dark-toc-text-color = darken($dark-text-color-3, 15%)
$dark-badge-color = lighten($dark-background-color-1, 10%)
$dark-badge-background-color = lighten($dark-text-color-3, 40%)
$dark-border-color = lighten($dark-background-color-1, 30%)
$dark-selection-color = darken($selection-color, 20%)
$dark-shadow-color = rgba(128, 128, 128, 0.2)
$dark-shadow-hover-color = rgba(128, 128, 128, 0.28)
$dark-scrollbar-color = darken($dark-background-color, 10%)
$dark-scroll-bar-bg-color = lighten($dark-background-color, 20%)
$dark-link-color = lighten($dark-default-text-color, 10%)
$dark-scrollbar-color = darken($dark-background-color-1, 10%)
$dark-scrollbar-background-color = lighten($dark-background-color-1, 20%)
$dark-toc-scrollbar-color = alpha($dark-text-color-3, 0.1)
$dark-copyright-info-color = darken($copyright-info-color, 20%)
$dark-avatar-background-color = darken($avatar-background-color, 10%)
$dark-header-transparent-background-1 = alpha($dark-background-color, 0.28)
$dark-header-transparent-background-2 = alpha($dark-background-color, 0.58)
$dark-avatar-background-color = darken($avatar-background-color, 20%)
$dark-header-transparent-background-1 = alpha($dark-background-color-1, 0.28)
$dark-header-transparent-background-2 = alpha($dark-background-color-1, 0.58)
$dark-pjax-progress-bar-color = linear-gradient(45deg, #ea404a, #ea722f, #e9a71f, #67e559, #18ecec, #1b85f1, #ee1dee)
@ -126,25 +165,57 @@ $default-font-weight = 400
// light/dark mode color
// ==============================================================================================
root-color(mode) {
--background-color mode == 'light' ? $background-color : $dark-background-color
--second-background-color mode == 'light' ? $second-background-color : $dark-second-background-color
--primary-color mode == 'light' ? $primary-color : $dark-primary-color
--first-text-color mode == 'light' ? $first-text-color : $dark-first-text-color
--second-text-color mode == 'light' ? $second-text-color : $dark-second-text-color
--third-text-color mode == 'light' ? $third-text-color : $dark-third-text-color
--fourth-text-color mode == 'light' ? $fourth-text-color : $dark-fourth-text-color
--default-text-color mode == 'light' ? $default-text-color : $dark-default-text-color
// primary color
--primary-color $primary-color
--primary-color-light-1 $primary-color-light-1
--primary-color-light-2 $primary-color-light-2
--primary-color-dark-1 $primary-color-dark-1
--primary-color-dark-2 $primary-color-dark-2
// background color
--background-color-1 mode == 'light' ? $background-color-1 : $dark-background-color-1
--background-color-2 mode == 'light' ? $background-color-2 : $dark-background-color-2
--background-color-3 mode == 'light' ? $background-color-3 : $dark-background-color-3
// content background color
--content-background-color mode == 'light' ? $content-background-color : $dark-content-background-color
// text color
--text-color-1 mode == 'light' ? $text-color-1 : $dark-text-color-1
--text-color-2 mode == 'light' ? $text-color-2 : $dark-text-color-2
--text-color-3 mode == 'light' ? $text-color-3 : $dark-text-color-3
--text-color-4 mode == 'light' ? $text-color-4 : $dark-text-color-4
--text-color-5 mode == 'light' ? $text-color-5 : $dark-text-color-5
--text-color-6 mode == 'light' ? $text-color-6 : $dark-text-color-6
// toc text color
--toc-text-color mode == 'light' ? $toc-text-color : $dark-toc-text-color
// badge color
--badge-color mode == 'light' ? $badge-color : $dark-badge-color
--badge-background-color mode == 'light' ? $badge-background-color : $dark-badge-background-color
// border color
--border-color mode == 'light' ? $border-color : $dark-border-color
// selection color
--selection-color mode == 'light' ? $selection-color : $dark-selection-color
// shadow color
--shadow-color mode == 'light' ? $shadow-color : $dark-shadow-color
--shadow-hover-color mode == 'light' ? $shadow-hover-color : $dark-shadow-hover-color
// scrollbar color
--scrollbar-color mode == 'light' ? $scrollbar-color : $dark-scrollbar-color
--scroll-bar-bg-color mode == 'light' ? $scroll-bar-bg-color : $dark-scroll-bar-bg-color
--link-color mode == 'light' ? $link-color : $dark-link-color
--scrollbar-background-color mode == 'light' ? $scrollbar-background-color : $dark-scrollbar-background-color
--toc-scrollbar-color mode == 'light' ? $toc-scrollbar-color : $dark-toc-scrollbar-color
--copyright-info-color mode == 'light' ? $copyright-info-color : $dark-copyright-info-color
--avatar-background-color mode == 'light' ? $avatar-background-color : $dark-avatar-background-color
--header-transparent-background-1 mode == 'light' ? $header-transparent-background-1 : $dark-header-transparent-background-1
--header-transparent-background-2 mode == 'light' ? $header-transparent-background-2 : $dark-header-transparent-background-2
--pjax-progress-bar-color mode == 'light' ? $pjax-progress-bar-color : $dark-pjax-progress-bar-color
}

View File

@ -17,7 +17,7 @@ $article-date-font-size = 1rem
.archive-year {
margin-right 6px
color var(--second-text-color)
color var(--text-color-2)
font-weight 600
font-size $archive-year-font-size
@ -28,7 +28,7 @@ $article-date-font-size = 1rem
.archive-year-post-count {
color var(--second-text-color)
color var(--text-color-2)
font-weight 500
font-size $archive-year-count-font-size
@ -68,12 +68,12 @@ $article-date-font-size = 1rem
a.article-title {
color var(--default-text-color)
color var(--text-color-3)
}
.article-date {
float right
color var(--default-text-color)
color var(--text-color-3)
font-size $article-date-font-size
}
}

View File

@ -4,7 +4,7 @@
width 100%
overflow hidden
font-size 1rem
background var(--second-background-color)
background var(--background-color-2)
&::after {
position absolute
@ -30,7 +30,7 @@
}
&::-webkit-scrollbar-thumb {
background var(--third-text-color)
background var(--text-color-4)
}
&::-webkit-scrollbar-track {
@ -39,7 +39,7 @@
li {
margin-bottom 0.4rem
color var(--default-text-color)
color var(--text-color-3)
white-space nowrap
.license {

View File

@ -3,7 +3,7 @@
.article-meta-item {
margin-right 0.6rem
color var(--third-text-color)
color var(--text-color-4)
&:last-child {
margin-right 0
@ -44,7 +44,7 @@
}
a {
color var(--third-text-color)
color var(--text-color-4)
&:hover {
color var(--primary-color)

View File

@ -8,6 +8,9 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
else if (hexo-config('comment.use') == "twikoo") {
@import "./twikoo.styl"
}
else if (hexo-config('comment.use') == "waline") {
@import "./waline.styl"
}
}
.comments-container {
@ -15,7 +18,7 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
width 100%
margin-top $component-spacing-value
#comment-anchor {
#comments-anchor {
width 100%
height 0.8rem
}
@ -23,11 +26,11 @@ if (hexo-config('comment.enable') == true && hexo-config('comment.use') != "") {
.comment-area-title {
width 100%
margin 0.8rem 0
color var(--default-text-color)
color var(--text-color-3)
font-size 1.38rem
i {
color var(--default-text-color)
color var(--text-color-3)
}
+keep-tablet() {

View File

@ -1,562 +1,105 @@
// variables
$gt-color-main := #6190e8
$gt-color-sub := #a1a1a1
$gt-color-loader := #999999
$gt-color-error := #ff3860
$gt-color-hr := #e9e9e9
$gt-color-comment-txt := #333333
$gt-color-link-active := #333333
$gt-color-btn := #ffffff
$gt-size-base := 16px // default font-size
$gt-size-border-radius := 5px
$gt-breakpoint-mobile := 479px
$gt-mask-z-index := 9999
.gitalk-comment-container {
// functions & mixins
clearfix() {
&:before
&:after {
display table
clear both
content ""
}
}
em($px, $base-size = $gt-size-base) {
u = unit($px)
if (u is 'px') {
unit($px / $base-size, 'em')
}
else {
unit($px, u)
}
}
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
mobile() {
@media (max-width $gt-breakpoint-mobile) {
{block}
}
}
// variables - calculated
$gt-size-loader-dot := em(6px)
$gt-size-loader := em(28px)
$gt-size-avatar := em(50px)
$gt-size-avatar-mobi := em(32px)
// styles
// Put everything under container to avoid style conflicts
.comments-container {
.gt-container {
box-sizing border-box
* {
box-sizing border-box
}
font-size $gt-size-base
// common
a {
color $gt-color-main
&:hover {
color lighten($gt-color-main, 20%)
border-color lighten($gt-color-main, 20%)
}
&.is--active {
color $gt-color-link-active
cursor default !important
&:hover {
color $gt-color-link-active
}
}
}
.hide {
display none !important
}
// icons
.gt-svg {
display inline-block
width em(16px)
height em(16px)
vertical-align sub
svg {
width 100%
height 100%
fill $gt-color-main
}
}
.gt-ico {
display inline-block
&-text {
margin-left em(5px)
}
&-github {
width 100%
height 100%
.gt-svg {
width 100%
height 100%
}
svg {
fill inherit
}
}
}
// loader
.gt-spinner {
position relative
&::before {
position absolute
top 3px
box-sizing border-box
width em(12px)
height em(12px)
margin-top em(-3px)
margin-left em(-6px)
border 1px solid $gt-color-btn
border-top-color $gt-color-main
border-radius 50%
animation gt-kf-rotate 0.6s linear infinite
content ''
}
}
.gt-loader {
position relative
display inline-block
width $gt-size-loader
height $gt-size-loader
font-style normal
// font-size: $gt-size-loader
line-height $gt-size-loader
border 1px solid $gt-color-loader
border-radius 50%
animation ease gt-kf-rotate 1.5s infinite
&:before {
position absolute
top 0
left 50%
display block
width $gt-size-loader-dot
height $gt-size-loader-dot
margin-top -($gt-size-loader-dot / 2)
margin-left -($gt-size-loader-dot / 2)
background-color $gt-color-loader
border-radius 50%
content ''
}
}
// avatar
.gt-avatar {
display inline-block
width $gt-size-avatar
height $gt-size-avatar
+mobile() {
width $gt-size-avatar-mobi
height $gt-size-avatar-mobi
}
img {
width 100%
height auto
border-radius 3px
}
&-github {
width $gt-size-avatar - em(2px)
height $gt-size-avatar - em(2px)
cursor pointer
+mobile() {
width $gt-size-avatar-mobi - em(2px)
height $gt-size-avatar-mobi - em(2px)
}
}
}
// button
.gt-btn {
display inline-block
padding em(12px) em(20px)
color $gt-color-btn
font-size em(12px)
line-height 1
white-space nowrap
text-decoration none
background-color $gt-color-main
border 1px solid $gt-color-main
border-radius $gt-size-border-radius
outline none
cursor pointer
&-text {
font-weight 400
}
&-loading {
position relative
display inline-block
width em(12px)
height em(16px)
margin-left em(8px)
vertical-align top
}
&.is--disable {
cursor not-allowed
opacity 0.5
}
&-login {
margin-right 0
}
&-preview {
color $gt-color-main
background-color var(--background-color)
&:hover {
background-color var(--second-background-color)
background-color var(--primary-color-light-1)
border 1px solid var(--primary-color-light-1)
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
}
.gt-initing-text {
color var(--text-color-3)
}
.gt-meta {
.gt-counts {
a {
color var(--primary-color)
}
color var(--text-color-3)
}
&-public {
&:hover {
background-color lighten($gt-color-main, 20%)
border-color lighten($gt-color-main, 20%)
.gt-user {
.gt-user-name {
color var(--text-color-3)
}
}
}
}
&-loadmore
// loadmore
/* error */
.gt-error {
margin em(10px)
color $gt-color-error
text-align center
}
// initing
.gt-initing {
padding em(20px) 0
text-align center
&-text {
margin em(10px) auto
font-size 92%
}
}
// no int
.gt-no-init {
padding em(20px) 0
text-align center
}
// link
.gt-link {
border-bottom 1px dotted $gt-color-main
&-counts
&-project {
text-decoration none
}
}
// meta
.gt-meta {
position relative
z-index 10
margin em(20px) 0
padding em(16px) 0
font-size em(16px)
border-bottom 1px solid $gt-color-hr
clearfix()
}
.gt-counts {
margin 0 em(10px) 0 0
color var(--default-text-color)
}
.gt-user {
float right
margin 0
font-size 92%
&-pic {
width 16px
height 16px
margin-right em(8px)
vertical-align top
}
&-inner {
display inline-block
cursor pointer
.gt-user-name {
color var(--default-text-color)
}
}
.gt-ico {
margin 0 0 0 em(5px)
svg {
fill var(--default-text-color)
}
}
.is--poping {
.gt-ico {
svg {
fill $gt-color-main
path {
fill var(--text-color-3)
}
}
}
.gt-popup {
top 2.6rem
background var(--background-color-2)
border 1px solid var(--border-color)
}
}
.gt-header {
.gt-header-comment {
textarea {
color var(--text-color-3)
background-color var(--background-color-2)
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
}
.gt-header-controls {
.gt-btn-preview {
color #fff
background-color var(--primary-color-light-1)
}
}
}
}
}
.gt-version {
margin-left em(6px)
color $gt-color-sub
}
.gt-copyright {
margin 0 em(15px) em(8px)
padding-top em(8px)
border-top 1px solid var(--border-color)
}
.gt-comments {
.gt-comments-null {
color var(--text-color-4)
}
// popup
.gt-popup {
position absolute
top em(38px)
right 0
display inline-block
padding em(10px) 0
font-size em(14px)
letter-spacing 0.5px
background var(--background-color)
border 1px solid var(--border-color)
.gt-action {
position relative
display block
margin em(8px) 0
padding 0 em(18px)
text-decoration none
cursor pointer
&.is--active {
&:before {
position absolute
top em(7px)
left em(8px)
width em(4px)
height em(4px)
background $gt-color-main
content ''
}
}
}
}
// header
.gt-header {
position relative
display flex
&-comment {
flex 1
margin-left em(20px)
+mobile() {
margin-left em(14px)
}
}
&-textarea {
display block
box-sizing border-box
width 100%
min-height em(82px)
max-height em(240px)
padding em(12px)
color var(--default-text-color)
font-size em(14px)
word-wrap break-word
background-color var(--fourth-text-color)
border 1px solid var(--border-color)
border-radius $gt-size-border-radius
outline none
transition all 0.25s ease
resize vertical
&:hover {
background-color var(--background-color)
}
}
&-preview {
padding em(12px)
background-color var(--background-color)
border 1px solid var(--border-color)
border-radius $gt-size-border-radius
}
&-controls {
position relative
margin em(12px) 0 0
clearfix()
+mobile() {
margin 0
}
&-tip {
color $gt-color-main
font-size em(14px)
text-decoration none
vertical-align sub
+mobile() {
display none
}
}
.gt-btn {
float right
margin-left em(20px)
+mobile() {
float none
width 100%
margin em(12px) 0 0
}
}
}
}
&:after {
position fixed
top 0
right 0
bottom 100%
left 0
opacity 0
content ''
}
&.gt-input-focused {
position relative
&:after {
position fixed
top 0
right 0
bottom 0
left 0
z-index $gt-mask-z-index
background #000
opacity 0.6
transition opacity 0.3s, bottom 0s
content ''
}
.gt-header-comment {
z-index $gt-mask-z-index + 1
}
}
// comments
.gt-comments {
padding-top em(20px)
&-null {
text-align center
}
&-controls {
margin em(20px) 0
text-align center
}
}
// comment
.gt-comment {
position relative
display flex
padding em(10px) 0
&-content {
flex 1
margin-left em(20px)
padding em(12px) em(16px)
overflow auto
background-color var(--second-background-color)
transition all ease 0.25s
+mobile() {
margin-left em(14px)
padding em(10px) em(12px)
}
}
&-header {
position relative
margin-bottom em(8px)
font-size em(14px)
}
&-block-1 {
float right
width em(32px)
height em(22px)
}
&-block-2 {
float right
width em(64px)
height em(22px)
}
&-username {
color $gt-color-main
font-weight 500
text-decoration none
&:hover {
text-decoration underline
}
}
&-text {
margin-left em(8px)
color $gt-color-sub
}
&-date {
margin-left em(8px)
color $gt-color-sub
}
&-like
&-edit
&-reply {
position absolute
height em(22px)
&:hover {
cursor pointer
}
}
&-like {
top 0
right em(32px)
}
&-edit
&-reply {
top 0
right 0
}
&-body {
// color: $gt-color-comment-txt !important
color var(--second-text-color) !important
.email-hidden-toggle a {
display inline-block
height 12px
padding 0 9px
color #444d56
font-weight 600
font-size 12px
line-height 6px
text-decoration none
vertical-align middle
background #dfe2e5
border-radius 1px
&:hover {
background-color #c6cbd1
}
}
.email-hidden-reply {
display none
white-space pre-wrap
.email-signature-reply {
margin 15px 0
padding 0 15px
color #586069
border-left 4px solid #dfe2e5
}
}
.email-hidden-reply.expanded {
display block
}
}
&-admin {
.gt-comment-content {
background-color var(--fourth-text-color)
}
}
}
background-color var(--background-color-2)
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
@keyframes gt-kf-rotate {
0% {
transform rotate(0)
}
100% {
transform rotate(360deg)
&:hover {
box-shadow none
}
.gt-comment-body {
p
li {
color var(--text-color-3)
}
.email-fragment {
color var(--text-color-3)
}
}
.notranslate {
background-color var(--background-color-3)
code {
color var(--text-color-2)
}
}
pre {
background-color var(--background-color-3)
}
}
}
}
}

View File

@ -5,11 +5,11 @@
.tk-meta-input {
.el-input {
.el-input-group__prepend {
color var(--default-text-color)
color var(--text-color-3)
}
input {
color var(--default-text-color)
color var(--text-color-3)
}
}
}
@ -17,47 +17,50 @@
.tk-input {
textarea {
color var(--default-text-color)
color var(--text-color-3)
}
}
.actions {
.tk-row-actions-start {
.tk-action-icon {
.tk-submit-action-icon {
svg {
fill var(--default-text-color)
path {
fill var(--text-color-3)
transition-t("fill", "0", "0.2", "ease")
}
}
&.OwO {
.OwO-body {
color var(--default-text-color)
background-color var(--background-color)
}
.OwO-body {
color var(--text-color-3)
background-color var(--background-color-1)
}
}
}
.tk-preview {
span {
color var(--default-text-color)
background var(--second-background-color)
color var(--text-color-3)
background var(--background-color-2)
}
}
}
.tk-preview-container {
color var(--default-text-color)
color var(--text-color-3)
}
.tk-comments-container {
.tk-comments-count {
span {
color var(--default-text-color)
color var(--text-color-3)
}
}
}
@ -67,10 +70,16 @@
margin-bottom 1.4rem
.tk-meta {
.tk-nick {
color var(--default-text-color)
color var(--text-color-3)
}
strong {
color var(--text-color-3)
}
.tk-tag {
&.tk-tag-green {
@ -85,18 +94,26 @@
.tk-time {
time {
color var(--default-text-color)
color var(--text-color-4)
}
}
}
.tk-content {
color var(--default-text-color)
color var(--text-color-3)
span {
color var(--text-color-3)
}
p {
color var(--text-color-3)
}
}
.tk-expand {
color var(--third-text-color)
color var(--text-color-4)
}
}
}

View File

@ -4,14 +4,14 @@
.vwrap {
border 0.1rem solid var(--third-text-color)
border 0.1rem solid var(--text-color-4)
.vheader {
.vinput {
color var(--default-text-color)
border-color var(--third-text-color)
color var(--text-color-3)
border-color var(--text-color-4)
&:focus {
border-bottom 0.1rem dashed var(--primary-color) !important
@ -23,14 +23,14 @@
.vedit {
.veditor {
color var(--default-text-color)
color var(--text-color-3)
}
.vctrl {
.vicon {
fill var(--default-text-color)
fill var(--text-color-3)
&.actived {
fill var(--primary-color)
@ -41,9 +41,9 @@
button.vsubmit {
color var(--default-text-color) !important
color var(--text-color-3) !important
background transparent !important
border 0.1rem solid var(--default-text-color) !important
border 0.1rem solid var(--text-color-3) !important
&:hover {
color var(--primary-color) !important
@ -54,10 +54,10 @@
.vcount {
color var(--default-text-color)
color var(--text-color-3)
.vnum {
color var(--second-text-color)
color var(--text-color-2)
}
}
@ -85,15 +85,15 @@
}
.vsys {
color var(--default-text-color)
background var(--fourth-text-color) !important
color var(--text-color-3)
background var(--background-color-2) !important
}
}
.vcontent {
P {
color var(--default-text-color)
color var(--text-color-3)
code {
color var(--code-foreground)
@ -114,14 +114,14 @@
.vcopy {
color var(--third-text-color)
color var(--text-color-4)
}
.vpage {
.vmore {
color var(--second-text-color)
color var(--text-color-2)
border 0.1rem solid var(--border-color)
}
}

View File

@ -0,0 +1,62 @@
.waline-comment-container {
#waline-comment {
--waline-theme-color var(--primary-color)
--waline-active-color var(--primary-color-light-1)
--waline-color var(--text-color-3)
--waline-bgcolor var(--background-color-1)
--waline-border-color var(--border-color)
--waline-disable-bgcolor var(--background-color-2)
--waline-disable-color var(--text-color-3)
--waline-code-bgcolor rgba(40, 44, 52, 0.9)
--waline-info-bgcolor var(--background-color-3)
--waline-info-color var(--text-color-3)
--waline-border 1px solid var(--waline-border-color)
input
textarea {
position relative
box-sizing border-box
padding 0.6rem 1rem
color var(--text-color-3)
background transparent
border-radius 0.4rem
outline none
&:hover {
background var(--background-color-2)
}
}
.wl-header {
box-sizing border-box
padding 0
}
button {
transition-t("color, background", "0, 0", "0.2, 0.2", "ease, ease")
}
.wl-logout-btn {
svg {
width 1rem
height 1rem
path {
color var(--background-color-3)
}
}
}
.wl-panel {
border-radius 0.4rem
}
.wl-count
.wl-num
.wl-preview h4
.wl-like span {
color var(--text-color-4)
}
}
}

View File

@ -5,12 +5,13 @@ $temp-img = hexo-config('style.first_screen.background_img')
$first-screen-img = $temp-img ? $temp-img : '/images/bg.svg'
$temp-font-color = hexo-config('style.first_screen.font_color')
$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--default-text-color)
$first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--text-color-3)
.first-screen-container {
position relative
box-sizing border-box
width 100%
height 100vh
overflow hidden
background url($first-screen-img) center center / cover no-repeat
@ -66,7 +67,7 @@ $first-screen-font-color = $temp-font-color ? convert($temp-font-color) : var(--
cursor pointer
i {
color var(--default-text-color)
color var(--text-color-3)
}
}
}

View File

@ -1,10 +1,10 @@
.footer {
color var(--third-text-color)
color var(--text-color-4)
font-size 1rem
a {
color var(--third-text-color)
color var(--text-color-4)
&:hover {
color var(--primary-color)
@ -18,7 +18,7 @@
.info-item {
margin 0.3rem 0
color var(--third-text-color)
color var(--text-color-4)
&.ypyun-info a {
display flex

View File

@ -11,7 +11,7 @@ $logo-image-box-width = 46px
width 100%
height 100%
padding-top $scroll-progress-bar-height
background var(--background-color)
background var(--background-color-1)
hover-style(false, 0, 0)
@ -25,10 +25,15 @@ $logo-image-box-width = 46px
width $main-content-width
max-width $content-max-width
height 100%
transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
&.has-first-screen {
max-width $content-max-width * 1.2
max-width $has-fs-content-max-width
}
.has-toc & {
max-width $has-toc-content-max-width
}
+keep-tablet() {
@ -75,7 +80,7 @@ $logo-image-box-width = 46px
}
.logo-title {
color var(--first-text-color)
color var(--text-color-1)
font-weight bold
font-size $logo-title-font-size
line-height 1
@ -109,7 +114,7 @@ $logo-image-box-width = 46px
position relative
float left
margin-left 2rem
color var(--default-text-color)
color var(--text-color-3)
font-size 1rem
cursor pointer
@ -143,7 +148,7 @@ $logo-image-box-width = 46px
font-size $pc-search-icon-font-size
i {
color var(--default-text-color)
color var(--text-color-3)
}
}
}
@ -162,12 +167,12 @@ $logo-image-box-width = 46px
width 20px
height 20px
margin-left 12px
color var(--default-text-color)
color var(--text-color-3)
font-size 18px
cursor pointer
i {
color var(--default-text-color)
color var(--text-color-3)
}
&:first-child {
@ -187,7 +192,7 @@ $logo-image-box-width = 46px
position relative
width 18px
height $menu-bar-line-height
background var(--default-text-color)
background var(--text-color-3)
.header-drawer-show & {
background transparent
@ -200,7 +205,7 @@ $logo-image-box-width = 46px
left 0
width 100%
height $menu-bar-line-height
background var(--default-text-color)
background var(--text-color-3)
content ''
transition-t("transform", "0", "0.38", "ease")
}
@ -236,7 +241,7 @@ $logo-image-box-width = 46px
z-index $z-index-2
width 100%
padding $header-height 0 20px 0
background var(--background-color)
background var(--background-color-1)
transform scaleY(0)
transform-origin top
transition-t("transform", "0", "0.38", "ease")
@ -258,18 +263,18 @@ $logo-image-box-width = 46px
a {
padding 6px 20px
color var(--default-text-color)
color var(--text-color-3)
border-radius 20px
&:hover {
color var(--second-text-color)
border 1px solid var(--default-text-color)
color var(--text-color-2)
border 1px solid var(--text-color-3)
}
&.active {
color var(--second-text-color)
border 1px solid var(--default-text-color)
color var(--text-color-2)
border 1px solid var(--text-color-3)
}
}
}

View File

@ -28,7 +28,7 @@ $search-header-height = 3rem
width 70%
height 80%
margin auto
background var(--background-color)
background var(--background-color-1)
border-radius 0.4rem
transform scale(0)
transition-t("transform", "0", "0.3", "ease")
@ -46,13 +46,13 @@ $search-header-height = 3rem
align-items center
height $search-header-height
padding 0 1rem
background var(--fourth-text-color)
background var(--text-color-6)
border-top-left-radius 0.2rem
border-top-right-radius 0.2rem
.search-input-field-pre {
margin-right 0.2rem
color var(--default-text-color)
color var(--text-color-3)
cursor pointer
}
@ -62,7 +62,7 @@ $search-header-height = 3rem
.search-input {
width 100%
color var(--default-text-color)
color var(--text-color-3)
font-size 1.2rem
background transparent
border 0
@ -73,7 +73,7 @@ $search-header-height = 3rem
}
&::-webkit-input-placeholder {
color var(--third-text-color)
color var(--text-color-4)
font-size 1rem
}
}
@ -81,12 +81,12 @@ $search-header-height = 3rem
.close-popup-btn {
color var(--default-text-color)
color var(--text-color-3)
font-size $icon-size
cursor pointer
&:hover {
color var(--first-text-color)
color var(--text-color-1)
}
}
}
@ -130,7 +130,7 @@ $search-header-height = 3rem
left 0
width 0.4rem
height 0.4rem
background var(--default-text-color)
background var(--text-color-3)
border-radius 50%
transform translateY(-50%)
content ''
@ -147,7 +147,7 @@ $search-header-height = 3rem
a {
&:hover {
color var(--default-text-color)
color var(--text-color-3)
}
}
@ -162,7 +162,7 @@ $search-header-height = 3rem
#no-result {
margin auto
color var(--third-text-color)
color var(--text-color-4)
}
}
}

View File

@ -8,7 +8,7 @@ $friend-link-item-border-radius = 6px
keep-container(false, 0, 0, 2rem, 2rem)
.page-template-content {
color var(--default-text-color)
color var(--text-color-3)
h1
h2
@ -87,9 +87,9 @@ $friend-link-item-border-radius = 6px
justify-content center
width $friend-link-item-height - $friend-link-item-interval
height 100%
color var(--second-text-color)
color var(--text-color-2)
font-size 2rem
background var(--second-background-color)
background var(--background-color-2)
+keep-tablet() {
@ -123,7 +123,7 @@ $friend-link-item-border-radius = 6px
.name {
width 100%
height 60%
color var(--second-text-color)
color var(--text-color-2)
font-size 1.28rem
+keep-tablet() {
@ -134,7 +134,7 @@ $friend-link-item-border-radius = 6px
.description {
width 100%
height 40%
color var(--third-text-color)
color var(--text-color-4)
font-size 1rem

View File

@ -2,32 +2,34 @@ $li-border-radius = 0.4rem
$li-margin-bottom = 0.8rem
.post-tools-container {
position relative
box-sizing border-box
padding-top 2rem
.tools-list {
li {
display flex
align-items center
justify-content center
position relative
box-sizing border-box
width $post-tool-button-width
height $post-tool-button-width
margin-bottom $li-margin-bottom
color var(--default-text-color)
color var(--text-color-3)
font-size 1.2rem
background var(--background-color)
background var(--background-color-1)
border-radius 50%
cursor pointer
i {
color var(--default-text-color)
color var(--text-color-3)
}
&:hover {
color var(--background-color)
color var(--background-color-1)
background var(--primary-color)
i {
color var(--background-color)
color var(--background-color-1)
}
}
@ -39,13 +41,37 @@ $li-margin-bottom = 0.8rem
hover-style(true, 1.06, 1.06)
&.page-aside-toggle {
&.toggle-show-toc {
display none
+keep-tablet() {
display none !important
}
}
&.go-to-comments {
.post-comments-count {
position absolute
top 0
right -1rem
display none
align-items center
justify-content center
box-sizing border-box
min-width 1.1rem
height 1.1rem
padding 0 0.2rem
color var(--badge-color)
font-size 12px
background var(--badge-background-color)
border-radius 0.4rem
+keep-tablet() {
display none !important
}
}
}
}
}
}

View File

@ -32,7 +32,7 @@
top 0.4rem
right 0.3rem
z-index $z-index-8
color var(--default-text-color)
color var(--text-color-3)
font-size 1.1rem
visibility hidden

View File

@ -10,25 +10,25 @@ $tools-item-border-radius = 0.1rem
width $tools-item-width
height $tools-item-width
margin-bottom 0.2rem
color var(--default-text-color)
color var(--text-color-3)
font-size $tools-item-font-size
background var(--background-color)
background var(--background-color-1)
border-right none
border-radius $tools-item-border-radius
box-shadow 0.1rem 0.1rem 0.2rem var(--shadow-color)
cursor pointer
i {
color var(--default-text-color)
color var(--text-color-3)
}
&:hover {
color var(--background-color)
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
i {
color var(--background-color)
color var(--background-color-1)
}
}
@ -47,7 +47,7 @@ $tools-item-border-radius = 0.1rem
border-radius $tools-item-border-radius
&:hover {
color var(--background-color)
color var(--background-color-1)
background var(--primary-color)
box-shadow 0.2rem 0.2rem 0.4rem var(--shadow-color)
}
@ -61,13 +61,6 @@ $tools-item-border-radius = 0.1rem
opacity 0
transition-t("transform, opacity", "0, 0", "0.2, 0.2", "linear, linear")
.tool-expand-width {
+keep-tablet() {
display none
}
}
&.show {
transform translateX(0)
opacity 1

View File

@ -1,13 +1,25 @@
.post-toc-wrap {
position relative
box-sizing border-box
width 100%
height 100%
overflow-y auto
font-size 0.92rem
&::-webkit-scrollbar-thumb {
background var(--toc-scrollbar-color)
border-radius 0.3rem
}
&::-webkit-scrollbar-track {
background transparent
}
.post-toc {
ol {
margin 0
padding 0 2px 12px 10px
padding 0 0.1rem 0.8rem 0.6rem
text-align left
list-style none
@ -27,6 +39,7 @@
.nav-item {
margin-bottom 0.2rem
overflow hidden
line-height 1.8
white-space nowrap
@ -36,7 +49,7 @@
.nav {
.nav-child {
display hexo-config('toc.expand_all') ? block : none
display hexo-config('toc.expand_all') ? block:none
}
.active > .nav-child {
@ -54,7 +67,7 @@
.nav-number
.nav-text {
color var(--default-text-color)
color var(--toc-text-color)
}
.active > a {

View File

@ -1,217 +1,280 @@
$avatarWidth = 46px
$arrow-icon-width = 16px
$post-nav-max-width = 220px
$avatarWidth = 3rem
$arrow-icon-width = 1rem
$post-nav-max-width = 14rem
$article-title-font-size = 1.6rem
$toc-container-width = 15rem
.article-content-container {
keep-container(false, 0, 0, 2rem, 2rem)
.post-page-container {
position relative
display flex
justify-content space-between
box-sizing border-box
width 100%
height 100%
+keep-mobile() {
padding 1.2rem 0.2rem
box-shadow none
}
.article-title {
color var(--second-text-color)
font-weight 600
font-size $article-title-font-size
+keep-tablet() {
font-size $article-title-font-size * 0.9
&.show-toc {
.toc-content-container {
display block
}
+keep-mobile() {
font-size $article-title-font-size * 0.8
.article-content-container {
width 'calc(100% - %s)' % $toc-container-width
}
}
.article-header {
+keep-tablet() {
.toc-content-container {
display none !important
}
.article-content-container {
width 100% !important
}
}
.article-content-container {
position relative
box-sizing border-box
width 100%
height $avatarWidth
padding-left $avatarWidth
.avatar {
position absolute
top 0
left 0
box-sizing border-box
width $avatarWidth
height $avatarWidth
padding 1px
border 1px solid var(--border-color)
border-radius 50%
img {
width 100%
height 100%
background var(--avatar-background-color)
border-radius 50%
}
}
.info {
display flex
flex-direction column
justify-content space-between
box-sizing border-box
width 100%
height 100%
margin-left 10px
padding 2px 0
.author {
display flex
align-items center
font-weight 600
font-size 1.18rem
.name {
color var(--default-text-color)
}
.author-label {
margin-left 10px
padding 0 5px
color #fff
font-weight 500
font-size 0.8rem
background var(--selection-color)
border-radius 5px
}
}
}
}
.article-header
.article-header-meta-info {
margin-top 16px
+keep-tablet() {
transform scale(0.9)
transform-origin left top
}
}
.article-content {
margin-top $component-spacing-value
padding-bottom 10px
color var(--default-text-color)
word-wrap break-word
border-bottom 1px solid var(--border-color)
}
.post-tags-box {
display none
justify-content center
margin-top 1.6rem
font-size 1.1rem
+keep-tablet() {
display flex
}
height 100%
keep-container(false, 0, 0, 2rem, 2rem)
+keep-mobile() {
margin-top 1.2rem
font-size 1rem
padding 1.2rem 0.2rem
box-shadow none
&:hover {
box-shadow none
}
}
.tag-item {
margin 0 0.25rem
.article-title {
color var(--text-color-2)
font-weight 600
font-size $article-title-font-size
+keep-tablet() {
font-size $article-title-font-size * 0.9
}
+keep-mobile() {
font-size $article-title-font-size * 0.8
}
}
}
.post-copyright-info {
width 100%
margin-top $component-spacing-value
+keep-tablet() {
margin-top $component-spacing-value * 0.8
}
}
.article-nav {
height 40px
margin-top $component-spacing-value
.article-prev
.article-next {
.article-header {
position relative
box-sizing border-box
max-width $post-nav-max-width
height 100%
width 100%
height $avatarWidth
padding-left $avatarWidth
keep-container(true, 1.03, 1.03, 10px, 0)
.avatar {
position absolute
top 0
left 0
box-sizing border-box
width $avatarWidth
height $avatarWidth
padding 0.1rem
border 1px solid var(--border-color)
border-radius 50%
a {
position relative
display block
img {
width 100%
height 100%
background var(--avatar-background-color)
border-radius 50%
}
}
.info {
display flex
flex-direction column
justify-content space-between
box-sizing border-box
width 100%
height 100%
margin-left 0.8rem
padding 0.2rem 0
&.prev {
padding-left $arrow-icon-width
}
.author {
display flex
align-items center
font-weight 600
font-size 1.18rem
&.next {
padding-right $arrow-icon-width
}
.arrow-icon {
position absolute
top 0
width $arrow-icon-width
height 100%
&.left {
left 0
.name {
color var(--text-color-3)
}
&.right {
right 0
.author-label {
margin-left 0.8rem
padding 0 0.4rem
color #fff
font-weight 500
font-size 0.8rem
background var(--selection-color)
border-radius 0.4rem
}
}
}
}
.title {
.article-header
.article-header-meta-info {
margin-top 1rem
+keep-tablet() {
transform scale(0.9)
transform-origin left top
}
}
.article-content {
margin-top $component-spacing-value
padding-bottom 2rem
color var(--text-color-3)
word-wrap break-word
if (hexo-config('copyright_info.enable') == true) {
border-bottom 0.1rem dashed var(--border-color)
}
}
.post-tags-box {
display none
justify-content center
margin-top 1.6rem
font-size 1.1rem
+keep-tablet() {
display flex
}
+keep-mobile() {
margin-top 1.2rem
font-size 1rem
}
.tag-item {
margin 0 0.25rem
}
}
.post-copyright-info {
width 100%
margin-top $component-spacing-value
+keep-tablet() {
margin-top $component-spacing-value * 0.8
}
}
.article-nav {
height 2.8rem
margin-top $component-spacing-value
.article-prev
.article-next {
box-sizing border-box
max-width $post-nav-max-width
height 100%
keep-container(true, 1.03, 1.03, 0.8rem, 0)
a {
position relative
display block
box-sizing border-box
width 100%
height 100%
&.prev {
padding-left $arrow-icon-width
}
&.next {
padding-right $arrow-icon-width
}
.arrow-icon {
position absolute
top 0
width $arrow-icon-width
height 100%
&.left {
left 0
}
&.right {
right 0
}
}
.title {
width 100%
height 100%
}
}
}
.article-prev {
float left
}
.article-next {
float right
}
.post-nav-item {
display none
+keep-tablet() {
display inline-block
}
}
.post-nav-title-item {
overflow hidden
white-space nowrap
text-overflow ellipsis
+keep-tablet() {
display none
}
}
}
.article-prev {
float left
}
.article-next {
float right
}
.post-nav-item {
display none
+keep-tablet() {
display inline-block
}
}
}
.post-nav-title-item {
overflow hidden
white-space nowrap
text-overflow ellipsis
.toc-content-container {
position sticky
top $header-height + $component-spacing-value
display none
box-sizing border-box
width $toc-container-width
max-height 'calc(100vh - %s)' % ($header-height + $component-spacing-value)
padding 2rem 0 2rem 1.4rem
transition-t("top, display, max-height", "0, 0, 0", "0.2, 0.1, 0.2", "ease, ease, ease")
+keep-tablet() {
display none
}
.header-shrink & {
top $header-shrink-height + $component-spacing-value
max-height 'calc(100vh - %s)' % ($header-shrink-height + $component-spacing-value)
}
}
}

View File

@ -7,14 +7,14 @@ $category-name-font-size = 1.6rem
.category-name {
margin-bottom $component-spacing-value
padding-bottom 20px
color var(--second-text-color)
color var(--text-color-2)
font-weight 600
font-size $category-name-font-size
border-bottom 1px solid var(--border-color)
i {
color var(--second-text-color)
color var(--text-color-2)
}
+keep-tablet() {

View File

@ -20,7 +20,7 @@
span.all-category-list-count {
float right
color var(--default-text-color)
color var(--text-color-3)
&::before {

View File

@ -1,5 +1,5 @@
.home-content-container {
background var(--background-color)
background var(--background-color-1)
.home-article-list {
@ -13,7 +13,7 @@
position absolute
top 10px
right 12px
color var(--third-text-color)
color var(--text-color-4)
font-size 1.2rem
transform rotate(45deg)
@ -27,7 +27,7 @@
.home-article-title {
position relative
margin 0
color var(--second-text-color)
color var(--text-color-2)
font-weight 600
font-size 1.4rem
line-height 1.5
@ -46,7 +46,7 @@
.home-article-content {
margin 20px 0
color var(--default-text-color)
color var(--text-color-3)
text-align justify
word-wrap break-word
}
@ -56,10 +56,9 @@
display flex
align-items center
justify-content space-between
color var(--third-text-color)
color var(--text-color-4)
font-size 0.92rem
.home-article-meta-info {
letter-spacing 0.5px
@ -90,6 +89,12 @@
}
.read-more {
display flex
align-items center
}
hr {
flex 1
height 1px
@ -98,8 +103,9 @@
border none
}
a {
color var(--third-text-color)
color var(--text-color-4)
&:hover {
color var(--primary-color)

View File

@ -1,14 +1,9 @@
$temp-width = hexo-config('style.left_side_width')
$page-aside-width = $temp-width ? convert($temp-width) : 260px
.page-container {
position relative
box-sizing border-box
width 100%
height auto
background var(--background-color)
transition-t("padding-left", "0", "0.3", "ease-out")
background var(--background-color-1)
+keep-tablet() {
padding-left 0 !important
@ -17,9 +12,10 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
.page-main-content {
position relative
box-sizing border-box
padding-top $header-height
&.home {
&.is-home {
.transparent-1 {
background var(--header-transparent-background-1)
}
@ -61,7 +57,7 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
box-sizing border-box
width 100%
height $header-height
transition-t("transform, padding-left, height", "0, 0, 0", "0.3, 0.2, 0.2", "ease-out, linear, ease")
transition-t("transform, height", "0, 0", "0.3, 0.2", "ease-out, ease")
&.hide {
transform translateY(-105%)
@ -113,6 +109,11 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
width $main-content-width
max-width $content-max-width
height 100%
transition-t("max-width, width", "0, 0", "0.1, 0.1", "ease, ease")
.has-toc & {
max-width $has-toc-content-max-width
}
+keep-tablet() {
width $main-content-width-tablet
@ -131,35 +132,12 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
}
.page-aside {
position fixed
top 0
bottom 0
left - $page-aside-width
z-index $z-index-6
box-sizing border-box
width $page-aside-width
height 100%
padding 20px
overflow-y auto
background var(--background-color)
hover-style(false, 0, 0)
transition-t("left, transform", "0, 0", "0.3, 0.2", "ease-out, linear")
+keep-tablet() {
left 0 !important
display none !important
}
}
.post-tools {
position fixed
top $header-height + $component-spacing-value
right $component-spacing-value
transition-t("top", "0", "0.2", "ease")
left 'calc((100vw - %s / 2) - 5rem)' % $content-max-width
opacity 0
transition-t("top, transform, opacity, left", "0, 0, 0.2, 0", "0.2, 0.2, 0.2, 0.2", "ease, ease, ease, ease")
.header-shrink & {
top $header-shrink-height + $component-spacing-value
@ -167,25 +145,17 @@ $page-aside-width = $temp-width ? convert($temp-width) : 260px
+keep-tablet() {
top $header-shrink-height * 0.9 + $component-spacing-value
}
+keep-mobile() {
top $header-shrink-height * 0.8 + $component-spacing-value
}
}
+keep-tablet() {
top $header-height * 0.9 + $component-spacing-value
right 10px
transform scale(0.82)
transform-origin right top
}
+keep-mobile() {
top $header-height * 0.8 + $component-spacing-value
right 5px
transform scale(0.72)
display none
}
}

View File

@ -7,14 +7,14 @@ $tag-name-font-size = 1.6rem
.tag-name {
margin-bottom $component-spacing-value
padding-bottom 20px
color var(--second-text-color)
color var(--text-color-2)
font-weight 600
font-size $tag-name-font-size
border-bottom 1px solid var(--border-color)
i {
color var(--second-text-color)
color var(--text-color-2)
}
+keep-tablet() {

View File

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

View File

@ -7,9 +7,11 @@ KEEP.initCodeBlockTools = () => {
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 { style: codeCopyStyle } = KEEP.theme_config?.code_copy || {}
const { style: codeBlockStyle } = KEEP.theme_config?.code_block || {}
const { style: codeBlockToolsStyle } = KEEP.theme_config?.code_block?.tools || {}
const isMac = (codeCopyStyle || codeBlockStyle || codeBlockToolsStyle || 'default') === 'mac'
const foldedIconClassName = isMac ? 'fas fa-chevron-left' : 'fas fa-chevron-right'
const {
copy: copyLang,
@ -17,7 +19,7 @@ KEEP.initCodeBlockTools = () => {
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>`
const foldDom = `<span class="tool fold tooltip" data-content="${foldLang}" data-offset-y="-2px"><i class="fas fa-chevron-down"></i></span>`
document.querySelectorAll('figure.highlight').forEach((element) => {
let codeLang = element.classList.length ? element.classList[1].toUpperCase() : ''
@ -26,6 +28,9 @@ KEEP.initCodeBlockTools = () => {
}
const highlightContainer = document.createElement('div')
highlightContainer.classList.add('highlight-container')
if (isMac) {
highlightContainer.classList.add('mac')
}
element.wrap(highlightContainer)
const codeLangDom = `${codeLang ? '<span class="code-lang">' + codeLang + '</span>' : ''}`
@ -34,7 +39,7 @@ KEEP.initCodeBlockTools = () => {
'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>
<span class="tool copy tooltip" data-content="${copyLang}" data-offset-y="-2px"><i class="fas fa-copy"></i></span>
</div>`
)
const codeToolsBox = element.parentNode.querySelector('.code-tools-box')

View File

@ -1,45 +0,0 @@
/* global KEEP */
function initLeftSideToggle() {
KEEP.utils.leftSideToggle = {
toggleBar: document.querySelector('.page-aside-toggle'),
pageTopDom: document.querySelector('.page-main-content-top'),
containerDom: document.querySelector('.page-container'),
leftAsideDom: document.querySelector('.page-aside'),
toggleBarIcon: document.querySelector('.page-aside-toggle i'),
isOpenPageAside: false,
initToggleBarButton() {
this.toggleBar &&
this.toggleBar.addEventListener('click', () => {
this.isOpenPageAside = !this.isOpenPageAside
KEEP.styleStatus.isOpenPageAside = this.isOpenPageAside
KEEP.setStyleStatus()
this.changePageLayoutWhenOpenToggle(this.isOpenPageAside)
})
},
changePageLayoutWhenOpenToggle(isOpen) {
this.toggleBarIcon &&
(this.toggleBarIcon.className = isOpen ? 'fas fa-outdent' : 'fas fa-indent')
const pageAsideWidth = KEEP.theme_config.style.left_side_width || '260px'
this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0'
this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`
},
pageAsideHandleOfTOC(isOpen) {
this.toggleBar.style.display = 'flex'
this.isOpenPageAside = isOpen
this.changePageLayoutWhenOpenToggle(isOpen)
}
}
KEEP.utils.leftSideToggle.initToggleBarButton()
}
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
initLeftSideToggle()
} else {
window.addEventListener('DOMContentLoaded', initLeftSideToggle)
}

View File

@ -1,7 +1,7 @@
/* global KEEP */
window.addEventListener('DOMContentLoaded', () => {
const { version, local_search, code_block_tools, code_copy, lazyload } = KEEP.theme_config
const { version, local_search, code_block, code_copy, lazyload } = KEEP.theme_config
KEEP.themeInfo = {
theme: `Keep v${version}`,
@ -15,7 +15,7 @@ window.addEventListener('DOMContentLoaded', () => {
isExpandPageWidth: false,
isDark: false,
fontSizeLevel: 0,
isOpenPageAside: true
isShowToc: true
}
// print theme base info
@ -56,7 +56,11 @@ window.addEventListener('DOMContentLoaded', () => {
KEEP.initLocalSearch()
}
if (code_block_tools?.enable === true || code_copy?.enable === true) {
if (
code_block?.tools?.enable === true ||
code_block?.enable === true ||
code_copy?.enable === true
) {
KEEP.initCodeBlockTools()
}

127
source/js/post-helper.js Normal file
View File

@ -0,0 +1,127 @@
/* global KEEP */
function initToggleShowToc() {
KEEP.utils.postHelper = {
postPageContainerDom: document.querySelector('.post-page-container'),
toggleShowTocBtnDom: document.querySelector('.toggle-show-toc'),
toggleShowTocIcon: document.querySelector('.toggle-show-toc i'),
mainContentDom: document.querySelector('.main-content'),
postToolsDom: document.querySelector('.post-tools'),
goToCommentsDom: document.querySelector('.post-tools .go-to-comments'),
isShowToc: false,
initToggleToc() {
this.toggleShowTocBtnDom &&
this.toggleShowTocBtnDom.addEventListener('click', () => {
this.isShowToc = !this.isShowToc
KEEP.styleStatus.isShowToc = this.isShowToc
KEEP.setStyleStatus()
this.handleToggleToc(this.isShowToc)
})
},
handleToggleToc(isOpen) {
if (isOpen) {
this.postPageContainerDom.classList.add('show-toc')
document.body.classList.add('has-toc')
} else {
this.postPageContainerDom.classList.remove('show-toc')
document.body.classList.remove('has-toc')
}
setTimeout(() => {
this.setPostToolsLeft()
}, 120)
},
hasToc(isOpen) {
this.toggleShowTocBtnDom.style.display = 'flex'
this.isShowToc = isOpen
this.handleToggleToc(isOpen)
},
setPostToolsLeft(mcw) {
const mainContainerWidth = mcw
? mcw
: this.mainContentDom.getBoundingClientRect().width.toFixed(0)
let offsetX = 5
if (window.innerWidth <= 800) {
offsetX = 3
}
this.postToolsDom.style.opacity = `1`
this.postToolsDom.style.left = `calc((100vw - ${mainContainerWidth}px) / 2 - ${offsetX}rem)`
},
initSetPostToolsLeft() {
setTimeout(() => {
this.setPostToolsLeft()
}, 150)
window.addEventListener('resize', () => {
this.setPostToolsLeft()
})
},
// go comment anchor
goToComments() {
const commentsAnchor = document.querySelector('#comments-anchor')
if (this.goToCommentsDom && commentsAnchor) {
this.goToCommentsDom.addEventListener('click', (event) => {
event.preventDefault()
let winScrollY = window.scrollY
winScrollY = winScrollY === 0 ? -20 : winScrollY
const offset = commentsAnchor.getBoundingClientRect().top + winScrollY
window.anime({
targets: document.scrollingElement,
duration: 300,
easing: 'linear',
scrollTop: offset,
complete: () => {
setTimeout(() => {
KEEP.utils.pageTop_dom.classList.add('hide')
}, 150)
}
})
})
}
},
// watch comments count
watchPostCommentsCount() {
const commentsCountDom = this.postToolsDom.querySelector('.post-comments-count')
if (!commentsCountDom) return
const config = { attributes: true, childList: true }
const callback = function (mutationsList) {
mutationsList.forEach((item) => {
if (item.type === 'childList') {
const count = Number(item.target.innerHTML)
if (count > 0) {
commentsCountDom.style.display = 'flex'
if (count > 99) {
commentsCountDom.innerHTML = '99+'
observer.disconnect()
}
}
}
})
}
const observer = new MutationObserver(callback)
observer.observe(commentsCountDom, config)
}
}
KEEP.utils.postHelper.initToggleToc()
KEEP.utils.postHelper.initSetPostToolsLeft()
KEEP.utils.postHelper.goToComments()
KEEP.utils.postHelper.watchPostCommentsCount()
}
if (KEEP.theme_config.pjax.enable === true && KEEP.utils) {
initToggleShowToc()
} else {
window.addEventListener('DOMContentLoaded', initToggleShowToc)
}

View File

@ -1,9 +1,10 @@
/* global KEEP */
function initTOC() {
KEEP.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li')
const postPageContainerDom = document.querySelector('.post-page-container')
const tocContentContainer = document.querySelector('.toc-content-container')
if (KEEP.utils.navItems.length > 0) {
if (KEEP.utils.hasToc) {
KEEP.utils = {
...KEEP.utils,
@ -28,16 +29,19 @@ function initTOC() {
)
element.addEventListener('click', (event) => {
event.preventDefault()
const offset = target.getBoundingClientRect().top + window.scrollY
let winScrollY = window.scrollY
winScrollY = winScrollY === 0 ? -20 : winScrollY
const offset = target.getBoundingClientRect().top + winScrollY
window.anime({
targets: document.scrollingElement,
duration: 500,
easing: 'linear',
scrollTop: offset - 10,
complete: function () {
complete: () => {
history.pushState(null, document.title, element.href)
setTimeout(() => {
KEEP.utils.pageTop_dom.classList.add('hide')
}, 100)
}, 150)
}
})
})
@ -59,7 +63,7 @@ function initTOC() {
if (parent.matches('li')) parent.classList.add('active')
parent = parent.parentNode
}
// Scrolling to center active TOC element if TOC content is taller then viewport.
// Scrolling to center active TOC element if TOC content is taller than viewport.
const tocElement = document.querySelector('.post-toc-wrap')
window.anime({
targets: tocElement,
@ -73,34 +77,33 @@ function initTOC() {
})
},
showPageAsideWhenHasTOC() {
handleShowWhenHasToc() {
const openHandle = () => {
const styleStatus = KEEP.getStyleStatus()
const key = 'isOpenPageAside'
const key = 'isShowToc'
if (styleStatus && styleStatus.hasOwnProperty(key)) {
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(styleStatus[key])
KEEP.utils.postHelper.hasToc(styleStatus[key])
} else {
KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(true)
KEEP.utils.postHelper.hasToc(true)
}
}
const initOpenKey = 'init_open'
if (KEEP.theme_config.toc.hasOwnProperty(initOpenKey)) {
KEEP.theme_config.toc[initOpenKey]
? openHandle()
: KEEP.utils.leftSideToggle.pageAsideHandleOfTOC(false)
KEEP.theme_config.toc[initOpenKey] ? openHandle() : KEEP.utils.postHelper.hasToc(false)
} else {
openHandle()
}
}
}
KEEP.utils.showPageAsideWhenHasTOC()
KEEP.utils.handleShowWhenHasToc()
KEEP.utils.registerSidebarTOC()
} else {
const pageAsideDom = document.querySelector('.page-aside')
pageAsideDom && KEEP.utils.pageContainer_dom.removeChild(pageAsideDom)
if (tocContentContainer && postPageContainerDom) {
postPageContainerDom.removeChild(tocContentContainer)
}
}
}

View File

@ -19,6 +19,7 @@ KEEP.initUtils = () => {
isHasScrollProgressBar: false,
isHasScrollPercent: false,
isHeaderTransparent: false,
hasToc: false,
initData() {
const { scroll, first_screen } = KEEP.theme_config.style
@ -76,9 +77,7 @@ KEEP.initUtils = () => {
registerWindowScroll() {
window.addEventListener('scroll', () => {
// style handle when scroll
if (this.isHasScrollPercent || this.isHasScrollProgressBar) {
this.styleHandleWhenScroll()
}
this.styleHandleWhenScroll()
// TOC scroll handle
if (KEEP.theme_config.toc.enable && KEEP.utils.hasOwnProperty('findActiveIndexByTOC')) {
@ -131,77 +130,22 @@ KEEP.initUtils = () => {
})
},
// toggle content area width
contentAreaWidthAdjust() {
const toolExpandDom = document.querySelector('.tool-expand-width')
const headerContentDom = document.querySelector('.header-content')
const mainContentDom = document.querySelector('.main-content')
const iconDom = toolExpandDom.querySelector('i')
const defaultMaxWidth = KEEP.theme_config.style.content_max_width || '1000px'
const expandMaxWidth = '90%'
let headerMaxWidth = defaultMaxWidth
let isExpand = false
if (
KEEP.theme_config.style.first_screen.enable === true &&
window.location.pathname === '/'
) {
headerMaxWidth = parseInt(defaultMaxWidth) * 1.2 + 'px'
}
const setPageWidth = (isExpand) => {
KEEP.styleStatus.isExpandPageWidth = isExpand
KEEP.setStyleStatus()
if (isExpand) {
iconDom.classList.remove('fa-up-right-and-down-left-from-center')
iconDom.classList.add('fa-down-left-and-up-right-to-center')
headerContentDom.style.maxWidth = expandMaxWidth
mainContentDom.style.maxWidth = expandMaxWidth
} else {
iconDom.classList.remove('fa-down-left-and-up-right-to-center')
iconDom.classList.add('fa-up-right-and-down-left-from-center')
headerContentDom.style.maxWidth = headerMaxWidth
mainContentDom.style.maxWidth = defaultMaxWidth
}
}
const initPageWidth = () => {
const styleStatus = KEEP.getStyleStatus()
if (styleStatus) {
isExpand = styleStatus.isExpandPageWidth
setPageWidth(isExpand)
}
}
initPageWidth()
toolExpandDom.addEventListener('click', () => {
isExpand = !isExpand
setPageWidth(isExpand)
})
},
// go comment anchor
goComment() {
this.goComment_dom = document.querySelector('.go-comment')
if (this.goComment_dom) {
this.goComment_dom.addEventListener('click', () => {
document.querySelector('#comment-anchor').scrollIntoView()
})
}
},
// get dom element height
getElementHeight(selectors) {
const dom = document.querySelector(selectors)
return dom ? dom.getBoundingClientRect().height : 0
},
// init first screen height
initFirstScreenHeight() {
this.firstScreen_dom && (this.firstScreen_dom.style.height = this.innerHeight + 'px')
// init has TOC
initHasToc() {
const tocNavDoms = document.querySelectorAll('.post-toc-wrap .post-toc li')
if (tocNavDoms.length > 0) {
this.hasToc = true
document.body.classList.add('has-toc')
} else {
this.hasToc = false
document.body.classList.remove('has-toc')
}
},
// init page height handle
@ -223,20 +167,21 @@ KEEP.initUtils = () => {
// zoom in image
zoomInImage() {
const SIDE_GAP = 30
let SIDE_GAP = 40
let isZoomIn = false
let curWinScrollY = 0
let selectedImgDom = null
const imgDomList = document.querySelectorAll('.markdown-body img')
const imgDomList = document.querySelectorAll('.keep-markdown-body img')
const zoomInImgMask = document.querySelector('.zoom-in-image-mask')
const zoomInImg = zoomInImgMask.querySelector('.zoom-in-image')
const zoomOut = () => {
if (isZoomIn) {
isZoomIn = false
curWinScrollY = 0
zoomInImg && (zoomInImg.style.transform = `scale(1)`)
zoomInImgMask && zoomInImgMask.classList.remove('show')
const timer = setTimeout(() => {
clearTimeout(timer)
setTimeout(() => {
selectedImgDom && selectedImgDom.classList.remove('hide')
}, 300)
}
@ -249,15 +194,30 @@ KEEP.initUtils = () => {
})
document.addEventListener('scroll', () => {
zoomOut()
if (isZoomIn && Math.abs(curWinScrollY - window.scrollY) >= 50) {
zoomOut()
}
})
}
const setSideGap = () => {
const w = document.body.offsetWidth
if (w <= 500) {
SIDE_GAP = 10
} else if (w <= 800) {
SIDE_GAP = 20
} else {
SIDE_GAP = 40
}
}
if (imgDomList.length) {
zoomOutHandle()
imgDomList.forEach((img) => {
img.addEventListener('click', () => {
curWinScrollY = window.scrollY
isZoomIn = !isZoomIn
setSideGap()
zoomInImg.setAttribute('src', img.getAttribute('src'))
selectedImgDom = img
if (isZoomIn) {
@ -377,17 +337,30 @@ KEEP.initUtils = () => {
const init = () => {
// tooltip
document.querySelectorAll('.tooltip').forEach((element) => {
const { content } = element.dataset
const { content, offsetX, offsetY } = element.dataset
let style = ''
let sTop = ''
let sLeft = ''
if (offsetX) {
sTop = `left: ${offsetX};`
}
if (offsetY) {
sLeft = `top: ${offsetY};`
}
if (offsetX || offsetY) {
style = ` style="${sLeft}${sTop}"`
}
if (content) {
element.insertAdjacentHTML(
'afterbegin',
`<span class="tooltip-content">${content}</span>`
`<span class="tooltip-content"${style}>${content}</span>`
)
}
})
// tooltip-img
const imgsSet = {}
const toggleShowImg = (dom, nameIdx) => {
@ -458,17 +431,11 @@ KEEP.initUtils = () => {
// global font adjust
KEEP.utils.globalFontAdjust()
// adjust content area width
KEEP.utils.contentAreaWidthAdjust()
// go comment
KEEP.utils.goComment()
// init page height handle
KEEP.utils.initPageHeightHandle()
// init first screen height
KEEP.utils.initFirstScreenHeight()
// check whether TOC exists
KEEP.utils.initHasToc()
// big image viewer handle
KEEP.utils.zoomInImage()