小王子星球

道虽迩,不行不至,
事虽小,不为不成。

小王子星球
0%

关键词

前端框架、编译器、响应式、模板

介绍

Svelte /svelt/ adj. 苗条的;线条清晰的;和蔼的
Svelte是一个前端组件框架,就像它的英文名字一样,Svelte的目标是打造一个更高性能的响应性前端框架。
Svelte类似于React和Vue框架,提供模板语法和响应式编程。但是有一个重要的区别:Svelte是一个编译时的框架,在编译的过程中生成组件运行时的代码并实现响应式,而React和Vue则是基于虚拟DOM及Diff实现运行时的响应式。
这正是Svelte宣传的提高性能的核心实现。我们知道,原生的性能肯定是最高的,没有中间多余的转换和对比等框架层的逻辑消耗性能。或许有同学就会问,那我们在JQuery时代写的代码性能不是更好吗?为什么感觉上却没有比react和Vue写的应用性能好呢。我想,这主要是以下几个原因:

  1. 现在的硬件和网络带宽等资源已经比以往有了大幅度的提升,所以就算应用的体积较以往比较大,相比硬件等资源的提升,反而会感觉上性能更好;

  2. JQuery是基于原生的DOM API封装和扩展了统一的接口,屏蔽了浏览器底层的差异。但是很多开发人员在使用时并没有考虑DOM变更对性能带来的影响,只是简单的用JQuery对DOM进行粗暴的全局更新;

  3. Vue和React虽然是引入虚拟DOM,需要Diff等逻辑维护和更新实际的DOM树,但是框架本身做了优化,Diff算法和更新策略也有很大的提升,所以性能上并没有感觉比原生的差很多。

虽然Vue和React如今已经满足了前端大部分的场景,Svelte的目标是追求更好的性能 (所以前端是真的卷,总有人乐此不疲的遭轮子,但也正是这些人在推动着前端的不断发展) 。Svelte提供类似Vue单文件组件的模板语法,然后编译成原生JavaScript,提供了一套相对于我们自己操作DOM,更优雅,更高效的更新方案。我们可以基于Svelte官网提供的REPL直观的了解一下编译的过程:

组件文件源码,App.svelte实现了一个简单的点击按钮统计点击次数的功能。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// App.svelte
<script>
let clickCount = 0;

function click() {
clickCount += 1;
}
</script>

<button on:click="{ click }">click me { clickCount } { clickCount > 1 ? 'times' : 'time' }</button>


<style>
button {
cursor: pointer;
}
</style>

通过Svelte编译之后的代码如下,可以具体查看我的注释进行了解:

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
/* App.svelte generated by Svelte v4.1.1 */
import {
SvelteComponent,
append,
append_styles,
attr,
detach,
element,
init,
insert,
listen,
noop,
safe_not_equal,
set_data,
space,
text
} from "svelte/internal";

import "svelte/internal/disclose-version";

// 插入组件样式,Svelte会自动生成一个全局唯一的类名
function add_css(target) {
append_styles(target, "svelte-1hvi0n4", "button.svelte-1hvi0n4{cursor:pointer}");
}

// 1、生成HTML片段
function create_fragment(ctx) {
let button;
let t0;
let t1;
let t2;
let t3_value = (/*clickCount*/ ctx[0] > 1 ? 'times' : 'time') + "";
let t3;
let mounted;
let dispose;

return {
// c --> create 创建
c() {
button = element("button");
t0 = text("click me ");
t1 = text(/*clickCount*/ ctx[0]);
t2 = space();
t3 = text(t3_value);
attr(button, "class", "svelte-1hvi0n4");
},
// m --> mount 挂载
m(target, anchor) {
insert(target, button, anchor);
append(button, t0);
append(button, t1);
append(button, t2);
append(button, t3);

// 绑定事件
if (!mounted) {
dispose = listen(button, "click", /*click*/ ctx[1]);
mounted = true;
}
},
// p --> update 更新
p(ctx, [dirty]) {
if (dirty & /*clickCount*/ 1) set_data(t1, /*clickCount*/ ctx[0]);
if (dirty & /*clickCount*/ 1 && t3_value !== (t3_value = (/*clickCount*/ ctx[0] > 1 ? 'times' : 'time') + "")) set_data(t3, t3_value);
},
i: noop,
o: noop,
// d --> destroy 销毁
d(detaching) {
if (detaching) {
detach(button);
}

mounted = false;
dispose();
}
};
}

// 实例,对应上面的ctx传参数
function instance($$self, $$props, $$invalidate) {
let clickCount = 0;

function click() {
$$invalidate(0, clickCount += 1);
}

return [clickCount, click];
}

class App extends SvelteComponent {
constructor(options) {
super();
init(this, options, instance, create_fragment, safe_not_equal, {}, add_css);
}
}

export default App;

开始使用

官方推荐使用SvelteKit来创建Svelte应用项目,具体命令如下:

1
2
3
4
npm create svelte@latest svelte-demo
cd svelte-demo
npm install
npm run dev

Svelte会将.svelte组件文件编译成.js文件去创造真实的DOM和对应的.css样式文件,工具同时提供了开发服务器、路由、编译部署、SSR等支持。SvelteKit利用Vite去编译代码。

如果你不想使用SvelteKit,你还可以通过Vite来创建Svelte应用项目,具体命令如下:

1
2
3
4
# 选择svelte模板
npm init vite
# 生成HTML,JS,CSS文件到dist文件夹
npm run build

编辑器支持

Svelte团队维护了一个VsCode的插件Svelte for VS Code,支持语法提示、高亮、格式化等功能。

总结

  • Svelte是一个编译时的响应式前端组件框架,目标是减少React,Vue等框架引入虚拟DOM和Diff实现响应式的性能损耗。

  • Svelte的实现原理理论上比React和Vue等框架性能要好,但是考虑到虚拟DOM技术的成熟和优化,客户端的硬件和网络资源提升,这部分的性能提升带来的收益或许不明显。

  • 当前要不要追求极致的性能而选择Svelte?我的答案是否定的。一是Svelte当前的成熟度和生态丰富度都没React和Vue好,开发体验和效率相对会没那么好;二是上面说了,Svelte带来的性能提升收益或许并不会那么明显。

  • 那我们要不要关注和学习Svelte? 我的答案是肯定的。Svelte框架背后的实现原理、思路以及技术都是值得我们去了解和学习的。而且未来Svelte的生态丰富了,或许开发体验和效率会越来越好,我们也多一种选择。总之,保持热爱,保持好奇,保持学习吧~

参考

联系我

Hexo

Hexo 是一个基于JavaScript,快速、简洁且高效的开源博客框架,具有以下特点:

  • 超快速度
    Node.js 所带来的超快生成速度,让上百个页面在几秒内瞬间完成渲染。
  • 支持 Markdown
    Hexo 支持 GitHub Flavored Markdown 的所有功能,甚至可以整合 Octopress 的大多数插件。
  • 一键部署
    只需一条指令即可部署到 GitHub Pages, Heroku 或其他平台。
  • 插件和可扩展性
    强大的 API 带来无限的可能,与数种模板引擎(EJS,Pug,Nunjucks)和工具(Babel,PostCSS,Less/Sass)轻易集成

Hexo vs Jekyll vs Hugo

Hexo是基于JavaScript开发的开源博客框架,GitHub Stars 35.3K(截止2022-08-25)。
Jekyll是基于ruby开发的开源博客框架,GitHub Stars 45.2K(截止2022-08-25)。
Hugo是基于Go开发的开源博客框架,GitHub Stars 61.4K(截止2022-08-25)。

我选择Hexo的原因:

  • 我是web前端开发工程师,对自己熟悉的JavaScript有好感
  • Hexo的开发者是中国台湾人,资源和文档对中文支持好
  • 配置上手简单

初始化博客

安装前提:

  • Node.js (Node.js 版本需不低于 10.13,建议使用 Node.js 12.0 及以上版本)
  • Git
1
2
3
4
5
6
7
8
9
10
11
12
# 1. 安装 Hexo
npm install -g hexo-cli

# 2. 初始化项目
hexo init hexo-demo

# 3. 安装依赖
cd hexo-demo
npm i

# 4. 启动本地服务,访问http://localhost:4000/
npm run server

配置博客

打开hexo的配置文件_config.yml,具体配置可参考官方文档,下面是我的配置,给大家参考一下

参考配置
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
# Hexo Configuration
## Docs: https://hexo.io/docs/configuration.html
## Source: https://github.com/hexojs/hexo/

# Site
title: 小王子星球
subtitle: '道虽迩,不行不至,<br>事虽小,不为不成。'
description: '一只热爱生活的程序猿'
keywords: '全栈,前端,后台,JavaScript,java,css3,html5,Linux,数据库'
author: 小王子
language: zh-CN
timezone: Asia/ShangHai

