-
-
+ <% if (theme.style.avatar && config.author) { %>
+ <%= page.title %>
+ <%= page.title %>
+
+ <% } %>
+ <%- image_tag(theme.style.avatar) %>
+
+
+
+
+
+
<%- page.content %>
diff --git a/scripts/helpers/helper.js b/scripts/helpers/helper.js
index 2791024..d7431b0 100644
--- a/scripts/helpers/helper.js
+++ b/scripts/helpers/helper.js
@@ -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);
});
diff --git a/source/css/layout/_partial/article-meta-info.styl b/source/css/layout/_partial/article-meta-info.styl
index e7b004b..7e107c2 100644
--- a/source/css/layout/_partial/article-meta-info.styl
+++ b/source/css/layout/_partial/article-meta-info.styl
@@ -13,6 +13,7 @@
}
}
+
.article-tags, .article-categories {
display: inline;
@@ -28,4 +29,19 @@
}
}
}
-}
\ No newline at end of file
+
+
+ .article-wordcount, .article-tags {
+ +ils-mobile() {
+ display: none;
+ }
+ }
+
+ .article-min2read, .article-categories {
+
+ +ils-tablet() {
+ display: none;
+ }
+
+ }
+}
diff --git a/source/css/layout/_partial/header.styl b/source/css/layout/_partial/header.styl
index d9e7136..df1620e 100644
--- a/source/css/layout/_partial/header.styl
+++ b/source/css/layout/_partial/header.styl
@@ -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);
}
}
diff --git a/source/css/layout/article-content.styl b/source/css/layout/article-content.styl
index 7b5c232..7e1c5c2 100644
--- a/source/css/layout/article-content.styl
+++ b/source/css/layout/article-content.styl
@@ -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);
diff --git a/source/css/layout/common/variables.styl b/source/css/layout/common/variables.styl
index aacbbe7..c6bbdbc 100644
--- a/source/css/layout/common/variables.styl
+++ b/source/css/layout/common/variables.styl
@@ -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;
diff --git a/source/js/left-side-toggle.js b/source/js/left-side-toggle.js
index a57ed9a..242e65d 100644
--- a/source/js/left-side-toggle.js
+++ b/source/js/left-side-toggle.js
@@ -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%';
diff --git a/source/js/toc.js b/source/js/toc.js
index 018bf0a..a39a819 100644
--- a/source/js/toc.js
+++ b/source/js/toc.js
@@ -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)
}
});
diff --git a/source/js/utils.js b/source/js/utils.js
index 02e1faa..c71333c 100644
--- a/source/js/utils.js
+++ b/source/js/utils.js
@@ -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;
},