feat: 日常更新

docs/.vitepress/config.js

@@ -86,6 +86,15 @@ export default {
         }
       ],
       '/frontEnd/frame/': [
+        {
+          text: '进阶内容',
+          items: [
+            {
+              text: '性能优化',
+              link: '/frontEnd/frame/Front/performanceOptimization'
+            }
+          ]
+        },
         {
           text: 'React',
           items: [{ text: 'React', link: '/frontEnd/frame/React/' }]
@@ -101,6 +110,10 @@ export default {
       ],
 
       '/program/': [
+        {
+          text: 'Linux',
+          items: [{ text: '服务器', link: '/program/linux/basic' }]
+        },
         {
           text: 'Docker',
           items: [{ text: 'Docker', link: '/program/Docker/' }]

docs/.vitepress/theme/index.js

@@ -1,5 +1,9 @@
 import DefaultTheme from 'vitepress/theme'
+import Confetti from '../../src/components/Confetti.vue'
 
 export default {
-  ...DefaultTheme
+  ...DefaultTheme,
+  enhanceApp({ app, router }) {
+    app.component('Confetti', Confetti) //注册全局组件
+  }
 }

docs/frontEnd/frame/Front/performanceOptimization.md

@@ -0,0 +1,29 @@
+# 性能优化
+
+记录一些性能优化手段，涉及代码、浏览器、构建等
+
+## 代码方面
+
+### 重绘和重排
+
+`重绘`指重新绘制元素的样式等内容，如颜色，`重排`则是由于元素`位置`改变后由浏览器进行重新渲染的过程，这个位置可以是元素隐藏、消失、宽高修改等。页面上的内容都是由浏览器引擎进行绘制后展示而来，当元素信息有更改时会进行重新的绘制。比如`display`的`none`，`opacity` 的 `0`
+
+显而易见，重排会进行更多的操作来达到预期的修改，因此需要尽量的减少重排操作，可用重绘进行代替，这是单一的操作上的选择。
+
+每一次的style变更都会引发这样的操作，多次修改就会操作多次。因此尽量合并style操作为一次
+
+### 防抖、节流
+
+防抖，在预设的时段n内执行函数，若在该时段内未被再次触发即执行，否则重新计时
+节流，在预设的时段n内执行函数，无论函数是否再次被触发，在时间n后执行函数
+
+两种函数可以在有极大的操作被大量触发的场景上进行优化。比如在输入框进行即时搜索、滚动事件、浏览器自带的dom事件的触发操作等
+
+### 异步加载脚本
+
+html文件中的代码从上到下执行，遇到js脚本就会先解析脚本内容，从而导致页面空白。这时可以把脚本相关的内容放到body标签后从而优先渲染标签元素来减少页面空白的时间
+
+现行的构建工具基本会自动处理上面的情况。同时也有异步加载脚本的新写法可以使用，以此减少空白期
+。
+
+### 使用webp格式的图片

docs/index.md

@@ -28,7 +28,10 @@ features:
 ---
 
 <Home />
+<Visits />
+<Confetti />
 
 <script setup>
 import Home from './src/components/Home.vue'
+import Visits from './src/components/Visits.vue'
 </script>

docs/program/linux/basic.md

@@ -0,0 +1,21 @@
+# 入门
+
+## 服务器
+
+可以去阿里云或腾讯云等厂商上购买一台轻量级的云服务器作为使用，系统一般选择Linux的发行版本。
+
+## 安装Docker
+
+以腾讯为例，在购买服务器后。使用`Xshell`工具登录到服务器上，以此执行如下命令：
+
+```bash
+yum update -y
+yum install -y curl wget
+yum install -y yum-utils
+yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo
+yum install -y docker-ce docker-ce-cli containerd.io
+systemctl start docker
+systemctl enable docker
+docker --version
+
+```

docs/src/components/Confetti.vue

@@ -0,0 +1,10 @@
+<script setup lang="ts">
+import confetti from "canvas-confetti";
+
+/* 纸屑 */
+confetti({
+  particleCount: 100,
+  spread: 170,
+  origin: { y: 0.6 },
+});
+</script>

docs/src/components/Home.vue

@@ -1,3 +1,7 @@
+<template>
+  <p class="home-add-text">山不在高，有仙则灵    水不在深，有龙则灵</p>
+</template>
+
 <script setup>
 import { onMounted } from 'vue'
 const footer = document.getElementsByClassName('VPFooter')
@@ -21,24 +25,25 @@ const setFooter = () => {
   footer[0].style = 'border-top:0px;padding-top:0px;'
 }
 onMounted(() => {
-  const footer = document.getElementsByClassName('home-add-text')
-  if (footer.length > 0) {
-    return
-  }
-  setFooter()
+  // const footer = document.getElementsByClassName('home-add-text')
+  // if (footer.length > 0) {
+  //   return
+  // }
+ // setFooter()
   // 部署在GitHub上后无备案号
   // url()
-  setText()
+  //setText()
 })
 </script>
 
-<style>
+<style scoped>
 .home-add-text {
   text-align: center;
   font-size: 18px;
   padding: 20px 0px;
   margin-bottom: 32px;
-  border-top: 1px solid var(--vp-c-gutter);
-  border-bottom: 1px solid var(--vp-c-gutter);
+  margin-top: 20px;
+  /* border-top: 1px solid var(--vp-c-gutter);
+  border-bottom: 1px solid var(--vp-c-gutter); */
 }
 </style>

docs/src/components/Visits.vue

@@ -0,0 +1,37 @@
+<template>
+  <p class="visit">Visit: {{ v || '-' }}</p>
+</template>
+
+<script setup>
+import { onMounted, ref } from 'vue';
+
+const v = ref(0);
+
+const fetchVisit = async () => {
+  try {
+    const res = await fetch('http://122.51.156.141:3000/api/visit-count');
+    if (!res.ok) {
+      throw new Error(`HTTP error! status: ${res.status}`);
+    }
+    const data = await res.json();
+    v.value = data.visitCount;
+  } catch (error) {
+    console.error('请求失败:', error);
+  }
+};
+
+onMounted(() => {
+  fetchVisit();
+});
+</script>
+
+
+
+<style scoped>
+.visit{
+  text-align: center;
+  font-size: 20px;
+  margin-top: 20px;
+  color:#4cb2fb;
+}
+</style>

package.json

@@ -39,11 +39,12 @@
   "devDependencies": {
     "@commitlint/cli": "^19.2.2",
     "@commitlint/config-conventional": "^19.2.2",
+    "canvas-confetti": "^1.9.3",
     "husky": "^9.0.11",
     "lint-staged": "^15.2.2",
     "markdownlint": "^0.34.0",
     "markdownlint-cli": "^0.40.0",
     "prettier": "^3.2.5",
-    "vitepress": "^1.1.4"
+    "vitepress": "^1.3.4"
   }
 }