hexo-theme-shokax 0.4.4 → 0.4.6-beta1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (183) hide show
  1. package/CODE_OF_CONDUCT.md +128 -128
  2. package/CONTRIBUTING.md +58 -58
  3. package/LICENSE +660 -660
  4. package/LICENSE-shoka +21 -21
  5. package/README.md +99 -98
  6. package/README_en.MD +91 -90
  7. package/UsageRestrictions.md +25 -25
  8. package/_config.yml +381 -388
  9. package/_images.yml +9 -9
  10. package/eslint.config.mjs +55 -55
  11. package/index.html +231 -0
  12. package/languages/README.md +19 -19
  13. package/languages/default.yml +1 -1
  14. package/languages/en.yml +153 -153
  15. package/languages/ja.yml +153 -153
  16. package/languages/zh-CN.yml +153 -153
  17. package/languages/zh-HK.yml +153 -153
  18. package/languages/zh-TW.yml +153 -153
  19. package/layout/_alternate/atom.ejs +30 -30
  20. package/layout/_alternate/json.ejs +16 -16
  21. package/layout/_alternate/rss.ejs +34 -34
  22. package/layout/_mixin/breadcrumb.pug +33 -33
  23. package/layout/_mixin/card.pug +38 -38
  24. package/layout/_mixin/comment.pug +6 -6
  25. package/layout/_mixin/postmeta.pug +29 -29
  26. package/layout/_mixin/segment.pug +35 -35
  27. package/layout/_mixin/sidebar.pug +40 -40
  28. package/layout/_mixin/widgets.pug +28 -28
  29. package/layout/_partials/footer.pug +43 -43
  30. package/layout/_partials/head/head.pug +55 -56
  31. package/layout/_partials/head/head_com.pug +24 -24
  32. package/layout/_partials/head/pwa.pug +18 -18
  33. package/layout/_partials/header.pug +18 -18
  34. package/layout/_partials/layout.pug +140 -140
  35. package/layout/_partials/loading.pug +13 -13
  36. package/layout/_partials/pagination.pug +4 -4
  37. package/layout/_partials/post/copyright.pug +20 -20
  38. package/layout/_partials/post/footer.pug +17 -17
  39. package/layout/_partials/post/nav.pug +13 -13
  40. package/layout/_partials/post/post.pug +41 -41
  41. package/layout/_partials/post/reward.pug +18 -18
  42. package/layout/_partials/sidebar/menu.pug +37 -37
  43. package/layout/_partials/sidebar/overview.pug +42 -42
  44. package/layout/_partials/third-party/baidu-analytics.pug +11 -11
  45. package/layout/_partials/third-party/clarity.pug +8 -8
  46. package/layout/_partials/third-party/google-analytics.pug +9 -9
  47. package/layout/archive.pug +118 -118
  48. package/layout/category.pug +59 -59
  49. package/layout/index.pug +33 -33
  50. package/layout/page.pug +55 -55
  51. package/layout/post.pug +36 -36
  52. package/layout/tag.pug +43 -43
  53. package/meta.json +6431 -0
  54. package/package.json +72 -70
  55. package/scripts/helpers/engine.js +10 -0
  56. package/scripts/plugin/check.js +2 -2
  57. package/scripts/tags/links.js +4 -4
  58. package/source/assets/algolia_logo.svg +9 -9
  59. package/source/assets/logo.svg +16 -16
  60. package/source/css/_colors.styl +207 -207
  61. package/source/css/_common/components/components.styl +6 -6
  62. package/source/css/_common/components/highlight/highlight.styl +357 -357
  63. package/source/css/_common/components/highlight/operation.styl +21 -21
  64. package/source/css/_common/components/pages/collapse.styl +119 -119
  65. package/source/css/_common/components/pages/home.styl +391 -391
  66. package/source/css/_common/components/pages/pages.styl +56 -56
  67. package/source/css/_common/components/pages/tag-cloud.styl +12 -12
  68. package/source/css/_common/components/post/breadcrumb.styl +39 -39
  69. package/source/css/_common/components/post/copyright.styl +41 -41
  70. package/source/css/_common/components/post/expand.styl +263 -263
  71. package/source/css/_common/components/post/footer.styl +11 -11
  72. package/source/css/_common/components/post/header.styl +79 -79
  73. package/source/css/_common/components/post/nav.styl +64 -64
  74. package/source/css/_common/components/post/post.styl +29 -29
  75. package/source/css/_common/components/post/reward.styl +50 -50
  76. package/source/css/_common/components/post/rtl.styl +12 -12
  77. package/source/css/_common/components/post/tags.styl +39 -39
  78. package/source/css/_common/components/tags/collapse.styl +72 -72
  79. package/source/css/_common/components/tags/container.styl +49 -49
  80. package/source/css/_common/components/tags/label.styl +12 -12
  81. package/source/css/_common/components/tags/links.styl +77 -77
  82. package/source/css/_common/components/tags/list.styl +131 -131
  83. package/source/css/_common/components/tags/note.styl +70 -70
  84. package/source/css/_common/components/tags/player.styl +361 -361
  85. package/source/css/_common/components/tags/quiz.styl +200 -200
  86. package/source/css/_common/components/tags/tabs.styl +89 -89
  87. package/source/css/_common/components/tags/tags.styl +9 -9
  88. package/source/css/_common/components/third-party/loading.styl +222 -222
  89. package/source/css/_common/components/third-party/mermaid/class.styl +90 -90
  90. package/source/css/_common/components/third-party/mermaid/flowchart.styl +72 -72
  91. package/source/css/_common/components/third-party/mermaid/gantt.styl +251 -251
  92. package/source/css/_common/components/third-party/mermaid/git.styl +7 -7
  93. package/source/css/_common/components/third-party/mermaid/mermaid.styl +37 -37
  94. package/source/css/_common/components/third-party/mermaid/pie.styl +9 -9
  95. package/source/css/_common/components/third-party/mermaid/sequence.styl +95 -95
  96. package/source/css/_common/components/third-party/mermaid/state.styl +130 -130
  97. package/source/css/_common/components/third-party/pace.styl +18 -18
  98. package/source/css/_common/components/third-party/search.styl +167 -167
  99. package/source/css/_common/components/third-party/theme.styl +151 -151
  100. package/source/css/_common/components/third-party/third-party.styl +22 -22
  101. package/source/css/_common/components/third-party/widgets.styl +57 -57
  102. package/source/css/_common/outline/footer/footer.styl +67 -67
  103. package/source/css/_common/outline/header/brand.styl +77 -77
  104. package/source/css/_common/outline/header/header.styl +20 -20
  105. package/source/css/_common/outline/header/image.styl +85 -85
  106. package/source/css/_common/outline/header/menu.styl +117 -117
  107. package/source/css/_common/outline/header/nav.styl +81 -81
  108. package/source/css/_common/outline/header/right.styl +15 -15
  109. package/source/css/_common/outline/header/tool.styl +207 -207
  110. package/source/css/_common/outline/header/waves.styl +57 -57
  111. package/source/css/_common/outline/mobile.styl +46 -46
  112. package/source/css/_common/outline/outline.styl +78 -78
  113. package/source/css/_common/outline/sidebar/author.styl +59 -59
  114. package/source/css/_common/outline/sidebar/dimmer.styl +23 -23
  115. package/source/css/_common/outline/sidebar/menu.styl +63 -63
  116. package/source/css/_common/outline/sidebar/quick.styl +43 -43
  117. package/source/css/_common/outline/sidebar/related.styl +56 -56
  118. package/source/css/_common/outline/sidebar/sidebar.styl +80 -80
  119. package/source/css/_common/outline/sidebar/social.styl +69 -69
  120. package/source/css/_common/outline/sidebar/state.styl +37 -37
  121. package/source/css/_common/outline/sidebar/tab.styl +71 -71
  122. package/source/css/_common/outline/sidebar/toc.styl +47 -47
  123. package/source/css/_common/scaffolding/animate.styl +322 -322
  124. package/source/css/_common/scaffolding/base.styl +190 -190
  125. package/source/css/_common/scaffolding/buttons.styl +48 -48
  126. package/source/css/_common/scaffolding/divider.styl +36 -36
  127. package/source/css/_common/scaffolding/iconfont.styl +443 -443
  128. package/source/css/_common/scaffolding/normalize.styl +273 -273
  129. package/source/css/_common/scaffolding/pagination.styl +81 -81
  130. package/source/css/_common/scaffolding/ribbon.styl +38 -38
  131. package/source/css/_common/scaffolding/scaffolding.styl +14 -14
  132. package/source/css/_common/scaffolding/scrollbar.styl +37 -37
  133. package/source/css/_common/scaffolding/tables.styl +50 -50
  134. package/source/css/_common/scaffolding/tip.styl +19 -19
  135. package/source/css/_common/scaffolding/toggles.styl +59 -59
  136. package/source/css/_iconfont.styl +455 -455
  137. package/source/css/_mixins.styl +148 -148
  138. package/source/css/_variables.styl +89 -89
  139. package/source/css/app.styl +41 -41
  140. package/source/css/mermaid.styl +5 -5
  141. package/source/css/optimize.styl +5 -5
  142. package/source/js/_app/components/comments.js +59 -0
  143. package/source/js/_app/components/comments.ts +88 -89
  144. package/source/js/_app/components/sidebar.js +244 -0
  145. package/source/js/_app/components/sidebar.ts +239 -239
  146. package/source/js/_app/components/tcomments.js +47 -0
  147. package/source/js/_app/components/tcomments.ts +54 -55
  148. package/source/js/_app/globals/globalVars.ts +99 -99
  149. package/source/js/_app/globals/handles.js +105 -0
  150. package/source/js/_app/globals/handles.ts +124 -123
  151. package/source/js/_app/globals/themeColor.ts +63 -64
  152. package/source/js/_app/globals/thirdparty.ts +63 -63
  153. package/source/js/_app/globals/tools.ts +75 -75
  154. package/source/js/_app/library/anime.ts +110 -110
  155. package/source/js/_app/library/declare.d.ts +128 -133
  156. package/source/js/_app/library/dom.ts +28 -26
  157. package/source/js/_app/library/loadFile.js +43 -0
  158. package/source/js/_app/library/loadFile.ts +47 -43
  159. package/source/js/_app/library/proto.ts +137 -141
  160. package/source/js/_app/library/scriptPjax.ts +72 -72
  161. package/source/js/_app/library/storage.ts +12 -12
  162. package/source/js/_app/library/vue.js +52 -0
  163. package/source/js/_app/library/vue.ts +49 -50
  164. package/source/js/_app/page/common.js +45 -0
  165. package/source/js/_app/page/common.ts +43 -42
  166. package/source/js/_app/page/fancybox.js +70 -0
  167. package/source/js/_app/page/fancybox.ts +72 -71
  168. package/source/js/_app/page/post.js +253 -0
  169. package/source/js/_app/page/post.ts +266 -266
  170. package/source/js/_app/page/search.js +111 -0
  171. package/source/js/_app/page/search.ts +115 -115
  172. package/source/js/_app/page/tab.ts +60 -60
  173. package/source/js/_app/pjax/domInit.js +80 -0
  174. package/source/js/_app/pjax/domInit.ts +97 -97
  175. package/source/js/_app/pjax/refresh.js +137 -0
  176. package/source/js/_app/pjax/refresh.ts +140 -138
  177. package/source/js/_app/pjax/siteInit.js +115 -0
  178. package/source/js/_app/pjax/siteInit.ts +106 -104
  179. package/source/js/_app/player.js +777 -0
  180. package/source/js/_app/player.ts +798 -799
  181. package/toolbox/compiler.mjs +73 -0
  182. package/toolbox/hoistdep.mjs +6 -0
  183. package/toolbox/lib.mjs +40 -0