# URL
## Set your site url here. For example, if you use GitHub Page, set url as 'https://username.github.io/project'
url: https://chenqy9.github.io/
permalink: :year/:month/:day/:title/
permalink_defaults:
pretty_urls:
trailing_index: true # Set to false to remove trailing 'index.html' from permalinks
trailing_html: true # Set to false to remove trailing '.html' from permalinks

# Directory
source_dir: source
public_dir: public
tag_dir: tags
archive_dir: archives
category_dir: categories
code_dir: downloads/code
i18n_dir: :lang
skip_render:

# Writing
new_post_name: :title.md # File name of new posts
default_layout: post
titlecase: false # Transform title into titlecase
external_link:
enable: true # Open external links in new tab
field: site # Apply to the whole site
exclude: ''
filename_case: 0
render_drafts: false
post_asset_folder: false
relative_link: false
future: true
highlight:
enable: true
line_number: true
auto_detect: false
tab_replace: ''
wrap: true
hljs: false
prismjs:
enable: false
preprocess: true
line_number: true
tab_replace: ''

# Home page setting
# path: Root path for your blogs index page. (default = '')
# per_page: Posts displayed per page. (0 = disable pagination)
# order_by: Posts order. (Order by date descending by default)
index_generator:
path: ''
per_page: 10
order_by: -date

# Category & Tag
default_category: uncategorized
category_map:
tag_map:

# Metadata elements
## https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta
meta_generator: true

# Date / Time format
## Hexo uses Moment.js to parse and display date
## You can customize the date format as defined in
## http://momentjs.com/docs/#/displaying/format/
date_format: YYYY-MM-DD
time_format: HH:mm:ss
## updated_option supports 'mtime', 'date', 'empty'
updated_option: 'mtime'

# Pagination
## Set per_page to 0 to disable pagination
per_page: 10
pagination_dir: page

# Include / Exclude file(s)
## include:/exclude: options only apply to the 'source/' folder
include:
exclude:
ignore:

# Extensions
## Plugins: https://hexo.io/plugins/
## Themes: https://hexo.io/themes/
theme: next

search:
path: search.xml
field: post
content: false
format: html

# Deployment
## Docs: https://hexo.io/docs/one-command-deployment
deploy:
type: git
repo: https://github.com/chenqy9/chenqy9.github.io.git
branch: master

安装并配置NexT主题

Hexo的默认主题是landscape,其官方网站也提供了很多其他主题。我个人喜欢
NexT主题,下面展示一下主题的安装和配置。

1
2
3
4
5
6
7
8
9
# 1. 通过npm安装主题
cd hexo-demo # 进入你的博客项目根目录
npm install hexo-theme-next # 安装主题

# 2. 修改_config.yml的主题配置项为next
# theme: next

# 3. 通过npm更新主题
npm install hexo-theme-next@latest

主题的配置文件为根目录的_config.next.yml,可以从node_modules拷贝一份官方默认配置到博客根目录,具体操作如下:

1
2
# 复制默认配置到博客根目录
cp node_modules/hexo-theme-next/_config.yml _config.next.yml

具体的配置项可参考官方文档,下面是我的配置给大家参考一下:

参考配置
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
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
# ===============================================================
# It's recommended to use Alternate Theme Config to configure NexT
# Modifying this file may result in merge conflict
# See: https://theme-next.js.org/docs/getting-started/configuration
# ===============================================================

# ---------------------------------------------------------------
# Theme Core Configuration Settings
# See: https://theme-next.js.org/docs/theme-settings/
# ---------------------------------------------------------------

# Allow to cache content generation.
cache:
enable: true

# Remove unnecessary files after hexo generate.
minify: false

# Define custom file paths.
# Create your custom files in site directory `source/_data` and uncomment needed files below.
custom_file_path:
#head: source/_data/head.njk
#header: source/_data/header.njk
#sidebar: source/_data/sidebar.njk
#postMeta: source/_data/post-meta.njk
#postBodyEnd: source/_data/post-body-end.njk
#footer: source/_data/footer.njk
#bodyEnd: source/_data/body-end.njk
#variable: source/_data/variables.styl
#mixin: source/_data/mixins.styl
#style: source/_data/styles.styl


# ---------------------------------------------------------------
# Scheme Settings
# ---------------------------------------------------------------

# Schemes
# scheme: Muse
# scheme: Mist
# scheme: Pisces
scheme: Gemini

# Dark Mode
darkmode: true


# ---------------------------------------------------------------
# Site Information Settings
# ---------------------------------------------------------------

favicon:
small: /images/favicon-16x16.png
medium: /images/favicon-32x32.png
apple_touch_icon: /images/apple-touch-icon.png
safari_pinned_tab: /images/safari-pinned-tab
#android_manifest: /manifest.json

# Custom Logo (Warning: Do not support scheme Mist)
custom_logo: /uploads/logo.jpeg

# Creative Commons 4.0 International License.
# See: https://creativecommons.org/about/cclicenses/
creative_commons:
# Available values: by | by-nc | by-nc-nd | by-nc-sa | by-nd | by-sa | cc-zero
license: by-nc-sa
# Available values: big | small
size: small
sidebar: false
post: false
# You can set a language value if you prefer a translated version of CC license, e.g. deed.zh
# CC licenses are available in 39 languages, you can find the specific and correct abbreviation you need on https://creativecommons.org
language:

# Open graph settings
# See: https://hexo.io/docs/helpers#open-graph
open_graph:
enable: true
options:
#twitter_card: <twitter:card>
#twitter_id: <twitter:creator>
#twitter_site: <twitter:site>
#twitter_image: <twitter:image>
#google_plus: <g+:profile_link>
#fb_admins: <fb:admin_id>
#fb_app_id: <fb:app_id>


# ---------------------------------------------------------------
# Menu Settings
# ---------------------------------------------------------------

# Usage: `Key: /link/ || icon`
# Key is the name of menu item. If the translation for this item is available, the translated text will be loaded, otherwise the Key name will be used. Key is case-sensitive.
# Value before `||` delimiter is the target link, value after `||` delimiter is the name of Font Awesome icon.
# External url should start with http:// or https://
menu:
home: / || fa fa-home
# about: /about/ || fa fa-user
tags: /tags/ || fa fa-tags
categories: /categories/ || fa fa-th
archives: /archives/ || fa fa-archive
# schedule: /schedule/ || fa fa-calendar
# sitemap: /sitemap.xml || fa fa-sitemap
# commonweal: /404/ || fa fa-heartbeat

# Enable / Disable menu icons / item badges.
menu_settings:
icons: true
badges: true


# ---------------------------------------------------------------
# Sidebar Settings
# See: https://theme-next.js.org/docs/theme-settings/sidebar
# ---------------------------------------------------------------

sidebar:
# Sidebar Position.
position: left
#position: right

# Manual define the sidebar width. If commented, will be default for:
# Muse | Mist: 320
# Pisces | Gemini: 240
#width: 300

# Sidebar Display (only for Muse | Mist), available values:
# - post expand on posts automatically. Default.
# - always expand for all pages automatically.
# - hide expand only when click on the sidebar toggle icon.
# - remove totally remove sidebar including sidebar toggle.
display: post

# Sidebar padding in pixels.
padding: 18
# Sidebar offset from top menubar in pixels (only for Pisces | Gemini).
offset: 12

# Sidebar Avatar
avatar:
# Replace the default image and set the url here.
url: #/images/avatar.gif
# If true, the avatar will be displayed in circle.
rounded: false
# If true, the avatar will be rotated with the cursor.
rotated: false

# Posts / Categories / Tags in sidebar.
site_state: false

# Social Links
# Usage: `Key: permalink || icon`
# Key is the link label showing to end users.
# Value before `||` delimiter is the target permalink, value after `||` delimiter is the name of Font Awesome icon.
social:
GitHub: https://github.com/chenqy9 || fab fa-github
E-Mail: mailto:chenqy9@foxmail.com || fa fa-envelope
#Weibo: https://weibo.com/yourname || fab fa-weibo
#Google: https://plus.google.com/yourname || fab fa-google
#Twitter: https://twitter.com/yourname || fab fa-twitter
#FB Page: https://www.facebook.com/yourname || fab fa-facebook
#StackOverflow: https://stackoverflow.com/yourname || fab fa-stack-overflow
#YouTube: https://youtube.com/yourname || fab fa-youtube
#Instagram: https://instagram.com/yourname || fab fa-instagram
#Skype: skype:yourname?call|chat || fab fa-skype

social_icons:
enable: true
icons_only: false
transition: false

