Skip to content

Commit c91ea96

Browse files
SnailclimbSnailclimb
committed
feat:恢复沉浸式阅读功能
1 parent 389ec1b commit c91ea96

File tree

23 files changed

+2155
-2409
lines changed

23 files changed

+2155
-2409
lines changed

‎docs/.vuepress/client.ts‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import { defineClientConfig } from "vuepress/client";
2+
import { h } from "vue";
3+
import LayoutToggle from "./components/LayoutToggle.vue";
4+
5+
export default defineClientConfig({
6+
rootComponents: [
7+
// 将切换按钮添加为根组件，会在所有页面显示
8+
() => h(LayoutToggle),
9+
],
10+
});

‎docs/.vuepress/components/LayoutToggle.vue‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
<template>
2+
<button
3+
class="layout-toggle-btn"
4+
:class="{ 'is-hidden': isHidden }"
5+
:title="isHidden ? '退出沉浸式阅读' : '沉浸式阅读'"
6+
@click="toggleLayout"
7+
>
8+
<svg
9+
xmlns="http://www.w3.org/2000/svg"
10+
width="16"
11+
height="16"
12+
viewBox="0 0 24 24"
13+
fill="none"
14+
stroke="currentColor"
15+
stroke-width="2"
16+
stroke-linecap="round"
17+
stroke-linejoin="round"
18+
>
19+
<path
20+
v-if="!isHidden"
21+
d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"
22+
/>
23+
<path
24+
v-else
25+
d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"
26+
/>
27+
</svg>
28+
<span class="btn-text">{{ isHidden ? "退出沉浸" : "沉浸阅读" }}</span>
29+
</button>
30+
</template>
31+
32+
<script setup lang="ts">
33+
import { ref, onMounted, watch } from "vue";
34+
35+
const isHidden = ref(false);
36+
37+
const STORAGE_KEY = "javaguide-layout-hidden";
38+
39+
const toggleLayout = () => {
40+
isHidden.value = !isHidden.value;
41+
};
42+
43+
// 应用隐藏状态
44+
const applyHiddenState = (hidden: boolean) => {
45+
if (typeof document !== "undefined") {
46+
if (hidden) {
47+
document.documentElement.classList.add("layout-hidden");
48+
} else {
49+
document.documentElement.classList.remove("layout-hidden");
50+
}
51+
}
52+
};
53+
54+
// 监听状态变化
55+
watch(isHidden, (newVal) => {
56+
applyHiddenState(newVal);
57+
// 保存到 localStorage
58+
if (typeof localStorage !== "undefined") {
59+
localStorage.setItem(STORAGE_KEY, String(newVal));
60+
}
61+
});
62+
63+
onMounted(() => {
64+
// 从 localStorage 读取状态
65+
if (typeof localStorage !== "undefined") {
66+
const saved = localStorage.getItem(STORAGE_KEY);
67+
if (saved === "true") {
68+
isHidden.value = true;
69+
applyHiddenState(true);
70+
}
71+
}
72+
});
73+
</script>
74+
75+
<style lang="scss" scoped>
76+
.layout-toggle-btn {
77+
position: fixed;
78+
right: 20px;
79+
bottom: 150px;
80+
z-index: 999;
81+
display: flex;
82+
align-items: center;
83+
justify-content: center;
84+
gap: 6px;
85+
height: 36px;
86+
padding: 0 14px;
87+
font-size: 13px;
88+
color: var(--vp-c-text);
89+
background: var(--vp-c-bg);
90+
border: 1px solid var(--vp-c-border);
91+
border-radius: 18px;
92+
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
93+
cursor: pointer;
94+
transition: all 0.3s ease;
95+
white-space: nowrap;
96+
97+
&:hover {
98+
color: var(--vp-c-accent);
99+
border-color: var(--vp-c-accent);
100+
transform: scale(1.02);
101+
}
102+
103+
&.is-hidden {
104+
background: var(--vp-c-accent);
105+
color: #fff;
106+
border-color: var(--vp-c-accent);
107+
}
108+
109+
svg {
110+
width: 16px;
111+
height: 16px;
112+
flex-shrink: 0;
113+
}
114+
115+
.btn-text {
116+
font-weight: 500;
117+
}
118+
}
119+
120+
// 移动端和平板隐藏按钮
121+
@media (max-width: 959px) {
122+
.layout-toggle-btn {
123+
display: none;
124+
}
125+
}
126+
</style>

