Skip to content

Commit 92477d6

Browse files
author
Labmem-N-004
committed
new
1 parent 8d0732e commit 92477d6

19 files changed

+192
-117
lines changed

‎app/app.config.ts

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,9 @@ export default defineAppConfig({
1919

2020
//专栏
2121
columns : [
22-
{name: '命运石之门', img: 'https://cdn.jsdelivr.net/gh/Labmem-00/img-hosting@main/LabBlog/SteinsGate.png'}
22+
{name: '命运石之门', img: 'https://s2.loli.net/2024/11/24/zrUlh4F7ciHf6Bn.jpg' },
23+
{name: '前端基石JS', img: ''},
24+
{name: '前端基石HTML与CSS', img: ''}
2325
],
2426

2527
footer: {

‎app/app.vue

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,10 @@
1+
<script setup lang="ts">
2+
const layoutStore = useLayoutStore()
3+
4+
</script>
5+
16
<template>
2-
<Rain></Rain>
7+
<Rain v-if="layoutStore.isOpen('snow')"></Rain>
38
<NuxtLoadingIndicator />
49
<SkipToContent />
510
<ZSidebar />

‎app/components/ZSidebar.vue

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,13 +36,51 @@ const keycut = computed(() => navigator?.userAgent.includes('Mac OS') ? '⌘K' :
3636
</nav>
3737
<footer class="sidebar-footer">
3838
<InteractiveButton></InteractiveButton>
39+
<button @click="layoutStore.toggle('snow')" class="snow-button">
40+
<Icon :name="layoutStore.isOpen('snow') ? 'bi:snow2': 'arcticons:snow-icon-pack'"></Icon>
41+
</button>
3942
<ThemeToggle />
4043
<ZIconNavList :list="appConfig.footer.iconNav" />
4144
</footer>
4245
</aside>
4346
</template>
4447

4548
<style lang="scss" scoped>
49+
.snow-button {
50+
position: relative;
51+
top: 20px;
52+
font-size: 20px;
53+
height: 25px;
54+
color: var(--c-text);
55+
&:hover{
56+
border-radius: 50%;
57+
background-color: var(--c-bg-soft);
58+
}
59+
&::after {
60+
content: "snow"; /* 提示文本内容 */
61+
position: absolute;
62+
bottom: 35px; /* 距离按钮的垂直位置 */
63+
left: 50%;
64+
transform: translateX(-50%);
65+
background-color: grey;
66+
color: var(--c-text);
67+
padding: 5px 10px;
68+
border-radius: 4px;
69+
font-size: 12px;
70+
white-space: nowrap;
71+
opacity: 0;
72+
visibility: hidden;
73+
transition: opacity 0.3s, visibility 0.3s;
74+
box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
75+
}
76+
77+
/* 悬浮时显示提示文本 */
78+
&:hover::after {
79+
opacity: 1;
80+
visibility: visible;
81+
}
82+
}
83+
4684
#z-sidebar {
4785
@include bgImg('https://cdn.jsdelivr.net/gh/Labmem-00/img-hosting@main/LabBlog/siderBar.png');
4886
background-position: center bottom;

‎app/components/partial/Article.vue

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ const categoryIcon = appConfig.article.categories[categoryLabel!]?.icon
4848
>
4949
<Icon :name="categoryIcon" />
5050
{{ categoryLabel }}
51-
<span v-for="category in categories">
52-
/ {{ category }}
51+
<span v-for="category in categories" class="cate-child">
52+
{{ category }}
5353
</span>
5454
</span>
5555
<span v-if="readingTime?.words" class="article-words">
@@ -62,6 +62,13 @@ const categoryIcon = appConfig.article.categories[categoryLabel!]?.icon
6262
</template>
6363

6464
<style lang="scss" scoped>
65+
.cate-child{
66+
color: var(--c-text-2);
67+
&::before{
68+
content: '•';
69+
color: #ADD8E6;
70+
}
71+
}
6572
.article-card {
6673
container-type: inline-size;
6774
display: block;

‎app/components/post/Comment.vue

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
<script setup lang="ts">
2-
const appConfig = useAppConfig()
2+
const appConfig = useAppConfig();
33
44
function initTwikoo() {
55
(window as any).twikoo?.init?.({
66
envId: appConfig.twikoo.envId,
7-
el: '#twikoo',
8-
})
7+
el: "#twikoo",
8+
});
99
}
1010
1111
// 从其他页面路由至文章页面时，通过 onLoaded 事件初始化，onMounted 不起作用
12-
useScriptTag(appConfig.twikoo.js, () => initTwikoo(), { defer: true })
12+
useScriptTag(appConfig.twikoo.js, () => initTwikoo(), { defer: true });
1313
// 在文章页面之间路由时不会触发 onLoaded 事件，需要手动初始化
14-
onMounted(() => initTwikoo())
14+
onMounted(() => initTwikoo());
1515
</script>
1616

1717
<template>
@@ -20,9 +20,7 @@ onMounted(() => initTwikoo())
2020
<ClientOnly>
2121
<div id="twikoo" />
2222
<template #fallback>
23-
<p id="twikoo">
24-
评论加载中...
25-
</p>
23+
<p id="twikoo">评论加载中...</p>
2624
</template>
2725
</ClientOnly>
2826
</section>
@@ -42,14 +40,16 @@ onMounted(() => initTwikoo())
4240
margin: 2em 0;
4341
4442
//对助手表情包特化样式
45-
.tk-owo-emotion[src^='https://cdn.jsdelivr.net/gh/Labmem-00/img-hosting@main/LabBlog-emoji/']{
43+
.tk-owo-emotion[src^='https://cdn.jsdelivr.net/gh/Labmem-00/img-hosting@main/LabBlog-emoji/']
44+
{
4645
width: 72px;
4746
height: 72px;
4847
}
49-
.OwO-item{
50-
img[src^='https://cdn.jsdelivr.net/gh/Labmem-00/img-hosting@main/LabBlog-emoji/']{
48+
.OwO-item {
49+
img[src^='https://cdn.jsdelivr.net/gh/Labmem-00/img-hosting@main/LabBlog-emoji/']
50+
{
5151
width: auto;
52-
height:100%;
52+
height: 100%;
5353
}
5454
}
5555
@@ -60,6 +60,9 @@ onMounted(() => initTwikoo())
6060
6161
.tk-input {
6262
font-family: var(--font-monospace);
63+
background-image: url("https://npm.elemecdn.com/akilar-candyassets/image/zhifeiji.gif");
64+
background-repeat: no-repeat;
65+
background-position: 100% 40%;
6366
}
6467
6568
.tk-time {
@@ -78,7 +81,8 @@ onMounted(() => initTwikoo())
7881
}
7982
}
8083
81-
.tk-comments-title, .tk-nick > strong {
84+
.tk-comments-title,
85+
.tk-nick > strong {
8286
font-weight: var(--font-weight-medium);
8387
}
8488
@@ -98,7 +102,9 @@ onMounted(() => initTwikoo())
98102
height: 0.2em;
99103
}
100104
101-
menu, ol, ul {
105+
menu,
106+
ol,
107+
ul {
102108
margin-block: 0.5em;
103109
padding: 0 0 0 1.5em;
104110
list-style: revert;
@@ -135,7 +141,8 @@ onMounted(() => initTwikoo())
135141
vertical-align: text-bottom;
136142
}
137143
138-
.tk-extras, .tk-footer {
144+
.tk-extras,
145+
.tk-footer {
139146
font-size: 0.7rem;
140147
color: var(--c-text-3);
141148
}

‎app/pages/column.vue

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,8 @@ const isColumn = ref(true);
2727
<div class="row" v-show="route.path === '/column'">
2828
<p class="column-item" v-for="(column, index) in columns">
2929
<ZRawLink :to="`/column/${column.name}`">
30-
<img :src="column.img" :alt="column.name" />
30+
<NuxtImg :src="column.img" :alt="column.name"></NuxtImg>
31+
<!-- <img :src="column.img" :alt="column.name" /> -->
3132
<span>{{ column.name }}</span>
3233
</ZRawLink>
3334
</p>

‎app/pages/column/[[name]].vue

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ const { data: listRaw } = await useAsyncData(
4141
"updated",
4242
])
4343
.where({
44-
_original_dir: { $eq: "/posts" },
44+
_original_dir: { $eq: "/columns" },
4545
categories: { $in: ["专栏"] },
4646
})
4747
.find(),
@@ -75,7 +75,7 @@ const columnWords = computed(() => {
7575
color: var(--c-text-3);
7676
}
7777
78-
menu{
78+
menu {
7979
position: relative;
8080
top: 10px;
8181
}
@@ -87,12 +87,11 @@ const columnWords = computed(() => {
8787
gap: 1em;
8888
position: sticky;
8989
opacity: 0.5;
90-
font-size: min(1em, 1em);
91-
@media screen and (max-width: $breakpoint-phone){
92-
font-size: min(0.6em, 0.6em);
93-
}
90+
font-size: min(0.9em, 0.9em);
91+
9492
color: transparent;
9593
transition: color 0.2s;
94+
9695
.column-name {
9796
margin-bottom: -0.3em;
9897
mask: linear-gradient(#fff 50%, transparent);
@@ -108,5 +107,8 @@ const columnWords = computed(() => {
108107
flex-wrap: wrap;
109108
font-size: 24px;
110109
}
110+
@media screen and (max-width: $breakpoint-phone) {
111+
font-size: min(0.6em, 0.6em);
112+
}
111113
}
112114
</style>

‎app/pages/page.vue

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,13 +20,29 @@ const categoryStore = useCategoryStore()
2020
const { data: listRaw } = await useAsyncData(
2121
'posts_index',
2222
() => queryContent()
23-
.only(['_path', 'categories', 'image', 'date', 'description', 'readingTime', 'recommend', 'title', 'updated'])
24-
.where({ _original_dir: { $eq: '/posts' } })
23+
.only(['_path', 'categories', 'image', 'date', 'description', 'readingTime', 'recommend', 'title', 'updated', 'show'])
24+
.where({
25+
$and: [
26+
{
27+
$or:[
28+
{ _original_dir: { $eq: '/posts' }},
29+
{ _original_dir: { $eq: '/columns'}},
30+
]
31+
},
32+
{
33+
$or:[
34+
{show: {$exists: false}},
35+
{show: true}
36+
]
37+
}
38+
]
39+
})
2540
.find(),
2641
{ default: () => [] },
2742
)
28-
43+
console.log(listRaw.value)
2944
const listFilterCate = computed(() => {
45+
3046
return categoryStore.currentCate !== '分类'
3147
? listRaw.value.filter(post => {
3248
return post.categories && post.categories.includes(categoryStore.currentCate)

‎app/pages/preview.vue

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,6 @@ const listSorted = computed(() => alphabetical(
3939
</ZRawLink>预览
4040
</h1>
4141
</div>
42-
<ZOrderToggle v-model="orderBy" />
4342
</div>
4443
<p>勇敢的人探索世界。这里是一些还未发布的文章。</p>
4544

‎app/stores/layout.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,8 @@ const defaultState = {
55
sidebar: false,
66
aside: false,
77
search: false,
8-
category: false
8+
category: false,
9+
snow: true,
910
}
1011

1112
type LayoutSection = keyof typeof defaultState

‎app/types/article.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@ export interface CustomArticleProps {
2525
recommend: number | boolean
2626
references: { title: string, link: string }[]
2727
readingTime: ReadTimeResults
28+
show: boolean
2829
}
2930

3031
export type ArticleCategory = keyof typeof _appConfig.article.categories & string

‎blog.config.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ const blogConfig = {
3333

3434
hideContentPrefixes: [
3535
'/posts',
36+
'/columns'
3637
],
3738
}
3839

‎content/columns/JS/new.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
---
2+
title:
3+
description:
4+
date: 2024-11-24 22:38:35
5+
# updated:
6+
# image:
7+
# type: story #类型可选tech|story, tech标题左对齐, story居中
8+
categories: [专栏, JS] # 专栏类，第二，三个参数分别对应分类层级
9+
tags: []
10+
# cover_revert: boolean #封面是否反转样式
11+
# hideInfo: boolean #是否隐藏文章头部相关信息
12+
# recommend: number | boolean #轮播图推荐指数
13+
# references: { title: string, link: string }[] #参考文献
14+
show: false
15+
---
16+
17+

‎content/previews/example.md renamed to ‎content/example.md

File renamed without changes.

0 commit comments

Comments
 (0)