-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
227 lines (216 loc) · 8.62 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>黄建新的个人笔记中心</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta
name="description"
content="黄建新的个人笔记空间，专注于分享和探索前端技术的最新动态、高效实践和独特见解。邀您一同分享学习之路，共同提升前端技术精进。"
/>
<menu
name="Keywords"
content="个人笔记, 笔记空间, 黄建新, 前端开发, web, web开发, 前端技术, 网页开发, 黄建新的个人笔记, 前端开发笔记, web编程笔记, 黄建新的前端开发, JavaScript, HTML, CSS, Vue.js, React, Node.js, 前端框架, Web开发教程"
></menu>
<meta
name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
<!-- 设置浏览器图标 -->
<link rel="icon" href="/docs/image/笔记本.png" type="image/x-icon" />
<!-- 默认主题 -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify/lib/themes/vue.css"
/>
<!-- 侧边栏目录折叠 箭头样式 -->
<!-- <link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar.min.css"
/> -->
<!-- 侧边栏目录折叠 文件夹样式 -->
<link
rel="stylesheet"
href="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/sidebar-folder.min.css"
/>
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.css"
/>
<link rel="stylesheet" href="./css/index.css" />
</head>
<body>
<!-- 定义加载时候的动作 -->
<div id="app">正在加载中...</div>
<!-- index.html -->
<!-- 在github上编辑 -->
<script src="//cdn.jsdelivr.net/npm/docsify-edit-on-github"></script>
<!-- GitHub issue -->
<script src="https://cdn.jsdelivr.net/npm/gitalk@1/dist/gitalk.min.js"></script>
<script src="./plugins/md5.js"></script>
<script>
window.$docsify = {
name: '黄建新的笔记空间', // 项目名称
repo: 'https://github.com/xinxin1228/docs', // 仓库地址，点击右上角的Github章鱼猫头像会跳转到此地址
loadSidebar: true, // 侧边栏支持，默认加载的是项目根目录下的_sidebar.md文件
loadNavbar: true, // 导航栏支持，默认加载的是项目根目录下的_navbar.md文件
coverpage: true, // 封面支持，默认加载的是项目根目录下的_coverpage.md文件
maxLevel: 5, // 最大支持渲染的标题层级
subMaxLevel: 4, // 自定义侧边栏后默认不会再生成目录，设置生成目录的最大层级（建议配置为2-4）
mergeNavbar: true, // 小屏设备下合并导航栏到侧边栏
coverpage: true,
sidebarDisplayLevel: 0, // 设置侧边栏显示级别
plugins: [
// github编辑
EditOnGithubPlugin.create(
'https://github.com/xinxin1228/docs/blob/main/',
null,
'在GitHub上编辑'
),
],
// 搜索
search: {
placeholder: '快速搜索',
noData: '找不到结果！',
},
copyCode: {
buttonText: '复制',
errorText: '复制失败！',
successText: '复制成功！',
},
// 广告
// disqus: 'shortname',
// 图片居中
markdown: {
renderer: {
image: function (href, title, text) {
// 按照原来的渲染 img
var image_html = this.origin.image.apply(this, arguments)
// 用 figure 包一下图片，实现居中
return (
'<figure>' +
image_html +
'<figcaption>' +
text +
'</figcaption></figure>'
)
},
},
},
// 字数和阅读时长
count: {
language: 'chinese',
},
// 阅读进度
progress: {
position: 'bottom',
color: 'var(--theme-color,#42b983)',
height: '3px',
},
// 文档更新时间
timeUpdater: {
text: '>最后更新时间: {docsify-updated}',
formatUpdated: '{YYYY}年{MM}月{DD}日 {HH}:{mm}:{ss}',
whereToPlace: 'top', // "top" or "bottom", default to "bottom"
},
// 页脚
footer: {
copy: `<span>个人笔记 © ${new Date().getFullYear()}</span>`,
auth: '黄建新',
pre: '<hr/>',
style: 'text-align: right;',
class: 'className',
},
}
</script>
<!-- emoji表情支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/emoji.min.js"></script>
<!-- 图片放大缩小支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/zoom-image.min.js"></script>
<!-- 搜索功能支持 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/search.min.js"></script>
<!--在所有的代码块上添加一个简单的Click to copy按钮来允许用户从你的文档中轻易地复制代码-->
<script src="//cdn.jsdelivr.net/npm/docsify-copy-code/dist/docsify-copy-code.min.js"></script>
<!-- 侧边栏目录折叠 -->
<script src="//cdn.jsdelivr.net/npm/docsify-sidebar-collapse/dist/docsify-sidebar-collapse.min.js"></script>
<!-- docsify的js依赖 -->
<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
<!-- 广告 -->
<!-- <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/disqus.min.js"></script> -->
<!-- 分页 -->
<script src="//cdn.jsdelivr.net/npm/docsify-pagination/dist/docsify-pagination.min.js"></script>
<!-- 字数和阅读时长 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-count@latest/dist/countable.min.js"></script>
<!-- 页脚增强 -->
<script src="//unpkg.com/docsify-footer-enh/dist/docsify-footer-enh.min.js"></script>
<!-- 阅读进度 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-progress@latest/dist/progress.min.js"></script>
<!-- 文档更新时间 -->
<script src="https://cdn.jsdelivr.net/npm/docsify-updated/src/time-updater.min.js"></script>
<!-- tabs -->
<script src="https://cdn.jsdelivr.net/npm/docsify-tabs@1"></script>
<!-- gitalk -->
<script>
window.addEventListener('load', () => {
const getIssue = () => {
const articleEl = document.querySelector('#main')
const containerEl = document.createElement('div')
containerEl.id = 'gitalk-container'
articleEl.append(containerEl)
// 引入 issue
const gitalk = new Gitalk({
clientID: '6ffd5bf89813714d4894',
clientSecret: '63d2cfe20347a1d99e819016ffaf00f498693168',
repo: 'docs', // The repository of store comments,
owner: 'xinxin1228',
admin: ['xinxin1228'],
// id: location.href.split('?')[0].substr(0, 50), // Ensure uniqueness and length less than 50
id: md5(location.href), // Ensure uniqueness and length less than 50
distractionFreeMode: false, // Facebook-like distraction free mode
// title: 'docs',
// id: location.hash.match(/#(.*?)([?]|$)/)[1],
})
gitalk.render('gitalk-container')
}
getIssue()
let oldUrl
window.addEventListener('hashchange', () => {
const url = location.href.split('?')[0]
if (oldUrl !== url) {
setTimeout(getIssue, 1000)
window.scrollTo({ top: 0 })
oldUrl = url
}
})
})
</script>
<!-- 返回顶部 -->
<script>
const topEl = document.createElement('div')
const imgEl = document.createElement('img')
imgEl.src = './imgs/backtop.png'
topEl.classList.add('huangjx-back-top')
imgEl.setAttribute('data-action', 'back-to-top')
topEl.setAttribute('data-action', 'back-to-top')
topEl.append(imgEl)
document.body.append(topEl)
document.addEventListener('click', e => {
if (e.target.dataset.action === 'back-to-top') {
window.scrollTo({
top: 0,
behavior: 'smooth', // 平滑滚动
})
}
})
document.addEventListener('scroll', e => {
if (document.documentElement.scrollTop >= 300) {
topEl.style.display = ''
} else {
topEl.style.display = 'none'
}
})
</script>
<!-- 语法高亮 -->
<script type="module" src="./plugins/prism/index.js"></script>
</body>
</html>