fix(blog): 更新博客内容《代码备份》

blog/java/SpringBoot项目目录结构.md

@@ -15,7 +15,7 @@ tags: [java, springboot, 开发]
 
 controller 目录下对应的也就是控制器，用于接收用户的请求（get，post 等），如下面代码
 
-```java
+```java title="controller/UserController.java"
 @RestController
 @RequestMapping("/users")
 public class UserController {
@@ -36,7 +36,7 @@ public class UserController {
 
 UserService 代码
 
-```java
+```java title="service/UserService.java"
 public class UserService {
 
     @Autowired
@@ -52,19 +52,15 @@ public class UserService {
 
 #### repository 类
 
-repository/UserRepository.java
-
-```java
+```java title="repository/UserRepository.java"
 public interface UserRepository extends JpaRepository<User, Long> , JpaSpecificationExecutor<User> {
 
 }
 ```
 
 #### entity 类
 
-domain/User.java
-
-```java
+```java title="domain/User.java"
 @Entity
 @NoArgsConstructor
 @Getter
@@ -103,7 +99,7 @@ User.java 用于定义 user 实体，在 ORM 中，数据库表中的字段都
 
 ```java
 public interface UserService {
-    List<User> findAll()；
+    List<User> findAll();
 }
 ```
 
@@ -121,7 +117,6 @@ public class UserServiceImpl implements UserService  {
         return userRepository.findAll();
     }
 }
-
 ```
 
 调用并无差异，与原本的 UserService 的区别就是加注解@Service 与 implements 实现，对 service 进行进一步的封装，调用只需要关注 service 接口层即可，相对更规范些。

blog/reference/代码备份.md

@@ -0,0 +1,70 @@
+---
+title: 代码备份
+date: 2022-05-02
+authors: kuizuo
+tags: [随笔]
+---
+
+前段时间因为笔记本不在身边，导致一些本地磁盘代码数据没法直接同步过来。于是就准备把这些年写的代码重新整理一下，谈谈常用备份手段以及我的[最佳手段](#最佳实现)
+
+<!-- truncate -->
+
+## 备份手段
+
+### 本地硬盘
+
+大多数代码的存储方式，方便存取，我通常会新建一个驱动器 **代码 (F:)** 来将所有代码放在此处，可能还会自备一个移动硬盘来存储代码。
+
+#### 优点
+
+无需网络，保存时间久，**读写数据快**。
+
+#### 缺点
+
+数据同步不方便，难以做到跨端跨设备共享。万一硬盘出了点问题，代码将难以恢复。
+
+### 网盘
+
+例如某度网盘，Onedrive等等，这类备份通常有一定的限制，例如下载限速严重，空间限制，保存期限等等，具体以实际使用网盘为例。
+
+在某度网盘中，选择你的想备份的文件夹，是可以做到文件夹自动备份，但对于你项目中的依赖文件（例如Node的node_module）那不小的空间也将备份，但有文件夹数量以及大小限制，如下图，这里只是简单一提，不作为备用手段。
+
+![image-20220502153823417](https://img.kuizuo.cn/image-20220502153823417.png)
+
+#### 优点
+
+相比本地硬盘而已，**网盘更易分享**，在其他设备中只需要登录网盘账号或访问网盘所分享的链接。
+
+#### 缺点
+
+有些免费的网盘，必然有一定的限制，例如空间限制，下载限制，远不如本地硬盘。如果不付费的话，体验效果堪忧。
+
+### 代码托管平台
+
+代码托管平台有很多，例如Github、Gitee等等，甚至可以自建一个像GItLab的代码托管平台。
+
+#### 优点
+
+**代码实时性强**，并且基于Git版本管理工具可以很方便查看代码的历史操作，对于项目类的而言非常方便。
+
+#### 缺点
+
+对于一些公有项目而言，一些私密信息（密码）不易于上传，在其他设备拉取代码就不存在这部分数据。同时**对于大量代码就束手无策**。
+
+## 最佳实现
+
+介绍完上面的几种代码备份手段，各自都有优缺点，至于如何选择就因人而异，这里就说说我是如何备份代码的。
+
+### 全部代码
+
+对于全部代码而言，肯定是多备份远优于不备份的。所以我通常会在本地电脑硬盘中备份两份代码，一份就正常放在固态硬盘上，另一份则放在机械硬盘，同时再备份一份代码在网盘上。
+
+但机械硬盘与网盘的备份时间一致，都是定期或阶段性的备份（甚至可能会忘记备份），所以这种对代码的实时性要求不高，通常这类代码为学习代码以及工具类相关代码。
+
+### 项目代码
+
+对于项目代码而言，我是毫不犹豫的选择代码托管平台，主要使用到版本管理工具Git，可以很好的查看代码的全部历史记录以及修改追踪能力。易于维护的同时，代码分享与同步也比网盘来的高效。设置好.gitignore也不会将非必要的文件（依赖文件，打包后的文件，生产环境下的配置文件）上传上去。
+
+## 最后
+
+**永远不要闲备份麻烦，当你辛辛苦苦写的代码丢失时，那才是真正的麻烦。**

blog/vue/vite相关插件.md

@@ -204,6 +204,84 @@ export default defineConfig({
 })
 ```
 
+## [unplugin-vue-define-options/vite](https://github.com/sxzz/unplugin-vue-define-options)
+
+**script setup语法糖通过defineOptions定义组件name、inheritAttrs、props、emits**
+
+安装
+
+```sh
+npm i unplugin-vue-define-options
+```
+
+```javascript title="vite.config.js"
+import { defineConfig } from 'vite'
+import DefineOptions from 'unplugin-vue-define-options/vite'
+import vue from '@vitejs/plugin-vue'
+
+export default defineConfig({
+  plugins: [vue(), DefineOptions()],
+})
+```
+
+在`tsconfig.json`设置types，如下所示:
+
+```json
+{
+    "compilerOptions": {
+        "types": ["unplugin-vue-define-options"]
+    }
+}
+```
+
+不然在ts项目中会提示 **找不到名称“defineOptions”**，具体使用如下
+
+```vue
+<script setup lang="ts">
+import { useSlots } from 'vue'
+defineOptions({
+  name: 'Foo',
+  inheritAttrs: false,
+  props: {
+    msg: { type: String, default: 'bar' },
+  },
+  emits: ['change', 'update'],
+})
+const slots = useSlots()
+</script>
+```
+
+输出
+
+```vue
+<script lang="ts">
+export default {
+  name: 'Foo',
+  inheritAttrs: false,
+  props: {
+    msg: { type: String, default: 'bar' },
+  },
+  emits: ['change', 'update'],
+}
+</script>
+
+<script setup>
+const slots = useSlots()
+</script>
+```
+
+如果只是想**单纯的设置组件名**的话，这个插件 [vite-plugin-vue-setup-extend](https://github.com/vbenjs/vite-plugin-vue-setup-extend) 可能更适合，只需要在script中添加一个name属性即可。
+
+```vue
+<template>
+  <div>hello world {{ a }}</div>
+</template>
+
+<script lang="ts" setup name="App">
+  const a = 1
+</script>
+```
+
 ## [vite-plugin-mock](https://github.com/vbenjs/vite-plugin-mock)
 
 **提供本地和生产模拟服务。**

docs/skill/css/记Tailwind CSS使用.md

@@ -67,6 +67,12 @@ bg-${variableName}
 background-color: var(variableName);
 ```
 
+:::info
+
+补充: 在Tailwind CSS 3.0中，支持`bg-[#bada55]`或`h-[24px]`的形式，即自定义样式，方括号内为具体变量值。
+
+:::
+
 ### 属性化模式
 
 对于一长串的class字符串，在维护的时候寻找其中的原子类特别不方便，使用属性化模式就可以写成下面这种形式

docusaurus.config.js

@@ -21,7 +21,7 @@ const config = {
     image: 'img/kuizuo.jpg',
     announcementBar: {
       id: 'announcementBar-2', // Any value that will identify this message.
-      content: `代码能重写，人不能重来`,
+      content: `今天不学习,明天变垃圾`,
     },
     metadata: [
       {