更新

.npmrc

@@ -10,4 +10,8 @@ package-lock=true
 # pnpm i 生成pnpm-lock.yaml文件、yarn 生成yarn.lock文件
 lockfile=true
 
+# 对等依赖安装
+auto-install-peers=true
+strict-peer-dependencies=false
+
 

docs/.vuepress/config.ts

@@ -5,7 +5,7 @@ import footer from './footer'
 import extraSideBar from './extraSideBar'
 
 const author = 'onresize'
-const domain = 'https://gitee.com'
+const domain = 'https://onresize.github.io/web-blogs/'
 const tags = ['程序员', '编程', '前端']
 
 export default defineConfig({
@@ -31,10 +31,10 @@ export default defineConfig({
       var _hmt = _hmt || [];
       (function() {
         var hm = document.createElement("script");
-        hm.src = "https://hm.baidu.com/hm.js?907fc6c6099a87f6c010a6b5cd433d61";
+        hm.src = "https://hm.baidu.com/hm.js?9eb20a946f6ada6ace9bb2de590f8ed3";
         var s = document.getElementsByTagName("script")[0]; 
         s.parentNode.insertBefore(hm, s);
-      })();    
+      })();  
       `,
     ],
   ],
@@ -52,9 +52,9 @@ export default defineConfig({
     ['@vuepress/back-to-top'],
     // Google 分析
     [
-      "@vuepress/google-analytics",
+      '@vuepress/google-analytics',
       {
-        ga: "G-P1NFFNHRH2", // 补充自己的谷歌分析 ID，比如 UA-00000000-0
+        ga: 'G-P1NFFNHRH2', // 补充自己的谷歌分析 ID，比如 UA-00000000-0
       },
     ],
     ['@vuepress/medium-zoom'],
@@ -117,12 +117,13 @@ export default defineConfig({
     logo: '/image.png',
     nav: navbar,
     sidebar,
-    lastUpdated: '最近更新',
-
+    lastUpdated: '上一次更新',
     // GitHub 仓库位置
     repo: 'onresize/web-blogs',
     docsBranch: 'main',
 
+    smoothScroll: true
+
     // 编辑链接
     // editLinks: true,
     // editLinkText: "完善页面",

docs/.vuepress/sidebars/selfStudySideBar.ts

@@ -6,6 +6,8 @@ export default [
       "踩坑总结/一个项目不同版本的依赖包.md",
       "踩坑总结/MIME类型.md",
       "踩坑总结/React.Fragment和空标签的区别.md",
+      "踩坑总结/TS入门到进阶.md",
+      "踩坑总结/项目生成md目录树.md",
     ],
   },
 ];

docs/.vuepress/theme/components/Navbar.vue

@@ -30,7 +30,7 @@
         v-if="isAlgoliaSearch"
         :options="algolia"
       />
-      <!-- <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" /> -->
+      <SearchBox v-else-if="$site.themeConfig.search !== false && $page.frontmatter.search !== false" />
       <NavLinks class="can-hide" />
     </div>
   </header>

docs/.vuepress/theme/components/Page.vue

@@ -33,11 +33,13 @@
 import PageEdit from '@theme/components/PageEdit.vue'
 import PageNav from '@theme/components/PageNav.vue'
 import PageSidebarToc from '@theme/components/PageSidebarToc.vue'
+import { devDependencies } from '../../../../package.json'
 export default {
   components: { PageEdit, PageNav, PageSidebarToc },
   props: ['sidebarItems', 'pageSidebarItems'],
   mounted() {
-    console.log(this.$site, this, 'this.$site')
+    // console.log(this.$site, this, 'this.$site')
+    console.log(`%cvuepress:%c${devDependencies.vuepress}`, 'padding: 3px; color: white; background: #023047; border-radius: 5px 0 0 5px;', 'padding: 3px; color: white; background: #219EBC;border-radius: 0 5px 5px 0;')
   }
 }
 </script>

docs/.vuepress/theme/layouts/Layout.vue

@@ -26,10 +26,12 @@
       </template>
     </Page>
 
-    <PageSidebar v-if="shouldShowPageSidebar" :page-sidebar-items="pageSidebarItems" :sidebar-items="sidebarItems">
+    <!-- <PageSidebar v-if="shouldShowPageSidebar" :page-sidebar-items="pageSidebarItems" :sidebar-items="sidebarItems">
       <slot name="page-sidebar-top" #top />
       <slot name="page-sidebar-bottom" #bottom />
-    </PageSidebar>
+    </PageSidebar> -->
+
+    <div id="fps"></div>
   </div>
 </template>
 
@@ -41,6 +43,7 @@ import Sidebar from '@theme/components/Sidebar.vue'
 import PageSidebar from '@theme/components/ExtraSidebar.vue'
 import Footer from "@theme/components/Footer.vue";
 import { resolveSidebarItems, resolveHeaders } from '../util'
+import { loopFps } from '../util/fps'
 
 
 export default {
@@ -117,6 +120,7 @@ export default {
 
   mounted() {
     // console.log(config,this.pageSidebarItems, 'config')
+    loopFps()
     this.$router.afterEach(() => {
       this.isSidebarOpen = false
     })
@@ -150,3 +154,25 @@ export default {
   }
 }
 </script>
+
+<style lang="stylus">
+#fps
+ position fixed
+ right 0
+ bottom 5px
+ box-sizing border-box
+ padding 0 6px
+ width 120px
+ text-align center
+ user-select none
+
+::-webkit-scrollbar 
+	width 8px
+	height 8px
+	background-color #ffffff
+
+::-webkit-scrollbar-thumb 
+	background-color #dddee0
+	border-radius 20px
+	box-shadow inset 0 0 0 #ffffff
+</style>

docs/.vuepress/theme/util/fps.js

@@ -0,0 +1,38 @@
+export const loopFps = () => {
+  if (
+    null == window.localStorage.getItem('fpson') ||
+    '1' == window.localStorage.getItem('fpson')
+  ) {
+    var rAF =
+        window.requestAnimationFrame ||
+        window.webkitRequestAnimationFrame ||
+        function (e) {
+          window.setTimeout(e, 1e3 / 60)
+        },
+      frame = 0,
+      allFrameCount = 0,
+      lastTime = Date.now(),
+      lastFameTime = Date.now(),
+      loop = function () {
+        var e = Date.now(),
+          a = e - lastFameTime,
+          o = Math.round(1e3 / a)
+        if (
+          ((lastFameTime = e), allFrameCount++, frame++, e > 1e3 + lastTime)
+        ) {
+          if ((o = Math.round((1e3 * frame) / (e - lastTime))) <= 5)
+            var n = '<span style="color:#bd0000">卡成ppt🤢</span>'
+          else if (o <= 15) n = '<span style="color:red">电竞级帧率😖</span>'
+          else if (o <= 25) n = '<span style="color:orange">有点难受😨</span>'
+          else if (o < 35) n = '<span style="color:#9338e6">不太流畅🙄</span>'
+          else if (o <= 45) n = '<span style="color:#08b7e4">还不错哦😁</span>'
+          else n = '<span style="color:#39c5bb">十分流畅🤣</span>'
+          ;(document.getElementById('fps').innerHTML = `FPS: ${o}🚀`),
+            (frame = 0),
+            (lastTime = e)
+        }
+        rAF(loop)
+      }
+    loop()
+  } else document.getElementById('fps').style = 'display:none!important'
+}

docs/README.md

@@ -1,5 +1,6 @@
 ---
 permalink: /
+lang: zh-CN
 ---
 
 ```js

docs/技术总结/README.md

@@ -1,3 +1,8 @@
+<!-- ---
+title: React.Fragment和空标签的区别
+lang: zh-CN
+--- -->
+
 <!-- # 学习之路
 
 ## 大学经历

docs/技术总结/踩坑总结/MIME类型.md

@@ -1,3 +1,7 @@
+---
+title: MIME类型
+lang: zh-CN
+---
 # MIME类型
 >
 > 本文作者：[onresize](https://github.com/onresize)

docs/技术总结/踩坑总结/React.Fragment和空标签的区别.md

@@ -1,3 +1,7 @@
+---
+title: React.Fragment和空标签的区别
+lang: zh-CN
+---
 # React.Fragment和空标签的区别
 >
 > 本文作者：[onresize](https://github.com/onresize)