lianglianglee
/
hexo-theme-keep
mirror of https://github.com/liangliangle/hexo-theme-keep.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

perf: optimize article content page

This commit is contained in:
XPoet 2020-10-27 18:11:10 +08:00
parent 3a7db2c1bb
commit 9de26cb12d
10 changed files with 164 additions and 83 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
layout/_partial/article-meta-info.ejs
View File

@ -26,14 +26,9 @@
</ul>
</span>
<% } %>
<% if (theme.website_count.busuanzi_count.enable && theme.website_count.busuanzi_count.page_pv && is_post()) { %>
<span class="article-pv article-meta-item">
<i class="fa fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>
<% if(is_post() && theme.post_wordcount.enable && theme.post_wordcount.wordcount){ %>
<span class="article-wordcount article-meta-item">
<i class="fa fa-book"></i> <span><%= wordcount(page.content) %> <%- __('wordcount') %></span>
<i class="fa fa-file-word-o"></i> <span><%= wordcount(page.content) %> <%- __('wordcount') %></span>
</span>
<% } %>
<% if(is_post() && theme.post_wordcount.enable && theme.post_wordcount.min2read){ %>
@ -41,4 +36,9 @@
<i class="fa fa-clock-o"></i> <span><%= min2read(page.content) %> <%- __('min2read') %></span>
</span>
<% } %>
<% if (is_post() && theme.website_count.busuanzi_count.enable && theme.website_count.busuanzi_count.page_pv) { %>
<span class="article-pv article-meta-item">
<i class="fa fa-eye"></i> <span id="busuanzi_value_page_pv"></span>
</span>
<% } %>
</div>

15
layout/article-content.ejs
View File

@ -2,12 +2,25 @@
<div class="article-content-container">
<div class="article-title">
<h3><a class="title-hover-animation"><%= page.title %></a></h3>
<span class="title-hover-animation"><%= page.title %></span>
</div>
<% if (theme.style.avatar && config.author) { %>
<div class="article-header">
<div class="avatar">
<%- image_tag(theme.style.avatar) %>
</div>
<div class="info">
<div class="author">
<span><%= config.author %></span>
<span class="level">Lv<%- getLevel(site.posts.length) %></span>
</div>
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</div>
</div>
</div>
<% } %>
<div class="article-content markdown-body">
<%- page.content %>

4
scripts/helpers/helper.js
View File

@ -22,3 +22,7 @@ hexo.extend.helper.register('createNewArchivePosts', function (posts) {
postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix()));
return postList;
});
hexo.extend.helper.register('getLevel', function (postCount) {
return Math.ceil(postCount / 10);
});

16
source/css/layout/_partial/article-meta-info.styl
View File

@ -13,6 +13,7 @@
}
}
.article-tags, .article-categories {
display: inline;
@ -28,4 +29,19 @@
}
}
}
.article-wordcount, .article-tags {
+ils-mobile() {
display: none;
}
}
.article-min2read, .article-categories {
+ils-tablet() {
display: none;
}
}
}

4
source/css/layout/_partial/header.styl
View File

@ -272,12 +272,12 @@ $header-progress-height = 2.8px;
.menu-item {
a:hover {
&::after {
bottom: -($header-shrink-height / 2 - 10);
bottom: -($header-shrink-height / 2 - 11);
}
}
.active::after {
bottom: -($header-shrink-height / 2 - 10);
bottom: -($header-shrink-height / 2 - 11);
}
}

72
source/css/layout/article-content.styl
View File

