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

优化时间线

This commit is contained in:
xaoxuu 2022-10-07 22:23:47 +08:00
parent cf0315b05b
commit cbc16f9a88
3 changed files with 124 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

74
source/css/_layout/tag-plugins/timeline.styl
View File

@ -45,6 +45,7 @@
color: var(--text-p3)
font-family: $ff-code
trans1 color
opacity: 0.75
a
color: inherit
font-weight: inherit
@ -79,5 +80,78 @@
.tag-plugin.timeline.stellar-timeline-api .body
max-height: convert(hexo-config('tag_plugins.timeline.max-height'))
overflow: scroll
p
font-size: $fs-14
p.title
font-size: 1rem
font-weight: 500
margin: 0
padding: 0.5rem 0 0.75rem
line-height: 1.25
border-bottom: 1px dashed var(--block-border)
pre code
font-size: $fs-12
.tag-plugin.timeline.stellar-timeline-api .body .footer
padding: 0.5rem 0 1rem
margin-bottom: -0.5rem
user-select: none
font-weight: 500
display: flex
flex-wrap: wrap
justify-content: space-between
align-items: center
position: sticky
position: -webkit-sticky
bottom: -0.5rem
background: var(--card)
&:empty
display: none
.label:first-child
margin-left: 0
a.comments
margin-right: 0
.tag-plugin.timeline.stellar-timeline-api .body .footer .labels
display: flex
flex-wrap: wrap
font-size: $fs-12
.tag-plugin.timeline.stellar-timeline-api .body .footer .reactions
display: flex
flex-wrap: wrap
font-size: $fs-13
.reaction
border: 1px dashed var(--block-border)
.tag-plugin.timeline.stellar-timeline-api .body .footer .label
color: white
text-shadow: 0 0 2px rgba(0, 0, 0, 0.3)
.tag-plugin.timeline.stellar-timeline-api .body .footer a.comments
border-radius: 64px
border: 1px solid var(--block-border)
padding: 0 0.5rem
color: inherit
trans1: all
.key
margin-right: 4px
&:hover
background: $color-theme
border: 1px solid $color-theme
color: var(--card)
background: var(--text-p1)
border: 1px solid var(--text-p1)
.tag-plugin.timeline.stellar-timeline-api .body .footer .label,
.tag-plugin.timeline.stellar-timeline-api .body .footer .reaction
margin: 0 0.25rem
border-radius: 64px
padding: 0 0.5rem
.key
margin-right: 4px

1
source/js/main.js
View File

@ -217,7 +217,6 @@ if (stellar.plugins.lazyload) {
if (stellar.plugins.stellar) {
for (let key of Object.keys(stellar.plugins.stellar)) {
let js = stellar.plugins.stellar[key];
console.log(key, js);
const els = document.getElementsByClassName('stellar-' + key + '-api');
if (els != undefined && els.length > 0) {
stellar.jQuery(() => {

58
source/js/plugins/timeline.js
View File

@ -1,4 +1,14 @@
const StellarTimeline = {
reactions: {
'+1': '👍',
'-1': '👎',
'laugh': '😀',
'hooray': '🎉',
'confused': '😕',
'heart': '❤️',
'rocket': '🚀',
'eyes': '👀'
},
requestAPI: (url, callback, timeout) => {
let retryTimes = 5;
function request() {
@ -53,15 +63,45 @@ const StellarTimeline = {
arr.reverse();
}
arr.forEach((item, i) => {
var cell = '<div class="timenode" index="' + i + '">';
cell += '<div class="header">';
cell += '<p>' + item.title + '</p>';
cell += '</div>';
cell += '<div class="body fs14">';
cell += marked.parse(item.body);
cell += '</div>';
cell += '</div>';
$(el).append(cell);
if (item.labels.length > 0) {
var cell = '<div class="timenode" index="' + i + '">';
cell += '<div class="header">';
let date = new Date(item.created_at);
cell += '<p>' + date + '</p>';
cell += '</div>';
cell += '<div class="body">';
cell += '<p class="title">' + item.title + '</p>';
cell += marked.parse(item.body);
cell += '<div class="footer">';
cell += '<div class="labels">';
item.labels.forEach((label, i) => {
cell += '<div class="label ' + label.name + '" style="background:#' + label.color + '">';
cell += label.name;
cell += '</div>';
});
cell += '</div>';
cell += '<div class="reactions">';
if (item.reactions.total_count > 0) {
for (let key of Object.keys(StellarTimeline.reactions)) {
let num = item.reactions[key];
if (num > 0) {
cell += '<div class="reaction ' + key + '">';
cell += '<span class="key ' + key + '">' + StellarTimeline.reactions[key] + '</span>';
cell += '<span class="value ' + key + '">' + item.reactions[key] + '</span>';
cell += '</div>';
}
}
}
cell += '<a class="comments" href="' + item.html_url + '">';
cell += '<span class="key comments">💬</span>';
cell += '<span class="value comments">' + item.comments + '</span>';
cell += '</a>';
cell += '</div>';
cell += '</div>';
cell += '</div>';
cell += '</div>';
$(el).append(cell);
}
});
}, function() {
$(el).find('.loading-wrap svg').remove();