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

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

@ -26,19 +26,19 @@
</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){ %>
<span class="article-min2read article-meta-item">
<i class="fa fa-clock-o"></i> <span><%= min2read(page.content) %> <%- __('min2read') %></span>
<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>

21
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>
<div class="meta-info">
<%- partial('_partial/article-meta-info', {articleObject: page, index: true}) %>
</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 %>

42
scripts/helpers/helper.js
View File

@ -1,24 +1,28 @@
hexo.extend.helper.register('isInHomePaging', function (pagePath, route) {
if (pagePath.length > 5 && route === '/') {
return pagePath.slice(0, 5) === 'page/';
} else {
return false;
}
if (pagePath.length > 5 && route === '/') {
return pagePath.slice(0, 5) === 'page/';
} else {
return false;
}
});
hexo.extend.helper.register('createNewArchivePosts', function (posts) {
const postList = [], postYearList = [];
posts.forEach(post => postYearList.push(post.date.year()));
Array.from(new Set(postYearList)).forEach(year => {
postList.push({
year: year,
postList: []
})
});
postList.sort((a, b) => b.year - a.year)
postList.forEach(item => {
posts.forEach(post => item.year === post.date.year() && item.postList.push(post))
});
postList.forEach(item => item.postList.sort((a, b) => b.date.unix() - a.date.unix()));
return postList;
const postList = [], postYearList = [];
posts.forEach(post => postYearList.push(post.date.year()));
Array.from(new Set(postYearList)).forEach(year => {
postList.push({
year: year,
postList: []
})
});
postList.sort((a, b) => b.year - a.year)
postList.forEach(item => {
posts.forEach(post => item.year === post.date.year() && item.postList.push(post))
});
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);
}
}

92
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,35 +11,87 @@
magic-container(1.008, 1.002, 30px);
}
.article-title {
color: var(--second-text-color);
font-weight: 600;
font-size: 1.8em;
h3 {
font-weight: 600;
font-size: 1.8em;
+ils-tablet() {
font-size: 1.5em;
}
+ils-mobile() {
font-size: 1.2em;
}
margin: 0;
+ils-tablet() {
font-size: 1.5em;
}
a {
color: var(--second-text-color);
+ils-mobile() {
font-size: 1.2em;
}
}
.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%;
}
}
.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;
}
}
}
}
.meta-info {
margin: 10px 0 30px 0;
}
.article-content {
margin-top: 30px;
text-align: justify;
padding-bottom: 30px;
border-bottom: 1px solid var(--border-color);

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

@ -6,25 +6,25 @@
// layout
// ========================================================================
if (hexo-config('magic.enable')) {
$header-height = 72px; // magic 风格：头部默认高度
$header-height = 72px; // magic 风格：头部默认高度
} else {
$header-height = 100px; // normal 风格：头部默认高度
$header-height = 100px; // normal 风格：头部默认高度
}
$main-content-width = 62%; // 中间内容区域宽度（PC）
$main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
$main-content-width = 62%; // 中间内容区域宽度（PC）
$main-content-width-tablet = 80%; // 中间内容区域宽度（平板）
$main-content-width-mobile = 88%; // 中间内容区域宽度（手机）
$header-shrink-height = 56px; // 头部收缩高度
$circle-button-width = 40px; // tools 圆形工具按钮宽度
$tools-button-width = 32px; // tools 方形工具按钮宽度
$component-interspace = 40px; // 组件/模块的间隔值（px）
$header-shrink-height = 56px; // 头部收缩高度
$circle-button-width = 40px; // tools 圆形工具按钮宽度
$tools-button-width = 32px; // tools 方形工具按钮宽度
$component-interspace = 40px; // 组件/模块的间隔值（px）
// ========================================================================
// 媒体查询
// ========================================================================
$media-max-width = 760px; // 媒体查询最大宽度 (平板)
$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
$media-max-width = 760px; // 媒体查询最大宽度 (平板)
$media-max-width-mobile = 480px; // 媒体查询最大宽度（手机）
ils-tablet()
@media (max-width: $media-max-width)
@ -54,15 +54,15 @@ $z-index-9 = 1009;
// ========================================================================
// normal mode color
$primary-color = convert(hexo-config("style.primary_color")) || #0066CC;
$background-color = #fff; // normal 风格 背景颜色
$magic-background-color = #fafafa; // magic 风格 背景颜色
$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = #eee; // 第四文本颜色
$border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色
$background-color = #fff; // normal 风格 背景颜色
$magic-background-color = #fafafa; // magic 风格 背景颜色
$normal-text-color = #43404d; // 通用文本颜色（默认字体颜色）
$first-text-color = darken($normal-text-color, 8%); // 第一文本颜色
$second-text-color = darken($normal-text-color, 4%); // 第二文本颜色
$third-text-color = lighten($normal-text-color, 40%); // 第三文本颜色
$fourth-text-color = #eee; // 第四文本颜色
$border-color = darken($background-color, 30%); // 边框颜色
$selection-color = lighten($primary-color, 10%); // 文字选中的颜色
// dark mode color
$dark-primary-color = $primary-color;
@ -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;
},