# Blog rolls
links_settings:
icon: fa fa-globe
title: Links
# Available values: block | inline
layout: block

links:
#Title: https://example.com

# Table of Contents in the Sidebar
# Front-matter variable (nonsupport wrap expand_all).
toc:
enable: true
# Automatically add list number to toc.
number: true
# If true, all words will placed on next lines if header width longer then sidebar width.
wrap: false
# If true, all level of TOC in a post will be displayed, rather than the activated part of it.
expand_all: false
# Maximum heading depth of generated toc.
max_depth: 6


# ---------------------------------------------------------------
# Footer Settings
# See: https://theme-next.js.org/docs/theme-settings/footer
# ---------------------------------------------------------------

# Show multilingual switcher in footer.
language_switcher: false

footer:
# Specify the year when the site was setup. If not defined, current year will be used.
#since: 2021

# Icon between year and copyright info.
icon:
# Icon name in Font Awesome. See: https://fontawesome.com/icons
name: fa fa-heart
# If you want to animate the icon, set it to true.
animated: false
# Change the color of icon, using Hex Code.
color: "#ff0000"

# If not defined, `author` from Hexo `_config.yml` will be used.
copyright:

# Powered by Hexo & NexT
powered: false

# Beian ICP and gongan information for Chinese users. See: https://beian.miit.gov.cn, http://www.beian.gov.cn
beian:
enable: false
icp:
# The digit in the num of gongan beian.
gongan_id:
# The full num of gongan beian.
gongan_num:
# The icon for gongan beian. See: http://www.beian.gov.cn/portal/download
gongan_icon_url:


# ---------------------------------------------------------------
# Post Settings
# See: https://theme-next.js.org/docs/theme-settings/posts
# ---------------------------------------------------------------

# Automatically excerpt description in homepage as preamble text.
excerpt_description: true

# Read more button
# If true, the read more button will be displayed in excerpt section.
read_more_btn: true

# Post meta display settings
post_meta:
item_text: true
created_at: true
updated_at:
enable: true
another_day: true
categories: true

# Post wordcount display settings
# Dependencies: https://github.com/next-theme/hexo-word-counter
symbols_count_time:
separated_meta: true
item_text_total: false

# Use icon instead of the symbol # to indicate the tag at the bottom of the post
tag_icon: false

# Donate (Sponsor) settings
# Front-matter variable (nonsupport animation).
reward_settings:
# If true, a donate button will be displayed in every article by default.
enable: false
animation: false
#comment: Buy me a coffee

reward:
#wechatpay: /images/wechatpay.png
#alipay: /images/alipay.png
#paypal: /images/paypal.png
#bitcoin: /images/bitcoin.png

# Subscribe through Telegram Channel, Twitter, etc.
# Usage: `Key: permalink || icon` (Font Awesome)
follow_me:
#Twitter: https://twitter.com/username || fab fa-twitter
#Telegram: https://t.me/channel_name || fab fa-telegram
#WeChat: /images/wechat_channel.jpg || fab fa-weixin
#RSS: /atom.xml || fa fa-rss

# Related popular posts
# Dependencies: https://github.com/sergeyzwezdin/hexo-related-posts
related_posts:
enable: false
title: # Custom header, leave empty to use the default one
display_in_home: false

# Post edit
# Easily browse and edit blog source code online.
post_edit:
enable: false
url: https://github.com/user-name/repo-name/tree/branch-name/subdirectory-name/ # Link for view source
#url: https://github.com/user-name/repo-name/edit/branch-name/subdirectory-name/ # Link for fork & edit

# Show previous post and next post in post footer if exists
# Available values: left | right | false
post_navigation: left


# ---------------------------------------------------------------
# Custom Page Settings
# See: https://theme-next.js.org/docs/theme-settings/custom-pages
# ---------------------------------------------------------------

# TagCloud settings for tags page.
tagcloud:
min: 12 # Minimum font size in px
max: 30 # Maximum font size in px
amount: 200 # Total amount of tags
orderby: name # Order of tags
order: 1 # Sort order

# Google Calendar
# Share your recent schedule to others via calendar page.
calendar:
calendar_id: <required> # Your Google account E-Mail
api_key: <required>
orderBy: startTime
showLocation: false
offsetMax: 72 # Time Range
offsetMin: 4 # Time Range
showDeleted: false
singleEvents: true
maxResults: 250


# ---------------------------------------------------------------
# Misc Theme Settings
# See: https://theme-next.js.org/docs/theme-settings/miscellaneous
# ---------------------------------------------------------------

# Preconnect CDN for fonts and plugins.
# For more information: https://www.w3.org/TR/resource-hints/#preconnect
preconnect: false

# Set the text alignment in posts / pages.
text_align:
# Available values: start | end | left | right | center | justify | justify-all | match-parent
desktop: justify
mobile: justify

# Reduce padding / margin indents on devices with narrow width.
mobile_layout_economy: true

# Browser header panel color.
theme_color:
light: "#222"
dark: "#222"

# Override browsers' default behavior.
body_scrollbar:
# Place the scrollbar over the content.
overlay: false
# Present the scrollbar even if the content is not overflowing.
stable: false

codeblock:
# Code Highlight theme
# All available themes: https://theme-next.js.org/highlight/
theme:
light: default
dark: stackoverflow-dark
prism:
light: prism
dark: prism-dark
# Add copy button on codeblock
copy_button:
enable: false
# Available values: default | flat | mac
style:

back2top:
enable: true
# Back to top in sidebar.
sidebar: false
# Scroll percent label in b2t button.
scrollpercent: false

# Reading progress bar
reading_progress:
enable: true
# Available values: left | right
start_at: left
# Available values: top | bottom
position: top
reversed: false
color: "#37c6c0"
height: 3px

# Bookmark Support
bookmark:
enable: false
# Customize the color of the bookmark.
color: "#222"
# If auto, save the reading progress when closing the page or clicking the bookmark-icon.
# If manual, only save it by clicking the bookmark-icon.
save: auto

# `Follow me on GitHub` banner in the top-right corner.
github_banner:
enable: true
permalink: https://github.com/chenqy9
title: Follow me on GitHub


# ---------------------------------------------------------------
# Font Settings
# ---------------------------------------------------------------
# Find fonts on Google Fonts (https://fonts.google.com)
# All fonts set here will have the following styles:
# light | light italic | normal | normal italic | bold | bold italic
# Be aware that setting too much fonts will cause site running slowly
# ---------------------------------------------------------------
# Web Safe fonts are recommended for `global` (and `title`):
# Arial | Tahoma | Helvetica | Times New Roman | Courier New | Verdana | Georgia | Palatino | Garamond | Comic Sans MS | Trebuchet MS
# ---------------------------------------------------------------

font:
enable: false

# Uri of fonts host, e.g. https://fonts.googleapis.com (Default).
host:

# Font options:
# `external: true` will load this font family from `host` above.
# `family: Times New Roman`. Without any quotes.
# `size: x.x`. Use `em` as unit. Default: 1 (16px)

# Global font settings used for all elements inside <body>.
global:
external: true
family: Lato
size:

# Font settings for site title (.site-title).
title:
external: true
family:
size:

# Font settings for headlines (<h1> to <h6>).
headings:
external: true
family:
size:

# Font settings for posts (.post-body).
posts:
external: true
family:

# Font settings for <code> and code blocks.
codes:
external: true
family:


# ---------------------------------------------------------------
# SEO Settings
# See: https://theme-next.js.org/docs/theme-settings/seo
# ---------------------------------------------------------------

# If true, site-subtitle will be added to index page.
# Remember to set up your site-subtitle in Hexo `_config.yml` (e.g. subtitle: Subtitle)
index_with_subtitle: false

# Automatically add external URL with Base64 encrypt & decrypt.
exturl: false
# If true, an icon will be attached to each external URL
exturl_icon: true

# Google Webmaster tools verification.
# See: https://developers.google.com/search
google_site_verification:

# Bing Webmaster tools verification.
# See: https://www.bing.com/webmasters
bing_site_verification:

# Yandex Webmaster tools verification.
# See: https://webmaster.yandex.ru
yandex_site_verification:

# Baidu Webmaster tools verification.
# See: https://ziyuan.baidu.com/site
baidu_site_verification:


# ---------------------------------------------------------------
# Third Party Plugins & Services Settings
# See: https://theme-next.js.org/docs/third-party-services/
# More plugins: https://github.com/next-theme/awesome-next
# You may need to install the corresponding dependency packages
# ---------------------------------------------------------------