package/_images.yml CHANGED
@@ -1,9 +1,9 @@
1
- # 此images已失效,见https://github.com/theme-shoka-x/hexo-theme-shokaX/issues/6
2
- - 6833939bly1giciryrr3rj20zk0m8nhk.jpg
3
- - 6833939bly1gicis081o9j20zk0m8dmr.jpg
4
- - 6833939bly1gicis3attqj20zk0m8k7l.jpg
5
- - 6833939bly1giciszlczyj20zk0m816d.jpg
6
- - 6833939bly1gicit31ffoj20zk0m8naf.jpg
7
- - 6833939bly1gicit4jrvuj20zk0m8785.jpg
8
- - 6833939bly1gicitcxhpij20zk0m8hdt.jpg
9
-
1
+ # 此images已失效,见https://github.com/theme-shoka-x/hexo-theme-shokaX/issues/6
2
+ - 6833939bly1giciryrr3rj20zk0m8nhk.jpg
3
+ - 6833939bly1gicis081o9j20zk0m8dmr.jpg
4
+ - 6833939bly1gicis3attqj20zk0m8k7l.jpg
5
+ - 6833939bly1giciszlczyj20zk0m816d.jpg
6
+ - 6833939bly1gicit31ffoj20zk0m8naf.jpg
7
+ - 6833939bly1gicit4jrvuj20zk0m8785.jpg
8
+ - 6833939bly1gicitcxhpij20zk0m8hdt.jpg
9
+
package/eslint.config.mjs CHANGED
@@ -1,55 +1,55 @@
1
- export default [
2
- {
3
- files: ['*.ts', '*.tsx', '*.vue'],
4
- languageOptions: {
5
- parser: '@typescript-eslint/parser',
6
- parserOptions: {
7
- ecmaVersion: 2022
8
- }
9
- },
10
- plugins: {
11
- '@typescript-eslint': await import('@typescript-eslint/eslint-plugin'),
12
- 'vue': await import('eslint-plugin-vue')
13
- },
14
- rules: {
15
- camelcase: 'off',
16
- 'n/no-callback-literal': 'off',
17
- '@typescript-eslint/ban-types': 'off',
18
- '@typescript-eslint/ban-ts-comment': 'off',
19
- '@typescript-eslint/no-var-requires': 'off',
20
- '@typescript-eslint/no-unused-vars': 'off',
21
- 'prefer-const': 'off'
22
- }
23
- },
24
- {
25
- files: ['*.js', '*.jsx'],
26
- languageOptions: {
27
- ecmaVersion: 2022
28
- },
29
- env: {
30
- browser: true,
31
- commonjs: true,
32
- es6: true,
33
- node: true
34
- },
35
- extends: [
36
- 'standard'
37
- ],
38
- rules: {
39
- camelcase: 'off',
40
- 'n/no-callback-literal': 'off',
41
- 'prefer-const': 'off'
42
- }
43
- },
44
- {
45
- files: ['*.vue'],
46
- languageOptions: {
47
- parserOptions: {
48
- ecmaVersion: 2022
49
- }
50
- },
51
- extends: [
52
- 'plugin:vue/vue3-recommended'
53
- ]
54
- }
55
- ];
1
+ export default [
2
+ {
3
+ files: ['*.ts', '*.tsx', '*.vue'],
4
+ languageOptions: {
5
+ parser: '@typescript-eslint/parser',
6
+ parserOptions: {
7
+ ecmaVersion: 2022
8
+ }
9
+ },
10
+ plugins: {
11
+ '@typescript-eslint': await import('@typescript-eslint/eslint-plugin'),
12
+ 'vue': await import('eslint-plugin-vue')
13
+ },
14
+ rules: {
15
+ camelcase: 'off',
16
+ 'n/no-callback-literal': 'off',
17
+ '@typescript-eslint/ban-types': 'off',
18
+ '@typescript-eslint/ban-ts-comment': 'off',
19
+ '@typescript-eslint/no-var-requires': 'off',
20
+ '@typescript-eslint/no-unused-vars': 'off',
21
+ 'prefer-const': 'off'
22
+ }
23
+ },
24
+ {
25
+ files: ['*.js', '*.jsx'],
26
+ languageOptions: {
27
+ ecmaVersion: 2022
28
+ },
29
+ env: {
30
+ browser: true,
31
+ commonjs: true,
32
+ es6: true,
33
+ node: true
34
+ },
35
+ extends: [
36
+ 'standard'
37
+ ],
38
+ rules: {
39
+ camelcase: 'off',
40
+ 'n/no-callback-literal': 'off',
41
+ 'prefer-const': 'off'
42
+ }
43
+ },
44
+ {
45
+ files: ['*.vue'],
46
+ languageOptions: {
47
+ parserOptions: {
48
+ ecmaVersion: 2022
49
+ }
50
+ },
51
+ extends: [
52
+ 'plugin:vue/vue3-recommended'
53
+ ]
54
+ }
55
+ ];
package/index.html ADDED
@@ -0,0 +1,231 @@
1
+ <!doctype html>
2
+ <html lang=zh-CN>
3
+ <meta charset=UTF-8>
4
+ <meta content=width=device-width,initial-scale=1,maximum-scale=2 name=viewport>
5
+ <meta content=#222 name=theme-color>
6
+ <meta content=IE=edge,chrome=1 http-equiv=X-UA-COMPATIBLE>
7
+ <meta content=webkit name=renderer>
8
+ <link href=/assets/favicon.ico rel=icon sizes=32x32 type=image/ico>
9
+ <link href=/assets/apple-touch-icon.png rel=apple-touch-icon sizes=180x180>
10
+ <link href=/rss.xml rel=alternate title=GreyFlowers type=application/rss+xml>
11
+ <link href=/atom.xml rel=alternate title=GreyFlowers type=application/atom+xml>
12
+ <link href=https://nonhana.xyz/feed.json rel=alternate title=GreyFlowers type=application/json>
13
+ <link href=https://lf9-cdn-tos.bytecdntp.com rel=preconnect>
14
+ <link href=https://at.alicdn.com rel=preconnect>
15
+ <link href=https://cdn.jsdelivr.net rel=dns-prefetch>
16
+ <link href=https://unpkg.com rel=dns-prefetch>
17
+ <link
18
+ href=https://fonts.googleapis.com/css?family=Mulish:400,400italic,700,700italic%7CFredericka%20the%20Great:400,400italic,700,700italic%7CNoto%20Serif%20JP:400,400italic,700,700italic%7CNoto%20Serif%20SC:400,400italic,700,700italic%7CInconsolata:400,400italic,700,700italic&display=swap&subset=latin,latin-ext
19
+ media=none onload=this.media='all' rel=stylesheet>
20
+ <link href=/css/app.css?v=0.4.2 rel=stylesheet>
21
+ <link href=/js/chunk-3TKMULNZ.js rel=modulepreload>
22
+ <link href=/js/chunk-ALTFCWXU.js rel=modulepreload>
23
+ <link href=/js/chunk-HUVUXQZN.js rel=modulepreload>
24
+ <link href=/js/chunk-O2BCNOI6.js rel=modulepreload>
25
+ <link href=/js/index.esm-AYEYICKY.js rel=modulepreload>
26
+ <link href=/js/post-S7W6Y2IZ.js rel=modulepreload>
27
+ <link href=/js/quicklink-FI56VDOX.js rel=modulepreload>
28
+ <link href=/js/search-TIKH35P2.js rel=modulepreload>
29
+ <link href=/js/siteInit.js rel=modulepreload>
30
+ <link as=image fetchpriority=high
31
+ href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%283%29.png rel=preload>
32
+ <link as=image fetchpriority=high href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115011844.jpg
33
+ rel=preload>
34
+ <link as=image fetchpriority=high
35
+ href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%282%29.jpg rel=preload>
36
+ <link as=image fetchpriority=high href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115495470.png
37
+ rel=preload>
38
+ <link as=image fetchpriority=high
39
+ href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%287%29.png rel=preload>
40
+ <link as=image fetchpriority=high
41
+ href=https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/0%20%284%29.png rel=preload>
42
+ <meta content=前端,Vite-SSG,SSG, name=keywords>
43
+ <meta content=不要为每一件事都赋予意义。 name=description>
44
+ <link
45
+ href=https://nonhana.xyz/2024/01/31/daily-developing/%E6%80%8E%E4%B9%88%E5%9C%A8Vue3%E4%B8%AD%E5%BC%95%E5%85%A5Vite-SSG%E6%89%93%E5%8C%85/ rel=canonical>
46
+ <title>怎么在Vue3中引入Vite-SSG打包</title>
47
+ <meta content="Hexo 7.0.0" name=generator>
48
+ <body itemscope itemtype=http://schema.org/WebPage>
49
+ <div id=loading>
50
+ <div class=cat>
51
+ <div class=body></div>
52
+ <div class=head>
53
+ <div class=face></div>
54
+ </div>
55
+ <div class=foot>
56
+ <div class=tummy-end></div>
57
+ <div class=bottom></div>
58
+ <div class="legs left"></div>
59
+ <div class="legs right"></div>
60
+ </div>
61
+ <div class=paw>
62
+ <div class="hands left"></div>
63
+ <div class="hands right"></div>
64
+ </div>
65
+ </div>
66
+ </div>
67
+ <div id=container>
68
+ <header id=header itemscope itemtype=http://schema.org/WPHeader>
69
+ <div class=inner>
70
+ <div id=brand>
71
+ <div class=pjax><h1 itemprop="name headline">怎么在Vue3中引入Vite-SSG打包</h1>
72
+ <div class=meta><span title="创建时间:2024-01-31 14:22:42" class=item><span class=icon><i
73
+ class="ic i-calendar"></i></span><span class=text>发表于</span><time itemprop="dateCreated datePublished"
74
+ datetime=2024-01-31T14:22:42+08:00>2024-01-31</time></span><span
75
+ class=item title=本文字数><span class=icon><i class="ic i-pen"></i></span><span
76
+ class=text>本文字数</span><span>14k</span><span class=text>字</span></span><span class=item
77
+ title=阅读时长><span
78
+ class=icon><i class="ic i-clock"></i></span><span class=text>阅读时长</span><span>13 分钟</span></span>
79
+ </div>
80
+ </div>
81
+ </div>
82
+ <nav id=nav>
83
+ <div class=inner>
84
+ <div class=toggle>
85
+ <div aria-label=切换导航栏 class=lines><span class=line></span><span class=line></span><span
86
+ class=line></span></div>
87
+ </div>
88
+ <ul class=menu>
89
+ <li class="item title"><a href=/ rel=start>hana's blog</a>
90
+ </ul>
91
+ <ul class=right id=rightNav>
92
+ <li class="item theme"><i class="ic i-sun"></i>
93
+ <li class="item search"><i class="ic i-search"></i>
94
+ </ul>
95
+ </div>
96
+ </nav>
97
+ </div>
98
+ <div class=pjax id=imgs>
99
+ <ul>
100
+ <li
101
+ style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%283%29.png");'
102
+ class=item>
103
+ <li
104
+ style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115011844.jpg");'
105
+ class=item>
106
+ <li
107
+ style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%282%29.jpg");'
108
+ class=item>
109
+ <li
110
+ style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/115495470.png");'
111
+ class=item>
112
+ <li
113
+ style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/1%20%287%29.png");'
114
+ class=item>
115
+ <li
116
+ style='background-image: url("https://common-1319721118.cos.ap-shanghai.myqcloud.com/grey-flowers/0%20%284%29.png");'
117
+ class=item>
118
+ </ul>
119
+ </div>
120
+ </header>
121
+ <div id=waves>
122
+ <svg viewbox="0 24 150 28" class=waves preserveaspectratio=none shape-rendering=auto
123
+ xmlns=http://www.w3.org/2000/svg xmlns:xlink=http://www.w3.org/1999/xlink>
124
+ <defs>
125
+ <path d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z" id=gentle-wave></path>
126
+ </defs>
127
+ <g class=parallax>
128
+ <use x=48 xlink:href=#gentle-wave y=0></use>
129
+ <use x=48 xlink:href=#gentle-wave y=3></use>
130
+ <use x=48 xlink:href=#gentle-wave y=5></use>
131
+ <use x=48 xlink:href=#gentle-wave y=7></use>
132
+ </g>
133
+ </svg>
134
+ </div>
135
+ <main>
136
+ <div class=inner>
137
+ <div class=pjax id=main>
138
+ <div class="article wrap">
139
+ <div class=breadcrumb itemlistelement itemscope itemtype=https://schema.org/BreadcrumbList><i
140
+ class="ic i-home"></i><span></span><i class="ic i-angle-right"></i><span class=current
141
+ itemprop=itemListElement
142
+ itemscope
143
+ itemtype=https://schema.org/ListItem><a
144
+ href=/categories/daily-developing/ itemprop=item rel=index title=分类于一些日常开发积累><span itemprop=name>一些日常开发积累<meta
145
+ content=0 itemprop=position></span></a></span></div>
146
+ <article class="post block" itemscope itemtype=http://schema.org/Article lang=zh-CN>
147
+ <link
148
+ href=https://nonhana.xyz/2024/01/31/daily-developing/%E6%80%8E%E4%B9%88%E5%9C%A8Vue3%E4%B8%AD%E5%BC%95%E5%85%A5Vite-SSG%E6%89%93%E5%8C%85/ itemprop=mainEntityOfPage>
149
+ <span hidden itemprop=author itemscope itemtype=http://schema.org/Person><meta content=/assets/avatar.jpg
150
+ itemprop=image><meta
151
+ content=non_hana itemprop=name><meta content="『灰色的花终会绽放。』, 不要为每一件事都赋予意义。"
152
+ itemprop=description></span><span hidden itemprop=publisher itemscope
153
+ itemtype=http://schema.org/Organization><meta
154
+ content=GreyFlowers itemprop=name></span>
155
+ <div class="body md" itemprop=articleBody><h1 id=一-前言><a class=anchor href=#一-前言>#</a> 一、前言</h1>
156
+ <p>公司目前由我负责的主要有两个网页项目:
157
+ <ol>
158
+ <li>一个官网首页,纯做数据展示的;
159
+ <li>一个官网课程资源页,用户能够点击进入课程页面,并能够阅读课程的 md 文档教程。
160
+ </ol>
161
+ <p>这两个项目都是非常单纯的通过 <code>npm init vite@latest</code> 创建的 Vue3+TS 项目,并且其中也都引入了目前非常流行的
162
+ ElementPlus 作为组件库。
163
+ <p>目前多了一个新的需求:要交给我进行 <strong>SEO</strong> ,也就是 <strong>搜索引擎优化</strong>
164
+ 。在这边先暂且列一些给 Vue+Vite 项目做 SEO 的一些常见方式吧:
165
+ <ol>
166
+ <li><strong>服务器端渲染 (SSR)</strong>: 由于 Vue 是一个客户端渲染的 JavaScript 框架,搜索引擎在抓取页面时可能不会执行
167
+ JavaScript,导致内容无法被索引。通过服务器端渲染,可以提前在服务器上生成页面的 HTML,确保搜索引擎能够抓取到页面的内容。
168
+ <li><strong>预渲染 (Pre-rendering)</strong>: 对于静态内容较多的站点,可以使用预渲染。这意味着在构建过程中为每个路由生成静态的
169
+ HTML 文件。这可以通过像 <code>vite-plugin-ssr</code> 这样的插件来实现。
170
+ <li><strong>使用合适的元标签 (Meta tags)</strong>: 确保每个页面都有恰当的 <code>&LTtitle></code> 和
171
+ <code>&LTmeta></code> 描述标签,这些都是搜索引擎用来了解页面内容的重要信息。可以使用像
172
+ <code>vue-meta</code> 这样的库来在 Vue 组件中管理这些标签。
173
+ <li><strong>路由优化</strong>:使用基于历史的路由( <code>history mode</code> )而不是哈希路由( <code>hash
174
+ mode</code> )。这样可以确保每个页面都有一个干净且易于索引的 URL。
175
+ <li><strong>生成网站地图 (Sitemap)</strong>: 为网站生成一个 sitemap.xml,帮助搜索引擎更好地索引网站内容。
176
+ <li><strong>使用无障碍标准 (Accessibility)</strong>: 确保网站符合无障碍标准,这不仅对用户友好,也有助于提高
177
+ SEO 排名。
178
+ </ol>
179
+ <p>当然,上面的这几种方式都是报菜名罢了。我们公司的技术负责人和我经过一些调研和讨论之后,最终选定了 <strong>静态站点生成(SSG,
180
+ Static Site Generation)</strong> 来对我们的项目进行 SEO。为什么选择 SSG 呢?因为我们目前的项目都是偏向于
181
+ <strong>数据呈现</strong> 而与用于在实际应用层面上的交互相对比较少,也就是比较偏向于
182
+ <strong>静态页面</strong> 。
183
+ <p>再次基础上,我们选择了 <code>Vite-SSG</code> 这个插件作为我们进行 SSG 打包的工具。
184
+ <h1 id=二-vite-ssg-是什么><a class=anchor href=#二-vite-ssg-是什么>#</a> 二、Vite-SSG 是什么?</h1>
185
+ <p>Vite-SSG(Static Site Generation)是一个基于 Vite 的工具,用于生成静态站点。它专门为 Vue.js
186
+ 应用程序设计,提供了一个高效的方式来构建静态生成的网站。 Vite-SSG 有几个主要关键特点:
187
+ <ol>
188
+ <li><strong>静态站点生成</strong>:Vite-SSG 生成的是静态 HTML 文件。这意味着的网站可以作为静态文件部署在任何标准的
189
+ web 服务器或静态文件托管服务上。
190
+ <li><strong>基于 Vite</strong>:作为 Vite 的一个扩展,Vite-SSG 充分利用了 Vite
191
+ 的快速冷启动和即时模块热更新(HMR)等特性,提供了快速的开发体验。
192
+ <li><strong>Vue.js 支持</strong>:Vite-SSG 是为 Vue.js 应用程序设计的。它支持 Vue 3,允许利用 Vue.js
193
+ 的全功能集,包括组件、路由、状态管理等,也可以让在原本已经开发完成的 Vue 项目中引入。
194
+ <li><strong>服务器端渲染(SSR)友好</strong>:虽然 Vite-SSG 重点是静态站点生成,但它也支持和优化了服务器端渲染的相关特性,使得生成的站点可以更好地支持
195
+ SEO 和首次加载性能。
196
+ <li><strong>客户端激活</strong>:生成的静态页面在客户端被 Vue.js
197
+ “激活”,从而变成一个完全功能的单页面应用(SPA)。这使得在初始的快速加载和后续的丰富交互之间取得了很好的平衡。
198
+ <li><strong>灵活性和可扩展性</strong>:Vite-SSG 允许自定义配置,包括路由、预渲染行为、插件等,使得可以根据项目需求调整和优化。
199
+ </ol>
200
+ <p>Vite-SSG 适用于需要快速静态内容加载,同时在客户端提供丰富交互的网站。这包括博客、企业官网、产品展示网站、文档站点等。同时,对于需要良好搜索引擎优化(SEO)的站点,Vite-SSG
201
+ 也是一个很好的选择。
202
+ <h1 id=三-在开发完成的项目中进行配置><a class=anchor href=#三-在开发完成的项目中进行配置>#</a>
203
+ 三、在开发完成的项目中进行配置</h1>
204
+ <p>按照一般的开发流程开发完成之后,就需要先引入 Vite-SSG 的插件,并对整个项目的关键配置项进行修改,最后运行打包,逐一排查错误并修复。
205
+ <h2 id=安装插件><a class=anchor href=#安装插件>#</a> 安装插件</h2>
206
+ <p>先安装 Vite-SSG 插件:
207
+ <figure class="highlight bash">
208
+ <figcaption data-lang=bash></figcaption>
209
+ <table>
210
+ <tr>
211
+ <td data-num=1>
212
+ <td>
213
+ <pre><span class="token function">npm</span> i <span class="token parameter variable">-D</span> vite-ssg</pre>
214
+ </table>
215
+ </figure>
216
+ <h2 id=修改配置文件><a class=anchor href=#修改配置文件>#</a> 修改配置文件</h2>
217
+ <h3 id=packagejson><a class=anchor href=#packagejson>#</a> package.json</h3>
218
+ <p>安装完成后,修改 <code>package.json</code> 中的 build 指令:
219
+ <figure class="highlight diff">
220
+ <figcaption data-lang=diff></figcaption>
221
+ <table>
222
+ <tr>
223
+ <td data-num=1>
224
+ <td>
225
+ <pre>{</pre>
226
+ <tr>
227
+ <td data-num=2>
228
+ <td><pre><span class="token unchanged"><span class="token prefix unchanged"> </span> "scripts": {<tr><td
229
+ data-num=3><td><pre><span class="token prefix unchanged"> </span> "dev": "vite",</pre><tr><td
230
+ data-num=4><td><pre><span class="token deleted-sign deleted"><span
231
+ class="token prefix deleted">-</span></span></pre></td></tr></span></pre></td>
@@ -1,19 +1,19 @@
1
- # Override Default Translations
2
-
3
- If you would like to customize the default translation, you do not need to modify the translation files in the `languages` directory. You can override all translations using [Data Files](https://hexo.io/docs/data-files).
4
-
5
- 1. Creat a `languages.yml` in `source/_data`.
6
- 2. Insert following codes: (be careful about the two-space indent)
7
-
8
- ```yml
9
- # language
10
- zh-CN:
11
- # items
12
- post:
13
- copyright:
14
- # the translation you perfer
15
- author: 本文博主
16
- en:
17
- menu:
18
- schedule: Calendar
19
- ```
1
+ # Override Default Translations
2
+
3
+ If you would like to customize the default translation, you do not need to modify the translation files in the `languages` directory. You can override all translations using [Data Files](https://hexo.io/docs/data-files).
4
+
5
+ 1. Creat a `languages.yml` in `source/_data`.
6
+ 2. Insert following codes: (be careful about the two-space indent)
7
+
8
+ ```yml
9
+ # language
10
+ zh-CN:
11
+ # items
12
+ post:
13
+ copyright:
14
+ # the translation you perfer
15
+ author: 本文博主
16
+ en:
17
+ menu:
18
+ schedule: Calendar
19
+ ```
@@ -1 +1 @@
1
- en.yml
1
+ en.yml