‎docs/.vuepress/config.ts‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,17 @@ export default defineUserConfig({
5050
],
5151
],
5252

53-
bundler: viteBundler(),
53+
bundler: viteBundler({
54+
viteOptions: {
55+
css: {
56+
preprocessorOptions: {
57+
scss: {
58+
silenceDeprecations: ["if-function"],
59+
},
60+
},
61+
},
62+
},
63+
}),
5464

5565
theme,
5666

‎docs/.vuepress/styles/index.scss‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,3 +3,128 @@ body {
33
font-size: 16px;
44
}
55
}
6+
7+
// ============================================
8+
// 沉浸式阅读模式 - 隐藏导航栏、侧边栏和目录
9+
// ============================================
10+
11+
// 过渡动画
12+
.vp-navbar,
13+
.vp-sidebar,
14+
.vp-page,
15+
.theme-container .vp-page {
16+
transition:
17+
transform 0.3s ease,
18+
opacity 0.3s ease,
19+
margin 0.3s ease,
20+
padding 0.3s ease,
21+
width 0.3s ease;
22+
}
23+
24+
// 隐藏布局模式
25+
html.layout-hidden {
26+
// 隐藏顶部导航栏
27+
.vp-navbar {
28+
transform: translateY(-100%) !important;
29+
opacity: 0 !important;
30+
pointer-events: none !important;
31+
}
32+
33+
// 隐藏左侧边栏
34+
.vp-sidebar {
35+
transform: translateX(-100%) !important;
36+
opacity: 0 !important;
37+
pointer-events: none !important;
38+
width: 0 !important;
39+
}
40+
41+
// 侧边栏包装器
42+
.vp-sidebar-wrapper,
43+
.sidebar-wrapper {
44+
width: 0 !important;
45+
min-width: 0 !important;
46+
padding: 0 !important;
47+
margin: 0 !important;
48+
}
49+
50+
// 隐藏右侧目录 (TOC)
51+
.vp-toc-placeholder,
52+
.toc-wrapper,
53+
.vp-toc,
54+
aside.vp-toc,
55+
.toc {
56+
display: none !important;
57+
width: 0 !important;
58+
}
59+
60+
// 主容器调整 - 移除左侧 padding/margin
61+
.theme-container {
62+
padding-left: 0 !important;
63+
padding-right: 0 !important;
64+
65+
.vp-page {
66+
padding-left: 2rem !important;
67+
padding-right: 2rem !important;
68+
padding-top: 1rem !important;
69+
margin-left: 0 !important;
70+
max-width: 100% !important;
71+
width: 100% !important;
72+
}
73+
}
74+
75+
// 主题内容区域调整 - 让内容更宽
76+
.theme-hope-content,
77+
.vp-page-content,
78+
.vp-content {
79+
max-width: 100% !important;
80+
width: 100% !important;
81+
margin: 0 !important;
82+
padding: 1rem 2rem !important;
83+
}
84+
85+
// 页面容器调整
86+
.vp-page-container {
87+
padding-top: 1rem !important;
88+
padding-left: 0 !important;
89+
padding-right: 0 !important;
90+
max-width: 100% !important;
91+
}
92+
93+
// 确保内容区域居中且宽度适中
94+
.theme-container > main {
95+
margin-left: 0 !important;
96+
padding-left: 0 !important;
97+
max-width: 100% !important;
98+
}
99+
100+
// 响应式调整
101+
@media (min-width: 960px) {
102+
.theme-container .vp-page {
103+
margin-left: 0 !important;
104+
padding-left: 3rem !important;
105+
padding-right: 3rem !important;
106+
}
107+
108+
.theme-hope-content,
109+
.vp-page-content,
110+
.vp-content {
111+
max-width: 100% !important;
112+
padding: 1rem 2rem !important;
113+
}
114+
}
115+
116+
@media (min-width: 1440px) {
117+
.theme-container .vp-page {
118+
margin-left: 0 !important;
119+
padding-left: 4rem !important;
120+
padding-right: 4rem !important;
121+
}
122+
123+
.theme-hope-content,
124+
.vp-page-content,
125+
.vp-content {
126+
max-width: 100% !important;
127+
padding: 1rem 3rem !important;
128+
}
129+
}
130+
}

