Skip to content

Commit 1a53bc6

Browse files
LruihaoLruihao
committed
Feat: 增加评论时间和点赞数
1 parent 5a8c3a4 commit 1a53bc6

File tree

3 files changed

+190
-160
lines changed

3 files changed

+190
-160
lines changed

‎layouts/shortcodes/mmt-netease.html‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
{{- $version := "1.2.0" -}}
2+
{{- $version := "1.3.0" -}}
33
{{- $mid := cond .IsNamedParams (.Get "mid") (.Get 0) | default "2280569152" -}}
44
{{- $autoplay := cond .IsNamedParams (.Get "autoplay") (.Get 1) | default false -}}
55
{{- $fixed := cond .IsNamedParams (.Get "fixed") (.Get 2) -}}
@@ -29,7 +29,11 @@
2929
<span class="pic-backdrop"></span>
3030
<div class="commentator">
3131
<img class="comment-avatar d-none"/>
32-
<span class="comment-nickname"></span>
32+
<div class="comment-user">
33+
<span class="comment-nickname"></span>
34+
<small class="comment-time"></small>
35+
</div>
36+
<span class="comment-liked"></span>
3337
</div>
3438
<div class="comment-content"></div>
3539
<div class="music-info">

‎static/shortcodes/mmt-netease/css/index.css‎