# Math Formulas Render Support
# Warning: Please install / uninstall the relevant renderer according to the documentation.
# See: https://theme-next.js.org/docs/third-party-services/math-equations
# Server-side plugin: https://github.com/next-theme/hexo-filter-mathjax
math:
# Default (false) will load mathjax / katex script on demand.
# That is it only render those page which has `mathjax: true` in front-matter.
# If you set it to true, it will load mathjax / katex script EVERY PAGE.
every_page: false

mathjax:
enable: false
# Available values: none | ams | all
tags: none

katex:
enable: false
# See: https://github.com/KaTeX/KaTeX/tree/master/contrib/copy-tex
copy_tex: false

# Easily enable fast Ajax navigation on your website.
# For more information: https://github.com/next-theme/pjax
pjax: false

# FancyBox is a tool that offers a nice and elegant way to add zooming functionality for images.
# For more information: https://fancyapps.com/fancybox/
fancybox: false

# A JavaScript library for zooming images like Medium.
# Warning: Do not enable both `fancybox` and `mediumzoom`.
# For more information: https://medium-zoom.francoischalifour.com
mediumzoom: false

# Vanilla JavaScript plugin for lazyloading images.
# For more information: https://apoorv.pro/lozad.js/demo/
lazyload: false

# Pangu Support
# For more information: https://github.com/vinta/pangu.js
# Server-side plugin: https://github.com/next-theme/hexo-pangu
pangu: false

# Quicklink Support
# For more information: https://getquick.link
# Front-matter variable (nonsupport home archive).
quicklink:
enable: false

# Home page and archive page can be controlled through home and archive options below.
# This configuration item is independent of `enable`.
home: false
archive: false

# Default (true) will initialize quicklink after the load event fires.
delay: true
# Custom a time in milliseconds by which the browser must execute prefetching.
timeout: 3000
# Default (true) will attempt to use the fetch() API if supported (rather than link[rel=prefetch]).
priority: true


# ---------------------------------------------------------------
# Comments Settings
# See: https://theme-next.js.org/docs/third-party-services/comments
# ---------------------------------------------------------------

# Multiple Comment System Support
comments:
# Available values: tabs | buttons
style: tabs
# Choose a comment system to be displayed by default.
# Available values: disqus | disqusjs | changyan | livere | gitalk | utterances
active:
# Setting `true` means remembering the comment system selected by the visitor.
storage: true
# Lazyload all comment systems.
lazyload: false
# Modify texts or order for any naves, here are some examples.
nav:
#disqus:
# text: Load Disqus
# order: -1
#gitalk:
# order: -2

# Disqus
# For more information: https://disqus.com
disqus:
enable: false
shortname:
count: true

# DisqusJS
# For more information: https://disqusjs.skk.moe
disqusjs:
enable: false
# API Endpoint of Disqus API (https://disqus.com/api/docs/).
# Leave api empty if you are able to connect to Disqus API. Otherwise you need a reverse proxy for it.
# For example:
# api: https://disqus.skk.moe/disqus/
api:
apikey: # Register new application from https://disqus.com/api/applications/
shortname: # See: https://disqus.com/admin/settings/general/

# Changyan
# For more information: https://changyan.kuaizhan.com
changyan:
enable: false
appid:
appkey:

# LiveRe comments system
# You can get your uid from https://livere.com/insight/myCode (General web site)
livere_uid: # <your_uid>

# Gitalk
# For more information: https://gitalk.github.io
gitalk:
enable: false
github_id: # GitHub repo owner
repo: # Repository name to store issues
client_id: # GitHub Application Client ID
client_secret: # GitHub Application Client Secret
admin_user: # GitHub repo owner and collaborators, only these guys can initialize gitHub issues
distraction_free_mode: true # Facebook-like distraction free mode
# When the official proxy is not available, you can change it to your own proxy address
proxy: https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token # This is official proxy address
# Gitalk's display language depends on user's browser or system environment
# If you want everyone visiting your site to see a uniform language, you can set a force language value
# Available values: en | es-ES | fr | ru | zh-CN | zh-TW
language:

# Utterances
# For more information: https://utteranc.es
utterances:
enable: false
repo: user-name/repo-name # Github repository owner and name
# Available values: pathname | url | title | og:title
issue_term: pathname
# Available values: github-light | github-dark | preferred-color-scheme | github-dark-orange | icy-dark | dark-blue | photon-dark | boxy-light
theme: github-light

# Isso
# For more information: https://posativ.org/isso/
isso: # <data_isso>


# ---------------------------------------------------------------
# Post Widgets & Content Sharing Services
# See: https://theme-next.js.org/docs/third-party-services/post-widgets
# ---------------------------------------------------------------

# Star rating support to each article.
# To get your ID visit https://widgetpack.com
rating:
enable: false
id: # <app_id>
color: "#fc6423"

# AddThis Share. See: https://www.addthis.com
# Go to https://www.addthis.com/dashboard to customize your tools.
add_this_id:


# ---------------------------------------------------------------
# Statistics and Analytics
# See: https://theme-next.js.org/docs/third-party-services/statistics-and-analytics
# ---------------------------------------------------------------

# Google Analytics
# See: https://analytics.google.com
google_analytics:
tracking_id: # <app_id>
# By default, NexT will load an external gtag.js script on your site.
# If you only need the pageview feature, set the following option to true to get a better performance.
only_pageview: false

# Baidu Analytics
# See: https://tongji.baidu.com
baidu_analytics: # <app_id>

# Growingio Analytics
# See: https://www.growingio.com
growingio_analytics: # <project_id>

# Cloudflare Web Analytics
# See: https://www.cloudflare.com/web-analytics/
cloudflare_analytics:

# Microsoft Clarity Analytics
# See: https://clarity.microsoft.com/
clarity_analytics: # <project_id>

# Show number of visitors of each article.
# You can visit https://www.leancloud.cn to get AppID and AppKey.
leancloud_visitors:
enable: false
app_id: # <your app id>
app_key: # <your app key>
# Required for apps from CN region
server_url: # <your server url>
# Dependencies: https://github.com/theme-next/hexo-leancloud-counter-security
# If you don't care about security in leancloud counter and just want to use it directly
# (without hexo-leancloud-counter-security plugin), set `security` to `false`.
security: true

# Another tool to show number of visitors to each article.
# Visit https://console.firebase.google.com/u/0/ to get apiKey and projectId.
# Visit https://firebase.google.com/docs/firestore/ to get more information about firestore.
firestore:
enable: false
collection: articles # Required, a string collection name to access firestore database
apiKey: # Required
projectId: # Required

# Show Views / Visitors of the website / page with busuanzi.
# For more information: http://ibruce.info/2015/04/04/busuanzi/
busuanzi_count:
enable: false
total_visitors: true
total_visitors_icon: fa fa-user
total_views: true
total_views_icon: fa fa-eye
post_views: true
post_views_icon: far fa-eye


# ---------------------------------------------------------------
# Search Services
# See: https://theme-next.js.org/docs/third-party-services/search-services
# ---------------------------------------------------------------

# Algolia Search
# For more information: https://www.algolia.com
algolia_search:
enable: false
hits:
per_page: 10

# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: -1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false


# ---------------------------------------------------------------
# Chat Services
# See: https://theme-next.js.org/docs/third-party-services/chat-services
# ---------------------------------------------------------------

# A button to open designated chat widget in sidebar.
# Firstly, you need to enable and configure the chat service.
chat:
enable: false
icon: fa fa-comment # Icon name in Font Awesome, set false to disable icon.
text: Chat # Button text, change it as you wish.

# Chatra Support
# For more information: https://chatra.com
# Dashboard: https://app.chatra.io/settings/general
chatra:
enable: false
async: true
id: # Visit Dashboard to get your ChatraID
#embed: # Unfinished experimental feature for developers. See: https://chatra.com/help/api/#injectto

# Tidio Support
# For more information: https://www.tidio.com
# Dashboard: https://www.tidio.com/panel/dashboard
tidio:
enable: false
key: # Public Key, get it from dashboard. See: https://www.tidio.com/panel/settings/developer

# Gitter Support
# For more information: https://gitter.im
gitter:
enable: false
room:


# ---------------------------------------------------------------
# Tags Settings
# See: https://theme-next.js.org/docs/tag-plugins/
# ---------------------------------------------------------------

# Note tag (bootstrap callout)
note:
# Note tag style values:
# - simple bootstrap callout old alert style. Default.
# - modern bootstrap callout new (v2-v3) alert style.
# - flat flat callout style with background, like on Mozilla or StackOverflow.
# - disabled disable all CSS styles import of note tag.
style: simple
icons: false
# Offset lighter of background in % for modern and flat styles (modern: -12 | 12; flat: -18 | 6).
# Offset also applied to label tag variables. This option can work with disabled note tag.
light_bg_offset: 0