‎docs/README.md‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
---
22
home: true
33
icon: home
4-
title: JavaGuide（后端学习 & 面试指南）
5-
description: JavaGuide 是一份面向后端开发/后端面试的学习与复习指南，覆盖 Java 基础、并发、JVM、数据库/MySQL、Redis、分布式、高并发、高可用、系统设计等核心知识，适用于校招/社招。
4+
title: JavaGuide（Java 面试 & 后端通用面试指南）
5+
description: JavaGuide 是一份面向后端学习与面试的指南，以 Java 面试为核心，同时覆盖数据库/MySQL、Redis、分布式、高并发、高可用、系统设计等通用后端知识，适用于校招/社招复习。
66
heroImage: /logo.svg
77
heroText: JavaGuide
8-
tagline: 面向后端学习和面试：Java + 数据库 + 分布式 + 高并发 + 系统设计
8+
tagline: Java 面试 & 后端通用面试指南，覆盖计算机基础、数据库、分布式、高并发与系统设计
99
head:
1010
- - meta
1111
- name: keywords
12-
content: JavaGuide,后端面试,后端开发,Java面试,数据库面试,MySQL面试,Redis面试,分布式,高并发,高性能,高可用,系统设计,消息队列,缓存,计算机网络,Linux
12+
content: JavaGuide,Java面试,Java面试指南,Java八股文,后端面试,后端开发,数据库面试,MySQL面试,Redis面试,分布式,高并发,高性能,高可用,系统设计,消息队列,缓存,计算机网络,Linux
1313
- - meta
1414
- property: og:site_name
1515
content: JavaGuide
1616
- - meta
1717
- property: og:title
18-
content: JavaGuide（后端学习&面试指南）
18+
content: JavaGuide（Java 面试&后端通用面试指南）
1919
- - meta
2020
- property: og:description
21-
content: JavaGuide 是一份面向后端开发/后端面试的学习与复习指南，覆盖 Java、数据库/MySQL、Redis、分布式、高并发、高可用、系统设计等核心知识。
21+
content: JavaGuide 以 Java 面试为核心，同时覆盖数据库/MySQL、Redis、分布式、高并发、高可用、系统设计等通用后端知识。
2222
- - meta
2323
- property: og:type
2424
content: website
@@ -36,10 +36,10 @@ head:
3636
content: summary_large_image
3737
- - meta
3838
- name: twitter:title
39-
content: JavaGuide（后端学习&面试指南）
39+
content: JavaGuide（Java 面试&后端通用面试指南）
4040
- - meta
4141
- name: twitter:description
42-
content: JavaGuide 覆盖 Java、数据库/MySQL、Redis、分布式、高并发、高可用、系统设计等核心知识，帮助你系统学习与高效备战后端面试。
42+
content: JavaGuide 以 Java 面试为核心，同时覆盖数据库/MySQL、Redis、分布式、高并发、高可用、系统设计等通用后端知识。
4343
- - meta
4444
- name: twitter:image
4545
content: https://javaguide.cn/logo.png

‎docs/about-the-author/zhishixingqiu-two-years.md‎

Lines changed: 21 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -47,16 +47,21 @@ star: 2
4747
- **独家面试手册**：多本原创 PDF 后端面试手册免费领取，全网独家。
4848
- **有问必答**：一对一免费提问，提供专属求职指南，拒绝焦虑。
4949

