@sugarat/theme 0.1.6 → 0.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/node.d.ts
CHANGED
|
@@ -39,6 +39,18 @@ declare namespace Theme {
|
|
|
39
39
|
layout?: string;
|
|
40
40
|
categories: string[];
|
|
41
41
|
tags: string[];
|
|
42
|
+
/**
|
|
43
|
+
* 文章首页置顶
|
|
44
|
+
*/
|
|
45
|
+
top: number;
|
|
46
|
+
/**
|
|
47
|
+
* 时间线
|
|
48
|
+
*/
|
|
49
|
+
timeline: string;
|
|
50
|
+
/**
|
|
51
|
+
* 专栏&合集
|
|
52
|
+
*/
|
|
53
|
+
album: string;
|
|
42
54
|
}
|
|
43
55
|
interface PageData {
|
|
44
56
|
route: string;
|
|
@@ -56,7 +68,7 @@ declare namespace Theme {
|
|
|
56
68
|
mapping?: string;
|
|
57
69
|
inputPosition?: 'top' | 'bottom';
|
|
58
70
|
lang?: string;
|
|
59
|
-
loading?: 'lazy' | '';
|
|
71
|
+
loading?: 'lazy' | 'auto' | 'eager';
|
|
60
72
|
}
|
|
61
73
|
interface HotArticle {
|
|
62
74
|
title?: string;
|
package/package.json
CHANGED
|
@@ -31,7 +31,7 @@
|
|
|
31
31
|
:data-theme="isDark ? 'dark' : 'light'"
|
|
32
32
|
:data-lang="commentConfig.lang || 'zh-CN'"
|
|
33
33
|
crossorigin="anonymous"
|
|
34
|
-
:data-loading="commentConfig.loading || ''"
|
|
34
|
+
:data-loading="commentConfig.loading || 'eager'"
|
|
35
35
|
async
|
|
36
36
|
>
|
|
37
37
|
</component>
|
|
@@ -93,7 +93,10 @@ watch(
|
|
|
93
93
|
showComment.value = false
|
|
94
94
|
setTimeout(() => {
|
|
95
95
|
showComment.value = true
|
|
96
|
-
},
|
|
96
|
+
}, 200)
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
immediate: true
|
|
97
100
|
}
|
|
98
101
|
)
|
|
99
102
|
</script>
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<a class="blog-item" :href="route">
|
|
3
|
+
<i class="pin" v-if="!!pin"></i>
|
|
3
4
|
<!-- 左侧信息 -->
|
|
4
5
|
<div class="info-part">
|
|
5
6
|
<!-- 标题 -->
|
|
@@ -33,6 +34,7 @@ const props = defineProps<{
|
|
|
33
34
|
tag?: string[]
|
|
34
35
|
author?: string
|
|
35
36
|
cover?: string
|
|
37
|
+
pin?: number
|
|
36
38
|
}>()
|
|
37
39
|
|
|
38
40
|
const showTime = computed(() => {
|
|
@@ -41,6 +43,35 @@ const showTime = computed(() => {
|
|
|
41
43
|
</script>
|
|
42
44
|
|
|
43
45
|
<style lang="scss" scoped>
|
|
46
|
+
.blog-item .pin {
|
|
47
|
+
position: absolute;
|
|
48
|
+
overflow: hidden;
|
|
49
|
+
width: 30px;
|
|
50
|
+
height: 30px;
|
|
51
|
+
top: -4px;
|
|
52
|
+
left: -4px;
|
|
53
|
+
opacity: 0.5;
|
|
54
|
+
}
|
|
55
|
+
.blog-item:hover .pin {
|
|
56
|
+
opacity: 1;
|
|
57
|
+
}
|
|
58
|
+
.blog-item .pin::before {
|
|
59
|
+
content: '';
|
|
60
|
+
position: absolute;
|
|
61
|
+
width: 120%;
|
|
62
|
+
height: 30px;
|
|
63
|
+
background-image: linear-gradient(
|
|
64
|
+
45deg,
|
|
65
|
+
var(--blog-theme-color),
|
|
66
|
+
var(--blog-theme-color)
|
|
67
|
+
);
|
|
68
|
+
transform: rotate(-45deg) translateY(-20px);
|
|
69
|
+
display: flex;
|
|
70
|
+
align-items: center;
|
|
71
|
+
justify-content: center;
|
|
72
|
+
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.23);
|
|
73
|
+
}
|
|
74
|
+
|
|
44
75
|
.blog-item {
|
|
45
76
|
position: relative;
|
|
46
77
|
margin: 0 auto 20px;
|
|
@@ -9,6 +9,7 @@
|
|
|
9
9
|
:tag="v.meta.tag"
|
|
10
10
|
:cover="v.meta.cover"
|
|
11
11
|
:author="v.meta.author || globalAuthor"
|
|
12
|
+
:pin="v.meta.top"
|
|
12
13
|
/>
|
|
13
14
|
</li>
|
|
14
15
|
</ul>
|
|
@@ -43,11 +44,13 @@ const activeTag = useActiveTag()
|
|
|
43
44
|
const activeTagLabel = computed(() => activeTag.value.label)
|
|
44
45
|
|
|
45
46
|
const wikiList = computed(() => {
|
|
46
|
-
const
|
|
47
|
-
|
|
48
|
-
|
|
47
|
+
const topList = docs.value.filter((v) => v.meta.top)
|
|
48
|
+
topList.sort((a, b) => a.meta.top - b.meta.top)
|
|
49
|
+
const data = docs.value.filter(
|
|
50
|
+
(v) => v.meta.date && v.meta.title && !v.meta.top && !v.meta.hidden
|
|
51
|
+
)
|
|
49
52
|
data.sort((a, b) => +new Date(b.meta.date) - +new Date(a.meta.date))
|
|
50
|
-
return data
|
|
53
|
+
return topList.concat(data)
|
|
51
54
|
})
|
|
52
55
|
|
|
53
56
|
const filterData = computed(() => {
|
|
@@ -45,6 +45,19 @@ export namespace Theme {
|
|
|
45
45
|
// old
|
|
46
46
|
categories: string[]
|
|
47
47
|
tags: string[]
|
|
48
|
+
/**
|
|
49
|
+
* 文章首页置顶
|
|
50
|
+
*/
|
|
51
|
+
top: number
|
|
52
|
+
// TODO: 待开发
|
|
53
|
+
/**
|
|
54
|
+
* 时间线
|
|
55
|
+
*/
|
|
56
|
+
timeline: string
|
|
57
|
+
/**
|
|
58
|
+
* 专栏&合集
|
|
59
|
+
*/
|
|
60
|
+
album: string
|
|
48
61
|
}
|
|
49
62
|
export interface PageData {
|
|
50
63
|
route: string
|
|
@@ -63,7 +76,7 @@ export namespace Theme {
|
|
|
63
76
|
mapping?: string
|
|
64
77
|
inputPosition?: 'top' | 'bottom'
|
|
65
78
|
lang?: string
|
|
66
|
-
loading?: 'lazy' | ''
|
|
79
|
+
loading?: 'lazy' | 'auto' | 'eager'
|
|
67
80
|
}
|
|
68
81
|
|
|
69
82
|
export interface HotArticle {
|
package/src/styles/index.scss
CHANGED
|
@@ -8,6 +8,7 @@ html {
|
|
|
8
8
|
--nav-bgc: rgba(255, 255, 255, 0.9);
|
|
9
9
|
--badge-font-color: #4e5969;
|
|
10
10
|
--description-font-color: #86909c;
|
|
11
|
+
--blog-theme-color: #409eff;
|
|
11
12
|
}
|
|
12
13
|
|
|
13
14
|
html[class='dark'] {
|
|
@@ -39,7 +40,7 @@ html[class='dark'] {
|
|
|
39
40
|
}
|
|
40
41
|
|
|
41
42
|
@media screen and (min-width: 960px) {
|
|
42
|
-
#VPContent.VPContent{
|
|
43
|
+
#VPContent.is-home.VPContent{
|
|
43
44
|
padding-top: 0;
|
|
44
45
|
.VPHome{
|
|
45
46
|
min-height: 100vh;
|