@ -1,6 +1,8 @@
@require 'common/variables.styl'
@require 'common/magic-theme.styl'
$avatarWidth = 46px;
.article-content-container {
background: var(--background-color);
@ -9,10 +11,8 @@
magic-container(1.008, 1.002, 30px);
}
.article-title {
h3 {
color: var(--second-text-color);
font-weight: 600;
font-size: 1.8em;
@ -23,21 +23,75 @@
+ils-mobile() {
font-size: 1.2em;
}
margin: 0;
}
a {
color: var(--second-text-color);
.article-header {
margin-top: 16px;
position: relative;
padding-left: $avatarWidth;
width: 100%;
height: $avatarWidth;
box-sizing: border-box;
+ils-tablet() {
transform: scale(0.9);
transform-origin: left top;
}
.avatar {
position: absolute;
top: 0
left: 0;
width: $avatarWidth;
height: $avatarWidth;
padding: 1px;
box-sizing: border-box;
border: 1px solid var(--border-color);
border-radius: 50%;
img {
border-radius: 50%;
width: 100%;
height: 100%;
}
}
.meta-info {
margin: 10px 0 30px 0;
.info {
padding: 2px 0;
margin-left: 10px;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 100%;
height: 100%;
.author {
font-weight: 600;
font-size: 1.18em;
display: flex;
align-items: center;
.level {
margin-left: 10px;
color: #fff;
font-size: 12px;
font-weight: 500;
background: var(--selection-color);
padding: 0 4px;
border-radius: 5px;
}
}
}
}
.article-content {
margin-top: 30px;
text-align: justify;
padding-bottom: 30px;
border-bottom: 1px solid var(--border-color);

6
source/css/layout/common/variables.styl
View File

@ -80,12 +80,8 @@ $dark-selection-color = $selection-color;
// ========================================================================
// font
// ========================================================================
// 'PingHei', 'PingFang SC', 'Microsoft YaHei';
// 'PingFang SC', 'Hiragino Sans GB', 'STHeiti Light';
// 'Microsoft YaHei', 'SimHei', 'WenQuanYi Micro Hei', sans-serif;
// "Exo 2", "Trebuchet MS", "Helvetica", "Arial";
$default-font-family = Optima-Regular, Optima, PingFangSC-light, PingFangTC-light, 'PingFang SC', Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
//$default-font-family = Roboto, Helvetica, Tahoma, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", "Noto Sans CJK", sans-serif;
//$default-font-family = -apple-system, system-ui, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Helvetica Neue, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial;
$default-font-size = 15.2px;
$default-font-line-height = 20px;
$default-font-weight = 400;

1
source/js/left-side-toggle.js
View File

@ -33,7 +33,6 @@ window.addEventListener('DOMContentLoaded', () => {
const pageAsideWidth = '258px';
this.containerDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
this.pageTopDom.style.paddingLeft = isOpen ? pageAsideWidth : '0';
this.leftAsideDom.style.left = isOpen ? '0' : `-${pageAsideWidth}`;
this.headerContentDom.style.width = isOpen ? '76%' : '62%';
this.mainContentDom.style.width = isOpen ? '76%' : '62%';

3
source/js/toc.js
View File

@ -3,7 +3,6 @@ window.addEventListener('DOMContentLoaded', () => {
ILS.utils.navItems = document.querySelectorAll('.post-toc-wrap .post-toc li');
ILS.utils.articleToc_dom = document.querySelector('.article-toc');
ILS.utils.postTocWrap_dom = document.querySelector('.post-toc-wrap');
ILS.utils.headerWrapper_dom = document.querySelector('.header-wrapper');
if (ILS.utils.navItems.length > 0) {
@ -37,7 +36,7 @@ window.addEventListener('DOMContentLoaded', () => {
scrollTop: offset - 10,
complete: function () {
setTimeout(() => {
ILS.utils.headerWrapper_dom.style.display = 'none';
ILS.utils.pageTop_dom.style.transform = 'translateY(-100%)';
}, 100)
}
});

6
source/js/utils.js
View File

@ -9,7 +9,7 @@ ILS.utils = {
...ILS.utils,
headerProgress_dom: document.querySelector('.header-progress'),
headerWrapper_dom: document.querySelector('.header-wrapper'),
pageTop_dom: document.querySelector('.page-main-content-top'),
// Scroll Style Handle
prevScrollValue: 0,
@ -27,9 +27,9 @@ ILS.utils = {
// hide header handle
if (scrollTop > this.prevScrollValue && scrollTop > 500) {
this.headerWrapper_dom.style.display = 'none';
this.pageTop_dom.style.transform = 'translateY(-100%)';
} else {
this.headerWrapper_dom.style.display = 'flex';
this.pageTop_dom.style.transform = 'translateY(0)';
}
this.prevScrollValue = scrollTop;
},