zhangdocs 1.1.12 → 1.1.14

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,6 @@
1
1
  {
2
2
  "name": "zhangdocs",
3
- "version": "1.1.12",
3
+ "version": "1.1.14",
4
4
  "description": "Simple document generation tool. Dependence Node.js run.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -8,7 +8,7 @@
8
8
  },
9
9
  "main": "index.js",
10
10
  "bin": {
11
- "zhangdocs": ".bin/zhangdocs.js"
11
+ "doc": ".bin/zhangdocs.js"
12
12
  },
13
13
  "keywords": [
14
14
  "zhangdocs",
@@ -1,6 +1,15 @@
1
1
  <div class="nav">
2
- <div class="logo">
3
- <%= title %>
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 %>
@@ -20,11 +20,11 @@ body,html
20
20
  color:#61dafb
21
21
  @media mq-mobile
22
22
  float: none
23
- padding: 0 0 12px 0
23
+ padding: 0
24
24
  font-size: 20px
25
- text-align: center
26
- border-bottom: 1px solid rgba(0,0,0,0.1)
27
- margin-bottom: 12px
25
+ text-align: left
26
+ border-bottom: none
27
+ margin-bottom: 0
28
28
  img
29
29
  vertical-align: middle
30
30
  margin: -4px 0 0 0
@@ -48,11 +48,72 @@ $hover-color = #1ABC9C // 悬停绿色
48
48
  width: 100%
49
49
  @media mq-mobile
50
50
  height: auto
51
+ min-height: auto
51
52
  position: relative
52
- padding: 12px
53
+ padding: 0
53
54
  line-height: 1.5
54
55
  border-bottom: 1px solid $border-color
55
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
56
117
  ul
57
118
  list-style: none
58
119
  position: relative
@@ -61,7 +122,6 @@ $hover-color = #1ABC9C // 悬停绿色
61
122
  overflow-x:auto
62
123
  height:100%
63
124
  @media mq-mobile
64
- display: flex
65
125
  flex-direction: column
66
126
  width: 100%
67
127
  overflow: visible
@@ -345,6 +405,8 @@ table
345
405
  height: 24px
346
406
  cursor: pointer
347
407
  z-index: 0
408
+ @media mq-mobile
409
+ display: none
348
410
 
349
411
  .page-toc
350
412
  transition: all 0.3s ease