# Tabs tag
tabs:
# Make the nav bar of tabs with long content stick to the top.
sticky: false
transition:
tabs: false
labels: true

# PDF tag
# NexT will try to load pdf files natively, if failed, pdf.js will be used.
# So, you have to install the dependency of pdf.js if you want to use pdf tag and make it available to all browsers.
# Dependencies: https://github.com/next-theme/theme-next-pdf
pdf:
enable: false
# Default height
height: 500px

# Mermaid tag
mermaid:
enable: false
# Available themes: default | dark | forest | neutral
theme:
light: default
dark: dark


# ---------------------------------------------------------------
# Animation Settings
# ---------------------------------------------------------------

# Use Animate.css to animate everything.
# For more information: https://animate.style
motion:
enable: true
async: false
transition:
# All available transition variants: https://theme-next.js.org/animate/
post_block: fadeIn
post_header: fadeInDown
post_body: fadeInDown
coll_header: fadeInLeft
# Only for Pisces | Gemini.
sidebar: fadeInUp

# Progress bar in the top during page loading.
# For more information: https://github.com/CodeByZach/pace
pace:
enable: false
# All available colors:
# black | blue | green | orange | pink | purple | red | silver | white | yellow
color: blue
# All available themes:
# big-counter | bounce | barber-shop | center-atom | center-circle | center-radar | center-simple
# corner-indicator | fill-left | flat-top | flash | loading-bar | mac-osx | material | minimal
theme: minimal

# Canvas ribbon
# For more information: https://github.com/hustcc/ribbon.js
canvas_ribbon:
enable: false
size: 300 # The width of the ribbon
alpha: 0.6 # The transparency of the ribbon
zIndex: -1 # The display level of the ribbon


# ---------------------------------------------------------------
# CDN Settings
# See: https://theme-next.js.org/docs/advanced-settings/vendors
# ---------------------------------------------------------------

vendors:
# The CDN provider of NexT internal scripts.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Warning: If you are using the latest master branch of NexT, please set `internal: local`
internal: local
# The default CDN provider of third-party plugins.
# Available values: local | jsdelivr | unpkg | cdnjs | custom
# Dependencies for `plugins: local`: https://github.com/next-theme/plugins
plugins: cdnjs
# Custom CDN URL
# For example:
# custom_cdn_url: https://cdn.jsdelivr.net/npm/${npm_name}@${version}/${minified}
# custom_cdn_url: https://cdnjs.cloudflare.com/ajax/libs/${cdnjs_name}/${version}/${cdnjs_file}
custom_cdn_url:

# Assets
# Accelerate delivery of static files using a CDN
# The js option is only valid when vendors.internal is local.
css: css
js: js
images: images

撰写第一篇博客

配置好我们的博客之后,就可以开始基于markdown写博客文章啦,具体操作如下:

1
2
# 通过hexo命令创建博文
hexo new post hello-world

其创建的文件如下:

1
2
3
4
5
6
---
title: hello-world
date: 2022-08-26 18:16:52
tags:
---

头部是博文的信息,可以添加分类和标签,如:

1
2
3
4
5
6
7
8
9
---
title: hello-world
date: 2022-08-26 18:16:52
categories
- 测试
tags:
- helloworld
---
这里是正文

发布博客到Github Pages

完成以上配置,写好我们的博文,接下来就是发布托管到GitHub Pages啦~

创建仓库

  1. 创建一个仓库
    前往GitHUb创建一个新的仓库,仓库名称为username.github.io,其中 username是你的 GitHub 用户名或者组织名称。

  2. 克隆仓库
    把步骤一创建的仓库克隆到本地。

    1
    git clone https://github.com/username/username.github.io
  3. 创建第一个页面
    进入项目目录,新建一个 index.html 的文件。

    1
    2
    cd username.github.io
    echo "Hello World" > index.html
  4. 推送到远程仓库
    增加、提交和推送你的更改

    1
    2
    3
    git add --all
    git commit -m "初始提交"
    git push -u origin master
  5. 你已经成功完成
    访问https://username.github.io_查看效果

部署博客

  1. 首先从上面的仓库中创建一个新的分支,用来写博客:
1
2
# username.github.io根目录
git checkout -b blog
  1. 将我们上面创建的博客项目复制到仓库
