xaoxuu
/
hexo-theme-stellar
mirror of https://github.com/xaoxuu/hexo-theme-stellar
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

related posts

This commit is contained in:
xaoxuu 2022-10-23 16:56:27 +08:00
parent 8817f58eef
commit b46b4ad443
6 changed files with 58 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
_config.yml
View File

@ -55,7 +55,6 @@ article:
related_posts:
enable: false
max_count: 5
auto_cover: true # 如果没有封面就根据 tags 作为关键词搜索封面，开了此项将不会自动从文章中提取首张图片作为封面了。
######## Comments ########

8
languages/zh-CN.yml
View File

@ -15,10 +15,10 @@ meta:
recent_update: 最近更新
toc: 本文目录
read_next: 接下来阅读
prev: 上一篇
next: 下一篇
older: 较早
newer: 较新
prev: 回顾上一篇
next: 接下来阅读
older: 较早文章
newer: 较新文章
references: 参考资料
related_posts: 您可能感兴趣的文章
comment_title: 快来参与讨论吧

8
languages/zh-TW.yml
View File

@ -15,10 +15,10 @@ meta:
recent_update: 最近更新
toc: 本文目錄
read_next: 接下來閱讀
prev: 上一篇
next: 下一篇
older: 較早
newer: 較新
prev: 回顧上一篇
next: 接下來閱讀
older: 較早文章
newer: 較新文章
references: 參考資料
related_posts: 您可能感興趣的文章
comment_title: 參與討論

18
layout/_partial/main/article/read_next.ejs
View File