Lines changed: 182 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,169 +1,193 @@
1-
.netease-music:not([data-fixed]) {
2-
min-height: 90px;
3-
}
4-
.netease-music[data-mini] {
5-
min-height: 66px;
6-
}
7-
.netease-music .aplayer-narrow {
8-
margin: 0 auto;
9-
}
10-
.section-comment {
11-
margin-top: 1rem;
12-
position: relative;
13-
min-height: 150px;
14-
}
15-
.comment-163 {
16-
font-family: 'MMT', '沐目体';
17-
position: relative;
18-
border: 1px solid #f5f5f5;
19-
padding: 0.75em;
20-
border-radius: 0.75rem;
21-
color: var(--color-comment, #272626);
22-
cursor: pointer;
23-
}
24-
[data-theme='dark'] .comment-163 {
25-
--color-comment: #f5f5f5;
26-
}
27-
.pic-backdrop {
28-
position: absolute;
29-
top: 0;
30-
bottom: 0;
31-
left: 0;
32-
right: 0;
33-
background-repeat: no-repeat;
34-
filter: blur(10px);
35-
background-size: cover;
36-
background-position: center;
37-
border-radius: 0.75rem;
38-
z-index: -1;
39-
opacity: 0.75;
40-
}
41-
.commentator {
42-
display: flex;
43-
align-items: center;
44-
}
45-
.comment-avatar {
46-
width: 3.125em;
47-
height: 3.125em;
48-
border-radius: 50%;
49-
margin-right: 0.75em;
50-
border: 1px solid #f5f5f5;
51-
padding: 0.125em;
52-
}
53-
.comment-nickname {
54-
position: relative;
55-
font-weight: 600;
56-
font-size: 1.2rem;
57-
text-decoration: none;
58-
display: inline-block;
59-
}
60-
.comment-nickname:not(:empty)::after {
61-
content: '：';
62-
margin-right: 0.25em;
63-
}
64-
.comment-content {
65-
word-wrap: break-word;
66-
word-break: break-all;
67-
font-size: 1.5rem;
68-
line-height: 2rem;
69-
position: relative;
70-
margin-left: 2.8em;
71-
}
72-
.music-info {
73-
display: flex;
74-
align-items: center;
75-
justify-content: flex-end;
76-
font-size: 1.2rem;
77-
margin-top: 0.75em;
78-
text-shadow: 0 0 4px var(--color-text-shadow, rgba(0, 0, 0, .4));
79-
}
80-
[data-theme='dark'] .music-info {
81-
--color-text-shadow: rgba(255, 255, 255, .8);
82-
}
83-
.music-name:not(:empty)::before {
84-
content: '《';
85-
}
86-
.artists-name:not(:empty)::after {
87-
content: '》';
88-
}
89-
.music-name:not(:empty)::after {
90-
content: '·';
91-
margin-inline: 0.25rem;
92-
}
93-
.mmt-netease-powered {
94-
display: block;
95-
text-align: right;
96-
font-family: 'MMT', '沐目体';
97-
font-style: italic;
98-
font-weight: 600;
99-
color: var(--fi-secondary, #919191);
100-
margin-block: 0.5rem;
101-
text-shadow: var(--color-powered-shadow, #ebb8b8) 1px 2px 2px;
102-
}
103-
[data-theme='dark'] .mmt-netease-powered {
104-
--color-powered-shadow: #000;
105-
}
106-
107-
.d-none {
108-
display: none !important;
109-
}
110-
111-
/* Loading Indicator */
112-
.loading-indicator-wrapper {
113-
position: absolute;
114-
top: 50%;
115-
left: 50%;
116-
transform: translate(-50%, -50%);
117-
height: 20px;
118-
119-
.aether-spinner {
1+
@layer mmt-netease {
2+
.netease-music:not([data-fixed]) {
3+
min-height: 90px;
4+
}
5+
.netease-music[data-mini] {
6+
min-height: 66px;
7+
}
8+
.netease-music .aplayer-narrow {
9+
margin: 0 auto;
10+
}
11+
.section-comment {
12+
margin-top: 1rem;
13+
position: relative;
14+
min-height: 150px;
15+
}
16+
.comment-163 {
17+
font-family: 'MMT', '沐目体';
18+
position: relative;
19+
border: 1px solid #f5f5f5;
20+
padding: 0.75em;
21+
border-radius: 0.75rem;
22+
color: var(--color-comment, #272626);
23+
cursor: pointer;
24+
}
25+
[data-theme='dark'] .comment-163 {
26+
--color-comment: #f5f5f5;
27+
}
28+
.pic-backdrop {
29+
position: absolute;
30+
top: 0;
31+
bottom: 0;
32+
left: 0;
33+
right: 0;
34+
background-repeat: no-repeat;
35+
filter: blur(10px);
36+
background-size: cover;
37+
background-position: center;
38+
border-radius: 0.75rem;
39+
z-index: -1;
40+
opacity: 0.75;
41+
}
42+
.commentator {
43+
display: flex;
44+
align-items: center;
45+
}
46+
.comment-avatar {
47+
width: 3.125em;
48+
height: 3.125em;
49+
border-radius: 50%;
50+
margin-right: 0.75em;
51+
border: 1px solid #f5f5f5;
52+
padding: 0.125em;
53+
}
54+
.comment-user {
12055
display: flex;
121-
justify-content: space-between;
122-
width: var(--as-size, 16px);
123-
height: var(--as-size, 16px);
124-
text-align: center;
125-
font-size: var(--as-font-size, 10px);
56+
flex-direction: column;
57+
justify-content: center;
58+
line-height: 1.2;
59+
}
60+
.comment-user .comment-nickname {
61+
position: relative;
62+
font-weight: 600;
63+
font-size: 1.2rem;
64+
text-decoration: none;
65+
display: inline-block;
66+
}
67+
.comment-user .comment-nickname:not(:empty)::after {
68+
content: '：';
69+
margin-right: 0.25em;
70+
}
71+
.comment-user .comment-time {
72+
font-size: 0.8rem;
73+
mix-blend-mode: difference;
74+
}
12675

127-
> div {
128-
height: 100%;
129-
width: 4px;
130-
background-color: var(--as-content-color-tertiary, #a6a6a6);
131-
opacity: 0.2;
132-
border-radius: var(--as-border-radius-default, 4px);
133-
animation: spinner-bounce 0.6s infinite ease-in-out;
134-
transform-origin: center;
135-
}
136-
.rect-two {
137-
animation-delay: 0.15s;
138-
}
139-
.rect-three {
140-
animation-delay: 0.3s;
141-
}
76+
.comment-liked {
77+
font-weight: 600;
78+
font-size: 0.8rem;
79+
margin-left: auto;
80+
mix-blend-mode: difference;
14281
}
143-
}
82+
.comment-liked::after {
83+
content: '👍';
84+
margin-left: 0.25em;
85+
}
14486

145-
@keyframes spinner-bounce {
146-
0%,
147-
100% {
148-
transform: scaleY(0.4);
149-
opacity: 0.8;
87+
.comment-content {
88+
word-wrap: break-word;
89+
word-break: break-all;
90+
font-size: 1.5rem;
91+
line-height: 2rem;
92+
position: relative;
93+
margin-left: 2.8em;
15094
}
151-
50% {
152-
transform: scaleY(1);
153-
opacity: 1;
95+
.music-info {
96+
display: flex;
97+
align-items: center;
98+
justify-content: flex-end;
99+
font-size: 1.2rem;
100+
margin-top: 0.75em;
101+
text-shadow: 0 0 4px var(--color-text-shadow, rgba(0, 0, 0, .4));
154102
}
155-
}
156-
157-
/* 兼容 prefers-color-scheme 切换的主题 */
158-
@media (prefers-color-scheme: dark) {
159-
:root {
160-
--color-comment: #f5f5f5;
103+
[data-theme='dark'] .music-info {
161104
--color-text-shadow: rgba(255, 255, 255, .8);
105+
}
106+
.music-name:not(:empty)::before {
107+
content: '《';
108+
}
109+
.artists-name:not(:empty)::after {
110+
content: '》';
111+
}
112+
.music-name:not(:empty)::after {
113+
content: '·';
114+
margin-inline: 0.25rem;
115+
}
116+
.mmt-netease-powered {
117+
display: block;
118+
text-align: right;
119+
font-family: 'MMT', '沐目体';
120+
font-style: italic;
121+
font-weight: 600;
122+
color: var(--fi-secondary, #919191);
123+
margin-block: 0.5rem;
124+
text-shadow: var(--color-powered-shadow, #ebb8b8) 1px 2px 2px;
125+
}
126+
[data-theme='dark'] .mmt-netease-powered {
162127
--color-powered-shadow: #000;
163128
}
164-
[data-theme='light'] {
165-
--color-comment: #272626;
166-
--color-text-shadow: rgba(0, 0, 0, .4);
167-
--color-powered-shadow: #ebb8b8;
129+
130+
.d-none {
131+
display: none !important;
132+
}
133+
134+
/* Loading Indicator */
135+
.loading-indicator-wrapper {
136+
position: absolute;
137+
top: 50%;
138+
left: 50%;
139+
transform: translate(-50%, -50%);
140+
height: 20px;
141+
142+
.aether-spinner {
143+
display: flex;
144+
justify-content: space-between;
145+
width: var(--as-size, 16px);
146+
height: var(--as-size, 16px);
147+
text-align: center;
148+
font-size: var(--as-font-size, 10px);
149+
150+
> div {
151+
height: 100%;
152+
width: 4px;
153+
background-color: var(--as-content-color-tertiary, #a6a6a6);
154+
opacity: 0.2;
155+
border-radius: var(--as-border-radius-default, 4px);
156+
animation: spinner-bounce 0.6s infinite ease-in-out;
157+
transform-origin: center;
158+
}
159+
.rect-two {
160+
animation-delay: 0.15s;
161+
}
162+
.rect-three {
163+
animation-delay: 0.3s;
164+
}
165+
}
166+
}
167+
168+
@keyframes spinner-bounce {
169+
0%,
170+
100% {
171+
transform: scaleY(0.4);
172+
opacity: 0.8;
173+
}
174+
50% {
175+
transform: scaleY(1);
176+
opacity: 1;
177+
}
178+
}
179+
180+
/* 兼容 prefers-color-scheme 切换的主题 */
181+
@media (prefers-color-scheme: dark) {
182+
:root {
183+
--color-comment: #f5f5f5;
184+
--color-text-shadow: rgba(255, 255, 255, .8);
185+
--color-powered-shadow: #000;
186+
}
187+
[data-theme='light'] {
188+
--color-comment: #272626;
189+
--color-text-shadow: rgba(0, 0, 0, .4);
190+
--color-powered-shadow: #ebb8b8;
191+
}
168192
}
169193
}

‎static/shortcodes/mmt-netease/js/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ const RNC = new (function () {
3434
$avatar.classList.remove('d-none');
3535
}
3636
$comment.querySelector('.comment-nickname').innerHTML = nickname;
37+
$comment.querySelector('.comment-time').innerHTML = comment.data.timeStr;
38+
$comment.querySelector('.comment-liked').innerHTML = comment.data.likedCount;
3739
$comment.querySelector('.comment-content').innerHTML = comment.data.content?.replace('\n', '<br/>');
3840
$comment.querySelector('.music-name').innerHTML = comment.data?.musicName;
3941
$comment.querySelector('.artists-name').innerHTML = comment.data?.artist;

0 commit comments

Comments
 (0)