zhangdocs 1.1.10 → 1.1.13
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/package.json
CHANGED
|
@@ -1,6 +1,15 @@
|
|
|
1
1
|
<div class="nav">
|
|
2
|
-
<div class="
|
|
3
|
-
|
|
2
|
+
<div class="nav-header">
|
|
3
|
+
<div class="logo">
|
|
4
|
+
<%= title %>
|
|
5
|
+
</div>
|
|
6
|
+
<button class="nav-toggle" id="nav-toggle" aria-label="切换导航菜单">
|
|
7
|
+
<span></span>
|
|
8
|
+
<span></span>
|
|
9
|
+
<span></span>
|
|
10
|
+
</button>
|
|
11
|
+
</div>
|
|
12
|
+
<div class="nav-menu" id="nav-menu">
|
|
13
|
+
<%- menu_html -%>
|
|
4
14
|
</div>
|
|
5
|
-
<%- menu_html -%>
|
|
6
15
|
</div>
|
|
@@ -193,5 +193,50 @@ style="position: fixed; top: 0; left: 0; width: 100%; height: 100%; background:
|
|
|
193
193
|
document.body.removeChild(textArea);
|
|
194
194
|
}
|
|
195
195
|
});
|
|
196
|
+
|
|
197
|
+
// 移动端导航菜单折叠/展开功能
|
|
198
|
+
(function() {
|
|
199
|
+
function initNavToggle() {
|
|
200
|
+
var navToggle = document.getElementById('nav-toggle');
|
|
201
|
+
var navMenu = document.getElementById('nav-menu');
|
|
202
|
+
|
|
203
|
+
if (navToggle && navMenu) {
|
|
204
|
+
// 绑定点击事件
|
|
205
|
+
navToggle.onclick = function(e) {
|
|
206
|
+
e.preventDefault();
|
|
207
|
+
e.stopPropagation();
|
|
208
|
+
navToggle.classList.toggle('nav-toggle-active');
|
|
209
|
+
navMenu.classList.toggle('nav-menu-open');
|
|
210
|
+
};
|
|
211
|
+
|
|
212
|
+
// 点击菜单项后自动收起菜单（移动端）
|
|
213
|
+
if (window.innerWidth <= 768) {
|
|
214
|
+
setTimeout(function() {
|
|
215
|
+
var menuLinks = navMenu.querySelectorAll('a');
|
|
216
|
+
menuLinks.forEach(function(link) {
|
|
217
|
+
link.onclick = function() {
|
|
218
|
+
navToggle.classList.remove('nav-toggle-active');
|
|
219
|
+
navMenu.classList.remove('nav-menu-open');
|
|
220
|
+
};
|
|
221
|
+
});
|
|
222
|
+
}, 200);
|
|
223
|
+
}
|
|
224
|
+
}
|
|
225
|
+
}
|
|
226
|
+
|
|
227
|
+
// 立即尝试初始化
|
|
228
|
+
initNavToggle();
|
|
229
|
+
|
|
230
|
+
// DOM 加载完成后再次初始化
|
|
231
|
+
if (document.readyState === 'loading') {
|
|
232
|
+
document.addEventListener('DOMContentLoaded', initNavToggle);
|
|
233
|
+
} else {
|
|
234
|
+
setTimeout(initNavToggle, 100);
|
|
235
|
+
}
|
|
236
|
+
|
|
237
|
+
// 延迟初始化（处理动态显示的情况）
|
|
238
|
+
setTimeout(initNavToggle, 500);
|
|
239
|
+
setTimeout(initNavToggle, 1000);
|
|
240
|
+
})();
|
|
196
241
|
</script>
|
|
197
242
|
<% include footer.ejs %>
|
|
@@ -6,7 +6,8 @@
|
|
|
6
6
|
line-height: 1.6
|
|
7
7
|
color: #24292e
|
|
8
8
|
@media mq-mobile
|
|
9
|
-
padding:
|
|
9
|
+
padding: 16px 12px
|
|
10
|
+
font-size: 15px
|
|
10
11
|
&>*:first-child
|
|
11
12
|
margin-top: 0 !important
|
|
12
13
|
strong
|
|
@@ -21,6 +22,9 @@
|
|
|
21
22
|
max-width: 100%
|
|
22
23
|
height: auto
|
|
23
24
|
border-radius: 4px
|
|
25
|
+
@media mq-mobile
|
|
26
|
+
display: block
|
|
27
|
+
margin: 12px auto
|
|
24
28
|
a
|
|
25
29
|
color: #0969da
|
|
26
30
|
text-decoration: none
|
|
@@ -35,6 +39,9 @@
|
|
|
35
39
|
font-weight: 600
|
|
36
40
|
line-height: 1.25
|
|
37
41
|
color: #1f2328
|
|
42
|
+
@media mq-mobile
|
|
43
|
+
margin-top: 0.6em
|
|
44
|
+
margin-bottom: 10px
|
|
38
45
|
a
|
|
39
46
|
display:none
|
|
40
47
|
&:hover a
|
|
@@ -70,6 +77,12 @@
|
|
|
70
77
|
background-color: #f6f8fa
|
|
71
78
|
border-radius: 3px
|
|
72
79
|
padding: 8px 16px
|
|
80
|
+
@media mq-mobile
|
|
81
|
+
margin-left: -12px
|
|
82
|
+
margin-right: -12px
|
|
83
|
+
padding: 8px 12px
|
|
84
|
+
border-left: none
|
|
85
|
+
border-radius: 0
|
|
73
86
|
&>:last-child
|
|
74
87
|
margin-bottom: 0
|
|
75
88
|
&>:first-child
|
|
@@ -77,6 +90,8 @@
|
|
|
77
90
|
p,blockquote,ul,ol,dl,table,pre
|
|
78
91
|
margin-top: 0
|
|
79
92
|
margin-bottom: 12px
|
|
93
|
+
@media mq-mobile
|
|
94
|
+
margin-bottom: 10px
|
|
80
95
|
ul,ol
|
|
81
96
|
padding-left: 1.5em
|
|
82
97
|
margin-bottom: 12px
|
|
@@ -94,6 +109,7 @@
|
|
|
94
109
|
pre
|
|
95
110
|
padding: 12px 16px
|
|
96
111
|
overflow: auto
|
|
112
|
+
-webkit-overflow-scrolling: touch
|
|
97
113
|
background-color: #f6f8fa
|
|
98
114
|
border: 1px solid #d8dee4
|
|
99
115
|
border-radius: 6px
|
|
@@ -103,6 +119,14 @@
|
|
|
103
119
|
white-space: pre-wrap
|
|
104
120
|
position: relative
|
|
105
121
|
margin-bottom: 12px
|
|
122
|
+
@media mq-mobile
|
|
123
|
+
padding: 10px 12px
|
|
124
|
+
font-size: 14px
|
|
125
|
+
border-radius: 4px
|
|
126
|
+
margin-left: -12px
|
|
127
|
+
margin-right: -12px
|
|
128
|
+
border-left: none
|
|
129
|
+
border-right: none
|
|
106
130
|
.code-copy-btn
|
|
107
131
|
position: absolute
|
|
108
132
|
top: 0
|
|
@@ -122,6 +146,12 @@
|
|
|
122
146
|
justify-content: center
|
|
123
147
|
width: 24px
|
|
124
148
|
height: 24px
|
|
149
|
+
@media mq-mobile
|
|
150
|
+
width: 32px
|
|
151
|
+
height: 32px
|
|
152
|
+
opacity: 0.7
|
|
153
|
+
top: 4px
|
|
154
|
+
right: 4px
|
|
125
155
|
&:hover
|
|
126
156
|
opacity: 1
|
|
127
157
|
color: #007bff
|
|
@@ -134,6 +164,9 @@
|
|
|
134
164
|
width: 20px
|
|
135
165
|
height: 20px
|
|
136
166
|
pointer-events: none
|
|
167
|
+
@media mq-mobile
|
|
168
|
+
width: 22px
|
|
169
|
+
height: 22px
|
|
137
170
|
code
|
|
138
171
|
background-color: transparent
|
|
139
172
|
color: #24292e
|
|
@@ -141,6 +174,8 @@
|
|
|
141
174
|
display: block
|
|
142
175
|
font-size: 15px
|
|
143
176
|
white-space: pre-wrap
|
|
177
|
+
@media mq-mobile
|
|
178
|
+
font-size: 14px
|
|
144
179
|
// 确保代码内容不受按钮影响
|
|
145
180
|
&::before
|
|
146
181
|
content: none
|
|
@@ -168,10 +203,20 @@
|
|
|
168
203
|
max-width: 100%
|
|
169
204
|
display: table
|
|
170
205
|
margin-bottom: 12px
|
|
206
|
+
@media mq-mobile
|
|
207
|
+
display: block
|
|
208
|
+
overflow-x: auto
|
|
209
|
+
-webkit-overflow-scrolling: touch
|
|
210
|
+
margin-left: -12px
|
|
211
|
+
margin-right: -12px
|
|
171
212
|
th,td
|
|
172
213
|
border: 1px solid #d8dee4
|
|
173
214
|
padding: 6px 13px
|
|
174
215
|
text-align: left
|
|
216
|
+
@media mq-mobile
|
|
217
|
+
padding: 8px 10px
|
|
218
|
+
font-size: 14px
|
|
219
|
+
white-space: nowrap
|
|
175
220
|
th
|
|
176
221
|
font-weight: 600
|
|
177
222
|
background: #f6f8fa
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
// Media queries
|
|
2
|
-
mq-mobile = "screen and (max-width:
|
|
3
|
-
mq-tablet = "screen and (min-width:
|
|
2
|
+
mq-mobile = "screen and (max-width: 768px)"
|
|
3
|
+
mq-tablet = "screen and (min-width: 769px) and (max-width: 1170px)"
|
|
4
4
|
// mq-iPhones4 = "only screen and (min-device-width: 320px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"
|
|
5
5
|
// mq-normal = "screen and (min-width: 768px)"
|
|
6
6
|
|
|
@@ -13,14 +13,21 @@ reset-html5()
|
|
|
13
13
|
body,html
|
|
14
14
|
height:100%
|
|
15
15
|
font-family:Helvetica, arial, nimbussansl, liberationsans, freesans, clean, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol"
|
|
16
|
-
.logo
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
.logo
|
|
17
|
+
float left
|
|
18
|
+
padding: 10px 20px 0 0
|
|
19
|
+
font-size: 24px
|
|
20
|
+
color:#61dafb
|
|
21
|
+
@media mq-mobile
|
|
22
|
+
float: none
|
|
23
|
+
padding: 0
|
|
24
|
+
font-size: 20px
|
|
25
|
+
text-align: left
|
|
26
|
+
border-bottom: none
|
|
27
|
+
margin-bottom: 0
|
|
28
|
+
img
|
|
29
|
+
vertical-align: middle
|
|
30
|
+
margin: -4px 0 0 0
|
|
24
31
|
|
|
25
32
|
// 主色调
|
|
26
33
|
$primary-color = #4A90E2 // 主题蓝色
|
|
@@ -40,8 +47,73 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
40
47
|
position: fixed
|
|
41
48
|
width: 100%
|
|
42
49
|
@media mq-mobile
|
|
43
|
-
height
|
|
44
|
-
|
|
50
|
+
height: auto
|
|
51
|
+
min-height: auto
|
|
52
|
+
position: relative
|
|
53
|
+
padding: 0
|
|
54
|
+
line-height: 1.5
|
|
55
|
+
border-bottom: 1px solid $border-color
|
|
56
|
+
box-shadow: 0 2px 4px rgba(0,0,0,0.1)
|
|
57
|
+
.nav-header
|
|
58
|
+
@media mq-mobile
|
|
59
|
+
display: flex
|
|
60
|
+
justify-content: space-between
|
|
61
|
+
align-items: center
|
|
62
|
+
padding: 12px
|
|
63
|
+
border-bottom: 1px solid rgba(0,0,0,0.1)
|
|
64
|
+
@media (min-width: 769px)
|
|
65
|
+
display: block
|
|
66
|
+
padding: 0
|
|
67
|
+
border-bottom: none
|
|
68
|
+
.logo
|
|
69
|
+
float: left
|
|
70
|
+
padding: 10px 20px 0 0
|
|
71
|
+
font-size: 24px
|
|
72
|
+
color: #61dafb
|
|
73
|
+
.nav-menu
|
|
74
|
+
@media (min-width: 769px)
|
|
75
|
+
display: block
|
|
76
|
+
height: 100%
|
|
77
|
+
@media mq-mobile
|
|
78
|
+
overflow-y: hidden
|
|
79
|
+
transition: max-height 0.3s ease-out
|
|
80
|
+
max-height: 0
|
|
81
|
+
&.nav-menu-open
|
|
82
|
+
max-height: 70vh
|
|
83
|
+
overflow-y: auto
|
|
84
|
+
-webkit-overflow-scrolling: touch
|
|
85
|
+
transition: max-height 0.5s ease-in
|
|
86
|
+
ul
|
|
87
|
+
@media mq-mobile
|
|
88
|
+
display: block
|
|
89
|
+
.nav-toggle
|
|
90
|
+
@media mq-mobile
|
|
91
|
+
display: flex
|
|
92
|
+
flex-direction: column
|
|
93
|
+
justify-content: space-around
|
|
94
|
+
width: 28px
|
|
95
|
+
height: 28px
|
|
96
|
+
background: transparent
|
|
97
|
+
border: none
|
|
98
|
+
cursor: pointer
|
|
99
|
+
padding: 0
|
|
100
|
+
z-index: 100
|
|
101
|
+
span
|
|
102
|
+
width: 100%
|
|
103
|
+
height: 3px
|
|
104
|
+
background: $text-color
|
|
105
|
+
border-radius: 3px
|
|
106
|
+
transition: all 0.3s ease
|
|
107
|
+
transform-origin: center
|
|
108
|
+
&.nav-toggle-active
|
|
109
|
+
span:nth-child(1)
|
|
110
|
+
transform: rotate(45deg) translate(7px, 7px)
|
|
111
|
+
span:nth-child(2)
|
|
112
|
+
opacity: 0
|
|
113
|
+
span:nth-child(3)
|
|
114
|
+
transform: rotate(-45deg) translate(7px, -7px)
|
|
115
|
+
@media (min-width: 769px)
|
|
116
|
+
display: none
|
|
45
117
|
ul
|
|
46
118
|
list-style: none
|
|
47
119
|
position: relative
|
|
@@ -50,9 +122,11 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
50
122
|
overflow-x:auto
|
|
51
123
|
height:100%
|
|
52
124
|
@media mq-mobile
|
|
53
|
-
|
|
54
|
-
width:100%
|
|
55
|
-
overflow:
|
|
125
|
+
flex-direction: column
|
|
126
|
+
width: 100%
|
|
127
|
+
overflow: visible
|
|
128
|
+
height: auto
|
|
129
|
+
padding: 0
|
|
56
130
|
ul
|
|
57
131
|
display: none
|
|
58
132
|
background: #D1D1D1
|
|
@@ -61,6 +135,12 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
61
135
|
position: absolute
|
|
62
136
|
top: 100%
|
|
63
137
|
z-index 9
|
|
138
|
+
@media mq-mobile
|
|
139
|
+
position: static
|
|
140
|
+
background: rgba(0,0,0,0.02)
|
|
141
|
+
border-left: 3px solid $primary-color
|
|
142
|
+
margin-left: 15px
|
|
143
|
+
display: none
|
|
64
144
|
li.active
|
|
65
145
|
a
|
|
66
146
|
color:$primary-color
|
|
@@ -70,14 +150,23 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
70
150
|
float: none
|
|
71
151
|
border-bottom: 1px solid #C8C8C8
|
|
72
152
|
position: relative
|
|
153
|
+
@media mq-mobile
|
|
154
|
+
border-bottom: 1px solid rgba(0,0,0,0.05)
|
|
73
155
|
a:hover
|
|
74
156
|
background: #4b545f
|
|
75
157
|
color:$hover-color
|
|
158
|
+
@media mq-mobile
|
|
159
|
+
background: rgba(0,0,0,0.03)
|
|
160
|
+
color: $text-color
|
|
76
161
|
a
|
|
77
162
|
color: $text-color
|
|
78
163
|
line-height: 29px
|
|
79
164
|
white-space:nowrap
|
|
80
165
|
word-break:keep-all
|
|
166
|
+
@media mq-mobile
|
|
167
|
+
padding: 8px 15px
|
|
168
|
+
line-height: 1.5
|
|
169
|
+
font-size: 14px
|
|
81
170
|
ul
|
|
82
171
|
position: absolute
|
|
83
172
|
left: 100%
|
|
@@ -85,17 +174,35 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
85
174
|
li
|
|
86
175
|
float: left
|
|
87
176
|
line-height: 40px
|
|
177
|
+
@media mq-mobile
|
|
178
|
+
float: none
|
|
179
|
+
line-height: 1.5
|
|
180
|
+
width: 100%
|
|
181
|
+
border-bottom: 1px solid rgba(0,0,0,0.05)
|
|
88
182
|
a
|
|
89
183
|
color: $text-color
|
|
90
184
|
text-decoration: none
|
|
91
185
|
padding: 0 15px
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
186
|
+
display: block
|
|
187
|
+
@media mq-mobile
|
|
188
|
+
padding: 12px 15px
|
|
189
|
+
width: 100%
|
|
190
|
+
font-size: 15px
|
|
191
|
+
&:hover
|
|
192
|
+
@media mq-mobile
|
|
193
|
+
background-color: rgba(0,0,0,0.02)
|
|
194
|
+
a
|
|
195
|
+
color: $hover-color
|
|
95
196
|
li.active
|
|
197
|
+
@media mq-mobile
|
|
198
|
+
background-color: rgba(74, 144, 226, 0.1)
|
|
96
199
|
a
|
|
97
200
|
color:$primary-color
|
|
98
201
|
height: 40px
|
|
202
|
+
@media mq-mobile
|
|
203
|
+
height: auto
|
|
204
|
+
color: $primary-color
|
|
205
|
+
font-weight: 600
|
|
99
206
|
ul li:hover > ul
|
|
100
207
|
display: block
|
|
101
208
|
ul:after
|
|
@@ -108,7 +215,7 @@ $hover-color = #1ABC9C // 悬停绿色
|
|
|
108
215
|
height: 100%
|
|
109
216
|
overflow: auto
|
|
110
217
|
@media mq-mobile
|
|
111
|
-
padding-top 0
|
|
218
|
+
padding-top: 0
|
|
112
219
|
.page-toc,.markdown-body
|
|
113
220
|
height:100%
|
|
114
221
|
.markdown-body
|
|
@@ -298,6 +405,8 @@ table
|
|
|
298
405
|
height: 24px
|
|
299
406
|
cursor: pointer
|
|
300
407
|
z-index: 0
|
|
408
|
+
@media mq-mobile
|
|
409
|
+
display: none
|
|
301
410
|
|
|
302
411
|
.page-toc
|
|
303
412
|
transition: all 0.3s ease
|