1
cp -r hexo-demo/** username.github.io
  1. 修改博客配置文件中的部署配置
1
2
3
4
5
# _config.yml配置文件
deploy:
type: git
repo: https://github.com/username/username.github.io.git
branch: master
  1. 提交变更并发布
1
2
3
4
5
6
7
8
9
10
# 提交blog分支的变更
git add .
git commit -m "更新博客"
git push --set-upstream origin blog

# 安装依赖
npm install hexo-deployer-git

# 执行部署
npm run deploy

完成上面的操作之后,我们就可以在https://username.github.io看到我们的博客啦~

增加本地搜索功能

NexT主题支持搜索配置,一种是基于第三方服务Algolia的搜索,一种是不需要依赖第三方服务的本地搜索。这里我选择了更简单和通用的本地搜索,配置如下:

  1. 安装依赖,该依赖并不是直接搜索的依赖,而是帮你生成搜索索引文件:
1
npm install hexo-generator-searchdb
  1. 修改博客配置文件_config.yml的搜索配置项,上面安装的插件基于该配置生成索引文件:
1
2
3
4
5
6
search:
path: search.xml
field: post
# 这里选择false,只基于标题进行搜索
content: false
format: html
  1. 修改主题配置文件_config.next.yml的搜索配置项,这里配置的是搜索UI组件:
1
2
3
4
5
6
7
8
9
10
11
12
13
# Local Search
# Dependencies: https://github.com/next-theme/hexo-generator-searchdb
local_search:
enable: true
# If auto, trigger search by changing input.
# If manual, trigger search by pressing enter key or search button.
trigger: auto
# Show top n results per article, show all results by setting to -1
top_n_per_article: -1
# Unescape html strings to the readable one.
unescape: false
# Preload the search data when the page loads.
preload: false

参考项目

hexo-demo

一、介绍

什么是响应式网页设计?

  • 响应式网页设计使您的网页在所有设备上都很好看。
  • 响应式网页设计仅使用 HTML 和 CSS。
  • 响应式网页设计不是程序或 JavaScript。

为所有用户设计最佳体验
可以使用许多不同的设备查看网页:台式机,平板电脑和手机。无论设备如何,您的网页都应该看起来不错,并且易于使用。
网页不应该遗漏信息以适应较小的设备,而是调整其内容以适应任何设备:
桌面
桌面
平板
平板
手机
手机

当您使用 CSS 和 HTML 调整大小,隐藏,缩小,放大或移动内容以使其在任何屏幕上看起来都很好时,它被称为响应式网页设计。

二、视窗

什么是视窗?
视窗是用户在网页上的可见区域。 视窗因设备而异,并且在手机上比在计算机屏幕上小。 在平板电脑和移动电话之前,网页仅针对计算机屏幕设计,并且网页通常具有静态设计和固定大小。 然后,当我们开始使用平板电脑和手机上网时,固定大小的网页太大而无法适应视窗。为了解决这个问题,这些设备上的浏览器按比例缩小整个网页以适应屏幕。 这不完美!!只是快速修复。

设置视窗
HTML5 引入了一种方法,让网页设计师通过<meta>标签控制视窗。 您应该在所有网页中包含以下<meta>viewport 元素:

1
2
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta />

viewport 元素为浏览器提供有关如何控制页面尺寸和缩放的说明。 width = device-width 部分将页面宽度设置为遵循设备的屏幕宽度(具体取决于设备)。 initial-scale = 1.0 部分设置浏览器首次加载页面时的初始缩放级别。 以下是没有视窗元标记的网页示例,以及具有视窗元标记的同一网页:
没有视窗元标记
没有视窗元标记
有视窗元标记
有视窗元标记

视窗大小内容

用户用于在桌面和移动设备上垂直滚动网站 - 但不是水平滚动! 因此,如果用户被迫水平滚动或缩小,以查看整个网页,则会导致糟糕的用户体验。 一些额外的规则要遵循:

  • 不要使用大的固定宽度元素 - 例如,如果图像的宽度比视窗宽,则可能导致视口水平滚动。请记住调整此内容以适合视窗的宽度。
  • 不要让内容依赖于特定的视口宽度来渲染 - 由于 CSS 像素中的屏幕尺寸和宽度在不同设备之间变化很大,因此内容不应依赖于特定的视口宽度来渲染。
  • 使用 CSS 媒体查询为小屏幕和大屏幕应用不同的样式 - 为页面元素设置大的绝对 CSS 宽度将导致元素对于较小设备上的视口而言太宽。相反,请考虑使用相对宽度值,例如宽度:100%。另外,请注意使用大的绝对定位值。它可能导致元素落在小型设备上的视口之外。

三、网格视图

什么是网格视图?

许多网页都基于网格视图,这意味着页面分为以下几列:
网格视图
在设计网页时,使用网格视图非常有用。它可以更轻松地在页面上放置元素。
网格视图
响应式网格视图通常有 12 列,总宽度为 100%,并在调整浏览器窗口大小时缩小和展开。

构建响应式网格视图
让我们开始构建响应式网格视图。 首先确保所有 HTML 元素都将 box-sizing 属性设置为 border-box。这可确保填充和边框包含在元素的总宽度和高度中。
在 CSS 中添加以下代码:

1
2
3
* {
box-sizing: border-box;
}

以下示例显示了一个简单的响应式网页,其中包含两列:

1
2
3
4
5
6
7
8
.menu {
width: 25%;
float: left;
}
.main {
width: 75%;
float: left;
}

如果网页只包含两列,则上面的示例很好。 但是,我们希望使用具有 12 列的响应式网格视图,以便更好地控制网页。 首先,我们必须计算一列的百分比:100%/ 12 列= 8.33%。

然后我们为 12 列中的每一列创建一个类,class =“col-”和一个定义该段应该跨越多少列的数字:

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
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}

所有这些列应该浮动到左侧,并且填充为 15px:

1
2
3
4
5
[class*="col-"] {
float: left;
padding: 15px;
border: 1px solid red;
}

每行应包含在<div>中。行内的列数应始终加起来为 12:

1
2
3
4
<div class="row">
<div class="col-3">...</div>
<div class="col-9">...</div>
</div>

行内的列全部浮动到左侧,因此从页面流中取出,其他元素将被放置,就好像列不存在一样。为了防止这种情况,我们将添加一个清除流程的样式:

1
2
3
4
5
.row::after {
content: "";
clear: both;
display: block;
}

我们还想添加一些样式和颜色以使其看起来更好:

1
2
3
4
5
6
html { font-family: "Lucida Sans", sans-serif; } .header { background-color:
#9933cc; color: #ffffff; padding: 15px; } .menu ul { list-style-type: none;
margin: 0; padding: 0; } .menu li { padding: 8px; margin-bottom: 7px;
background-color :#33b5e5; color: #ffffff; box-shadow: 0 1px 3px
rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); } .menu li:hover {
background-color: #0099cc; }

请注意,当您将浏览器窗口调整为非常小的宽度时,示例中的网页看起来不太好。在下一章中,您将学习如何解决这个问题。

** 四、媒体查询

什么是媒体查询?

媒体查询是 CSS3 中引入的 CSS 技术。 仅当某个条件为真时,它才使用@media 规则包含一个 CSS 属性块。
如果浏览器窗口小于 500px,背景颜色将变为浅蓝色:

1
2
3
4
5
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}

添加断点
在本教程的前面,我们创建了一个包含行和列的网页,它具有响应性,但在小屏幕上看起来不太好。
媒体查询可以提供帮助。我们可以添加一个断点,其中设计的某些部分在断点的每一侧都会表现不同。
桌面
桌面
手机
手机
使用媒体查询在 768px 处添加断点:
当屏幕(浏览器窗口)小于 768px 时,每列的宽度应为 100%:

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
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}

@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}

始终为移动优先设计
移动优先意味着在为桌面设备或任何其他设备进行设计之前设计移动设备(这将使页面在较小的设备上显示得更快)。 这意味着我们必须在 CSS 中进行一些更改。 当宽度小于 768px 时,我们应该在宽度大于 768px 时更改设计,而不是更改样式。这将使我们的设计移动优先:

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
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}

另一个断点

您可以根据需要添加任意数量的断点。 我们还将在平板电脑和手机之间插入一个断点。
桌面
桌面
平板
平板
手机
手机
我们通过添加一个媒体查询(600px)和一组大于 600px(但小于 768px)的设备的新类来完成此操作:
请注意,这两组类几乎相同,唯一的区别是名称(col-col-m-):

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
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {
width: 8.33%;
}
.col-m-2 {
width: 16.66%;
}
.col-m-3 {
width: 25%;
}
.col-m-4 {
width: 33.33%;
}
.col-m-5 {
width: 41.66%;
}
.col-m-6 {
width: 50%;
}
.col-m-7 {
width: 58.33%;
}
.col-m-8 {
width: 66.66%;
}
.col-m-9 {
width: 75%;
}
.col-m-10 {
width: 83.33%;
}
.col-m-11 {
width: 91.66%;
}
.col-m-12 {
width: 100%;
}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {
width: 8.33%;
}
.col-2 {
width: 16.66%;
}
.col-3 {
width: 25%;
}
.col-4 {
width: 33.33%;
}
.col-5 {
width: 41.66%;
}
.col-6 {
width: 50%;
}
.col-7 {
width: 58.33%;
}
.col-8 {
width: 66.66%;
}
.col-9 {
width: 75%;
}
.col-10 {
width: 83.33%;
}
.col-11 {
width: 91.66%;
}
.col-12 {
width: 100%;
}
}

我们有两组完全相同的类似乎很奇怪,但它给了我们 HTML 的机会,决定每个断点处的列会发生什么:
对于桌面: 第一部分和第三部分将分别跨越 3 列。中间部分将跨越 6 列。 对于平板电脑 第一部分将跨越 3 列,第二部分将跨越 9 列,第三部分将显示在前两部分下方,它将跨越 12 列:

1
2
3
4
5
<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>

方向:纵向/横向

媒体查询还可用于根据浏览器的方向更改页面的布局。 您可以拥有一组仅在浏览器窗口宽度超过其高度时应用的 CSS 属性,即所谓的“横向”方向:
如果方向处于横向模式,则网页将具有浅蓝色背景:

1
2
3
4
5
@media only screen and (orientation: landscape) {
body {
background-color: lightblue;
}
}

五、图片

不同设备的不同图像
大型图像在大型计算机屏幕上可以是完美的,但在小型设备上却无用。为什么在必须缩小尺寸时加载大图像?要减少负载或出于任何其他原因,您可以使用媒体查询在不同设备上显示不同的图像。 这是一个大图像和一个较小的图像,将显示在不同的设备上:
花
花

1
2
3
4
5
6
7
8
9
10
11
/* For width smaller than 400px: */
body {
background-image: url("img_smallflower.jpg");
}

/* For width 400px and larger: */
@media only screen and (min-width: 400px) {
body {
background-image: url("img_flowers.jpg");
}
}

您可以使用媒体查询 min-device-width 而不是 min-width 来检查设备宽度,而不是浏览器宽度。然后,在调整浏览器窗口大小时图像不会更改:

1
2
3
4
/* For devices smaller than 400px: */ body { background-image:
url('img_smallflower.jpg'); } /* For devices 400px and larger: */ @media only
screen and (min-device-width: 400px) { body { background-image:
url('img_flowers.jpg'); } }

HTML5<picture>元素

HTML5 引入了<picture>元素,可以让您定义多个图像。
浏览器支持
浏览器支持
<picture>元素的工作方式类似于<video><audio>元素。您设置了不同的源,第一个符合首选项的源是正在使用的源:

1
2
3
4
5
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 400px)" />
<source srcset="img_flowers.jpg" />
<img src="img_flowers.jpg" alt="Flowers" />
</picture>

srcset属性是必需的,它定义了图像的来源。 media属性是可选的,并接受您在 CSS @media规则中找到的媒体查询。 您还应该为不支持<picture>元素的浏览器定义<img>元素。

预处理

CSS 本身可以很有趣,但样式表变得更大,更复杂,更难维护。这是预处理器可以提供帮助的地方。 Sass 允许你使用 CSS 中不存在的功能,比如变量,嵌套,混合,继承和其他漂亮的好东西,这些都让 CSS 再次变得有趣。

一旦你开始修改 Sass,它将采用你预处理的 Sass 文件并将其保存为你可以在你的网站中使用的普通 CSS 文件。

实现这一目标的最直接方法是在您的终端。安装 Sass 后,您可以使用 sass 命令将 Sass 编译为 CSS。您需要告诉 Sass 要构建哪个文件,以及将 CSS 输出到何处。例如,从终端运行 sass input.scss output.css 将获取单个 Sass 文件 input.scss,并将该文件编译为 output.css。

您还可以使用–watch 标志查看单个文件或目录。 watch 标志告诉 Sass 观察源文件的更改,并在每次保存 Sass 时重新编译 CSS。如果您想观看(而不是手动构建)input.scss 文件,您只需将 watch 标志添加到命令中,如下所示:

1
sass --watch input.scss output.css

您可以使用文件夹路径作为输入和输出来查看和输出到目录,并使用冒号分隔它们。在这个例子中:

