Skip to content

Commit fc4a329

Browse files
author
yqz
committed
顶部栏问题
1 parent cae46fa commit fc4a329

2 files changed

Lines changed: 66 additions & 39 deletions

File tree

‎frontend/src/assets/blog.css‎

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1976,12 +1976,10 @@ body {
19761976
gap: 16px;
19771977
}
19781978

1979-
/* 兼容旧样式：不再使用，但保留 class 以免其他页面引用时报错 */
1980-
.site-top-actions,
1981-
.top-action-btn,
1982-
.theme-toggle {
1983-
display: none;
1984-
}
1979+
/* 兼容旧样式：
1980+
早期版本用 .site-top-actions / .top-action-btn / .theme-toggle 组织顶栏。
1981+
现在顶栏已切换到 .site-brand / .site-nav，但仍可能有页面引用旧 class。
1982+
这里不要再强制隐藏，否则会导致顶栏“看不见”。 */
19851983

19861984
.back-to-top-wrap {
19871985
position: fixed;

‎frontend/src/components/BlogHeader.vue‎

Lines changed: 62 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,83 @@
11
<template>
22
<header class="site-top-bar" role="banner">
33
<div class="site-top-bar-inner">
4-
<div class="site-top-actions">
5-
<a
6-
class="top-action-btn"
7-
href="https://github.com/yyyCode/OpenBlog.git"
8-
target="_blank"
9-
rel="noopener noreferrer"
10-
aria-label="项目源码（GitHub）"
11-
>
12-
<span class="top-action-ico" aria-hidden="true">
4+
<router-link to="/" class="site-brand" aria-label="返回首页">
5+
<span class="site-brand-logo" aria-hidden="true">
6+
<svg width="18" height="18" viewBox="0 0 24 24" fill="currentColor">
7+
<path d="M12 2l9 7v11a2 2 0 0 1-2 2h-5v-7H10v7H5a2 2 0 0 1-2-2V9z" />
8+
</svg>
9+
</span>
10+
<span class="site-brand-text">OpenBlog</span>
11+
</router-link>
12+
13+
<nav class="site-nav" aria-label="站点导航">
14+
<router-link to="/" class="site-nav-link" active-class="active">
15+
<span class="site-nav-ico" aria-hidden="true">
16+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
17+
<path d="M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z" />
18+
<path d="M9 22V12h6v10" />
19+
</svg>
20+
</span>
21+
首页
22+
</router-link>
23+
24+
<router-link to="/all" class="site-nav-link" active-class="active">
25+
<span class="site-nav-ico" aria-hidden="true">
26+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
27+
<path d="M4 6h16M4 12h16M4 18h16" />
28+
</svg>
29+
</span>
30+
全部文章
31+
</router-link>
32+
33+
<router-link to="/about" class="site-nav-link" active-class="active">
34+
<span class="site-nav-ico" aria-hidden="true">
35+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
36+
<circle cx="12" cy="12" r="10" />
37+
<path d="M12 16v-4M12 8h.01" />
38+
</svg>
39+
</span>
40+
关于
41+
</router-link>
42+
43+
<button type="button" class="site-nav-link site-nav-link-btn site-nav-widgets-btn" @click="$emit('toggle-widgets')">
44+
<span class="site-nav-ico" aria-hidden="true">
45+
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
46+
<path d="M4 7h16M4 12h16M4 17h16" />
47+
</svg>
48+
</span>
49+
<span class="site-nav-widgets-text">挂件</span>
50+
</button>
51+
52+
<a class="site-nav-link" href="https://github.com/yyyCode/OpenBlog.git" target="_blank" rel="noopener noreferrer">
53+
<span class="site-nav-ico" aria-hidden="true">
1354
<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
1455
<path
1556
d="M12 .5C5.73.5.75 5.67.75 12.09c0 5.15 3.28 9.52 7.83 11.06.57.11.78-.25.78-.55 0-.27-.01-1.17-.02-2.12-3.18.71-3.85-1.39-3.85-1.39-.52-1.36-1.28-1.72-1.28-1.72-1.05-.74.08-.73.08-.73 1.16.08 1.77 1.23 1.77 1.23 1.03 1.8 2.7 1.28 3.36.98.1-.77.4-1.28.73-1.57-2.54-.3-5.21-1.3-5.21-5.79 0-1.28.44-2.33 1.16-3.15-.12-.29-.5-1.48.11-3.08 0 0 .95-.31 3.11 1.2.9-.26 1.86-.39 2.82-.39.96 0 1.92.13 2.82.39 2.16-1.51 3.11-1.2 3.11-1.2.61 1.6.23 2.79.11 3.08.72.82 1.16 1.87 1.16 3.15 0 4.5-2.68 5.49-5.23 5.79.41.36.78 1.07.78 2.17 0 1.57-.02 2.83-.02 3.22 0 .3.21.67.79.55 4.55-1.54 7.83-5.91 7.83-11.06C23.25 5.67 18.27.5 12 .5z"
1657
/>
1758
</svg>
1859
</span>
19-
项目源码
60+
源码
2061
</a>
21-
<button type="button" class="top-action-btn" aria-label="面试内容" @click="onInterviewClick">
22-
<span class="top-action-ico" aria-hidden="true">
23-
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
24-
<path d="M9 2h6v3H9z" />
25-
<path d="M7 5h10a2 2 0 0 1 2 2v12a3 3 0 0 1-3 3H8a3 3 0 0 1-3-3V7a2 2 0 0 1 2-2z" />
26-
<path d="M9 11h6M9 15h6" />
27-
</svg>
28-
</span>
29-
面试内容
62+
63+
<button
64+
type="button"
65+
class="site-nav-link site-nav-link-btn"
66+
:aria-label="isDark ? '切换到浅色模式' : '切换到深色模式'"
67+
@click="onToggle"
68+
>
69+
<span class="site-nav-ico" aria-hidden="true">{{ isDark ? '☀' : '☽' }}</span>
70+
{{ isDark ? '浅色' : '深色' }}
3071
</button>
31-
</div>
32-
<button
33-
type="button"
34-
class="theme-toggle"
35-
:aria-label="isDark ? '切换到浅色模式' : '切换到深色模式'"
36-
@click="onToggle"
37-
>
38-
<span class="theme-toggle-icon" aria-hidden="true">{{ isDark ? '☀' : '☽' }}</span>
39-
<span class="theme-toggle-text">{{ isDark ? '浅色' : '深色' }}</span>
40-
</button>
72+
</nav>
4173
</div>
4274
</header>
4375
</template>
4476

4577
<script setup>
4678
import { onMounted, ref } from 'vue'
4779
import { toggleTheme as applyToggle } from '../theme'
48-
import { showMessage } from '../utils/message'
80+
defineEmits(['toggle-widgets'])
4981
5082
const isDark = ref(false)
5183
@@ -62,7 +94,4 @@ function onToggle() {
6294
sync()
6395
}
6496
65-
function onInterviewClick() {
66-
showMessage('功能暂未开放')
67-
}
6897
</script>

0 commit comments

Comments
 (0)