Skip to content

Commit 7252fae

Browse files
shnulaashnulaa
authored
Update index.html
1 parent bff3e58 commit 7252fae

File tree

1 file changed

+67
-88
lines changed

1 file changed

+67
-88
lines changed

‎index.html‎

Lines changed: 67 additions & 88 deletions
Original file line numberDiff line numberDiff line change
@@ -11,44 +11,37 @@
1111
/>
1212
<!--主题-->
1313
<link rel="stylesheet" href="//unpkg.com/docsify/lib/themes/vue.css" />
14-
<!-- 你也可以在这里添加自定义 CSS 来控制侧边栏折叠样式，或者使用 JS 动态添加 (如下面的插件所示) -->
14+
<!-- CSS for Collapsible Sidebar -->
1515
<style>
16-
/* CSS for Collapsible Sidebar */
17-
/* Hide nested lists by default */
1816
.sidebar .sidebar-nav ul {
1917
display: none;
2018
}
21-
/* Show nested lists when the parent LI has the 'expanded' class */
2219
.sidebar .sidebar-nav li.collapsible.expanded > ul {
2320
display: block;
2421
}
25-
/* Optional: Style for collapsible items/links */
2622
.sidebar .sidebar-nav li.collapsible > a {
27-
/* Needed if you add content like arrows */
28-
position: relative; /* Allow positioning of pseudo-elements */
29-
padding-right: 20px; /* Make space for the indicator */
30-
cursor: pointer; /* Indicate it's clickable */
23+
position: relative;
24+
padding-right: 20px;
25+
cursor: pointer;
3126
}
32-
/* Optional: Add expand/collapse indicator (right arrow for collapsed, down arrow for expanded) */
3327
.sidebar .sidebar-nav li.collapsible > a::before {
34-
content: '►'; /* Right arrow when collapsed */
28+
content: '►';
3529
position: absolute;
36-
right: 5px; /* Position relative to the link */
30+
right: 5px;
3731
top: 50%;
3832
transform: translateY(-50%);
3933
font-size: 0.8em;
40-
transition: transform 0.2s ease-in-out; /* Smooth transition for indicator */
34+
transition: transform 0.2s ease-in-out;
4135
}
4236
.sidebar .sidebar-nav li.collapsible.expanded > a::before {
43-
content: '▼'; /* Down arrow when expanded */
44-
transform: translateY(-50%) rotate(0deg); /* No rotation needed for down arrow */
37+
content: '▼';
38+
transform: translateY(-50%) rotate(0deg);
4539
}
46-
/* Ensure padding is consistent if some links don't have indicators */
4740
.sidebar .sidebar-nav a {
48-
padding-right: 10px; /* Base padding for all links */
41+
padding-right: 10px;
4942
}
5043
.sidebar .sidebar-nav li.collapsible > a {
51-
padding-right: 20px; /* Override for collapsible links */
44+
padding-right: 20px;
5245
}
5346
</style>
5447
</head>
@@ -63,7 +56,7 @@
6356
</nav>
6457
<div id="app"></div>
6558

66-
<!-- docsify-edit-on-github (需要放在 docsify 脚本之前，因为它修改的是 $docsify 配置) -->
59+
<!-- docsify-edit-on-github -->
6760
<script src="//unpkg.com/docsify-edit-on-github/index.js"></script>
6861

