-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
516 lines (460 loc) · 39.9 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
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
<!DOCTYPE html><html lang="zh-CN" data-theme="light"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0,viewport-fit=cover"><title>红狼 | 得吃王6666 - 三角洲行动, 启动!</title><meta name="author" content="Xcoding422"><meta name="copyright" content="Xcoding422"><meta name="format-detection" content="telephone=no"><meta name="theme-color" content="#ffffff"><meta name="description" content="What can I say?">
<meta property="og:type" content="website">
<meta property="og:title" content="红狼 | 得吃王6666">
<meta property="og:url" content="https://xcoding422.github.io/index.html">
<meta property="og:site_name" content="红狼 | 得吃王6666">
<meta property="og:description" content="What can I say?">
<meta property="og:locale" content="zh_CN">
<meta property="og:image" content="https://xcoding422.github.io/img/butterfly-icon.jpg">
<meta property="article:author" content="Xcoding422">
<meta property="article:tag" content="Blog, Hexo">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="https://xcoding422.github.io/img/butterfly-icon.jpg"><link rel="shortcut icon" href="/img/butterfly-icon.jpg"><link rel="canonical" href="https://xcoding422.github.io/index.html"><link rel="preconnect"/><link rel="preconnect" href="//busuanzi.ibruce.info"/><meta name="google-site-verification" content="_BTJMu3pjPaFIvmKueJNNjGSLCuLxc7Cv0_p12lznZo"/><link rel="stylesheet" href="/css/index.css"><link rel="stylesheet" href="/pluginsSrc/@fortawesome/fontawesome-free/css/all.min.css"><link rel="stylesheet" href="/pluginsSrc/@fancyapps/ui/dist/fancybox/fancybox.css" media="print" onload="this.media='all'"><script>
(() => {
const saveToLocal = {
set: (key, value, ttl) => {
if (!ttl) return
const expiry = Date.now() + ttl * 86400000
localStorage.setItem(key, JSON.stringify({ value, expiry }))
},
get: key => {
const itemStr = localStorage.getItem(key)
if (!itemStr) return undefined
const { value, expiry } = JSON.parse(itemStr)
if (Date.now() > expiry) {
localStorage.removeItem(key)
return undefined
}
return value
}
}
window.btf = {
saveToLocal,
getScript: (url, attr = {}) => new Promise((resolve, reject) => {
const script = document.createElement('script')
script.src = url
script.async = true
Object.entries(attr).forEach(([key, val]) => script.setAttribute(key, val))
script.onload = script.onreadystatechange = () => {
if (!script.readyState || /loaded|complete/.test(script.readyState)) resolve()
}
script.onerror = reject
document.head.appendChild(script)
}),
getCSS: (url, id) => new Promise((resolve, reject) => {
const link = document.createElement('link')
link.rel = 'stylesheet'
link.href = url
if (id) link.id = id
link.onload = link.onreadystatechange = () => {
if (!link.readyState || /loaded|complete/.test(link.readyState)) resolve()
}
link.onerror = reject
document.head.appendChild(link)
}),
addGlobalFn: (key, fn, name = false, parent = window) => {
if (!true && key.startsWith('pjax')) return
const globalFn = parent.globalFn || {}
globalFn[key] = globalFn[key] || {}
globalFn[key][name || Object.keys(globalFn[key]).length] = fn
parent.globalFn = globalFn
}
}
const activateDarkMode = () => {
document.documentElement.setAttribute('data-theme', 'dark')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#0d0d0d')
}
}
const activateLightMode = () => {
document.documentElement.setAttribute('data-theme', 'light')
if (document.querySelector('meta[name="theme-color"]') !== null) {
document.querySelector('meta[name="theme-color"]').setAttribute('content', '#ffffff')
}
}
btf.activateDarkMode = activateDarkMode
btf.activateLightMode = activateLightMode
const theme = saveToLocal.get('theme')
const mediaQueryDark = window.matchMedia('(prefers-color-scheme: dark)')
const mediaQueryLight = window.matchMedia('(prefers-color-scheme: light)')
if (theme === undefined) {
if (mediaQueryLight.matches) activateLightMode()
else if (mediaQueryDark.matches) activateDarkMode()
else {
const hour = new Date().getHours()
const isNight = hour <= 6 || hour >= 18
isNight ? activateDarkMode() : activateLightMode()
}
mediaQueryDark.addEventListener('change', () => {
if (saveToLocal.get('theme') === undefined) {
e.matches ? activateDarkMode() : activateLightMode()
}
})
} else {
theme === 'light' ? activateLightMode() : activateDarkMode()
}
const asideStatus = saveToLocal.get('aside-status')
if (asideStatus !== undefined) {
document.documentElement.classList.toggle('hide-aside', asideStatus === 'hide')
}
const detectApple = () => {
if (/iPad|iPhone|iPod|Macintosh/.test(navigator.userAgent)) {
document.documentElement.classList.add('apple')
}
}
detectApple()
})()
</script><script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script><script>(adsbygoogle = window.adsbygoogle || []).push({
google_ad_client: 'ca-pub-8243815059726054',
enable_page_level_ads: 'true'
});</script><script>const GLOBAL_CONFIG = {
root: '/',
algolia: undefined,
localSearch: {"path":"/search.xml","preload":false,"top_n_per_article":1,"unescape":false,"languages":{"hits_empty":"未找到符合您查询的内容：${query}","hits_stats":"共找到 ${hits} 篇文章"}},
translate: undefined,
highlight: {"plugin":"highlight.js","highlightCopy":true,"highlightLang":true,"highlightHeightLimit":false,"highlightFullpage":false,"highlightMacStyle":false},
copy: {
success: '复制成功',
error: '复制失败',
noSupport: '浏览器不支持'
},
relativeDate: {
homepage: false,
post: false
},
runtime: '天',
dateSuffix: {
just: '刚刚',
min: '分钟前',
hour: '小时前',
day: '天前',
month: '个月前'
},
copyright: undefined,
lightbox: 'fancybox',
Snackbar: undefined,
infinitegrid: {
js: '/pluginsSrc/@egjs/infinitegrid/dist/infinitegrid.min.js',
buttonText: '加载更多'
},
isPhotoFigcaption: false,
islazyloadPlugin: false,
isAnchor: true,
percent: {
toc: true,
rightside: true,
},
autoDarkmode: true
}</script><script id="config-diff">var GLOBAL_CONFIG_SITE = {
title: '红狼 | 得吃王6666',
isHighlightShrink: false,
isToc: false,
pageType: 'home'
}</script><meta name="generator" content="Hexo 7.3.0"><link rel="alternate" href="/atom.xml" title="红狼 | 得吃王6666" type="application/atom+xml">
</head><body><div id="loading-box"><div class="loading-left-bg"></div><div class="loading-right-bg"></div><div class="spinner-box"><div class="configure-border-1"><div class="configure-core"></div></div><div class="configure-border-2"><div class="configure-core"></div></div><div class="loading-word">加载中...</div></div></div><script>(()=>{
const $loadingBox = document.getElementById('loading-box')
const $body = document.body
const preloader = {
endLoading: () => {
$body.style.overflow = ''
$loadingBox.classList.add('loaded')
},
initLoading: () => {
$body.style.overflow = 'hidden'
$loadingBox.classList.remove('loaded')
}
}
preloader.initLoading()
window.addEventListener('load', preloader.endLoading)
if (true) {
btf.addGlobalFn('pjaxSend', preloader.initLoading, 'preloader_init')
btf.addGlobalFn('pjaxComplete', preloader.endLoading, 'preloader_end')
}
})()</script><div id="web_bg" style="background-image: url(/img/index.jpg);"></div><div id="sidebar"><div id="menu-mask"></div><div id="sidebar-menus"><div class="avatar-img text-center"><img src="/img/butterfly-icon.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="site-data text-center"><a href="/archives/"><div class="headline">文章</div><div class="length-num">25</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">0</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/mc/"><i class="fa-fw fas fa-gamepad"></i><span> Minecraft</span></a></div></div></div></div><div class="page" id="body-wrap"><header class="full_page" id="page-header" style="background-image: url(/img/index.jpg);"><nav id="nav"><span id="blog-info"><a class="nav-site-title" href="/"><span class="site-name">红狼 | 得吃王6666</span></a></span><div id="menus"><div id="search-button"><span class="site-page social-icon search"><i class="fas fa-search fa-fw"></i><span> 搜索</span></span></div><div class="menus_items"><div class="menus_item"><a class="site-page" href="/mc/"><i class="fa-fw fas fa-gamepad"></i><span> Minecraft</span></a></div></div><div id="toggle-menu"><span class="site-page"><i class="fas fa-bars fa-fw"></i></span></div></div></nav><div id="site-info"><h1 id="site-title">红狼 | 得吃王6666</h1><div id="site-subtitle"><span id="subtitle"></span></div></div><div id="scroll-down"><i class="fas fa-angle-down scroll-down-effects"></i></div></header><main class="layout" id="content-inner"><div class="recent-posts nc" id="recent-posts"><div class="recent-post-items"><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article1/" title="深入理解JavaScript闭包">深入理解JavaScript闭包</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">深入理解JavaScript闭包什么是闭包？闭包是指那些能够访问自由变量的函数。换句话说，闭包可以让你在一个函数内部访问其外部的变量。 闭包的原理闭包的实现依赖于JavaScript的函数作用域链。当一个函数定义在另一个函数内部时，内部函数会形成一个包含外部函数变量的闭包。 闭包的应用闭包常用于创建私有变量、实现函数柯里化和在事件处理器中保持状态。 示例代码123456789101112function createCounter() { let count = 0; return function() { count++; return count; };}const counter = createCounter();console.log(counter()); // 1console.log(counter()); // 2console.log(counter()); // 3 总结闭包是JavaScript中一个强大的特性，理解并善用闭包可以让你写出更灵活、更强大的代码。 思维导图1234567graph...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article10/" title="使用TypeScript提升JavaScript代码质量">使用TypeScript提升JavaScript代码质量</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用TypeScript提升JavaScript代码质量什么是TypeScript？TypeScript是JavaScript的超集，增加了静态类型和其他特性，使得代码更健壮和可维护。 安装TypeScript使用npm安装TypeScript： 1npm install -g typescript 基本语法以下是一个简单的TypeScript示例： 123456function greeter(person: string) { return "Hello, " + person;}let user = "Jane User";console.log(greeter(user)); 类型注解TypeScript允许你为变量和函数添加类型注解： 1234let isDone: boolean = false;let decimal: number = 6;let color: string = "blue";let list: number[] = [1, 2,...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article11/" title="理解数据库事务">理解数据库事务</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">理解数据库事务什么是数据库事务？数据库事务是一组操作的集合，这些操作要么全部执行成功，要么全部回滚，以确保数据的一致性。 ACID特性事务具有四个重要特性，通常称为ACID： 原子性 (Atomicity)：事务中的所有操作要么全部完成，要么全部回滚。 一致性 (Consistency)：事务执行前后，数据库保持一致状态。 隔离性 (Isolation)：事务的执行不受其他事务的影响。 持久性 (Durability)：一旦事务提交，结果永久保存。 使用事务以下是一个使用事务的示例： 12345678BEGIN;-- 执行操作INSERT INTO accounts (user_id, balance) VALUES (1, 100);UPDATE accounts SET balance = balance - 50 WHERE user_id = 1;--...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article12/" title="使用Python进行数据分析">使用Python进行数据分析</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用Python进行数据分析安装必要的库使用pip安装Pandas和Matplotlib： 1pip install pandas matplotlib 读取数据使用Pandas读取CSV文件： 1234import pandas as pddata = pd.read_csv('data.csv')print(data.head()) 数据清洗进行数据清洗和预处理： 12345# 删除缺失值data.dropna(inplace=True)# 转换数据类型data['column'] = data['column'].astype('int') 数据分析进行基本的数据分析和统计： 1234567# 计算平均值mean_value = data['column'].mean()print(f"Mean: {mean_value}")# 分组统计grouped_data =...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article13/" title="理解微服务架构">理解微服务架构</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">理解微服务架构什么是微服务架构？微服务架构是一种软件架构风格，将应用程序拆分为一组小的、独立部署的服务，每个服务负责特定的业务功能。 优点 独立部署：每个服务可以独立开发、测试和部署，减少了开发周期。 技术多样性：不同的服务可以使用不同的技术栈，选择最适合的技术。 弹性和可扩展性：可以根据需求独立扩展服务，提高系统的弹性和可扩展性。 挑战 复杂性：管理和协调多个服务增加了系统的复杂性。 通信开销：服务之间通过网络通信，增加了通信开销和延迟。 数据一致性：保证跨服务的数据一致性是一个挑战。 实现微服务使用Docker和Kubernetes实现微服务架构： Docker：将每个服务打包成Docker镜像，并使用Docker Compose进行编排。 Kubernetes：使用Kubernetes进行容器编排和管理，提高系统的可扩展性和可靠性。 总结微服务架构是一种灵活且强大的架构风格，适用于构建复杂和大规模的分布式系统。理解其优点和挑战，合理设计和实现微服务架构，可以大幅提升系统的开发效率和运行稳定性。 思维导图12345graph TD; A[理解微服务架构]...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article15/" title="使用Nginx进行负载均衡">使用Nginx进行负载均衡</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用Nginx进行负载均衡什么是负载均衡？负载均衡是一种将网络流量分配到多个服务器的技术，以提高系统的可用性和性能。 安装Nginx使用以下命令在Ubuntu上安装Nginx： 12sudo apt-get updatesudo apt-get install -y nginx 配置负载均衡编辑Nginx配置文件，添加负载均衡配置： 123456789101112131415http { upstream myapp { server backend1.example.com; server backend2.example.com; server backend3.example.com; } server { listen 80; location / { proxy_pass http://myapp; } }} 启动Nginx启动Nginx服务： 12sudo...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article14/" title="使用TensorFlow进行深度学习">使用TensorFlow进行深度学习</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用TensorFlow进行深度学习安装TensorFlow使用pip安装TensorFlow： 1pip install tensorflow 创建简单的神经网络以下是一个使用TensorFlow创建简单神经网络的示例： 123456789101112131415161718import tensorflow as tffrom tensorflow.keras.models import Sequentialfrom tensorflow.keras.layers import Dense# 创建模型model = Sequential([ Dense(128, activation='relu', input_shape=(784,)), Dense(64, activation='relu'), Dense(10, activation='softmax')])# 编译模型model.compile(optimizer='adam', ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article16/" title="使用Redis进行缓存">使用Redis进行缓存</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用Redis进行缓存什么是Redis？Redis是一个开源的内存数据库，支持多种数据结构，常用于缓存、会话存储和消息队列等场景。 安装Redis使用以下命令在Ubuntu上安装Redis： 12sudo apt-get updatesudo apt-get install -y redis-server 启动Redis服务： 12sudo systemctl start redissudo systemctl enable redis 基本操作连接Redis服务器： 1redis-cli 设置键值对： 1SET key "value" 获取键值： 1GET key 使用Redis进行缓存以下是一个使用Redis进行缓存的示例（Python）： 1234567891011import redis# 连接Redisr = redis.Redis(host='localhost', port=6379, db=0)# 设置缓存r.set('my_key', 'my_value')#...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article18/" title="使用GraphQL构建灵活的API">使用GraphQL构建灵活的API</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用GraphQL构建灵活的API什么是GraphQL？GraphQL是由Facebook开发的一个用于API的查询语言，它提供了比传统REST API更灵活和高效的数据获取方式。 GraphQL的基本概念 Schema：定义API的类型和结构。 Query：用于获取数据的请求。 Mutation：用于修改数据的请求。 Resolver：处理查询和变更请求的函数。 示例以下是一个简单的GraphQL服务器示例（使用Node.js和Express）： 12345678910111213141516171819202122232425262728const express = require('express');const { graphqlHTTP } = require('express-graphql');const { buildSchema } = require('graphql');// 定义Schemaconst schema = buildSchema(` ...</div></div></div><div class="recent-post-item"><div class="recent-post-info no-cover"><a class="article-title" href="/2025/03/23/article19/" title="使用Ansible进行自动化运维">使用Ansible进行自动化运维</a><div class="article-meta-wrap"><span class="post-meta-date"><i class="far fa-calendar-alt"></i><span class="article-meta-label">发表于</span><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></span></div><div class="content">使用Ansible进行自动化运维什么是Ansible？Ansible是一个开源的自动化工具，用于配置管理、应用部署和任务自动化。它通过SSH进行通信，无需在目标主机上安装代理软件。 安装Ansible使用以下命令在Ubuntu上安装Ansible： 12sudo apt-get updatesudo apt-get install -y ansible 基本概念 Playbook：定义自动化任务的YAML文件。 Inventory：定义主机和组的清单文件。 Module：Ansible中执行具体任务的单元。 示例以下是一个简单的Ansible Playbook示例，用于安装Nginx： 12345678---- hosts: webservers become: yes tasks: - name: 安装Nginx apt: name: nginx state:...</div></div></div></div><nav id="pagination"><div class="pagination"><span class="page-number current">1</span><a class="page-number" href="/page/2/#content-inner">2</a><a class="page-number" href="/page/3/#content-inner">3</a><a class="extend next" rel="next" href="/page/2/#content-inner"><i class="fas fa-chevron-right fa-fw"></i></a></div></nav></div><div class="aside-content" id="aside-content"><div class="card-widget card-info text-center"><div class="avatar-img"><img src="/img/butterfly-icon.jpg" onerror="this.onerror=null;this.src='/img/friend_404.gif'" alt="avatar"/></div><div class="author-info-name">Xcoding422</div><div class="author-info-description">What can I say?</div><div class="site-data"><a href="/archives/"><div class="headline">文章</div><div class="length-num">25</div></a><a href="/tags/"><div class="headline">标签</div><div class="length-num">0</div></a><a href="/categories/"><div class="headline">分类</div><div class="length-num">0</div></a></div><a id="card-info-btn" target="_blank" rel="noopener" href="https://github.com/xcoding422"><i class="fab fa-github"></i><span>Github 开源</span></a></div><div class="card-widget card-announcement"><div class="item-headline"><i class="fas fa-bullhorn fa-shake"></i><span>公告</span></div><div class="announcement_content">在线Minecraft全面支持中文汉化,上线了演示模式!</div></div><div class="sticky_layout"><div class="card-widget card-recent-post"><div class="item-headline"><i class="fas fa-history"></i><span>最新文章</span></div><div class="aside-list"><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/03/23/article1/" title="深入理解JavaScript闭包">深入理解JavaScript闭包</a><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/03/23/article10/" title="使用TypeScript提升JavaScript代码质量">使用TypeScript提升JavaScript代码质量</a><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/03/23/article11/" title="理解数据库事务">理解数据库事务</a><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/03/23/article12/" title="使用Python进行数据分析">使用Python进行数据分析</a><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></div></div><div class="aside-list-item no-cover"><div class="content"><a class="title" href="/2025/03/23/article13/" title="理解微服务架构">理解微服务架构</a><time datetime="2025-03-23T00:00:00.000Z" title="发表于 2025-03-23 08:00:00">2025-03-23</time></div></div></div></div><div class="card-widget" id="card-newest-comments"><div class="item-headline"><i class="fas fa-comment-dots"></i><span>最新评论</span></div><div class="aside-list"><span>加载中...</span></div></div><div class="card-widget card-archives">
<div class="item-headline">
<i class="fas fa-archive"></i>
<span>归档</span>
</div>
<ul class="card-archive-list">
<li class="card-archive-list-item">
<a class="card-archive-list-link" href="/archives/2025/03/">
<span class="card-archive-list-date">
三月 2025
</span>
<span class="card-archive-list-count">22</span>
</a>
</li>
<li class="card-archive-list-item">
<a class="card-archive-list-link" href="/archives/2024/03/">
<span class="card-archive-list-date">
三月 2024
</span>
<span class="card-archive-list-count">3</span>
</a>
</li>
</ul>
</div><div class="card-widget card-webinfo"><div class="item-headline"><i class="fas fa-chart-line"></i><span>网站信息</span></div><div class="webinfo"><div class="webinfo-item"><div class="item-name">文章数目 :</div><div class="item-count">25</div></div><div class="webinfo-item"><div class="item-name">运行时间 :</div><div class="item-count" id="runtimeshow" data-publishDate="2013-12-31T16:00:00.000Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总字数 :</div><div class="item-count">9.4k</div></div><div class="webinfo-item"><div class="item-name">本站访客数 :</div><div class="item-count" id="busuanzi_value_site_uv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">本站总浏览量 :</div><div class="item-count" id="busuanzi_value_site_pv"><i class="fa-solid fa-spinner fa-spin"></i></div></div><div class="webinfo-item"><div class="item-name">最后更新时间 :</div><div class="item-count" id="last-push-date" data-lastPushDate="2025-03-24T05:54:22.367Z"><i class="fa-solid fa-spinner fa-spin"></i></div></div></div></div></div></div></main><footer id="footer" style="background-image: url(/img/index.jpg);"><div id="footer-wrap"><div class="copyright">©2014 - 2025 By Xcoding422</div><div class="framework-info"><span>框架 </span><a target="_blank" rel="noopener" href="https://hexo.io">Hexo 7.3.0</a><span class="footer-separator">|</span><span>主题 </span><a target="_blank" rel="noopener" href="https://github.com/jerryc127/hexo-theme-butterfly">Butterfly 5.3.3</a></div><div class="footer_custom_text">CopyRight © 2014 Xcoding422</div></div></footer></div><div id="rightside"><div id="rightside-config-hide"><button id="darkmode" type="button" title="日间和夜间模式切换"><i class="fas fa-adjust"></i></button><button id="hide-aside-btn" type="button" title="单栏和双栏切换"><i class="fas fa-arrows-alt-h"></i></button></div><div id="rightside-config-show"><button id="rightside-config" type="button" title="设置"><i class="fas fa-cog fa-spin"></i></button><button id="chat-btn" type="button" title="聊天" style="display:none"><i class="fas fa-message"></i></button><button id="go-up" type="button" title="回到顶部"><span class="scroll-percent"></span><i class="fas fa-arrow-up"></i></button></div></div><div><script src="/js/utils.js"></script><script src="/js/main.js"></script><script src="/pluginsSrc/@fancyapps/ui/dist/fancybox/fancybox.umd.js"></script><div class="js-pjax"><script>window.typedJSFn = {
init: str => {
window.typed = new Typed('#subtitle', Object.assign({
strings: str,
startDelay: 300,
typeSpeed: 150,
loop: true,
backSpeed: 50,
}, null))
},
run: subtitleType => {
if (true) {
if (typeof Typed === 'function') {
subtitleType()
} else {
btf.getScript('/pluginsSrc/typed.js/dist/typed.umd.js').then(subtitleType)
}
} else {
subtitleType()
}
}
}
btf.addGlobalFn('pjaxSendOnce', () => { typed.destroy() }, 'typedDestroy')
</script><script>function subtitleType () {
fetch('https://v1.hitokoto.cn')
.then(response => response.json())
.then(data => {
if (true) {
const from = '出自 ' + data.from
const sub = ["给别人第二次机会, 就是给别人第二发子弹.","我不是一个好人, 但我也不是一个坏人.","三角洲行动搜索[得吃王6666]"]
sub.unshift(data.hitokoto, from)
typedJSFn.init(sub)
} else {
document.getElementById('subtitle').textContent = data.hitokoto
}
})
}
typedJSFn.run(subtitleType)
</script><script>(() => {
const runMermaid = ele => {
window.loadMermaid = true
const theme = document.documentElement.getAttribute('data-theme') === 'dark' ? 'dark' : 'default'
ele.forEach((item, index) => {
const mermaidSrc = item.firstElementChild
const mermaidThemeConfig = `%%{init:{ 'theme':'${theme}'}}%%\n`
const mermaidID = `mermaid-${index}`
const mermaidDefinition = mermaidThemeConfig + mermaidSrc.textContent
const renderFn = mermaid.render(mermaidID, mermaidDefinition)
const renderMermaid = svg => {
mermaidSrc.insertAdjacentHTML('afterend', svg)
}
// mermaid v9 and v10 compatibility
typeof renderFn === 'string' ? renderMermaid(renderFn) : renderFn.then(({ svg }) => renderMermaid(svg))
})
}
const codeToMermaid = () => {
const codeMermaidEle = document.querySelectorAll('pre > code.mermaid')
if (codeMermaidEle.length === 0) return
codeMermaidEle.forEach(ele => {
const preEle = document.createElement('pre')
preEle.className = 'mermaid-src'
preEle.hidden = true
preEle.textContent = ele.textContent
const newEle = document.createElement('div')
newEle.className = 'mermaid-wrap'
newEle.appendChild(preEle)
ele.parentNode.replaceWith(newEle)
})
}
const loadMermaid = () => {
if (true) codeToMermaid()
const $mermaid = document.querySelectorAll('#article-container .mermaid-wrap')
if ($mermaid.length === 0) return
const runMermaidFn = () => runMermaid($mermaid)
btf.addGlobalFn('themeChange', runMermaidFn, 'mermaid')
window.loadMermaid ? runMermaidFn() : btf.getScript('/pluginsSrc/mermaid/dist/mermaid.min.js').then(runMermaidFn)
}
btf.addGlobalFn('encrypt', loadMermaid, 'mermaid')
window.pjax ? loadMermaid() : document.addEventListener('DOMContentLoaded', loadMermaid)
})()</script></div><script>window.newestComments = {
changeContent: content => {
if (content === '') return content
content = content.replace(/<img.*?src="(.*?)"?[^\>]+>/ig, '[图片]') // replace image link
content = content.replace(/<a[^>]+?href=["']?([^"']+)["']?[^>]*>([^<]+)<\/a>/gi, '[链接]') // replace url
content = content.replace(/<pre><code>.*?<\/pre>/gi, '[代码]') // replace code
content = content.replace(/<code>.*?<\/code>/gi, '[代码]') // replace code
content = content.replace(/<[^>]+>/g, "") // remove html tag
if (content.length > 150) {
content = content.substring(0, 150) + '...'
}
return content
},
generateHtml: (array, ele) => {
let result = ''
if (array.length) {
for (let i = 0; i < array.length; i++) {
result += '<div class="aside-list-item">'
if (true && array[i].avatar) {
const imgAttr = 'src'
const lazyloadNative = ''
result += `<a href="${array[i].url}" class="thumbnail"><img ${imgAttr}="${array[i].avatar}" alt="${array[i].nick}" ${lazyloadNative}></a>`
}
result += `<div class="content">
<a class="comment" href="${array[i].url}" title="${array[i].content}">${array[i].content}</a>
<div class="name"><span>${array[i].nick} / </span><time datetime="${array[i].date}">${btf.diffDate(array[i].date, true)}</time></div>
</div></div>`
}
} else {
result += '暂无评论'
}
ele.innerHTML = result
window.lazyLoadInstance && window.lazyLoadInstance.update()
window.pjax && window.pjax.refresh(ele)
},
newestCommentInit: (name, getComment) => {
const $dom = document.querySelector('#card-newest-comments .aside-list')
if ($dom) {
const data = btf.saveToLocal.get(name)
if (data) {
newestComments.generateHtml(JSON.parse(data), $dom)
} else {
getComment($dom)
}
}
},
run: (name, getComment) => {
newestComments.newestCommentInit(name, getComment)
btf.addGlobalFn('pjaxComplete', () => newestComments.newestCommentInit(name, getComment), name)
}
}</script><script>window.addEventListener('load', () => {
const keyName = 'github-newest-comments'
const { changeContent, generateHtml, run } = window.newestComments
const findTrueUrl = (array, ele) => {
Promise.all(array.map(item =>
fetch(item.url).then(resp => resp.json()).then(data => {
let urlArray = data.body ? data.body.match(/(https?:\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?/ig) : []
if (!Array.isArray(urlArray) || urlArray.length === 0) {
urlArray = [`${data.html_url}`]
}
if (data.user.login === 'utterances-bot') {
return urlArray.pop()
} else {
return urlArray.shift()
}
})
)).then(res => {
array = array.map((i,index)=> {
return {
...i,
url: res[index]
}
})
btf.saveToLocal.set(keyName, JSON.stringify(array), 10/(60*24))
generateHtml(array, ele)
});
}
const getComment = ele => {
fetch('https://api.github.com/repos/xcoding422/xcoding422.github.io/issues/comments?sort=updated&direction=desc&per_page=6&page=1',{
"headers": {
Accept: 'application/vnd.github.v3.html+json'
}
})
.then(response => response.json())
.then(data => {
const githubArray = data.map(item => {
return {
'avatar': item.user.avatar_url,
'content': changeContent(item.body_html || item.body),
'nick': item.user.login,
'url': item.issue_url,
'date': item.updated_at
}
})
findTrueUrl(githubArray, ele)
}).catch(e => {
console.error(e)
ele.textContent= "无法获取评论，请确认相关配置是否正确"
})
}
run(keyName, getComment)
})</script><div class="aplayer no-destroy" data-id="2675181772" data-server="netease" data-type="song" data-fixed="true" data-autoplay="true"> </div><canvas class="fireworks" mobile="true"></canvas><script src="/pluginsSrc/butterfly-extsrc/dist/fireworks.min.js"></script><script src="/pluginsSrc/butterfly-extsrc/dist/activate-power-mode.min.js"></script><script>POWERMODE.colorful = true;
POWERMODE.shake = true;
POWERMODE.mobile = true;
document.body.addEventListener('input', POWERMODE);
</script><script>(() => {
window.ChatraID = 'ZMuctY3fgHXcy6YiP'
window.Chatra = window.Chatra || function() {
(window.Chatra.q = window.Chatra.q || []).push(arguments)
}
btf.getScript('https://call.chatra.io/chatra.js').then(() => {
const isChatBtn = true
const isChatHideShow = true
if (isChatBtn) {
const close = () => {
Chatra('minimizeWidget')
Chatra('hide')
}
const open = () => {
Chatra('openChat', true)
Chatra('show')
}
window.ChatraSetup = { startHidden: true }
window.chatBtnFn = () => document.getElementById('chatra').classList.contains('chatra--expanded') ? close() : open()
document.getElementById('chat-btn').style.display = 'block'
} else if (isChatHideShow) {
window.chatBtn = {
hide: () => Chatra('hide'),
show: () => Chatra('show')
}
}
})
})()</script><link rel="stylesheet" href="/pluginsSrc/aplayer/dist/APlayer.min.css" media="print" onload="this.media='all'"><script src="/pluginsSrc/aplayer/dist/APlayer.min.js"></script><script src="/pluginsSrc/butterfly-extsrc/metingjs/dist/Meting.min.js"></script><script>(() => {
const destroyAplayer = () => {
if (window.aplayers) {
for (let i = 0; i < window.aplayers.length; i++) {
if (!window.aplayers[i].options.fixed) {
window.aplayers[i].destroy()
}
}
}
}
const runMetingJS = () => {
typeof loadMeting === 'function' && document.getElementsByClassName('aplayer').length && loadMeting()
}
btf.addGlobalFn('pjaxSend', destroyAplayer, 'destroyAplayer')
btf.addGlobalFn('pjaxComplete', loadMeting, 'runMetingJS')
})()</script><script src="/pluginsSrc/pjax/pjax.min.js"></script><script>(() => {
const pjaxSelectors = ["meta[property=\"og:image\"]","meta[property=\"og:title\"]","meta[property=\"og:url\"]","meta[property=\"og:description\"]","link[rel=\"canonical\"]","head > title","#config-diff","#body-wrap","#rightside-config-hide","#rightside-config-show",".js-pjax"]
window.pjax = new Pjax({
elements: 'a:not([target="_blank"])',
selectors: pjaxSelectors,
cacheBust: false,
analytics: false,
scrollRestoration: false
})
const triggerPjaxFn = (val) => {
if (!val) return
Object.values(val).forEach(fn => fn())
}
document.addEventListener('pjax:send', () => {
// removeEventListener
btf.removeGlobalFnEvent('pjaxSendOnce')
btf.removeGlobalFnEvent('themeChange')
// reset readmode
const $bodyClassList = document.body.classList
if ($bodyClassList.contains('read-mode')) $bodyClassList.remove('read-mode')
triggerPjaxFn(window.globalFn.pjaxSend)
})
document.addEventListener('pjax:complete', () => {
btf.removeGlobalFnEvent('pjaxCompleteOnce')
document.querySelectorAll('script[data-pjax]').forEach(item => {
const newScript = document.createElement('script')
const content = item.text || item.textContent || item.innerHTML || ""
Array.from(item.attributes).forEach(attr => newScript.setAttribute(attr.name, attr.value))
newScript.appendChild(document.createTextNode(content))
item.parentNode.replaceChild(newScript, item)
})
triggerPjaxFn(window.globalFn.pjaxComplete)
})
document.addEventListener('pjax:error', e => {
if (e.request.status === 404) {
window.location.href = e.request.responseURL
}
})
})()</script><script async data-pjax src="//busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><div id="local-search"><div class="search-dialog"><nav class="search-nav"><span class="search-dialog-title">搜索</span><span id="loading-status"></span><button class="search-close-button"><i class="fas fa-times"></i></button></nav><div class="text-center" id="loading-database"><i class="fas fa-spinner fa-pulse"></i><span> 数据加载中</span></div><div class="search-wrap"><div id="local-search-input"><div class="local-search-box"><input class="local-search-box--input" placeholder="搜索文章" type="text"/></div></div><hr/><div id="local-search-results"></div><div id="local-search-stats-wrap"></div></div></div><div id="search-mask"></div><script src="/js/search/local-search.js"></script></div></div></body></html>