-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.xml
507 lines (432 loc) · 45.4 KB
/
index.xml
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
<?xml version="1.0" encoding="utf-8" standalone="yes" ?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
<channel>
<title>Irelia的博客</title>
<link>https://mambaneverout.github.io/</link>
<description>Recent content on Irelia的博客</description>
<generator>Hugo -- gohugo.io</generator>
<language>zh-Hans</language>
<lastBuildDate>Wed, 08 Apr 2020 21:50:32 +0800</lastBuildDate>
<atom:link href="https://mambaneverout.github.io/index.xml" rel="self" type="application/rss+xml" />
<item>
<title>面试押题</title>
<link>https://mambaneverout.github.io/post/%E9%9D%A2%E8%AF%95%E6%8A%BC%E9%A2%98/</link>
<pubDate>Wed, 08 Apr 2020 21:50:32 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E9%9D%A2%E8%AF%95%E6%8A%BC%E9%A2%98/</guid>
<description>HTML 必考：你是如何理解 HTML 语义化的？
举例法：
HTML 语义化就是使用正确的标签（总结）段落就写 p 标签，标题就写 h1 标签，文章就写 article 标签，视频就写 video 标签，等等。
阐述法：
首先讲以前的后台开发人员使用 table 布局，然后讲美工人员使用 div+css 布局，最后讲专业的前端会使用正确的标签进行页面开发。
meta viewport 是做什么用的，怎么写？
举例法，然后逐个解释每个单词的意思。 initial-scale 定义设备宽度与视口大小之间的缩放比率。 maximum-scale 定义缩放的最大值 minimum-scale 定义缩放的最小值 user-scalable 如果设置为 no，用户将不能放大或缩小网页。默认值为 yes。
&lt;meta name=&quot;viewport&quot; content=&quot;width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1&quot; /&gt; 你用过哪些 HTML 5 标签？
举例法
平时如果只用 div 写页面你就完了，把你平时用到的 html5 标签列举出来即可，但是要注意如果这个标签的用法比较复杂，你要先看一下 MDN 的文档再说这个标签；如果你说出一个标签，却不知道它有哪些 API，那么你就会被扣分
内容相关：header、main、footer、article
功能相关：canvas、video、audio（处理后续问题）
H5 是什么？</description>
</item>
<item>
<title>Node</title>
<link>https://mambaneverout.github.io/post/node.jsnpmyarncommonjs%E8%A7%84%E8%8C%83/</link>
<pubDate>Sat, 28 Mar 2020 21:53:31 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/node.jsnpmyarncommonjs%E8%A7%84%E8%8C%83/</guid>
<description>Node.js 计算密集型 ⼤量的计算，消耗 CPU 资源，⽐如计算圆周 率、对视频进⾏⾼清解码 C 语⾔ IO 密集型
⽹络、磁盘读写 Node.js 使用内置模块 fs
const fs = require(&quot;fs&quot;); fs.readFile(&quot;./test.txt&quot;, &quot;utf-8&quot;, function(err, str) { console.log(str); str = str.toUpperCase(); fs.writeFile(&quot;./test-after.txt&quot;, str, function(err) { console.log(&quot;操作完成&quot;); }); }); http.createServer
const http = require(&quot;http&quot;); http.createServer((req, res) =&gt; { res.end(&quot;hello world&quot;); }).listen(8080); 使用本地模块
const util = require(&quot;./util&quot;); let result = util.fact(5); console.log(result); function fact(n) { if (n === 1) return 1; return n * fact(n - 1); } module.</description>
</item>
<item>
<title>Promise和async、await</title>
<link>https://mambaneverout.github.io/post/promise%E5%92%8Casyncawait/</link>
<pubDate>Fri, 27 Mar 2020 19:24:13 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/promise%E5%92%8Casyncawait/</guid>
<description>Promise Promise 是一个类 Promise.all()
返回一个 Promise 实例， 所有 promise 都成功才会成功，有一个 promise 失败则为失败。
Promise.all([promise1, promise2,promise3).then(function(values) { console.log(values); }); Promise.race()
返回一个 promise，一旦 Promise 中的某个 promise 解决或拒绝，返回的 promise 就会解决或拒绝。
const promise1 = new Promise(function(resolve, reject) { setTimeout(resolve, 500, 'one'); }); const promise2 = new Promise(function(resolve, reject) { setTimeout(resolve, 100, 'two'); }); Promise.race([promise1, promise2]).then(function(value) { console.log(value); }); Promise.reject
返回一个带有拒绝原因的 Promise 对象
function resolved(result) { console.</description>
</item>
<item>
<title>Mockjs</title>
<link>https://mambaneverout.github.io/post/mockjs/</link>
<pubDate>Mon, 23 Mar 2020 21:41:47 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/mockjs/</guid>
<description>Mockjs 官方文档：http://mockjs.com/examples.html RAP2 官方文档：http://rap2.taobao.org/
常见用法：@ctitle(3, 10)、@cparagraph、@cword、@cname、@integer(10, 100)、@float(20, 30, 2, 3)、 @color、@date、@time、@now、@id、@url、@email、@image(&lsquo;200x100&rsquo;)
{ 'statusCode|1' : [1, 3, 2, 8], 'msg': '@cword(4, 10)', 'data|4': [ { id: '@id', title: '@ctitle', author: '@cname', createdAt: '@datetime' } ] } String
'name|min-max': string Mock.mock({ &quot;string|1-10&quot;: &quot;★&quot; // 重复 1-10 次 }) Mock.mock({ &quot;string|3&quot;: &quot;★&quot; // 重复三次 }) Number
'name|+1': number Mock.mock({ &quot;number|1-100&quot;: 56 // 1-100 }) Mock.mock({ &quot;number|+1&quot;: 45 // +1 }) Mock.</description>
</item>
<item>
<title>Vue动画</title>
<link>https://mambaneverout.github.io/post/vue%E5%8A%A8%E7%94%BB/</link>
<pubDate>Sat, 21 Mar 2020 09:33:03 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/vue%E5%8A%A8%E7%94%BB/</guid>
<description>transition 需要初始值 fade-enter 进入过渡的开始状态* fade-enter-active 进入过渡时生效的状态* fade-enter-to 进入过渡的结束状态 fade-leave 离开过渡的开始状态 fade-leave-active 离开过渡时生效的状态* fade-leave-to 离开过渡的结束状态* animation bounce-enter-active bounce-leave-active 第三方动画库 Animate.css
&lt;link href=&quot;https://cdn.jsdelivr.net/npm/[email protected]&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt; &lt;transition name=&quot;custom-classes-transition&quot; enter-active-class=&quot;animated tada&quot; leave-active-class=&quot;animated bounceOutRight&quot; &gt; &lt;/transition&gt; JS 操作动画 注意：当只用 JS 过渡的时候，在 enter 和 leave 中必须使用 done 进行回调。否则，它们将被同步调用，过渡会立即完成。
推荐对于仅使用 JavaScript 过渡的元素添加 v-bind:css=&ldquo;false&rdquo;，Vue 会跳过 CSS 的检测。这也可以避免过渡过程中 CSS 的影响。
&lt;transition v-on:before-enter=&quot;beforeEnter&quot; v-on:enter=&quot;enter&quot; v-on:after-enter=&quot;afterEnter&quot; v-on:enter-cancelled=&quot;enterCancelled&quot; v-on:before-leave=&quot;beforeLeave&quot; v-on:leave=&quot;leave&quot; v-on:after-leave=&quot;afterLeave&quot; v-on:leave-cancelled=&quot;leaveCancelled&quot; &gt;&lt;/transition&gt; methods: { beforeEnter: function (el) {}, // 当与 CSS 结合使用时 // 回调函数 done 是可选的 enter: function (el, done) { // .</description>
</item>
<item>
<title>React Hooks的API</title>
<link>https://mambaneverout.github.io/post/react-hooks%E7%9A%84api/</link>
<pubDate>Thu, 19 Mar 2020 12:08:40 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/react-hooks%E7%9A%84api/</guid>
<description>useState 使用方法：
const [n,setN] = React.useState(0) const [user,setUser] = React.useState({name:'F}) const [state,setState] = React.useState(()=&gt;({name:'F})) // 可以接收函数，该函数返回初始state，且只执行一次 注意：
不可以局部更新（需要自己合并属性，useReducer 也需要自己合并） 不能写到 if 中 对象的地址不变，内部改变，React 认为没有变化（要使用 setUser({})） setState(i =&gt; i + 1)，需要对 state 进行多次 setState 的操作时，使用函数 useReducer 复杂版的 useState(用来践行 Flux/Redux 的思想)
const initial = { n: 0 }; const reducer = (state, action) =&gt; { if (action.type === &quot;add&quot;) { return { n: state.n + action.</description>
</item>
<item>
<title>探索React Hooks原理</title>
<link>https://mambaneverout.github.io/post/%E6%8E%A2%E7%B4%A2react-hooks%E5%8E%9F%E7%90%86/</link>
<pubDate>Wed, 18 Mar 2020 22:17:09 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E6%8E%A2%E7%B4%A2react-hooks%E5%8E%9F%E7%90%86/</guid>
<description>今天我们来探究一下 React Hooks 的原理 useState 先来尝试实现单个数据的 useState
let _state; function myUseState(initialValue) { _state = _state || initialValue; function setState(newState) { _state = newState; render(); } return [_state, setState]; } const render = () =&gt; ReactDOM.render(&lt;App /&gt;, rootElement); function App() { const [n, setN] = myUseState(0); return ( &lt;div className=&quot;App&quot;&gt; &lt;p&gt;{n}&lt;/p&gt; &lt;p&gt; &lt;button onClick={() =&gt; setN(n + 1)}&gt;+1&lt;/button&gt; &lt;/p&gt; &lt;/div&gt; ); } ReactDOM.render(&lt;App /&gt;, rootElement); 那么，如果要对两个或多个数据进行 useState 呢？</description>
</item>
<item>
<title>TypeScript结合Vue</title>
<link>https://mambaneverout.github.io/post/typescript%E7%BB%93%E5%90%88vue/</link>
<pubDate>Mon, 20 Jan 2020 13:14:23 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/typescript%E7%BB%93%E5%90%88vue/</guid>
<description>Vue 文档：https://cn.vuejs.org/v2/guide/typescript.html#ad
创建 Vue 项目
npm install --global @vue/cli vue create my-project 基于类的 Vue 组件
import Vue from 'vue' import Component from 'vue-class-component' // @Component 修饰符注明了此类为一个 Vue 组件 @Component({ // 所有的组件选项都可以放在这里(props, components, watch) template: '&lt;button @click=&quot;onClick&quot;&gt;Click!&lt;/button&gt;' }) export default class MyComponent extends Vue { // 初始数据可以直接声明为实例的属性(data) message: string = 'Hello!' // 组件方法也可以直接声明为实例的方法(methods) onClick (): void { window.alert(this.message) } } @Component() 里面包含的是共用的属性
export default class MyComponent extends Vue{} 里面包含的是组件自己特有的属性</description>
</item>
<item>
<title>React组件</title>
<link>https://mambaneverout.github.io/post/react%E7%BB%84%E4%BB%B6/</link>
<pubDate>Tue, 14 Jan 2020 10:10:08 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/react%E7%BB%84%E4%BB%B6/</guid>
<description>React 组件 元素与组件
React 元素（d小写） const div = React.createElement('div',...) React 组件（D大写) const Div = () =&gt; React.createElement('div',...) 函数组件 function Welcome(props){ return &lt;h1&gt;Hello, {props.name}&lt;/h1&gt;; } 使用方法: &lt;Welcome name=&quot;frank&quot;/&gt; 类组件 class Welcome extends React.Component{ constructor(){ super() this.state = {n:0} } render(){ return &lt;h1&gt;Hello, {this.props.name}&lt;/h1&gt; } } 使用方法: &lt;Welcome name=&quot;frank&quot;/&gt; state(内部数据) 类组件首先要在 constructor 中初始化，然后可以用 this.state 读，this.setState 写(setState 最好使用函数) 函数组件用 useState 返回数组，第一项读，第二项写 类组件的 setState 会异步改变 n，函数组件的 setN 不会改变 n，而是会生成一个新的 n</description>
</item>
<item>
<title>TypeScript特性（接口）</title>
<link>https://mambaneverout.github.io/post/typescript%E7%89%B9%E6%80%A7%E6%8E%A5%E5%8F%A3/</link>
<pubDate>Mon, 13 Jan 2020 10:46:13 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/typescript%E7%89%B9%E6%80%A7%E6%8E%A5%E5%8F%A3/</guid>
<description>基础类型 七种数据类型（symbol）
let a:null = null let b:undefined = undefined let c:boolean = true let d:string = 'xxx' let e:number = 1.223 let obj:Object = { name:'Irelia'} let n:any = 1; //可以是任意数据类型 枚举
值默认为 0,1,2&hellip; 如果当前枚举成员没有初始化的值且它之前的枚举成员是一个数字常量。当前枚举成员的值为它上一个枚举成员的值加 1。
enum Gender{ Man = 'man'; // 默认为Man = 0 A = 1, B, C; // 1,2,3 } void(空)
function print(x:any):void { // 没有返回值 console.log(x) } undefined</description>
</item>
<item>
<title>5分钟学习TypeScript</title>
<link>https://mambaneverout.github.io/post/5%E5%88%86%E9%92%9F%E5%AD%A6%E4%B9%A0typescript/</link>
<pubDate>Sun, 12 Jan 2020 22:10:21 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/5%E5%88%86%E9%92%9F%E5%AD%A6%E4%B9%A0typescript/</guid>
<description>安装 配置 npm 淘宝源：npm config set registry https://registry.npm.taobao.org/ npm install typescript@版本号 -g npm install ts-node@版本号 -g // 使 ts 可以在 node 上运行 把 ts-node 安装后的可执行文件路径记录下来 调试 Windows 用户需要运行命令 npm init -y npm i -D ts-node typescript 创建.vscode/launch.json 文件，内容如下
{ &quot;configurations&quot;: [ { &quot;name&quot;: &quot;ts-node&quot;, &quot;type&quot;: &quot;node&quot;, &quot;request&quot;: &quot;launch&quot;, &quot;program&quot;: &quot;注意看这里，要写成ts-node对应的可执行文件，Windows 用户注意了，你应该写成 ${workspaceRoot}/node_modules/ts-node/dist/bin.js&quot;, &quot;args&quot;: [&quot;${relativeFile}&quot;], &quot;cwd&quot;: &quot;${workspaceRoot}&quot;, &quot;protocol&quot;: &quot;inspector&quot; } ] } 找到调试选项，选择 ts-node，然后点击调试，就会在下方控制台输出结果</description>
</item>
<item>
<title>BOM</title>
<link>https://mambaneverout.github.io/post/bom/</link>
<pubDate>Fri, 10 Jan 2020 10:44:55 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/bom/</guid>
<description>BOM BOM(Browser Object Model)浏览器对象模型，提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
var 声明的全局变量和 function 声明的函数是 window 的属性
let、const 声明的变量不是
navigator 浏览器相关信息 navigator.userAgent
// 判断用户设备 const isIPhone = /iphone/i.test(navigator.userAgent) const isIOS = /iphone|ipad/i.test(navigator.userAgent) const isAndroid = /android/i.test(navigator.userAgent) screen 屏幕信息 screen.availWidth 可用宽度 screen.availHeight 可用高度
// 判断是横屏还是竖屏 screen.orientation.onchange = function(){ console.log(screen.orientation.type) // &quot;landscape-primary&quot; 水平宽度大于垂直宽度 // &quot;portrait-primary&quot; 垂直宽度大于水平宽度 } 尺寸 页面文档高度: document.documentElement.offset Height
屏幕高度: screen.height
浏览器视窗高度: document.</description>
</item>
<item>
<title>Vue进阶属性</title>
<link>https://mambaneverout.github.io/post/vue%E8%BF%9B%E9%98%B6%E5%B1%9E%E6%80%A7/</link>
<pubDate>Wed, 08 Jan 2020 12:43:50 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/vue%E8%BF%9B%E9%98%B6%E5%B1%9E%E6%80%A7/</guid>
<description>directives(指令) 全局指令
Vue.directives('my-directive',{ inserted: function(el){ el.addEventListener('click', ()=&gt;{console.log('directive')})} }) 局部指令
directives:{ on2:{ // 模仿简单版v-on inserted(el, info){ el.addEventListener(info.arg, info.value) } }, unbind(el, info){ // 移除事件监听 el.removeEventListener(info.arg, info.value) } } directive 函数属性
bind(el, info, vnode, oldVnode) 与 created 类似 inserted(el, info, vnode, oldVnode) 与 mounted 类似 update(el, info, vnode, oldVnode) 与 updated 类似 componentUpdated(el, info, vnode, oldVnode) unbind(el, info, vnode, oldVnode) 与 destoryed 类似 指令的作用
减少重复的 DOM 操作（数据绑定，事件监听，DOM 更新） mixins(混入) mixins 的作用: 减少 data、methods、钩子的重复</description>
</item>
<item>
<title>浅尝React</title>
<link>https://mambaneverout.github.io/post/%E6%B5%85%E5%B0%9Dreact/</link>
<pubDate>Tue, 07 Jan 2020 11:33:47 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E6%B5%85%E5%B0%9Dreact/</guid>
<description>引入 React cjs 和 umd 的区别
cjs(CommonJS)，是 Node.js 支持的模块规范 umd 是统一模块定义，兼容各种模块规范（含浏览器） 理论上优先使用 umd，同时支持 Node.js 和浏览器 最新的模块的规范是使用 import 和 export 关键字 CDN 引入（顺序不能改变）
引入 React: https://&hellip;/react.x.min.js 引入 ReactDOM: https://&hellip;/react-dom.x.min.js 通过 webpack 引入 React（rollup, parcel 也可以这样引入）
// 约定：大小写要保持一致 yarn add react react-dom import React from 'react' import ReactDOM from 'react-dom' create-react-app
yarn global add create-react-app create-react-app react-demo setTimeout(fn, 1000) 1s 后尽快执行
普通代码立即求值，函数则在调用时才会去读取值
React 虚拟 DOM React 元素：React.</description>
</item>
<item>
<title>JS事件</title>
<link>https://mambaneverout.github.io/post/js%E4%BA%8B%E4%BB%B6/</link>
<pubDate>Sun, 05 Jan 2020 12:42:18 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/js%E4%BA%8B%E4%BB%B6/</guid>
<description>事件捕获与事件冒泡 DOM 事件流三个阶段：事件捕获阶段，处于目标阶段，事件冒泡阶段 事件绑定 addEventListener target.addEventListener(type, listener, options)
type: 事件类型 listener: 事件处理函数 options: 可选，默认都为 false。 {capture:是否捕获阶段监听，once:是否只监听一次，passive:是否忽略 preventDefault} target.addEventListener(type, listener, useCapture)
useCapture:可选，true 表示在捕获阶段调用 listener，false 表示在冒泡阶段调用 listener target.removeEventListener
target.removeEventListener(&lsquo;click&rsquo;, handler) target.removeEventListener(&lsquo;click&rsquo;, handler, true)
$btn.onclick = function(e) { console.log('点了') } $btn.addEventListener('click', function(e){ console.log('点') }, true) 阻止事件传播 e.stopPropagation() 阻止默认行为 e.preventDefault()
$form.addEventListener('submit', function(e) { e.preventDefault() if(validUsername($username.value)) { // 表单提交前校验 this.submit() } else { $error.</description>
</item>
<item>
<title>正则表达式</title>
<link>https://mambaneverout.github.io/post/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</link>
<pubDate>Tue, 31 Dec 2019 12:52:45 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E6%AD%A3%E5%88%99%E8%A1%A8%E8%BE%BE%E5%BC%8F/</guid>
<description>浅拷贝（只拷贝数据的第一层） const shadowCopy = arr =&gt; arr.map(v =&gt; v) // 数组拷贝 function shadowCopy(src) { let result = Array.isArray(src) ? [] : {} for(let key in src){ result[key] = src[key] } return result } 深拷贝 function deepCopy(src){ let result = Array.isArray(src) ? [] : {} for(let key in src){ if( typeof src[key] === 'object' &amp;&amp; src[key] !== null) { result[key] = deepCopy(src[key]) } else { result[key] = src[key] } } return result } 正则表达式 创建 字面量方式创建</description>
</item>
<item>
<title>Vue指令和修饰符</title>
<link>https://mambaneverout.github.io/post/vue%E6%8C%87%E4%BB%A4%E5%92%8C%E4%BF%AE%E9%A5%B0%E7%AC%A6/</link>
<pubDate>Sun, 29 Dec 2019 12:14:52 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/vue%E6%8C%87%E4%BB%A4%E5%92%8C%E4%BF%AE%E9%A5%B0%E7%AC%A6/</guid>
<description>template(模板) 写在 HTMl 中(Vue 完整版)
&lt;div id=&quot;xxx&quot;&gt; {{n}} &lt;button @click=&quot;add&quot;&gt;+1&lt;/button&gt; &lt;/div&gt; new Vue({ el: '#app', data: {n:0}, // data可以改成函数 methods: {add(){}} }) 写在 options 中(Vue 完整版)
&lt;div id=&quot;app&quot;&gt;&lt;/div&gt; // div#app会被替换 new Vue({ template: ` &lt;div&gt; {{n}} &lt;button @click=&quot;add&quot;&gt;+1&lt;/button&gt; &lt;/div&gt; `, data: {n:0}, // data可以改成函数 methods: {add(){}} }).$mounted('#app') 配合 xxx.vue 文件(Vue 非完整版)
template 使用的是XML，语法严格，体积小，更适合写编译器 &lt;template&gt; &lt;div&gt; &lt;button @click=&quot;add&quot;&gt; +1 &lt;/button&gt; &lt;/div&gt; &lt;/template&gt; &lt;script&gt; export default{ data(){ return { n:0 }}, // data必须为函数 methods:{add(){}} } &lt;/script&gt; // 在其他地方引入 import Xxx from '.</description>
</item>
<item>
<title>Computed和watch</title>
<link>https://mambaneverout.github.io/post/computed%E5%92%8Cwatch/</link>
<pubDate>Mon, 23 Dec 2019 11:40:56 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/computed%E5%92%8Cwatch/</guid>
<description>computed computed 默认只有 getter，需要的时候也可以提供 setter
computed:{ displayName: { get(){ const user = this.user return user.nickname || user.phone || user.email } set(value){ this.user.nickname = value } } } 计算属性的结果会缓存
computed:{ displayUsers(){ const hash = { male: '男', female: '女' } const { users, gender } = this if(gender === &quot;&quot;){ return users } else if(typeof gender === &quot;string&quot;){ return users.filter(u =&gt; u.gender === hash[gender]) } else { throw new Error(&quot;意料之外的值&quot;) } } }, watch watch 是异步的，可以在数据变化之后立即使用 Vue.</description>
</item>
<item>
<title>Grid布局</title>
<link>https://mambaneverout.github.io/post/grid%E5%B8%83%E5%B1%80/</link>
<pubDate>Sat, 21 Dec 2019 20:59:43 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/grid%E5%B8%83%E5%B1%80/</guid>
<description>grid 布局是一种二维布局模型，先在页面上画好“虚拟格子”，再设置元素在格子上的位置和跨度 容器属性 声明使用 flex 布局 display: grid; / inline-grid 画好虚拟表格 grid: 30px auto 30px / 10% 1fr 10% (3 行 3 列) grid-gap: 10px 20px; (行与列之间的间隙) 告诉内容如何放置 align-items: start | end | center | stretch; justify-items: start | end | center | stretch; align-content: start; justify-content: space-evenly; 子项属性 grid-column： 3 / span 2; (从第三条线开始，跨越两个格子 =&gt; 3 / 5) grid-row: 3 / 4; justify-self: start; align-self: center; 掘金首页 &lt;body&gt; &lt;header&gt;header&lt;/header&gt; &lt;div class=&quot;subnav&gt;subnav&lt;/div&gt; &lt;main&gt;main&lt;/main&gt; &lt;aside&gt;aside&lt;/aside&gt; &lt;/body&gt; body{ display: grid; grid: auto auto auto / 1fr 800px 180px 1fr; } header{ grid-area:1/2/2/4; } .</description>
</item>
<item>
<title>定位与层叠上下文</title>
<link>https://mambaneverout.github.io/post/%E5%AE%9A%E4%BD%8D%E4%B8%8E%E5%B1%82%E5%8F%A0%E4%B8%8A%E4%B8%8B%E6%96%87/</link>
<pubDate>Sat, 21 Dec 2019 09:25:43 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E5%AE%9A%E4%BD%8D%E4%B8%8E%E5%B1%82%E5%8F%A0%E4%B8%8A%E4%B8%8B%E6%96%87/</guid>
<description>定位 position:static 元素在文档常规流中当前的布局位置 top, right, bottom, left 和 z-index 属性无效 用来取消元素的定位 position:relative 元素在文档流中占据的位置不会改变 视觉上位置改变了，不会影响其他元素 position:absolute 脱离了文档流 left: 10px 是自己的外边距相对于参考元素的边框内壁偏移 10px。 如果不设置 left/top，或者设为 auto，则绝对定位元素的位置处于默认位置 绝对定位的元素的宽度不会撑开父元素 给行内元素设置绝对定位后就有了块级的特性，可以设置宽高 position:fixed 相对于浏览器窗口 一定要设置 top/bottom position:sticky 一定要设置 top 当页面向下滚动时，被视窗顶部拦住，被父级块元素下边缘推走 如果出现多个 sticky，放置在同一容器内，会出现下一个 sticky 元素把上一个“覆盖”的效果 如果出现多个 sticky，放置在并列的多个块级容器内，会出现下一个 sticky 元素把上一个“推走”的效果 使用经验 position:relative 做轻微的偏移，比如图标位置不齐 position:absolute 适用出现元素重叠、放置任意位置的场景 position:fixed 适用需持续固定在浏览器某位置的场景 position:sticky 标题随页面滚动，到顶部固定 层叠上下文 常见的创建层叠上下文的情况：
z-index: 0 display: flex opacity 小于 1 的元素 transform opacity: 0.</description>
</item>
<item>
<title>Vue数据响应式</title>
<link>https://mambaneverout.github.io/post/vue%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F/</link>
<pubDate>Fri, 20 Dec 2019 09:20:32 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/vue%E6%95%B0%E6%8D%AE%E5%93%8D%E5%BA%94%E5%BC%8F/</guid>
<description>“Vue 是一套用于构建用户界面的渐进式框架，Vue 的核心库只关注视图层。” Vue 文档已经把 Vue 的特点说的很清楚了，Vue 是专注于 UI 界面的框架，数据的修改会实时的反馈到界面中。这就是数据响应式了，通过数据来驱动视图。 在 Vue 文档深入响应式原理中，Vue 是这样说的：“ 当你把一个对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。 ”那么 Vue 具体是怎么做的呢？
Vue 响应式原理: https://cn.vuejs.org/v2/guide/reactivity.html
1.先来了解一下 getter, setter 和 Object.defineProperty getter: 不要括号就可以调用的函数
let obj2 = { 姓: &quot;高&quot;, 名: &quot;圆圆&quot;, get name() { return this.姓 + this.名; }, }; console.log(&quot;需求二：&quot; + obj2.name); setter: 传入一个值并把这个值赋值给其他变量
let obj3 = { 姓: &quot;高&quot;, 名: &quot;圆圆&quot;, get name() { return this.</description>
</item>
<item>
<title>初识Vue</title>
<link>https://mambaneverout.github.io/post/%E5%88%9D%E8%AF%86vue/</link>
<pubDate>Tue, 17 Dec 2019 12:06:38 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E5%88%9D%E8%AF%86vue/</guid>
<description>创建项目
vue create vue-demo // 或者 codesandbox.io 上创建 Vue 选项
Babal (*) TypeScript Progressive Web App (PWA)Support Router Vuex CSS Pre-processors * // css预处理器 Linter/Formatter (*) Unit Testing * // 单元测试 E2E Testing Lint 提示
Lint on save // 保存时提示 Lint and fix on commit // 提交时提示 unit testing
Jest preset for future projects : N
vue.js 与 vue.runtime.js
vue.js(完整版):
我有 complier(编译器) 可以直接写在 html 里或者写在 template 中 体积会大一些</description>
</item>
<item>
<title>CSS选择器</title>
<link>https://mambaneverout.github.io/post/css%E9%80%89%E6%8B%A9%E5%99%A8/</link>
<pubDate>Thu, 12 Dec 2019 12:45:52 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/css%E9%80%89%E6%8B%A9%E5%99%A8/</guid>
<description>通用选择器
* { box-sizing: border-box; } .box *{ font-size: 24px; } 属性选择器
[disabled]{ border:1px solid #ccc; } [type=&quot;text&quot;]{ border:1px solid #ccc; } [id=&quot;title&quot;]{ border:1px solid #ccc; } [data-color=&quot;gray&quot;]{ color: #666; } 不常用的选择器
[attr~=val] 仅选择 attr 属性的值（以空格间隔出多个值）中有包含 val 值的所有元素，比如位于被空格分隔的多个类（class）中的一个类。
[class~=&quot;aa&quot;]{} [attr*=val] 选择 attr 属性的值中包含字符串 val 的元素。
[href*=&quot;baidu.com&quot;]{} [attr^=val] 选择 attr 属性的值以 val 开头（包括 val）的元素。
[data-name^=&quot;frank&quot;]{} [attr$=val] 选择 attr 属性的值以 val 结尾（包括 val）的元素。
[data-name$=&quot;1&quot;]{} [attr|=val] 选择 attr 属性的值是 val 或以 val-开头的元素（-用来处理语言编码）。</description>
</item>
<item>
<title>MVC</title>
<link>https://mambaneverout.github.io/post/mvc/</link>
<pubDate>Tue, 10 Dec 2019 16:44:18 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/mvc/</guid>
<description>MVC
Model (数据) 负责操作所有数据
const m = { data:{} } View (视图) 负责所有 UI 界面
const v = { el: null, html:` &lt;div&gt; &lt;button&gt;点我&lt;/button&gt; &lt;/div&gt; `, init(container){}, render(){} } Controller (控制器) 负责其他
const c = { init(container){}, events:{}, autoBindEvents(){} } EventBus(事件总线)
对象间的通信，负责 Model,View,Controller 之间的通信。
on 监听事件
trigger 触发事件/emit 发送事件
once 事件执行一次
off 移除事件监听
jQuery
import $ from 'jQuery' const eventBus = $(window) // const eventBus = $({}) eventBus.</description>
</item>
<item>
<title>JS继承</title>
<link>https://mambaneverout.github.io/post/js%E7%BB%A7%E6%89%BF/</link>
<pubDate>Tue, 10 Dec 2019 10:04:19 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/js%E7%BB%A7%E6%89%BF/</guid>
<description>JS 实现继承有两种通用的方式 构造函数 + 原型
不写 Parent.call(this, name1) 注释掉 Parent.call(this, name1)之后，执行 pMethod 函数，pMethod 函数被 child 调用，this 指向 child，但在 child 中无法找到 name1，所以输出 undefined。
正确代码 正确代码，需要把 this 指向通过 new Child 构造出来的实例对象(child)，并且把参数 name1 传给 Parent。
终极代码
function Parent(name1){ this.name1 = name1 } Parent.prototype.pMethod = function(){ console.log(this.name1) } function Child(name2, name1){ Parent.call(this, name1) // 得分点 this.name2 = name2 } Child.prototype.__proto__ = Parent.prototype //上面这句代码的古板写法应该是下面三句 //const empty = function(){} //empty.prototype = Parent.</description>
</item>
<item>
<title>JQuery设计思想</title>
<link>https://mambaneverout.github.io/post/jquery%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3/</link>
<pubDate>Sun, 24 Nov 2019 10:05:32 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/jquery%E8%AE%BE%E8%AE%A1%E6%80%9D%E6%83%B3/</guid>
<description>jQuery 获取元素
将一个表达式，放进构造函数 jQuery()（简写为\$），然后得到被选中的元素。
表达式可以是 CSS 选择器：
$(document) // 选择整个文档 $('#myId') // 选择ID为myId的网页元素 $('div.myClass) // 选择class为myClass的div元素 $('input[name=first]') // 选择name属性等于first的input元素 也可以是 jQuery 特有的表达式
$('a:first') //选择网页中第一个a元素 $('tr:odd') //选择表格的奇数行 $('#myForm :input') // 选择表单中的input元素 $('div:visible') //选择可见的div元素 $('div:gt(2)') // 选择所有的div元素，除了前三个 $('div:animated') // 选择当前处于动画状态的div元素 jQuery 还支持对选中的元素进行过滤，对找到的元素再次进行筛选
$('div').has('p'); // 选择包含p元素的div元素 $('div').not('.myClass'); //选择class不等于myClass的div元素 $('div').filter('.myClass'); //选择class等于myClass的div元素 $('div').first(); //选择第1个div元素 $('div').eq(5); //选择第6个div元素 也可以获取附近的相关元素(父子元素，兄弟元素)
$('div').next('p'); //选择div元素后面的第一个p元素 $('div').parent(); //选择div元素的父元素 $('div').closest('form'); //选择离div最近的那个form父元素 $('div').children(); //选择div的所有子元素 $('div').siblings(); //选择div的同级元素 jQuery 的链式操作</description>
</item>
<item>
<title>JS函数的执行时机</title>
<link>https://mambaneverout.github.io/post/js%E5%87%BD%E6%95%B0%E7%9A%84%E6%89%A7%E8%A1%8C%E6%97%B6%E6%9C%BA/</link>
<pubDate>Fri, 15 Nov 2019 21:03:05 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/js%E5%87%BD%E6%95%B0%E7%9A%84%E6%89%A7%E8%A1%8C%E6%97%B6%E6%9C%BA/</guid>
<description>解释为什么如下代码会打印 6 个 6
let i = 0 for(i = 0; i&lt;6; i++){ setTimeout(()=&gt;{ console.log(i) },0) } for 循环遍历 6 次，会执行 6 次 console.log() 当执行第 6 次循环的时候，i 为 5，console.log(5)之后，执行 i++，i 的值变为 6 只有一个全局变量 i，在 for 循环结束后，i 的值为 6，console.log(i)就会打印出 6 写出让上面代码打印 0、1、2、3、4、5 的方法
for(let i = 0; i&lt;6; i++){ setTimeout(()=&gt;{ console.log(i) },0) } for(var i = 0; i&lt;6; i++){ let j = i setTimeout(()=&gt;{ console.log(j) },0) } for(let i = 0; i&lt;6; i++){ !</description>
</item>
<item>
<title>JS对象基本用法</title>
<link>https://mambaneverout.github.io/post/js%E5%AF%B9%E8%B1%A1%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95/</link>
<pubDate>Wed, 13 Nov 2019 17:51:42 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/js%E5%AF%B9%E8%B1%A1%E5%9F%BA%E6%9C%AC%E7%94%A8%E6%B3%95/</guid>
<description>对象基本知识
声明对象的两种语法
- let obj = { 'name':小明, 'age':18 } - let obj = new Object({ 'name':小明, 'age':18 }) 注意：
键名是字符串，引号省略也是字符串（symbol 也可以作为属性名） 引号可以省略，省略之后只能写标识符 变量作为属性名
let a = 'mmp' let obj = {a: 'emm'} // obj.a let obj = {[a]: 'emm'} // obj[a] 如果使用 [ ] 语法，那么 JS 会先求 [ ] 中表达式的值，注意区分表达式是变量还是常量。 如果使用点语法，那么点后面一定是 string 常量。 对象的原型
每个对象都有一个隐藏属性，保存着原型的地址 共有属性组成的对象叫原型 删除对象的属性
- delete obj.</description>
</item>
<item>
<title>JS基本语法</title>
<link>https://mambaneverout.github.io/post/js%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/</link>
<pubDate>Tue, 12 Nov 2019 12:54:20 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/js%E5%9F%BA%E6%9C%AC%E8%AF%AD%E6%B3%95/</guid>
<description>表达式和语句 表达式 1 + 2 表达式的值为 3 add(1,2) 表达式的值为函数的返回值 console.log 表达式的值为函数本身 console.log(3) 表达式的值为 undefined 语句 var a = 1 是一个语句 区别 表达式一般都有值，语句可以有也可以没有 语句一般是用来改变环境的（声明，赋值） 注意：return 后面不能加回车 标识符的规则 第一个字符可以是 Unicode 字母 或者 \$ 或者 _ 或者 中文 后面的字符包括上面的说有，还可以有数字 变量名是标识符，还有其他标识符 if else 语句 / switch 语句
if else 语句
推荐写法：
if (表达式) { 语句 } else if (表达式) { 语句 } else { 语句 } 可以省略{}，但是省略后 if else 语句只会默认把后面的第一句放入{}内</description>
</item>
<item>
<title>JavaScript的诞生</title>
<link>https://mambaneverout.github.io/post/javascript%E7%9A%84%E8%AF%9E%E7%94%9F/</link>
<pubDate>Mon, 04 Nov 2019 23:38:03 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/javascript%E7%9A%84%E8%AF%9E%E7%94%9F/</guid>
<description>JavaScript 发展重要时间点：
1994 年，网景公司发布了 Navigator 浏览器 0.9 版。这是历史上第一个比较成熟的网络浏览器。但是，这个浏览器只能用来浏览，不具备与访问者互动的能力 1995 年 5 月，网景公司决定创造一门网页脚本语言，随后布兰登只用 10 天时间就设计出来了 Javascript 2004 年 4 月 1 日，谷歌发布 Gmail 在线网页 2005 年，Jesse 将谷歌用到的技术命名为 AJAX，前端技术正式出现 2006 年，jQuery 发布，并且在之后的十年里占据了前端技术的主要地位 2009 年，Ryan 基于 V8 创建了 Node.js 2010 年，Isaac 基于 Node.js 写出来 npm 2010 年，TJ 发布了 Express.js ECMAScript 标准的制定
1997 年 6 月，第一版 ECMAScript 发布
1999 年 12 月，ES3 发布，这是目前使用最广泛的版本
2009 年 12 月，ES5 发布，增加了一些功能</description>
</item>
<item>
<title>浅析URL</title>
<link>https://mambaneverout.github.io/post/%E6%B5%85%E6%9E%90url/</link>
<pubDate>Tue, 29 Oct 2019 12:53:44 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E6%B5%85%E6%9E%90url/</guid>
<description>URL
URL 的内容：协议 + 域名或 IP + 端口号 + 路径 + 查询参数字符串 + 锚点 https + www.baidu.com + /s + ?wd=hello&amp;rsv_spt=1 + #5 协议：使用 http 还是 https 域名：baidu.com 端口号：默认不写（http 为 80，https 为 443) 路径：请求不同的页面 查询参数字符串：查询的内容 锚点：访问不同位置的内容（不支持中文，不会传给服务器） DNS ，nslookup 命令
域名系统（Domain Name System）是将域名和 IP 地址相互映射的一个分布式数据库。
DNS 的作用是让域名和 IP 对应起来
nslookup baidu.com
IP ，ping 命令
Internet Protocal 如何让定位一台设备 如何封装数据报文，以跟其他设备交流 内网 IP(路由器) 外网 IP(ipconfig) 特殊的 IP 127.</description>
</item>
<item>
<title>CSS知识总结</title>
<link>https://mambaneverout.github.io/post/css%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/</link>
<pubDate>Sun, 27 Oct 2019 14:15:01 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/css%E7%9F%A5%E8%AF%86%E6%80%BB%E7%BB%93/</guid>
<description>一、 浏览器渲染原理
根据 HTML 构建 HTML 树（DOM） 根据 CSS 构建 CSS 树（CSSOM） 将两棵树合并成一颗渲染树（render tree) Layout 布局 （文档流、盒模型、计算大小和位置） Paint 绘制（把边框颜色、文字颜色、阴影等画出来） Composite 合成（根据层叠关系展示画面） 二、 CSS 动画 transition
transform
语法：
transform:translate(-50%, -50%) 组合使用
transform: scale(0.5) translate(-100%,-100%) transform: none; 取消所有效果 translate（位移）
translateX() translateY() translate() translateZ() translate3d() scale（缩放）
scaleX() scaleY() scale() rotate（旋转）
rotate() rotateZ() rotateX() rotateY() rotate3d() skew（倾斜）
skewX() skewY() skew() 注意：inline 元素不支持 transform</description>
</item>
<item>
<title>HTML常用标签</title>
<link>https://mambaneverout.github.io/post/html%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/</link>
<pubDate>Wed, 23 Oct 2019 15:57:32 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/html%E5%B8%B8%E7%94%A8%E6%A0%87%E7%AD%BE/</guid>
<description>a 标签
href：超链接，网址
网址: //google.com (使用这种方式即可，自动选择使用 http 或者 https)
路径: 以开启 http 服务的文件夹为根目录查找文件
伪协议: javascript: 代码 如果需要点击 a 标签后什么都不会发生，则需要下面的代码。
&lt;a href=&quot;javascript:;&quot;&gt;&lt;/a&gt; mailto: 邮箱
tel: 手机号
id href=#xxx 跳转到 id 为 xxx 的元素的位置
target：打开方式
_blank（新窗口打开） _top（在祖先元素中加载。如果没有祖先元素，则在当前页面加载） _parent（在父元素中加载。同_top) _self（当前页面加载） 任意字符串（在同一个窗口中打开不同的页面） download：下载（没什么用）
rel=noopener
iframe 标签 内联框架元素，它能够将另一个 HTML 页面嵌入到当前页面中。
Chrome 浏览器不允许任何 iframe 标签指向 TA。 table 标签
thead tbody tfoot tr: 行 th: 表头 td: 表格单元格 table-layout: auto （内容决定宽度）/fixed （宽度平均） border-collapse: collapse; border 合并 border-spacing: 0; border 之前的距离 img 标签（永远不要让图片变形）</description>
</item>
<item>
<title>HTML入门笔记1</title>
<link>https://mambaneverout.github.io/post/html%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B01/</link>
<pubDate>Wed, 23 Oct 2019 11:25:50 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/html%E5%85%A5%E9%97%A8%E7%AC%94%E8%AE%B01/</guid>
<description> HTML是由蒂莫西·约翰·“蒂姆”·伯纳·李爵士发明的，他也是万维网的发明者。
HTML起手式： VS Code中创建一个HTML页面，输入!（注意是英文状态下的!），然后按 Tab 键即可创建一个基础的HTML。
常用的表章节的标签：
header: 头部 footer: 脚部 h1~h6：标题 p: 段落 section: 章节 article: 文章 main: 主要内容 aside: 旁支内容（侧边导航栏） div: 划分（万能标签） 全局属性：
class：CSS书写样式常用 contenteditable：标签变为可编辑的 hidden：隐藏该标签 id：尽量不要使用 style：设置样式 tabindex：Tab键访问 title：标题，显示完整内容 常用的内容标签：
ol+li：有序列表 ul+li：无序列表 dl+dt+dd：键值对列表 a：超链接（添加target=&rdquo;_blank&rdquo;，在新标签打开网页) strong：内容上的强调 em：语气上的强调 code：显示代码，默认字体是等宽的 pre：包裹的内容中的空格和换行都会显示出来 hr：分割线 br：换行 quote：内联引用 blockquote：块级引用 </description>
</item>
<item>
<title>如何用hugo搭建个人博客</title>
<link>https://mambaneverout.github.io/post/%E5%A6%82%E4%BD%95%E7%94%A8hugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/</link>
<pubDate>Tue, 22 Oct 2019 14:47:50 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E5%A6%82%E4%BD%95%E7%94%A8hugo%E6%90%AD%E5%BB%BA%E4%B8%AA%E4%BA%BA%E5%8D%9A%E5%AE%A2/</guid>
<description>大家好啊，第一篇博客就来介绍一下如何用hugo搭建一个简单的个人博客。 安装Hugo,下载链接：https://github.com/gohugoio/hugo/releases。
hugo version 下载完成后可以通过下面的指令检测是否下载成功。
建立新网站
hugo new site blog 上面的代码将在名为的文件夹中创建一个新的Hugo网站blog。
添加主题(默认主题为Ananke主题)
cd blog git init git submodule add https://github.com/budparr/gohugo-theme-ananke.git themes/ananke echo 'theme = &quot;ananke&quot;' &gt;&gt; config.toml 创建新的博客
hugo new post/开博.md 可以编辑新创建的文件内容，它将从以下内容开始：
--- title: &quot;开博&quot; date: 2019-10-22T08:47:11+01:00 draft: true --- 注意：draft 是指草稿的意思，默认是true（不显示），写完博客记得修改为false，然后才会在你的博客中显示。
启动Hugo服务器
hugo server -D 默认在 http://localhost:1313 中显示。
一个简单的hugo博客就搭建完成了，可以开始写自己的博客啦！</description>
</item>
<item>
<title>开博</title>
<link>https://mambaneverout.github.io/post/%E5%BC%80%E5%8D%9A/</link>
<pubDate>Mon, 21 Oct 2019 15:53:29 +0800</pubDate>
<guid>https://mambaneverout.github.io/post/%E5%BC%80%E5%8D%9A/</guid>
<description> 大家好，我的博客开通了。 </description>
</item>
</channel>
</rss>