@ -25,30 +25,26 @@ function layoutDiv() {
}
});
}
if (next == undefined) {
// 项目的最后一篇文档
return '<br>';
}
}
let el = '';
if (prev || next) {
el += '<div class="related-wrap reveal" id="read-next">';
el += '<section class="header cap theme">';
el += '<span>' + title + '</span>';
el += '</section>';
el += '<section class="body fs14">';
el += '<section class="body">';
if (next) {
el += '<a id="next" href="' + url_for(next.path) + '">';
el += next.title || next.seo_title || next.wiki;
el += '<span class="note">' + title_next + '</span>';
el += next.title || next.seo_title || next.wiki;
el += '</a>';
} else {
el += '<div id="next"></div>';
}
el += '<div class="line"></div>';
if (prev) {
el += '<a id="prev" href="' + url_for(prev.path) + '">';
el += prev.title || prev.seo_title || prev.wiki;
el += '<span class="note">' + title_prev + '</span>';
el += prev.title || prev.seo_title || prev.wiki;
el += '</a>';
} else {
el += '<div id="prev"></div>';
}
el += '</section>';
el += '</div>';

50
scripts/helpers/related_posts.js
View File

@ -25,58 +25,30 @@ hexo.extend.helper.register('popular_posts_wrapper', function(args){
const posts = this.site.posts;
const root = this.config.root;
function generateHTML(list){
function listItem(obj){
var el = '';
el += '<a class="item" href="' + list.path + '" title="' + list.title + '">';
el += '<a class="item" href="' + obj.path + '" title="' + obj.title + '">';
var p = posts.filter(function(p) {
return root + p.path == list.path;
return root + p.path == obj.path;
});
if (p && p.length > 0) {
p = p.data[0];
}
if (p) {
if (p.cover) {
if (p.cover.includes('/')) {
list.img = p.cover;
} else {
list.img = 'https://source.unsplash.com/1280x640/?' + p.cover;
}
} else if (cfg.auto_cover && p.tags && p.tags.length > 0) {
var params = '';
p.tags.reverse().forEach((tag, i) => {
if (i > 0) {
params += ',';
}
params += tag.name;
});
list.img = 'https://source.unsplash.com/1280x640/?' + params;
}
el += '<span class="title">' + obj.title + '</span>';
if (obj.excerpt && obj.excerpt.length > 0) {
el += '<span class="excerpt">' + util.truncate(util.stripHTML(obj.excerpt), {length: 120}) + '</span>';
}
if (hexo.theme.config.default.cover) {
el += '<div class="img">'
if (list.img && list.img != "") {
el += '<img src="' + list.img + '" />';
} else {
el += '<img src="' + hexo.theme.config.default.cover + '" />';
}
el += '</div>';
}
el += '<span class="title">' + list.title + '</span>';
if (list.excerpt && list.excerpt.length > 0) {
el += '<span class="excerpt">' + util.truncate(util.stripHTML(list.excerpt), {length: 120}) + '</span>';
}
el += '</a>';
return el;
}
for(var i = 0; i < json.length; i++) {
returnHTML += generateHTML(json[i]);
if (json.length > 0) {
for(var i = 0; i < json.length; i++) {
returnHTML += listItem(json[i]);
}
}
if (returnHTML != "") returnHTML = "<div class=\"" + cls + "\">" + returnHTML + "</div>";
div += returnHTML;
div += '</section>';

98
source/css/_layout/partial/related.styl
View File

@ -21,105 +21,71 @@
.related-wrap#related-posts
.related-posts
width: 100%
display: flex
margin: 1rem 0
overflow-x: scroll
align-items: flex-start
scrollbar(8px, 4px)
padding-bottom: 8px
border-radius: $border-block
a
flex-grow: 0
flex-shrink: 0
background: var(--card)
border-radius: $border-block
padding-bottom: 1rem
background: var(--block)
overflow: hidden
border: 1px solid var(--block-border)
.item
line-height: 1.2
display: flex
flex-direction: column
overflow: hidden
min-width: 280px
width: 40vw
max-width: 460px
border: 1px solid var(--block-hover)
z-index: 1
.img
min-width: 100%
min-height: 140px
height: "calc(%s * 0.5)" % @width
max-height: 230px
overflow: hidden
img
width: 100%
height: 100%
object-fit: cover
&:not(.lazy)
trans1: transform 1s
@media screen and (max-width: $device-tablet)
width: 70vw
.img
height: "calc(%s * 0.5)" % @width
display: block
padding: 1rem
.title
color: var(--text-p1)
font-weight: 500
font-size: $fs-15
margin: .75rem .75rem 0 .75rem
font-size: 1rem
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 2
.excerpt
color: var(--text-p2)
font-size: $fs-13
margin: 0.4rem .75rem 0 .75rem
color: var(--text-p3)
font-size: $fs-12
margin-top: 0.5rem
display: -webkit-box
-webkit-box-orient: vertical
overflow: hidden
-webkit-line-clamp: 3
&:hover
img
transform: scale(1.04)
a+a
margin-left: 1rem
background: var(--block-hover)
.item+.item
border-top: 1px dashed var(--block-border)
.related-wrap#read-next
.body
background: var(--block)
border-radius: $border-block
border: 1px solid var(--block-border)
margin-top: 1rem
overflow: hidden
.line
margin: 0
height: 1px
background: var(--block-border)
&+.line,&:first-child,&:last-child
display: none
display: grid
grid-gap: 16px
grid-template-columns: repeat(auto-fill, "calc((100% - 1 * %s) / 2)" % 16px)
>a
display: flex
flex-direction: column
margin: 0
line-height: 1.2
padding: 0.75rem 0.5rem
color: var(--text-p3)
justify-content: space-between
align-items: center
font-weight: 500
font-size: $fs-12
&:first-child
color: var(--text-p1)
font-size: $fs-h4
font-weight: 400
color: var(--text-p1)
font-size: 1rem
background: var(--card)
border-radius: $border-block
box-shadow: $boxshadow-card
trans2: box-shadow transform
&:last-child
text-align: right
.note
flex-shrink: 0
margin-left: 4px
margin-bottom: 4px
font-size: $fs-12
color: var(--text-p4)
font-weight: 500
&:hover
color: $color-hover !important
background: var(--card)
box-shadow: $boxshadow-card-float
transform: translateY(-1px)
.wiki+.related-wrap#read-next .body>a
font-size: $fs-h3
&:last-child
color: var(--text-p4)
.related-wrap#comments