1
sass --watch app/sass:public/stylesheets

Sass 会在 app / sass 文件夹中查看所有文件以进行更改,并将 CSS 编译到 public / stylesheets 文件夹。


变量

将变量视为存储要在整个样式表中重用的信息的一种方法。您可以存储颜色,字体堆栈或您认为要重用的任何 CSS 值等内容。 Sass 使用$符号来创建变量。这是一个例子:
scss

1
2
3
4
5
6
7
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
font: 100% $font-stack;
color: $primary-color;
}

css

1
2
3
4
body {
font: 100% Helvetica, sans-serif;
color: #333;
}

处理 Sass 时,它采用我们为$ font-stack 和$ primary-color 定义的变量,并输出普通的 CSS,并将我们的变量值放在 CSS 中。在使用品牌颜色并在整个网站中保持一致时,这可能非常强大。


嵌套

在编写 HTML 时,您可能已经注意到它具有清晰的嵌套和可视层次结构。另一方面,CSS 没有。 Sass 将允许您以符合 HTML 相同视觉层次结构的方式嵌套 CSS 选择器。请注意,过度嵌套的规则将导致过度合格的 CSS,这些 CSS 可能难以维护,通常被认为是不好的做法。 考虑到这一点,这里是网站导航的一些典型样式的示例:
scss

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
nav {
ul {
margin: 0;
padding: 0;
list-style: none;
}

li {
display: inline-block;
}

a {
display: block;
padding: 6px 12px;
text-decoration: none;
}
}

css

1
2
3
4
5
6
7
8
9
10
11
12
13
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
}
nav a {
display: block;
padding: 6px 12px;
text-decoration: none;
}

您会注意到 ul,li 和选择器嵌套在导航选择器中。这是组织 CSS 并使其更具可读性的好方法。


划分文件

您可以创建包含很少 CSS 片段的部分 Sass 文件,您可以将这些片段包含在其他 Sass 文件中。这是模块化 CSS 并帮助维护事物更容易的好方法。 partial 只是一个以前导下划线命名的 Sass 文件。您可以将其命名为_partial.scss。下划线让 Sass 知道该文件只是一个部分文件,不应该生成 CSS 文件。 Sass 文件与@import指令一起使用。


导入

CSS 有一个导入选项,可以将 CSS 拆分为更小,更易维护的部分。唯一的缺点是每次在 CSS 中使用@import时都会创建另一个 HTTP 请求。 Sass 建立在当前 CSS @import之上,但不需要 HTTP 请求,Sass 将获取您要导入的文件并将其与您导入的文件合并,以便您可以将单个 CSS 文件提供给 Web 浏览器。

假设您有几个 Sass 文件,_reset.scss 和 base.scss。我们想将_reset.scss 导入 base.scss。
scss

1
2
3
4
5
6
7
8
// _reset.scss
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
1
2
3
4
5
6
// base.scss
@import "reset";
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

css

1
2
3
4
5
6
7
8
9
10
11
html,
body,
ul,
ol {
margin: 0;
padding: 0;
}
body {
font: 100% Helvetica, sans-serif;
background-color: #efefef;
}

注意我们正在使用@import'reset';在 base.scss 文件中。导入文件时,不需要包含文件扩展名.scss。 Sass 很聪明,会为你解决问题。


混入

CSS 中的一些东西写起来有点乏味,特别是 CSS3 和存在的许多供应商前缀。 mixin 允许您创建要在整个站点中重用的 CSS 声明组。您甚至可以传入值以使您的 mixin 更灵活。 mixin 的良好用途是供应商前缀。这是变换的一个例子。
scss

1
2
3
4
5
6
7
8
@mixin transform($property) {
-webkit-transform: $property;
-ms-transform: $property;
transform: $property;
}
.box {
@include transform(rotate(30deg));
}

css

1
2
3
4
5
.box {
-webkit-transform: rotate(30deg);
-ms-transform: rotate(30deg);
transform: rotate(30deg);
}

要创建 mixin,请使用@mixin指令并为其命名。我们已经命名了我们的 mixin 变换。我们还在括号内使用变量$property,这样我们就可以传递任何我们想要的变换。在创建 mixin 之后,您可以将其用作 CSS 声明,以@include开头,后跟 mixin 的名称。


扩展/继承

这是 Sass 最有用的功能之一。使用@extend可以将一组 CSS 属性从一个选择器共享到另一个选择器。它有助于保持你的 Sass 非常干燥。在我们的示例中,我们将使用另一个与扩展,占位符类同时进行的功能,为错误,警告和成功创建一系列简单的消息。占位符类是一种特殊类型的类,只在扩展时才会打印,并且可以帮助保持编译后的 CSS 整洁干净。
scss

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
/* This CSS will print because %message-shared is extended. */
%message-shared {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

// This CSS won't print because %equal-heights is never extended.
%equal-heights {
display: flex;
flex-wrap: wrap;
}

.message {
@extend %message-shared;
}

.success {
@extend %message-shared;
border-color: green;
}

.error {
@extend %message-shared;
border-color: red;
}

.warning {
@extend %message-shared;
border-color: yellow;
}

css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* This CSS will print because %message-shared is extended. */
.message,
.success,
.error,
.warning {
border: 1px solid #ccc;
padding: 10px;
color: #333;
}

.success {
border-color: green;
}

.error {
border-color: red;
}

.warning {
border-color: yellow;
}

上面的代码所做的是告诉.message.success.error.warning,就像%message-shared一样。这意味着%message-shared显示的任何地方,.message.success.error.warning也会出现。神奇的事情发生在生成的 CSS 中,其中每个类都将获得与%message-shared 相同的 CSS 属性。这有助于您避免在 HTML 元素上编写多个类名。

除了 Sass 中的占位符类之外,您还可以扩展大多数简单的 CSS 选择器,但使用占位符是确保您不扩展嵌套在样式中其他位置的类的最简单方法,这可能会导致 CSS 中出现意外的选择器。

请注意,不会生成%equal-heights的 CSS,因为永远不会扩展 %equal-heights


运算符

在 CSS 中进行数学运算非常有帮助。 Sass 有一些标准的数学运算符,如+-*/。在我们的例子中,我们将做一些简单的数学运算来计算旁边和文章的宽度。
scss

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
width: 100%;
}

article[role="main"] {
float: left;
width: 600px / 960px * 100%;
}

aside[role="complementary"] {
float: right;
width: 300px / 960px * 100%;
}

css

1
2
3
4
5
6
7
8
9
10
11
12
13
.container {
width: 100%;
}

article[role="main"] {
float: left;
width: 62.5%;
}

aside[role="complementary"] {
float: right;
width: 31.25%;
}

我们基于 960px 创建了一个非常简单的流体网格。 Sass 中的操作让我们做一些事情,比如获取像素值并将它们转换为百分比而不会有太多麻烦。

在 Red Hat Enterprise 或 CentOS Linux 上安装 MongoDB 社区版

本教程使用.rpm 软件包在 Red Hat Enterprise Linux 或 CentOS Linux 版本 6 和 7 上安装 MongoDB Community Edition。

使用.rpm 包(推荐)

  1. 配置包管理系统(yum)

创建一个/etc/yum.repos.d/mongodb-org-4.0.repo 文件,以便您可以使用 yum 直接安装 MongoDB:

1
2
3
4
5
6
[mongodb-org-4.0]
name=MongoDB Repository
baseurl=https://repo.mongodb.org/yum/redhat/$releasever/mongodb-org/4.0/x86_64/
gpgcheck=1
enabled=1
gpgkey=https://www.mongodb.org/static/pgp/server-4.0.asc
  1. 安装 MongoDB 包

要安装最新的稳定版 MongoDB,请发出以下命令:

1
sudo yum install -y mongodb-org

运行 MongoDB 社区版

  1. 启动 MongoDB

您可以通过发出以下命令来启动 mongod 进程:

1
sudo service mongod start
  1. 验证 MongoDB 是否已成功启动

您可以通过检查/var/log/mongodb/mongod.log 中日志文件的内容来检查 mongod 进程是否已成功启动以获取行读取

1
[initandlisten] waiting for connections on port <port>

其中是/etc/mongod.conf 中配置的端口,默认为 27017。

您可以选择通过发出以下命令来确保 MongoDB 在系统重新启动后启动:

1
sudo chkconfig mongod on
  1. 停止 MongoDB

根据需要,您可以通过发出以下命令来停止 mongod 进程:

1
sudo service mongod stop
  1. 重启 MongoDB

您可以通过发出以下命令重新启动 mongod 进程:

1
sudo service mongod restart