50+
**🚀 实战项目**
51+
52+
星球已经推出的实战项目如下：
53+
54+
- [⭐AI 智能面试辅助平台 + RAG 知识库](https://javaguide.cn/zhuanlan/interview-guide.html)：基于 Spring Boot 4.0 + Java 21 + Spring AI 2.0 开发。非常适合作为学习和简历项目，学习门槛低，帮助提升求职竞争力，是主打就业的实战项目。
55+
- [手写 RPC 框架](https://javaguide.cn/zhuanlan/handwritten-rpc-framework.html)：从零开始基于 Netty+Kyro+Zookeeper 实现一个简易的 RPC 框架。麻雀虽小五脏俱全，项目代码注释详细，结构清晰。
56+
57+
今年陆续还会推出更多企业级实战案例！
58+
5059
🔥 **氛围与福利**
5160

5261
- **海量资源**：Java 优质面试资源持续更新分享。
5362
- **抱团成长**：打卡活动、读书交流、线下聚会，让学习之路不再孤单。
5463
- **惊喜福利**：不定期节日抽奖、送书送课，福利拿到手软。
5564

56-
🚀 **拥抱 AI**
57-
58-
星球目前正在深度分享 **AI 编程** 方法论，并计划推出 **AI 实战项目**。
59-
6065
💡 **总结**：这里的任何一项服务（尤其是简历修改和面试资料），单独拎出来的价值都已远超星球门票。
6166

6267
这里赠送一个 **30** 元的星球新人专属优惠券（数量有限，价格即将上调）！
@@ -77,6 +82,17 @@ star: 2
7782

7883
进入星球之后，这些专栏即可免费永久阅读，永久同步更新！
7984

85+
### 实战项目
86+
87+
星球已经推出的实战项目如下：
88+
89+
- [⭐AI 智能面试辅助平台 + RAG 知识库](https://javaguide.cn/zhuanlan/interview-guide.html)：基于 Spring Boot 4.0 + Java 21 + Spring AI 2.0 开发。非常适合作为学习和简历项目，学习门槛低，帮助提升求职竞争力，是主打就业的实战项目。
90+
- [手写 RPC 框架](https://javaguide.cn/zhuanlan/handwritten-rpc-framework.html)：从零开始基于 Netty+Kyro+Zookeeper 实现一个简易的 RPC 框架。麻雀虽小五脏俱全，项目代码注释详细，结构清晰。
91+
92+
今年陆续还会推出更多企业级实战案例！并且，星球还分享了很多高频项目经历的优化版介绍和面试准备（持续更新中）。
93+
94+
![高频项目经历的优化版介绍和面试准备](https://oss.javaguide.cn/xingqiu/practical-project-introduction-template.png)
95+
8096
### PDF 面试手册
8197

8298
进入星球就免费赠送多本优质 PDF 面试手册。
@@ -137,15 +153,7 @@ JavaGuide 知识星球优质主题汇总传送门：<https://www.yuque.com/snail
137153

138154
![](https://oss.javaguide.cn/xingqiu/%E7%90%83%E5%8F%8B%E6%AF%8F%E6%97%A5%E6%89%93%E5%8D%A1%E4%B9%9F%E8%83%BD%E5%AD%A6%E5%88%B0%E5%BE%88%E5%A4%9A%E4%B8%9C%E8%A5%BF.jpg)
139155

140-
![](https://oss.javaguide.cn/xingqiu/%E7%A1%AE%E5%AE%9E%E6%98%AF%E5%AD%A6%E4%B9%A0%E4%BA%A4%E6%B5%81%E7%9A%84%E5%A5%BD%E5%9C%B0%E6%96%B9.jpg)
141-
142-
### 读书活动
143-
144-
定期会举办读书活动（奖励丰厚），我会带着大家一起读一些优秀的技术书籍！
145-
146-
![](https://oss.javaguide.cn/xingqiu/image-20220211233642079.png)
147-
148-
每一期读书活动的获奖率都非常非常非常高！直接超过门票价！！！
156+
![](https://oss.javaguide.cn/xingqiu/%E7%A1%AE%E5%AE%9E%E6%98%AF%E5%AD%A6%E4%B9%A0%E4%BA%A4%E6%B5%81%E7%9A%84%E5%A5%BD%E5%9C%B0%E6%96%B9.jpg)！
149157

150158
### 不定时福利
151159

‎docs/cs-basics/network/other-network-questions2.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ head:
1010
content: 计算机网络面试题,TCP vs UDP,TCP三次握手,HTTP/3 QUIC,IPv4 vs IPv6,TCP可靠性,IP地址,NAT协议,ARP协议,传输层面试,网络层高频题,基于TCP协议,基于UDP协议,队头阻塞,四次挥手
1111
---
1212

13+
<!-- @include: @article-header.snippet.md -->
14+
1315
下篇主要是传输层和网络层相关的内容。
1416

1517
## TCP 与 UDP

0 commit comments

Comments
 (0)