更新时间

This commit is contained in:
jimmy committed 2025-01-20 10:15:03 +08:00
1 parent bc3addcd63
commit 79f7eec41d
14 files changed
+266 -115

No files matched your search

+1 -2
View File
@@ -15,5 +15,4 @@ JDBC的目标是使Java程序员使用JDBC可以连接任何提供了JDBC驱动
总结如下:
![综述](../../public/note/JDBC/JDBC%E4%BB%8B%E7%BB%8D/img-3.png)
![综述](../../public/note/JDBC/JDBC%E4%BB%8B%E7%BB%8D/img-3.png)
@@ -1,4 +1,4 @@
---
---
layout: doc
title: 如何在Vue3的Store中使用i18n
date: 2022-06-27
@@ -6,6 +6,10 @@ tags:
- 编程
- 工作
- 学习
- vue
- JavaScript
- i18n
- BUG
head:
- - meta
- name: description
@@ -14,7 +18,7 @@ head:
- name: keywords
content: vue vue3 i18n js javascript
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:08:00
---
> 文章摘要
@@ -39,7 +43,7 @@ i18n 方法,而不是依赖 useI18n()。
几乎都最新版本了
![在这里插入图片描述](/posts/2022/06/img-1.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-1.png)
## 问题复现
@@ -60,31 +64,31 @@ const { t, d, n, locale } = useI18n()
当在创建对应的i18n时,会先将对应的内容进行创建和导出:
![在这里插入图片描述](/posts/2022/06/img-2.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-2.png)
在这个文件中创建了i18n,并且对特定的配置项进行了指定,但是导出的这个i18n中有什么?
![在这里插入图片描述](/posts/2022/06/img-3.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-3.png)
在配置的文件中已经存在了要使用的方法,也就是导出的:`t`,`d`,`n`等,要使用的方法也在这里面
![在这里插入图片描述](/posts/2022/06/img-4.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-4.png)
在这个`global`中存在了对应的全局的方法,不需要通过i18n指定的方法进行引入执行,可以直接使用,所以这个就是要手动引入的内容
## 解决
![在这里插入图片描述](/posts/2022/06/img-5.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-5.png)
使用这种方法问题得到解决,不过在尝试过程中,这种两种方式使用的i18n也是有区别的
在引入的过程中,因为方式不同,所以引入的方法其实也不是同一个
![在这里插入图片描述](/posts/2022/06/img-6.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-6.png)
不过在对应的注释中也能略微看出二者的区别
![在这里插入图片描述](/posts/2022/06/img-7.png)
![在这里插入图片描述](../../../public/posts/2022/06/img-7.png)
使用方法引入的‘t’应当也有特有的内容,这里只进行列举,不继续深入探讨。
@@ -1,10 +1,13 @@
---
---
layout: doc
title: JavaScript和Vue中实现表格(table)固定表头和首列
date: 2022-08-26
tags:
- 编程
- 学习
- Html
- JavaScript
- vue
head:
- - meta
- name: description
@@ -13,8 +16,7 @@ head:
- name: keywords
content: vue vue3 js javascript
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:09:00
---
> 文章摘要
@@ -30,7 +32,7 @@ JavaScript、Vue、React、小程序等)。文章详细展示了实现这一
实际效果展示:
![在这里插入图片描述](/posts/2022/08/img-1.gif)
![在这里插入图片描述](../../../public/posts/2022/08/img-1.gif)
## 思路概述
@@ -1,10 +1,11 @@
---
---
layout: doc
title: Vue3中的ref为何要用.value进行值的调用?
date: 2022-08-25
tags:
- 编程
- 学习
- vue
head:
- - meta
- name: description
@@ -13,8 +14,7 @@ head:
- name: keywords
content: vue vue3 js javascript
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:09:00
---
> 文章摘要
@@ -1,10 +1,11 @@
---
---
layout: doc
title: Vue3新属性 — css中使用v-bind(v-bind in css)
date: 2022-08-11
tags:
- 编程
- 学习
- vue
head:
- - meta
- name: description
@@ -13,8 +14,7 @@ head:
- name: keywords
content: vue vue3 js javascript v-bind
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:09:00
---
> 文章摘要
@@ -216,19 +216,19 @@ LESS:与 CSS 类似,使用变量和 v-bind() 绑定数据,但在 LESS 中
首先是第一种,如果使用的话会直接报错,报错内容为:
![在这里插入图片描述](/posts/2022/08/img-1.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-1.png)
因为`less`的直接报错,导致定义的变量压根就没有被编译出来,从而报错
第二种和第三种错误一样:
![在这里插入图片描述](/posts/2022/08/img-2.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-2.png)
在这种使用方式中,变量可以正确承接,但是不能完成拼接的操作,导致只有变量而没有单位,并且可以看出最终都被翻译为`var(--变量名)`来执行,所以顺便也对`var()`进行了拼接测试
![在这里插入图片描述](/posts/2022/08/img-3.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-3.png)
@@ -268,18 +268,18 @@ LESS:与 CSS 类似,使用变量和 v-bind() 绑定数据,但在 LESS 中
结果也非常让不出意外的都不行,并且在第二种方式也是直接报错的,在寻找问题的过程中,发现了更加`amazing`的事情:
![在这里插入图片描述](/posts/2022/08/img-4.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-4.png)
这个变量压根就没定义,或者说没被识别到,所以重新模仿`Vue`直接定义行内样式,并且使用拼接尝试:
![在这里插入图片描述](/posts/2022/08/img-5.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-5.png)
这种直接的拼接方式直接将所有内容都进行了拼接,再换一种思路:使用`V-bind`这个V-bind指的是数据的而不是样式:
![在这里插入图片描述](/posts/2022/08/img-6.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-6.png)
@@ -390,14 +390,14 @@ LESS:与 CSS 类似,使用变量和 v-bind() 绑定数据,但在 LESS 中
`v-bind() in css`并没有进行劫持或者其他操作,他主要完成的任务是将`v-bind()`中的内容通过自定义属性的方式进行了重新定义,在编译后代码中可以看到
![在这里插入图片描述](/posts/2022/08/img-7.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-7.png)
所有的数据直接在自定义属性中进行,并且直接对应引用,自定义属性的内容的改变影响视图的效果,从而达到数据影响视图的效果,这个在使用中`less`,`css`中完全没有问题
但是,在`scss`中,因为编译之后`名字无法进行匹配`从而造成样式的丢失
![在这里插入图片描述](/posts/2022/08/img-8.png)
![在这里插入图片描述](../../../public/posts/2022/08/img-8.png)
可以看到,使用的名字和编译的名字并不匹配,从而出错,这个使用时需要注意
@@ -1,17 +1,17 @@
---
---
layout: doc
title: 在JavaScript获取Promise的状态
date: 2022-08-09
tags:
- 编程
- 学习
- JavaScript
head:
- - meta
- name: keywords
content: js javascript
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:08:00
---
@@ -4,15 +4,14 @@ title: TypeScript 应该被放弃吗
date: 2024-08-04
tags:
- 编程
- 学习
- 思考
- TypeScript
head:
- - meta
- name: keywords
content: vue vue3 js javascript react ts typescript
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:09:34
---
> 文章摘要
@@ -38,10 +37,10 @@ TypeScript 的额外成本:第二篇文章提到,在某些场景下,TypeSc
抛出这个问题主要基于22年和23年发生的一些事件:
![image-20240627143223214](/posts/2024/08/10003/up-58c4155f83bbd826f4bb0ec1ab8d1e32ccd-1719469395020-15-1719469397190-17.png)
![image-20240627143223214](../../../public/posts/2024/08/10003/up-58c4155f83bbd826f4bb0ec1ab8d1e32ccd-1719469395020-15-1719469397190-17.png)
![image-20240627143223214](/posts/2024/08/10003/eed5a2dd0f71b8b4790a1b20c708416c-1719469475131-21.png)
![image-20240627143223214](../../../public/posts/2024/08/10003/eed5a2dd0f71b8b4790a1b20c708416c-1719469475131-21.png)
并且Svelte 不是第一个放弃 TypeScript 的前端框架。早在 2020 年,Deno 就迁移了一部分內部 TypeScript 代码到 JavaScript,以减少构建时间。
@@ -67,13 +66,13 @@ TypeScript 的额外成本:第二篇文章提到,在某些场景下,TypeSc
并且对于这篇文章,Reddit的评论区也是活力十足
![image-20240627144850640](/posts/2024/08/10003/image-20240627144850640.png)
![image-20240627144850640](../../../public/posts/2024/08/10003/image-20240627144850640.png)
并且在知乎对于这个问题的评价更加激进:
![image-20240627143223214](/posts/2024/08/10003/image-20240627143223214.png)
![image-20240627143223214](../../../public/posts/2024/08/10003/image-20240627143223214.png)
以下是文字版本:
+15 -15
View File
@@ -3,19 +3,19 @@ layout: doc
title: Vue还是React?
date: 2024-08-04
tags:
- 编程
- 学习
- 思考
- 编程
- 思考
- vue
- React
head:
- - meta
- name: description
content: Vue和React、Nextjs如何选择
- - meta
- name: keywords
content: vue vue3 js javascript react ts typescript
- - meta
- name: description
content: Vue和React、Nextjs如何选择
- - meta
- name: keywords
content: vue vue3 js javascript react ts typescript
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:09:34
---
> 文章摘要
@@ -38,17 +38,17 @@ lastUpdated: true
但和国内相悖的是,在`JetBrains`与`StackOverflow`在2023年的数据报告中,在前端方面数据,`Node`和`React`以压倒性优势领先其他语言
![2023 JetBrains开发者调查报告](/posts/2024/08/10003/image-20240626141050935-1719382253511-9.png)
![2023 JetBrains开发者调查报告](../../../public/posts/2024/08/10003/image-20240626141050935-1719382253511-9.png)
![StackOverflow 2023调查报告](/posts/2024/08/10003/image-20240626141144499.png)
![StackOverflow 2023调查报告](../../../public/posts/2024/08/10003/image-20240626141144499.png)
2023JavaScript趋势报告:
![image-20240626143412891](/posts/2024/08/10003/image-20240626143412891.png)
![image-20240626143412891](../../../public/posts/2024/08/10003/image-20240626143412891.png)
和国内不同的是,`React`在国外保持着惊人的活力
@@ -188,7 +188,7 @@ lastUpdated: true
> - 如果我们要有一个统治框架,难道我们不希望它没有主见吗?所以 React 真的很好,因为它基本上只是一个带有最小状态管理解决方案的渲染库。有许多其他东西建立在 React 之上,这使得它与其他框架相当。所以即使你考虑元框架,也有很多流行的框架。
> - 如果你了解 JavaScript,你几乎了解 React 的所有内容。他不会像Angular那样有很多新的“魔法”(这里指的是Angular引入的新的改变增加了学习成本,如管道,过滤器等)
![image-20240627133055166](/posts/2024/08/10003/image-20240627133055166-1719466257222-11.png)
![image-20240627133055166](../../../public/posts/2024/08/10003/image-20240627133055166-1719466257222-11.png)
##### 观点四:从公司架构思考问题
@@ -14,8 +14,7 @@ head:
- name: keywords
content: 文字排版 布局
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:10:00
---
> 文章摘要
<!-- DESC SEP -->
@@ -9,68 +9,67 @@ head:
- name: keywords
content: 设计 html 布局
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:09:34
---
对于大部分信息展示网站中都是通过大块的区域内容展示来展现更多信息,并且国内的对应的网站相对较老,所以UI设计以及UI风格上更加的质朴
如:
![[../../../public/posts/2024/08/10002/image-20240709144917869.png]]
<img src="/posts/2024/08/10002/image-20240709144917869.png" alt="/posts/2024/08/10002/image-20240709144917869.png" />
![image-20240709145013421](/posts/2024/08/10002/image-20240709145013421.png)
![image-20240709145013421](../../../public/posts/2024/08/10002/image-20240709145013421.png)
![image-20240709145115262](/posts/2024/08/10002/image-20240709145115262.png)
![image-20240709145115262](../../../public/posts/2024/08/10002/image-20240709145115262.png)
根据几个常见的网址论坛可以看出,对于信息的展示主要通过以下几种方式:
## **标签(板块)**
![image-20240709150825480](/posts/2024/08/10002/image-20240709150825480.png)
![image-20240709150825480](../../../public/posts/2024/08/10002/image-20240709150825480.png)
![image-20240709151217902](/posts/2024/08/10002/image-20240709151217902.png)
![image-20240709151217902](../../../public/posts/2024/08/10002/image-20240709151217902.png)
![image-20240709151251709](/posts/2024/08/10002/image-20240709151251709.png)
![image-20240709151251709](../../../public/posts/2024/08/10002/image-20240709151251709.png)
![image-20240709151345083](/posts/2024/08/10002/image-20240709151345083.png)
![image-20240709151345083](../../../public/posts/2024/08/10002/image-20240709151345083.png)
![image-20240709151437319](/posts/2024/08/10002/image-20240709151437319.png)
![image-20240709151437319](../../../public/posts/2024/08/10002/image-20240709151437319.png)
![image-20240709151552809](/posts/2024/08/10002/image-20240709151552809.png)
![image-20240709151552809](../../../public/posts/2024/08/10002/image-20240709151552809.png)
![image-20240709151640633](/posts/2024/08/10002/image-20240709151640633.png)
![image-20240709151640633](../../../public/posts/2024/08/10002/image-20240709151640633.png)
![image-20240709151839807](/posts/2024/08/10002/image-20240709151839807.png)
![image-20240709151839807](../../../public/posts/2024/08/10002/image-20240709151839807.png)
![image-20240709151858347](/posts/2024/08/10002/image-20240709151858347.png)
![image-20240709151858347](../../../public/posts/2024/08/10002/image-20240709151858347.png)
![image-20240709151925258](/posts/2024/08/10002/image-20240709151925258.png)
![image-20240709151925258](../../../public/posts/2024/08/10002/image-20240709151925258.png)
![image-20240709151949506](/posts/2024/08/10002/image-20240709151949506.png)
![image-20240709151949506](../../../public/posts/2024/08/10002/image-20240709151949506.png)
![image-20240709152145202](/posts/2024/08/10002/image-20240709152145202.png)
![image-20240709152145202](../../../public/posts/2024/08/10002/image-20240709152145202.png)
![image-20240709152228527](/posts/2024/08/10002/image-20240709152228527.png)
![image-20240709152228527](../../../public/posts/2024/08/10002/image-20240709152228527.png)
![image-20240709152344199](/posts/2024/08/10002/image-20240709152344199.png)
![image-20240709152344199](../../../public/posts/2024/08/10002/image-20240709152344199.png)
大多数论坛网站中在主页显眼位置,主要方便用户快速进入不同的模块或专题,将网站的主要内容和业务展示到用户最先注意到的范围内。
## 轮播图
![image-20240709153709220](/posts/2024/08/10002/image-20240709153709220.png)
![image-20240709153709220](../../../public/posts/2024/08/10002/image-20240709153709220.png)
![image-20240709153737574](/posts/2024/08/10002/image-20240709153737574.png)
![image-20240709153737574](../../../public/posts/2024/08/10002/image-20240709153737574.png)
![image-20240709153808702](/posts/2024/08/10002/image-20240709153808702.png)
![image-20240709153808702](../../../public/posts/2024/08/10002/image-20240709153808702.png)
![image-20240709153845136](/posts/2024/08/10002/image-20240709153845136.png)
![image-20240709153845136](../../../public/posts/2024/08/10002/image-20240709153845136.png)
![image-20240709153901153](/posts/2024/08/10002/image-20240709153901153.png)
![image-20240709153901153](../../../public/posts/2024/08/10002/image-20240709153901153.png)
![image-20240709153924475](/posts/2024/08/10002/image-20240709153924475.png)
![image-20240709153924475](../../../public/posts/2024/08/10002/image-20240709153924475.png)
相对于在通过标签直接进行展示,轮播图的使用在整体调研的网站中占比较低,并且多为较为老旧的UI,并且现在的大环境下用户只想了解希望得到的信息,找到目标信息后,点击查看,得到想要的信息,离开网站。
@@ -78,25 +77,25 @@ lastUpdated: true
## 排行(热门)
![image-20240709171101927](/posts/2024/08/10002/image-20240709171101927.png)
![image-20240709171101927](../../../public/posts/2024/08/10002/image-20240709171101927.png)
![image-20240709171148293](/posts/2024/08/10002/image-20240709171148293.png)
![image-20240709171148293](../../../public/posts/2024/08/10002/image-20240709171148293.png)
![image-20240709171249182](/posts/2024/08/10002/image-20240709171249182.png)
![image-20240709171249182](../../../public/posts/2024/08/10002/image-20240709171249182.png)
![image-20240709171310667](/posts/2024/08/10002/image-20240709171310667.png)
![image-20240709171310667](../../../public/posts/2024/08/10002/image-20240709171310667.png)
![image-20240709171406819](/posts/2024/08/10002/image-20240709171406819.png)
![image-20240709171406819](../../../public/posts/2024/08/10002/image-20240709171406819.png)
![image-20240709171423701](/posts/2024/08/10002/image-20240709171423701.png)
![image-20240709171423701](../../../public/posts/2024/08/10002/image-20240709171423701.png)
![image-20240709171439358](/posts/2024/08/10002/image-20240709171439358.png)
![image-20240709171439358](../../../public/posts/2024/08/10002/image-20240709171439358.png)
![image-20240709171502006](/posts/2024/08/10002/image-20240709171502006.png)
![image-20240709171502006](../../../public/posts/2024/08/10002/image-20240709171502006.png)
![image-20240709171529013](/posts/2024/08/10002/image-20240709171529013.png)
![image-20240709171529013](../../../public/posts/2024/08/10002/image-20240709171529013.png)
![image-20240709171610508](/posts/2024/08/10002/image-20240709171610508.png)
![image-20240709171610508](../../../public/posts/2024/08/10002/image-20240709171610508.png)
最新、最近回复、热门、精选、排行
@@ -106,11 +105,11 @@ lastUpdated: true
## 实时新闻(信息)
![image-20240709172705194](/posts/2024/08/10002/image-20240709172705194.png)
![image-20240709172705194](../../../public/posts/2024/08/10002/image-20240709172705194.png)
![image-20240709172741964](/posts/2024/08/10002/image-20240709172741964.png)
![image-20240709172741964](../../../public/posts/2024/08/10002/image-20240709172741964.png)
![image-20240709182327709](/posts/2024/08/10002/image-20240709182327709.png)
![image-20240709182327709](../../../public/posts/2024/08/10002/image-20240709182327709.png)
在大多数网站中该内容反而并不常见,可能对于论坛平台,更多的是需要有效的信息,而不是新的信息
@@ -122,49 +121,49 @@ lastUpdated: true
### 列表形式
![image-20240709182940316](/posts/2024/08/10002/image-20240709182940316.png)
![image-20240709182940316](../../../public/posts/2024/08/10002/image-20240709182940316.png)
![image-20240709183028747](/posts/2024/08/10002/image-20240709183028747.png)
![image-20240709183028747](../../../public/posts/2024/08/10002/image-20240709183028747.png)
![image-20240709183038648](/posts/2024/08/10002/image-20240709183038648.png)
![image-20240709183038648](../../../public/posts/2024/08/10002/image-20240709183038648.png)
![image-20240709183047905](/posts/2024/08/10002/image-20240709183047905.png)
![image-20240709183047905](../../../public/posts/2024/08/10002/image-20240709183047905.png)
![image-20240709183111554](/posts/2024/08/10002/image-20240709183111554.png)
![image-20240709183111554](../../../public/posts/2024/08/10002/image-20240709183111554.png)
![image-20240709183434347](/posts/2024/08/10002/image-20240709183434347.png)
![image-20240709183434347](../../../public/posts/2024/08/10002/image-20240709183434347.png)
![image-20240709183450074](/posts/2024/08/10002/image-20240709183450074.png)
![image-20240709183450074](../../../public/posts/2024/08/10002/image-20240709183450074.png)
### 列表形式(展示更多信息)
![image-20240709183221209](/posts/2024/08/10002/image-20240709183221209.png)
![image-20240709183221209](../../../public/posts/2024/08/10002/image-20240709183221209.png)
--------
![image-20240709183238714](/posts/2024/08/10002/image-20240709183238714.png)
![image-20240709183238714](../../../public/posts/2024/08/10002/image-20240709183238714.png)
![image-20240709183253255](/posts/2024/08/10002/image-20240709183253255.png)
![image-20240709183253255](../../../public/posts/2024/08/10002/image-20240709183253255.png)
![image-20240709183308255](/posts/2024/08/10002/image-20240709183308255.png)
![image-20240709183308255](../../../public/posts/2024/08/10002/image-20240709183308255.png)
![image-20240709183338467](/posts/2024/08/10002/image-20240709183338467.png)
![image-20240709183338467](../../../public/posts/2024/08/10002/image-20240709183338467.png)
![image-20240709183348910](/posts/2024/08/10002/image-20240709183348910.png)
![image-20240709183348910](../../../public/posts/2024/08/10002/image-20240709183348910.png)
### 问答形式
![image-20240709183409479](/posts/2024/08/10002/image-20240709183409479.png)
![image-20240709183409479](../../../public/posts/2024/08/10002/image-20240709183409479.png)
### 卡片形式
![image-20240709183321435](/posts/2024/08/10002/image-20240709183321435.png)
![image-20240709183321435](../../../public/posts/2024/08/10002/image-20240709183321435.png)
### 预览形式
![image-20240709183144841](/posts/2024/08/10002/image-20240709183144841.png)
![image-20240709183144841](../../../public/posts/2024/08/10002/image-20240709183144841.png)
![image-20240709183507358](/posts/2024/08/10002/image-20240709183507358.png)
![image-20240709183507358](../../../public/posts/2024/08/10002/image-20240709183507358.png)
综合已经搜索到的信息来看,信息的展示通过内容的不同,也有不同的展示方式,大部分使用的是列表形式,并且尽量展示少的正文,而是主要展示标题(可能这种方式可以增加点击率吧)
+3 -4
View File
@@ -4,14 +4,13 @@ title: 登录功能的思考
date: 2024-08-05
tags:
- 编程
- 学习
- 想法
head:
- - meta
- name: keywords
content: 登录 架构
editLink: false
lastUpdated: true
lastUpdated: 2025-01-20T10:10:00
---
> 文章摘要
@@ -115,7 +114,7 @@ lastUpdated: true
8. 然后服务器将加密后的密文发送给客户端。
9. 客户端收到服务器发送来的密文,用客户端密钥对其进行对称解密,得到服务器发送的数据。这样HTTPS中的第二个HTTP请求结束,整个HTTPS传输完成。
![image-20240709145013421](/posts/2024/08/img-1.webp)
![image-20240709145013421](../../../public/posts/2024/08/img-1.webp)
它通过以下方式保证数据的安全性:
@@ -0,0 +1,146 @@
---
layout: doc
title: VitePress 笔记使用
date: 2025-01-20
tags:
- 学习
- VitePress
editLink: false
lastUpdated: 2025-01-20T10:09:34
---
## 内部链接
内部链接将转换为单页导航的路由链接。此外,子目录中包含的每个 `index.md` 都会自动转换为 `index.html`,并带有相应的 URL `/`。
[VitePress 链接跳转](./VitePress%20链接跳转.md) <!-- 可以添加 .md -->
```html
[VitePress 链接跳转](./VitePress 链接跳转.md)
```
## YAML front matter
任何包含 [YAML](https://yaml.org/) front matter 块的文件都将是 由 Jekyll 作为特殊文件处理。前言必须是第一件事 ,并且必须采用在三短划线 线。下面是一个基本示例:
``` markdown
---
layout: post
title: Blogging Like a Hacker
---
```
### frontmatter 配置
示例:
``` markdown
---
title: Docs with VitePress
editLink: true
---
```
可以通过 Vue 表达式中的 `$frontmatter` 全局变量访问 frontmatter 数据:
``` Vue
{{ $frontmatter.title }}
```
> 该内容由 Vue 渲染: **{{ $frontmatter.title }}**
## head
- 类型:`HeadConfig[]`
指定要为当前页面注入的额外 head 标签。将附加在站点级配置注入的头部标签之后。
yaml
``` markdown
---
head:
- - meta
- name: description
content: hello
- - meta
- name: keywords
content: super duper SEO
---
```
## layout
- 类型:`doc | home | page`
- 默认值:`doc`
指定页面的布局。
- `doc`——它将默认文档样式应用于 markdown 内容。
- `home`——“主页”的特殊布局。可以添加额外的选项,例如 `hero` 和 `features`,以快速创建漂亮的落地页。
- `page`——表现类似于 `doc`,但它不对内容应用任何样式。当想创建一个完全自定义的页面时很有用。
``` yaml
---
layout: doc
---
```
## navbar
- 类型:`boolean`
- 默认值:`true`
是否显示导航栏。
``` yaml
---
navbar: false
---
```
## sidebar
- 类型:`boolean`
- 默认值:`true`
是否显示 侧边栏
```
---
sidebar: false
---
```
## aside
- 类型:`boolean | 'left'`
- 默认值:`true`
定义侧边栏组件在 `doc` 布局中的位置。
将此值设置为 `false` 可禁用侧边栏容器。
将此值设置为 `true` 会将侧边栏渲染到右侧。
将此值设置为 `left` 会将侧边栏渲染到左侧。
```yaml
---
aside: false
---
```
## lastUpdated
- 类型:`boolean | Date`
- 默认值:`true`
是否在当前页面的页脚中显示最后更新时间的文本。如果指定了日期时间,则会显示该日期时间而不是上次 git 修改的时间戳。
``` yaml
---
lastUpdated: false
---
```
> [!TIP]
> 你必须提交 markdown 文件才能看到最后更新时间。
@@ -0,0 +1,4 @@
# 完成跳转 ,可以点击返回
[返回](./VitePress%20笔记使用.md)