您可以通过观察/var/log/mongodb/mongod.log 文件中的输出来跟踪错误或重要消息的进程状态。

  1. 开始使用 MongoDB

在与 mongod 相同的主机上启动 mongo shell。您可以在没有任何命令行选项的情况下运行 mongo shell,以使用默认端口 27017 连接到 localhost 上运行的 mongod:

1
mongo

本文介绍在 centos 操作系统下通过 yum 安装 jenkins,并通过下载官方 war 包的方式升级。

安装

  1. 安装 JDK

    1
    yum install -y java
  2. 安装 Jenkins

    1
    2
    3
    4
    5
    6
    7
    8
    9
    # 如果没安装wget,可先安装或用curl
    yum install -y wget

    # 添加Jenkins库到yum库
    wget -O /etc/yum.repos.d/jenkins.repo http://pkg.jenkins-ci.org/redhat/jenkins.repo

    rpm --import https://jenkins-ci.org/redhat/jenkins-ci.org.key

    yum install -y jenkins
  3. 启动 Jenkins 服务

    1
    2
    3
    4
    5
    6
    7
    8
    # 启动Jenkins
    service jenkins start

    # 停止Jenkins
    service jenkins stop

    # 重启Jenkins
    service jenkins restart
  4. 注意事项

    Jenkins 默认端口是 8080,确保此端口不被占用或者修改 Jenkins 的默认端口,打开防火墙对该端口的拦截。

    1
    2
    3
    4
    5
    6
    7
    8
    # 配置Jenkis的端口, 修改JENKINS_PORT="8080"为目标端口
    vi /etc/sysconfig/jenkins

    # 开启防火墙端口
    firewall-cmd --zone=public --add-port=8080/tcp --permanent

    # 重启Jenkins服务
    service jenkins restart

升级

  1. 下载官升升级 war 包,scp 到目标服务器

    1
    cp ~/Downloads/jenkins.war user@ip:/usr/lib/jenkins/
  2. 查看 Jenkins 服务启动的安装包位置

    1
    2
    3
    4
    5
    6
    # 可以看到包的位置在/usr/lib/jenkins/jenkins.war
    ps -ef | grep jenkins

    # 用升级war包替换旧的安装包,重启Jenkins服务
    service jenkins stop
    service jenkins start

本文介绍如何在 Linux 64 位系统上通过二进制压缩文件离线安装安装 node。

1、 到官网下载安装包,并 scp 上传到目标服务器。

1
scp -r ~/Downloads/node-v10.15.0-linux-x64.tar.xz user@host:path

2、将二进制存档解压缩到您要安装 Node 的任何目录,我使用/usr/ local/lib/nodejs

1
2
3
4
5
VERSION=v10.15.0
DISTRO=linux-x64
sudo mkdir /usr/local/lib/nodejs
sudo tar -xJvf node-$VERSION-$DISTRO.tar.xz -C /usr/local/lib/nodejs
sudo mv /usr/local/lib/nodejs/node-$VERSION-$DISTRO /usr/local/lib/nodejs/node-$VERSION

3、设置环境变量 vim /etc/profile,将下面  代码添加到文件最后

1
2
3
# Nodejs
export NODEJS_HOME=/usr/local/lib/nodejs/node-$VERSION/bin
export PATH=$NODEJS_HOME:$PATH

4、刷新文件配置

1
. /etc/profile

5、测试安装

1
2
3
node -v
npm version
npx -v

正常输出是:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
node -v
v10.15.0
npm version
{ npm: '6.4.1',
ares: '1.15.0',
cldr: '33.1',
http_parser: '2.8.0',
icu: '62.1',
modules: '64',
napi: '3',
nghttp2: '1.34.0',
node: '10.15.0',
openssl: '1.1.0j',
tz: '2018e',
unicode: '11.0',
uv: '1.23.2',
v8: '6.8.275.32-node.45',
zlib: '1.2.11' }

创建 sudo 链接:

1
2
3
4
5
sudo ln -s /usr/local/lib/nodejs/node-$VERSION/bin/node /usr/bin/node

sudo ln -s /usr/local/lib/nodejs/node-$VERSION/bin/npm /usr/bin/npm

sudo ln -s /usr/local/lib/nodejs/node-$VERSION/bin/npx /usr/bin/npx

yarn 是 Facebook 团队开发的快速、可靠、安全的依赖管理工具。相比于 npm 包管理工具,yarn 的离线模式更适用于在没有网络链接的情况下进行项目依赖安装及构建。

优势

  • 极其快速
    Yarn 会缓存它下载的每个包,所以无需重复下载。它还能并行化操作以最大化资源利用率,安装速度之快前所未有。

  • 特别安全
    Yarn 会在每个安装包被执行前校验其完整性。

  • 超级可靠
    Yarn 使用格式详尽而又简洁的 lockfile 文件 和确定性算法来安装依赖,能够保证在一个系统上的运行的安装过程也会以同样的方式运行在其他系统上。

特点

  • 离线模式
    如果你之前安装过某个包,你就可以在没有网络连接的情况下再次安装它。

  • 确定性
    不管是什么顺序,在不同的机器上的依赖会以同一方式安装。

  • 网络性能
    Yarn 可以高效地队列化请求并且避免请求瀑布化,使网络利用率最大化。

  • 相同的软件包
    从 npm 安装软件包并使用相同的包管理流程。

  • 网络适应
    单个请求失败不会导致安装失败,请求失败时会重试。

  • 扁平模式
    解析不匹配的依赖版本为一个单一的版本来避免导致多个版本。

安装 yarn

  1. 官网下载源码包并上传到目标服务器

    1
    scp -r ~/Downloads/yarn-v1.12.3.tar.gz user@host:path
  2. 解压程序包到目标目录

    1
    tar zvxf yarn-v1.12.3.tar.gz -C /opt
  3. 设置环境变量 vim /etc/profile,将下面  代码添加到文件最后

    1
    2
    export NODEJS_HOME=/opt/yarn-v1.12.3/bin
    export PATH=$NODEJS_HOME:$PATH
  4. 刷新文件配置

    1
    . /etc/profile
  5. 运行命令来测试 Yarn 是否安装:

    1
    yarn --version

配置离线镜像

首先我们需要设置一个目录作为我们的“离线镜像”存储,我们可以使用 yarn config 命令:

1
yarn config set yarn-offline-mirror ./npm-packages-offline-cache

./npm-packages-offline-cache 是 相对于主文件夹的示例位置,其中所有 source.tar.gz 文件将从注册表下载。

脱机镜像不会删除 tar 包。为了使缓存文件夹保持最新,您需要将以下内容添加到配置文件中:

1
yarn config set yarn-offline-mirror-pruning true

如何测试以确保它处于脱机状态?

  • 使用“yarn cache clean”清除全局缓存
  • 关掉 wifi
  • 运行“yarn install -offline”。离线标志将确保 yarn 不会到达网络

简而言之,要为您的项目启用“离线镜像”,您需要:

  • 将“yarn-offline-mirror”配置添加到.yarnrc 文件中
  • 使用“yarn install”命令生成一个新的 yarn.lock

CAS 安装是一个基本的面向源的过程,我们建议使用WAR overlay项目来组织自定义,例如组件配置和 UI 设计。 WAR 覆盖构建的输出是一个 cas.war 文件,可以部署在像Tomcat这样的 Java servlet 容器上。

WAR overlay 项目提供参考和研究。

Gradle

Maven

CAS 使用 Spring Webflow 以模块化和可配置的方式驱动登录过程; login-webflow.xml 文件包含流中状态和转换的简单描述。自定义此文件可能是 Spring XML 配置文件中除组件配置之外最常见的配置问题。有关各种 CAS 流程的详细说明以及常见配置点的讨论,请参见“Spring Webflow 自定义指南”。

Spring 配置

CAS 服务器在很大程度上依赖于 Spring 框架。 spring-configuration 目录下有精确和特定的 XML 配置文件,用于控制 CAS 的各种属性以及 cas-servlet.xml 和 deployerConfigContext.xml,后者主要是 CAS 采用者希望将其包含在环境覆盖中 - 特定的 CAS 设置。

如果需要通过 Maven 覆盖过程,可以覆盖 XML 配置文件中的 Spring bean 以更改行为。有两种方法:

  1. XML 文件可以从 CAS 版本的源获得,并在 Maven 重叠版本中以相同的名称放置在相同的确切路径上。如果配置正确,则构建将使用本地提供的 XML 文件而不是默认值。

  2. CAS 服务器能够加载 XML 配置文件的模式以覆盖默认提供的内容。打算否决 CAS 默认行为的这些配置文件可以放在/ WEB-INF /中,并且必须使用以下模式命名:cas-servlet - * .xml。放在此文件中的 Bean 将覆盖其他文件。