6962
<script>
@@ -75,21 +68,18 @@
7568
window.$docsify = {
7669
name: "JavaGuide",
7770
repo: "https://github.com/Snailclimb/JavaGuide",
78-
maxLevel: 4, //最大支持渲染的标题层级
79-
//封面,_coverpage.md
71+
maxLevel: 4,
8072
//coverpage: true,
81-
auto2top: true, //切换页面后是否自动跳转到页面顶部
73+
auto2top: true,
8274
//ga: 'UA-138586553-1',
8375
//logo: 'https://my-blog-to-use.oss-cn-beijing.aliyuncs.com/2019-3logo-透明.png' ,
8476
search: {
85-
//maxAge: 86400000, // 过期时间，单位毫秒，默认一天
77+
//maxAge: 86400000,
8678
paths: "auto",
8779
placeholder: "搜索",
8880
noData: "找不到结果",
89-
// 搜索标题的最大程级, 1 - 6
9081
depth: 3,
9182
},
92-
// 备案
9383
beian: {
9484
ICP: "鄂ICP备2020015769号",
9585
NISMSP: {
@@ -98,24 +88,39 @@
9888
id: "",
9989
},
10090
},
101-
// 字数统计
10291
count: {
10392
countable: true,
10493
fontsize: "0.9em",
10594
color: "rgb(90,90,90)",
10695
language: "chinese",
10796
},
10897

109-
// =========== Plugins Configuration ===========
11098
plugins: [
111-
// 1. Existing EditOnGithubPlugin
11299
EditOnGithubPlugin.create(
113100
"https://github.com/Snailclimb/JavaGuide/blob/master/"
114101
),
115102

116-
// 3. New Plugin to Add referrerpolicy="no-referrer" and Implement Collapsible Sidebar
117103
function (hook) {
118-
// This part adds referrerpolicy="no-referrer" to all img tags
104+
const targetOrigin = 'https://oss.javaguide.cn/';
105+
const antiHotlinkParamKeyVal = 'x-oss-process=style/javaguide';
106+
107+
hook.afterEach(function (html, next) {
108+
const imgRegex = new RegExp(`<img[^>]*src="(https?:\\/\\/oss\\.javaguide\\.cn\\/[^"]*)"[^>]*>`, 'gi');
109+
let modifiedHtml = html.replace(imgRegex, function(match, srcUrl) {
110+
if (srcUrl.includes(antiHotlinkParamKeyVal)) {
111+
return match;
112+
}
113+
const separator = srcUrl.includes('?') ? '&' : '?';
114+
const newSrcUrl = srcUrl + separator + antiHotlinkParamKeyVal;
115+
return match.replace(srcUrl, newSrcUrl);
116+
});
117+
next(modifiedHtml);
118+
});
119+
},
120+
121+
// --- Corrected Plugin to Add referrerpolicy and Implement Collapsible Sidebar ---
122+
function (hook) {
123+
// Add referrerpolicy="no-referrer"
119124
hook.afterEach(function (html, next) {
120125
const imgTagRegex = /<img[^>]*>/gi;
121126
let modifiedHtml = html.replace(imgTagRegex, function(match) {
@@ -127,107 +132,81 @@
127132
next(modifiedHtml);
128133
});
129134

130-
// This part implements the collapsible sidebar logic
131-
// Use doneEach or ready hook to ensure sidebar DOM is available
132-
hook.doneEach(function() { // Or hook.ready(function() { ... });
135+
// Implement collapsible sidebar logic
136+
hook.doneEach(function() {
133137
const sidebar = document.querySelector('.sidebar');
134-
if (!sidebar) return; // Exit if sidebar element is not found
138+
if (!sidebar) return;
135139

136-
// Find all LIs that contain a direct child UL (these are the parent items with nested menus)
137-
// Use querySelector(':scope > ul') for checking direct children.
138-
// Fallback for older browsers that don't support :scope (though uncommon now)
139140
const allLIs = sidebar.querySelectorAll('.sidebar-nav li');
140141
const collapsibleItems = [];
141-
allLIs.forEach(li => {
142-
// Check if this LI contains a UL as a direct child
142+
143+
allLIs.forEach(li => {
143144
if (li.querySelector(':scope > ul')) {
144145
collapsibleItems.push(li);
145146
}
146-
});
147+
});
147148

148-
// Process each potential collapsible item
149149
collapsibleItems.forEach(li => {
150-
li.classList.add('collapsible'); // Mark it with a class
150+
li.classList.add('collapsible');
151+
const link = li.querySelector(':scope > a'); // Find the direct child link
151152

152-
// Find the direct link within this collapsible LI
153-
const link = li.querySelector(':scope > a'); // Direct child link
153+
// *** FIX: Check if the link element exists before adding event listener ***
154154
if (link) {
155-
// Add click listener to the link
156155
link.addEventListener('click', function(event) {
157-
// Toggle the 'expanded' class on the parent LI (li is available via closure)
156+
// Toggle the 'expanded' class on the parent LI
158157
li.classList.toggle('expanded');
159158

160-
// --- IMPORTANT ---
161-
// Decide if clicking this link should *also* navigate to the page it links to.
162-
// - If this link represents a *category* title that doesn't have its own page,
163-
// and clicking it should *only* toggle the submenu:
164-
// event.preventDefault();
165-
// - If this link represents a *page* (e.g., an index page for the category),
166-
// and clicking it should *both* toggle the submenu *and* navigate:
167-
// Remove event.preventDefault(); // (Current state in the code)
168-
// --- End IMPORTANT ---
169-
170-
// event.preventDefault(); // Uncomment this line if clicking should only toggle collapse
159+
// Uncomment the line below if clicking should ONLY toggle and NOT navigate
160+
// event.preventDefault();
171161

172-
// Stop event from bubbling up, preventing potential interference
173-
event.stopPropagation();
162+
event.stopPropagation(); // Prevent parent listeners (if any) from firing
174163
});
164+
} else {
165+
// Optional: Log a warning if a collapsible LI has no direct link
166+
// This might indicate an issue with your _sidebar.md structure
167+
console.warn("Collapsible LI found without a direct child link:", li);
168+
// You might want to add a click listener to the LI itself here as a fallback
169+
li.addEventListener('click', function(event) {
170+
li.classList.toggle('expanded');
171+
// Check if click target is not a link within this LI
172+
if (!event.target.closest('a')) {
173+
event.preventDefault(); // Prevent default if not clicking a link further down
174+
}
175+
event.stopPropagation();
176+
});
175177
}
176-
// Note: Adding click listener to the LI itself might be another approach,
177-
// but clicking the link within the LI is usually the intended interaction point.
178-
// Adding it to the link also allows using the link's default behavior if needed.
178+
// --- End FIX ---
179179
});
180180

181-
// --- Handle initial expansion of the active path ---
182-
// Find the currently active link in the sidebar
181+
// Handle initial expansion of the active path
183182
const activeLink = sidebar.querySelector('.sidebar-nav .active');
184183
if (activeLink) {
185-
// Start from the LI containing the active link
186184
let currentElement = activeLink.parentElement;
187-
// Traverse up the DOM tree towards the sidebar root
188185
while (currentElement && currentElement !== sidebar) {
189-
// If the current element is an LI AND it has the 'collapsible' class
190186
if (currentElement.tagName === 'LI' && currentElement.classList.contains('collapsible')) {
191-
currentElement.classList.add('expanded'); // Expand this parent collapsible LI
187+
currentElement.classList.add('expanded');
192188
}
193-
// Move up to the next parent element
194189
currentElement = currentElement.parentElement;
195190
}
196191
}
197-
// --- End initial expansion logic ---
198192
});
199193
}
200-
// --- End Collapsible Sidebar Plugin ---
194+
// --- End Corrected Plugin ---
201195
],
202-
// ===========================================
203196
};
204197
</script>
205198

206-
<!-- Main Docsify script (必须在配置脚本之后) -->
199+
<!-- Main Docsify script -->
207200
<script src="//unpkg.com/docsify/lib/docsify.min.js"></script>
208201

209-
<!-- 其他 Docsify 插件 (通常在主 docsify 脚本之后) -->
210-
<!--Java代码高亮-->
202+
<!-- Other Docsify Plugins -->
211203
<script src="//unpkg.com/prismjs/components/prism-java.js"></script>
212-
<!--全文搜索,直接用官方提供的无法生效-->
213204
<script src="https://cdn.bootcss.com/docsify/4.5.9/plugins/search.min.js"></script>
214-
<!--谷歌统计
215-
<script src="//unpkg.com/docsify" data-ga="UA-138586553-1"></script>
216-
<script src="//unpkg.com/docsify/lib/plugins/ga.js"></script>
217-
-->
218-
<!-- 复制到剪贴板 -->
219205
<script src="//unpkg.com/docsify-copy-code"></script>
220-
<!-- 图片缩放 -->
221206
<script src="//unpkg.com/docsify/lib/plugins/zoom-image.js"></script>
222-
<!-- 表情 -->
223207
<script src="//unpkg.com/docsify/lib/plugins/emoji.js"></script>
224-
<!-- 字数统计 -->
225208
<script src="//unpkg.com/docsify-count/dist/countable.js"></script>
226-
<!-- 备案 -->
227209
<script src="https://cdn.jsdelivr.net/npm/docsify-beian@latest/dist/beian.min.js"></script>
228210

229-
<!-- 如果你需要 MathJax，请在此处或 <head> 中引入 -->
230-
<!-- <script src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js" async></script> -->
231-
232211
</body>
233212
</html>

0 commit comments

Comments
 (0)